/*
 * Responsive overrides for components whose JavaScript injects late !important
 * layout rules. Keep this file small and specificity-focused.
 */

/* Wide-page framing ------------------------------------------------------- */
/* At 1080p the outer shell gutter is enough. Only add a modest inner inset
   once the viewport is genuinely ultrawide, otherwise Tooling, Thoughts and
   About read like narrow centered columns floating inside the display. */
html body.uniform-interior{
  --interior-gutter:clamp(22px,1.8vw,36px)!important;
  --interior-content-inset:clamp(0px,calc((100vw - 1920px)*.08),96px)!important;
}

/* Project metadata labels ------------------------------------------------ */
html body.professional-page .project-kicker,
html body.passion-page .project-kicker{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:6px!important;
  margin-bottom:13px!important;
}
html body.professional-page .project-kicker>span,
html body.passion-page .project-kicker>span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:0!important;
  padding:4px 7px!important;
  border:1px solid rgba(255,255,255,.105)!important;
  border-radius:2px!important;
  background:rgba(7,9,12,.24)!important;
  color:#98a3ab!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  line-height:1!important;
  white-space:nowrap!important;
}
html body.professional-page .project-kicker>span:first-child,
html body.passion-page .project-kicker>span:first-child{
  border-color:rgba(145,243,156,.14)!important;
  color:#a9bbb0!important;
}
html body.professional-page .project-kicker>span:nth-child(2),
html body.passion-page .project-kicker>span:nth-child(2){
  color:#8f9aa2!important;
}
html body.professional-page .project-kicker>span:last-child,
html body.passion-page .project-kicker>span:last-child{
  border-color:rgba(255,255,255,.085)!important;
  color:#7d8991!important;
  background:rgba(7,9,12,.18)!important;
}
html body.professional-page .project-card[data-year="Current"] .project-kicker>span:last-child,
html body.passion-page .project-card[data-year="Current"] .project-kicker>span:last-child{
  border-color:rgba(145,243,156,.28)!important;
  color:#aef3b7!important;
  background:rgba(145,243,156,.035)!important;
}
@media(max-width:720px){
  html body.professional-page .project-kicker,
  html body.passion-page .project-kicker{gap:5px!important;margin-bottom:10px!important}
  html body.professional-page .project-kicker>span,
  html body.passion-page .project-kicker>span{padding:3px 6px!important}
}

/* Professional/Concept pages previously reserved the timeline width on both
   sides even though the timeline only occupies the right edge. Preserve room
   for it there, while allowing the authored project rail to use the left side. */
@media (min-width:1541px){
  html body.professional-page{
    --timeline-space:clamp(150px,8.5vw,210px)!important;
  }
  html body.professional-page main{
    padding-left:clamp(28px,3.2vw,72px)!important;
    padding-right:var(--timeline-space)!important;
  }
}

/* Professional runtime --------------------------------------------------- */
/* Once the shared controller selects the anchored desktop composition, keep
   the two sides on the same coordinate system. The header/copy rail owns the
   left 48.5%, the media owns the right 46.5%, and the remaining space becomes
   a small deliberate gutter instead of a dead middle column. */
html body.professional-page.project-overlay-layout .projects .project-card.is-focused .project-header{
  width:48.5%!important;
  max-width:48.5%!important;
  padding-left:clamp(28px,2.4vw,50px)!important;
  padding-right:clamp(12px,1.1vw,22px)!important;
}
html body.professional-page.project-overlay-layout .projects .project-card.is-focused .project-content{
  width:48.5%!important;
  max-width:48.5%!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  align-items:start!important;
  padding-left:clamp(28px,2.4vw,50px)!important;
  padding-right:clamp(12px,1.1vw,22px)!important;
  padding-bottom:clamp(28px,3.2vh,40px)!important;
}
html body.professional-page.project-overlay-layout .projects .project-card.is-focused .project-copy{
  width:100%!important;
  max-width:none!important;
  grid-column:1!important;
  align-self:start!important;
}
html body.professional-page.project-overlay-layout .projects .project-card.is-focused > .media-carousel{
  display:block!important;
  position:absolute!important;
  left:auto!important;
  right:1.8%!important;
  top:var(--focus-header-height)!important;
  bottom:auto!important;
  width:min(46.5%,116dvh,1020px)!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  justify-self:auto!important;
  align-self:auto!important;
  transform:none!important;
}
html body.professional-page.project-overlay-layout .projects .project-card.is-focused > .media-carousel .media-stage{
  width:100%!important;
  max-width:100%!important;
  aspect-ratio:16/9!important;
  transform:none!important;
}
html body.professional-page.project-overlay-layout .projects .project-card.is-focused > .media-carousel .media-toolbar{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  min-height:34px!important;
  margin-top:8px!important;
}

/* These are fallback stacked layouts only. When professional.js has measured
   enough rendered width for the anchored composition it adds
   .project-overlay-layout; do not override those anchors based on viewport
   height, browser zoom, OS scaling, or a competing width breakpoint. */
@container professional-projects (max-width:1180px){
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused{
    min-height:auto!important;
    height:auto!important;
    display:block!important;
  }
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused .project-content{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    transform:none!important;
  }
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused > .media-carousel,
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused .project-content > .media-carousel{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:960px!important;
    min-width:0!important;
    margin:0!important;
    justify-self:stretch!important;
    transform:none!important;
  }
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused > .media-carousel .media-toolbar,
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused .project-content > .media-carousel .media-toolbar{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    margin-top:7px!important;
  }
}

@media (min-width:1321px) and (max-height:820px){
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused{
    min-height:auto!important;
    height:auto!important;
    display:block!important;
  }
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused .project-content{
    position:relative!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused > .media-carousel,
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused .project-content > .media-carousel{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    transform:none!important;
  }
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused > .media-carousel .media-toolbar,
  html body.professional-page:not(.project-overlay-layout) .projects .project-card.is-focused .project-content > .media-carousel .media-toolbar{
    position:relative!important;
    inset:auto!important;
    margin-top:7px!important;
  }
}

/* Passion cards have a viewport-based minimum height in the legacy stylesheet.
   Clear it when the projects rail itself becomes narrow. */
@container passion-projects (max-width:900px){
  html body.passion-page .projects .project-card{min-height:auto!important}
}

/* The mini soundtrack UI is authored by JS with fixed minimum widths. These
   rules only engage once the viewport is narrower than the normal component. */
@media (max-width:360px){
  html body .site-soundtrack{
    left:max(7px,env(safe-area-inset-left))!important;
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    width:auto!important;
  }
  html body .site-soundtrack .site-soundtrack-core{
    grid-template-columns:30px minmax(0,1fr) 72px 28px!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    padding:4px!important;
  }
  html body .site-soundtrack .soundtrack-art{width:30px!important;height:30px!important}
  html body .site-soundtrack .soundtrack-screen{height:30px!important;padding:3px 6px!important}
  html body .site-soundtrack .soundtrack-now strong{font-size:.53rem!important}
  html body .site-soundtrack .soundtrack-now span{font-size:.35rem!important}
  html body .site-soundtrack .soundtrack-controls{
    width:72px!important;
    grid-template-columns:repeat(3,21px)!important;
    grid-template-rows:21px 5px!important;
    gap:2px 3px!important;
  }
  html body .site-soundtrack button,
  html body .site-soundtrack a{width:21px!important;height:21px!important;font-size:.58rem!important}
  html body .site-soundtrack .site-soundtrack-volume{width:66px!important}
  html body .site-soundtrack .soundtrack-toggle{width:28px!important;height:28px!important}
}

@media (max-width:300px){
  html body .site-soundtrack .site-soundtrack-core{
    grid-template-columns:minmax(0,1fr) 70px 28px!important;
  }
  html body .site-soundtrack .soundtrack-art{display:none!important}
}