/* Responsive guard · 2026-09-23
   Why: the site is built from stacked stylesheets (style.css → category/insight/home refinements →
   mobile.css) that switch layouts at different widths (600 / 700 / 760 / 800 / 1080 / 1100).
   Between two of those numbers one layer is already "mobile" while the other is still "desktop",
   and the page breaks (e.g. article TOC hidden at ≤760 but the 2-column grid kept until 700).
   This file is loaded last on every page and pins one set of breakpoints:
     phone ≤ 760 (same as the hamburger header) · tablet 761–1100 · desktop > 1100 */

/* 1 · Article pages: one column whenever the TOC column is not shown (≤760). */
@media (max-width:760px){
  .article-detail-page .article-grid{grid-template-columns:minmax(0,1fr)!important;gap:32px}
  .article-detail-page .article-toc-v2{display:grid!important;position:static!important}
  .article-detail-page .article-side{display:none!important}
}

/* 2 · Home portfolio: cards had no height ≤800 (aspect-ratio reset to auto + fixed row tracks). */
@media (max-width:800px){
  .portfolio.portfolio-v2,#portfolio{height:auto!important;min-height:0!important}
  .portfolio .home-work-grid,.home-work-grid-v2{height:auto!important;grid-template-rows:none!important;grid-auto-rows:auto}
  .portfolio .home-work,.home-work-v2{aspect-ratio:4/3!important;min-height:0}
}
@media (min-width:561px) and (max-width:800px){.home-work-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){.home-work-grid-v2{grid-template-columns:1fr!important}}

/* 3 · Free gift: three squeezed columns on tablets → one card per row, art beside copy. */
@media (min-width:601px) and (max-width:900px){
  .gift-grid{grid-template-columns:1fr!important;gap:16px!important}
  .gift-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .gift-card .gift-art{height:auto!important;min-height:260px;border-bottom:0!important;border-right:1px solid #ddd}
  .gift-secret .gift-art{border-right-color:#333}
  .gift-card .gift-copy{display:flex;flex-direction:column;justify-content:center;padding:28px!important}
}

/* 4 · Insight list: two columns on small tablets instead of one oversized 3:4 card. */
@media (min-width:561px) and (max-width:800px){
  .insight-index .idea-grid,#ideaGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 16px!important}
}

/* 5 · Interviews: stack image over copy on phones (≤760), matching the header switch. */
@media (max-width:760px){
  .interview-list-row{grid-template-columns:1fr!important}
  .interview-list-row .interview-row-image{grid-row:1}
}

/* 6 · Service card pagination: the Page card has a dark surface, so its dots must invert. */
.service-page .pagination .dot,.is-dark-surface .pagination .dot{background:#5a5a58}
.service-page .pagination .dot.selected,.is-dark-surface .pagination .dot.selected{background:#f1f0eb}

/* 7 · Mobile menu: the list scrolls under a solid header instead of sliding behind the logo
      (Chrome's address bar changes the viewport height, which made the list scrollable). */
@media (max-width:760px){
  .site-header nav{top:64px!important;height:calc(100dvh - 64px)!important;max-height:calc(100dvh - 64px)!important;padding-top:28px!important;overflow-y:auto}
  .site-header.menu-open{background:#101010}
}
@media (max-width:760px) and (max-height:700px){.site-header nav{padding-top:16px!important}}

/* 8 · Portfolio / project pages: keep the page height while the work list loads,
      so the footer does not jump up under a single "loading" line. */
#archiveContent.archive-main{min-height:100vh;min-height:100svh}

/* 9. Before/after images: the width/height attributes were acting as a fixed
   1080px CSS height, so 16:9 images were cropped into tall strips. */
.interview-comparison img{height:auto}
/* 10. Mobile problem section: longer sticky runway so the headline sharpens
   and the sub copy is readable before the next panel rises. */
@media(max-width:760px){#problem{min-height:190svh}}
/* 11. Chatbot hides by fading while the footer circle is on screen (v6). */
.concierge-launcher.cc-merged{visibility:visible}