/* =============================================================
   responsive.css — mobile-first breakpoint overrides
   Base (style.css) targets small screens already; this file
   only adds min/max-width overrides for tablet and desktop.
   ============================================================= */

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  /* the sidebar stops floating/overlaying at this width (becomes a
     static top bar below), so the text-clearance padding on .wrap/
     .topbar/.footer is no longer needed — reset it back to 0 here,
     which resolves to plain symmetric var(--sp-8) padding on all three. */
  :root{ --content-clear: 0px; }
  /* mobile drops the floating-glass-panel treatment entirely — flush
     top bar instead, no radius/shadow/blur, since "floating capsule"
     doesn't translate to a full-width bar anyway */
  .sidebar, .sidebar--collapsed{
    position: static; width:100%; height:auto; flex-direction:row; align-items:center;
    padding: var(--sp-4) var(--sp-5); top:auto; left:auto; bottom:auto;
    border-radius:0; border:none; border-bottom:1px solid var(--line);
    background: var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
  }
  body.page-dark .sidebar, body.page-dark .sidebar--collapsed{ background: var(--bg); border-bottom-color: var(--line); }
  .sidebar__nav, .sidebar__visual, .sidebar__foot, .sidebar__toggle{ display:none; }
  /* .sidebar--collapsed ~ .mainarea repeated here (not just relying on
     the :root reset above) because that selector's specificity (two
     classes) beats a bare :root rule regardless of source order — this
     is the one place the desktop collapse/expand --content-clear logic
     needs to be explicitly overridden, not just shadowed, since the
     sidebar becomes a static top bar at this width and there's no rail
     left to clear space for either way. */
  .mainarea, .sidebar--collapsed ~ .mainarea{ margin-left:0; --content-clear: 0px; }
  .about-section__grid{ grid-template-columns: 1fr; }
  .portrait-panel{ aspect-ratio: 16/9; }
  .collage{ grid-template-columns: 1fr; }
  .whatido__grid{ grid-template-columns: 1fr 1fr; }
  .portfolio__grid{ grid-template-columns: 1fr; }
  .process__grid{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .process__cards{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .recognition__grid{ grid-template-columns: 1fr 1fr; }
  .cert-carousel__page{ grid-template-columns: 1fr 1fr; }
  .article-card{ grid-template-columns: 1fr; }
  .feedback__grid{ grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .feedback__grid .feedback__card:nth-of-type(1){ grid-column: 1; grid-row: 1; }
  .feedback__grid .feedback__card:nth-of-type(2){ grid-column: 2; grid-row: 1; }
  .feedback__grid .feedback__card:nth-of-type(3){ grid-column: 1; grid-row: 2; }
  .feedback__grid .feedback__card:nth-of-type(4){ grid-column: 2; grid-row: 2; }
  .feedback__stat--white{ grid-column: 1; grid-row: 3; }
  .feedback__stat--accent{ grid-column: 2; grid-row: 3; }
}
@media (max-width: 640px){
  .wrap{ padding: 0 var(--sp-5); }
  .topbar{ padding: var(--sp-5) var(--sp-5) 0; flex-direction:column; align-items:flex-start; gap: var(--sp-2); }
  .whatido__grid{ grid-template-columns: 1fr; }
  .recognition__grid{ grid-template-columns: 1fr; }
  .cert-carousel__page{ grid-template-columns: 1fr; }
  .hero__cta-row{ flex-direction:column; gap: var(--sp-4); }
  .feedback__grid{ grid-template-columns: 1fr; }
  .feedback__grid .feedback__card, .feedback__stat--white, .feedback__stat--accent{ grid-column: 1; grid-row: auto; }
}

/* ---------- Case study pages (project-*.html) ---------- */
@media (max-width: 980px){
  .case-hero__meta-row{ gap: var(--sp-6); }
  .case__stats{ gap: var(--sp-6); }
}
@media (max-width: 640px){
  .case-hero{ padding: 130px 0 var(--sp-6); }
  .case-hero__top{ flex-direction: column; }
  .case-hero__meta-row{ flex-direction: column; gap: var(--sp-5); }
  .case-nextprev{ grid-template-columns: 1fr; }
  .case-nextprev a:first-child{ border-right: none; border-bottom: 1px solid var(--line); }
  .case-nextprev a:last-child{ text-align: left; }
  .demo__cards{ grid-template-columns: 1fr; }
  .phone-frame{ width: 100%; max-width: 270px; }
  .case__stats{ flex-direction: column; gap: var(--sp-5); }
}

/* ---------- STAR case-study template (case-study.css) ---------- */
@media (max-width: 980px){
  .case-hero-image{ padding: 0 var(--sp-5); }
  .case-study-media--full{ padding: 0 var(--sp-5); }
  .case-study-media--gallery{ padding: 0 var(--sp-5); }
  .case-study-grid--three{ grid-template-columns: 1fr 1fr; }
  .impact-grid{ grid-template-columns: 1fr; }
  .impact-grid--three{ grid-template-columns: 1fr 1fr; }
  .learnings__list{ grid-template-columns: 1fr 1fr; }
  .star-summary__grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
}
@media (max-width: 640px){
  .chapter{ padding: var(--sp-9) 0; }
  .case-hero__responsibilities dd{ flex-direction: column; gap: var(--sp-2); }
  .case-hero__responsibilities dd span::after{ display: none; }
  .case-study-grid--two{ grid-template-columns: 1fr; }
  .case-study-grid--three{ grid-template-columns: 1fr; }
  .impact-grid--three{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: 1fr; }
  .media--capped-crop{ height: 380px; }
  .simple-table{ font-size: 13px; }
  .simple-table th, .simple-table td{ padding-right: var(--sp-3); }
  .case-study-media-text{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .case-study-media-text--reverse .media{ order: 0; }
  .decision{ padding: var(--sp-6) var(--sp-5); }
  .decision__row{ grid-template-columns: 1fr; gap: var(--sp-2); }
  .states-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .learnings__list{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .star-summary__grid{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .case-nextprev--single a{ text-align: left; }
}