/*  ==========================================================
    COMPOSITION:
    ========================================================== */

/**
 * This is the "skeleton" and should not used to style what is going to be placed inside each component
 * 
 * # This layer is responsible for:
 *  - Providing high-level flexible layouts
 *  - Determining how elements interact with each other
 *  - Creating consistent flow and rhythm
 *
 * # It should NOT:
 *  - Provide visual treatments such as colors or font styles
 *  - Provide decorative styles such as shadows and patterns
 *  - Force a browser to generate a pixel-perfect layout instead of a flexible, progressive layout
 *
 */

.region {
  padding-block-start: var(--padding-block-start, var(--space-xl-4xl));
  padding-inline-end: var(--padding-inline-end, var(--space-s-5xl));
  padding-block-end: var(--padding-block-end, var(--space-xl-4xl));
  padding-inline-start: var(--padding-inline-start, var(--space-s-5xl));
}

body .region:first-child {
  padding-block-start: var(--padding-block-start, var(--space-3xl-4xl));
}

/*
 ? NOTICE: This wrapper allows for the use of a true responsive sidebar.
 ? To enable it just add .has-sidebar to the target wrapper
 */
.has-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-l-xl));
}

/* Sidebar content */
.has-sidebar > :first-child {
  flex-basis: var(--sidebar-width, 16rem);
  flex-grow: 1;
}

/* Main content */
.has-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--content-width, 60%);
}

.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fit),
    minmax(min(var(--grid-min-item-size, 32ch), 100%), 1fr)
  );
  grid-auto-rows: var(--grid-row-height, unset);
  gap: var(--gap, var(--grid-gutter));
  justify-items: var(--grid-justify-items, stretch);
  align-items: var(--grid-align-items, stretch);
  align-content: var(--grid-align-content, normal);
  container: grid-auto-fit / inline-size;
}

.subgrid {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--rows-num, 2);
  justify-items: var(--subgrid-justify-items, start);
  align-items: var(--subgrid-align-items, start);
  gap: var(--subgrid-gap, 0.5em);
}

.subgrid:has(> :nth-child(3):last-child),
.subgrid[data-subgrid-rows="3"] {
  --rows-num: 3;
}
.subgrid:has(> :nth-child(4):last-child),
.subgrid[data-subgrid-rows="4"] {
  --rows-num: 4;
}
.subgrid:has(> :nth-child(5):last-child),
.subgrid[data-subgrid-rows="5"] {
  --rows-num: 5;
}

.d-flex {
  display: flex;
  flex-direction: var(--flex-direction, row);
  flex-wrap: var(--flex-wrap, wrap);
  justify-content: var(--flex-justify-content, flex-start);
  align-items: var(--flex-align-items, flex-start);
  gap: var(--flex-gap, var(--grid-gutter));
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1.25em);
}