/* Default layout CSS — sidebar preset.
   Uses CSS cascade layers for predictable override precedence. */

@layer portfolio-layout {
  html[data-layout-theme="default"] .portfolio-theme-layout {
    background: #1c1c1c;
  }

  html[data-layout-theme="default"] .portfolio-theme-layout > .portfolio-layout__panel {
    display: grid;
    grid-template-rows: 3rem minmax(0, 1fr);
    min-height: 100dvh;
    min-width: 0;
  }

  html[data-layout-theme="default"] .portfolio-theme-layout > .portfolio-layout__panel--sidebar-panel {
    align-self: start;
    background: linear-gradient(145deg, rgba(67, 71, 82, 1) 10%, rgba(28, 28, 28, 1) 100%);
    grid-template-areas:
      "sidebar_header"
      "sidebar_content";
    height: 100dvh;
    min-height: 100dvh;
    position: sticky;
    top: 0;
  }

  html[data-layout-theme="default"] .portfolio-theme-layout > .portfolio-layout__panel--main-panel {
    background: #1c1c1c;
    grid-template-areas:
      "main_header"
      "main_content";
  }

  html[data-layout-theme="default"] .portfolio-shell__region--sidebar_header {
    padding: clamp(0.8rem, 1vw, 1.2rem) clamp(0.8rem, 1vw, 1.2rem) 0;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  html[data-layout-theme="default"] .portfolio-shell__region--sidebar_content {
    height: calc(100vh - 3rem);
    min-height: calc(100vh - 3rem);
    overflow-y: hidden;
    overscroll-behavior: contain;
    padding: clamp(0.8rem, 1vw, 1.2rem);
    position: sticky;
    top: 3rem;
  }

  html[data-layout-theme="default"] .portfolio-shell__region--main_header {
    padding: 0 clamp(2.2rem, 1vw, 2.5rem);
    display: flex;
    align-items: end;
  }

  html[data-layout-theme="default"] .portfolio-shell__region--main_content {
    min-width: 0;
    padding: clamp(0.8rem, 1vw, 1.2rem);
  }
}

@layer portfolio-responsive {
  @media (min-width: 1021px) and (max-width: 1450px) {
    html[data-layout-theme="default"] .portfolio-theme-layout {
      --portfolio-layout-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
  }

  @media (max-width: 1020px) {
    html[data-layout-theme="default"] .portfolio-theme-layout {
      --portfolio-layout-areas:
        "main_panel";
      --portfolio-layout-columns: minmax(0, 1fr);
      --portfolio-layout-rows: minmax(0, 1fr);
    }

    html[data-layout-theme="default"] .portfolio-theme-layout > .portfolio-layout__panel--sidebar-panel {
      display: none;
    }

    html[data-layout-theme="default"] .portfolio-theme-layout > .portfolio-layout__panel--main-panel {
      grid-template-rows: auto minmax(0, 1fr);
      min-height: 100dvh;
    }

    html[data-layout-theme="default"] .portfolio-shell__region--main_header,
    html[data-layout-theme="default"] .portfolio-shell__region--main_content {
      min-height: auto;
      position: static;
    }

    html[data-layout-theme="default"] .portfolio-shell__region--main_header {
      padding-bottom: clamp(1rem, 4vw, 2rem);
      padding-top: clamp(1rem, 4vw, 2rem);
    }
  }
}