/* curby-style-assets bundle: layout fingerprint=8ceabdc08184b560585cdbf12392a01a87631e8e076fbe9d5391990072c00152 */
/* @source project--aydin/ui-styles/30-layout/base.css */
/*
 * Canonical container-query breakpoints (rem):
 *   sm = 36rem  - first page-grid step (single -> two columns)
 *   md = 52  - second page-grid step (two -> three columns)
 *   lg = 64rem  - layout-swap threshold (drawer/topbar arrangement)
 * Used as literals because `var()` in @container dimensional conditions is
 * not Baseline (no Firefox/Safari support). Keep the values consistent
 * across layout, blocks, snippets, and components.
 */
@layer layout {
  [data-layout-type] {
    container-type: inline-size;
    container-name: layout;
  }

  [data-layout="boundary"] {
    --_drawer-track-width: var(--raw-layout-shell-drawer-width);
    container-type: inline-size;
    container-name: boundary;

    --_inset-block: var(--semantic-space-shell-inset-compact);
    --_inset-inline: var(--semantic-space-shell-inset-compact);

    @container layout (width >= 64rem) {
      --_inset-block: var(--semantic-space-shell-inset);
      --_inset-inline: var(--semantic-space-shell-inset);
    }

    display: grid;
    min-height: var(--raw-layout-shell-min-height);
    max-width: var(--raw-layout-shell-max-width);
    margin-inline: auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "topbar"
      "page"
      "footer";
  }

  [data-layout="topbar"] {
    grid-area: topbar;
    min-inline-size: 0;
    padding: var(--raw-space-inset);

    drawer-toggle {
      display: none;

      @container layout (width < 64rem) {
        display: inline-flex;
      }
    }
  }

  [data-layout="drawer"] {
    grid-area: drawer;
    min-inline-size: 0;
    padding: var(--raw-space-inset);

    @container layout (width < 64rem) {
      position: fixed;
      inset: 0 auto 0 0;
      width: var(--raw-layout-shell-drawer-width);
      height: var(--raw-layout-shell-min-height);
      z-index: var(--raw-z-index-drawer);
      transition:
        transform 0.3s ease-in-out,
        visibility 0s linear 0.3s;

      body:has([data-drawer-open="true"]) & {
        transform: translateX(0);
      }
      body:not(:has([data-drawer-open="true"])) & {
        transform: translateX(-100%);
      }
    }
  }

  [data-layout="page"] {
    grid-area: page;
    min-inline-size: 0;
    container-name: page;
    container-type: inline-size;
    display: grid;
    grid-template-columns:
      var(--semantic-space-shell-inset-relaxed) repeat(
        var(--raw-layout-page-grid-columns),
        1fr
      )
      var(--semantic-space-shell-inset-relaxed);
    align-content: start;
  }

  [data-layout="footer"] {
    grid-area: footer;
    min-inline-size: 0;
  }
}

/* @source project--aydin/ui-styles/30-layout/layout-1.css */
@layer layout {
  [data-layout-type="layout-1"] [data-layout="boundary"] {
    @container layout (width >= 64rem) {
      max-width: var(--raw-layout-shell-max-width-wide);
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "topbar drawer"
        "page page"
        "footer footer";
    }
  }
}

/* @source project--aydin/ui-styles/30-layout/layout-2.css */
@layer layout {
  [data-layout-type="layout-2"] {
    [data-layout="boundary"] {
      @container layout (width >= 64rem) {
        grid-template-columns: var(--_drawer-track-width) 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
          "topbar topbar"
          "drawer page"
          "footer footer";
      }
    }
  }
}

/* @source project--aydin/ui-styles/30-layout/layout-3.css */
@layer layout {
  [data-layout-type="layout-3"] {
    [data-layout="boundary"] {
      @container layout (width >= 64rem) {
        grid-template-columns: var(--_drawer-track-width) 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
          "drawer topbar"
          "drawer page"
          "drawer footer";
      }
    }
  }
}

/* @source project--aydin/ui-styles/30-layout/layout-4.css */
@layer layout {
  [data-layout-type="layout-4"] {
    [data-layout="boundary"] {
      @container layout (width >= 64rem) {
        grid-template-columns: var(--_drawer-track-width) 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
          "topbar page"
          "drawer page"
          "drawer footer";
      }
    }
  }
}