/* Portfolio Theme Layout: default */

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);
}

@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);
  }
}