/*  ==========================================================
    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
 *
 */

/*
 * NOTICE: This wrapper allows for the use of a true responsive sidebar.
 * To enable it just add .sidebar to the target wrapper
 */
.region {
  padding-block-start: var(--padding-block-start, var(--space-xl));
  padding-inline-end: var(--padding-inline-end, var(--space-s-5xl));
  padding-block-end: var(--padding-block-end, var(--space-xl));
  padding-inline-start: var(--padding-inline-start, var(--space-s-5xl));
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l-xl);
}

/* Main content */
.sidebar > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 60%;
}

/* Sidebar content */
.sidebar > :last-child {
  flex-basis: var(--card-width);
  flex-grow: 1;
}

.d-grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fit),
    minmax(min(var(--grid-min-item-size, 16rem), 100%), 1fr)
  );
  gap: var(--gap, var(--grid-gutter));
  justify-items: var(--grid-justify-items, stretch);
  align-items: var(--grid-align-items, stretch);
}

.subgrid {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    justify-items: var(--subgrid-justify-items, center);
    align-items: var(--subgrid-align-items, stretch);
    gap: var(--subgrid-gap, 1em);
}

.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, 1em);
}

.page-empty {
  min-block-size: 100dvb;
}