/* ==========================================================================
   FindHomeIdeas responsive layer.
   The design (styles.css) is desktop-only: it has no @media rules. This file is
   loaded after styles.css and contains ONLY max-width media queries that target
   the design's own class names, so pages wider than 1024px render exactly as
   designed. Breakpoints: <=1024px (tablet / small laptop), <=800px (header only: the
   desktop nav stops fitting at ~776px, so it moves into the hamburger menu) and <=640px
   (phones, checked at 375px with no horizontal page scroll).
   Class map (see build/specs/template-*.md):
     chrome      .site-header .nav-1 .site-footer .bx-5 .bx-10
     home        .sec-2 .bx-70-.bx-72 .lnk-11 .sec-3 .sec-4 .lnk-12 .bx-78 .lnk-13
     pros/cat.   .sec-5 .bx-87 .bx-114 .sec-8 .bx-116 .bx-121 .bx-122 .bx-124
     business    .bx-126 .sec-10 .bx-130 .bx-142 .bx-145 .bx-153 lightbox .bx-135
     articles    .bx-12 .bx-15 .bx-17 .bx-23 .sec-1 .lnk-7
     grids       .sec-6 .bx-94 (magazine) .bx-98 (projects) .bx-89 (videos)
     search      .sec-7 .asd-1 .lnk-17
   ========================================================================== */

@media (max-width:1024px){
  /* chrome */
  .site-header{padding:14px 24px}
  .nav-1{gap:20px}
  .site-footer{padding:40px 24px}
  .bx-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}

  /* home */
  .bx-70{height:440px}
  .sec-3{padding:48px 24px 8px}
  .sec-4{padding:48px 24px 72px}

  /* find local pros + category pages: the 330px aside drops below the content */
  .sec-5{padding:36px 24px 12px}
  .bx-87{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sec-8{grid-template-columns:minmax(0,1fr);padding:48px 24px 56px}
  .bx-124{position:static}

  /* business pages: same single-column switch */
  .sec-10{grid-template-columns:minmax(0,1fr);padding:36px 24px 56px}
  .bx-153{position:static}
  .bx-142{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* articles */
  .hd1-1,.hd1-2{font-size:36px}
  .sec-1{padding:8px 24px 48px}
  .lnk-7{flex-basis:calc((100% - 24px)/2)}

  /* magazine, projects, videos grids */
  .sec-6{padding:36px 24px 56px}
  .bx-94{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .bx-98{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bx-89{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* search: the 300px ad column drops below the results */
  .sec-7{grid-template-columns:minmax(0,1fr);padding:36px 24px 56px}
  .asd-1{position:static}
}

@media (max-width:800px){
  /* header: logo + city picker on row 1, nav on row 2 (scrolls sideways if it ever
     overflows) once the one-row header no longer fits (~776px); the inert
     "Profile (coming soon)" icon is hidden to make room */
  /* FHI patch (phone menu, client Oct 19 2026): one row, hamburger at the top left, then the
     logo and the city picker; the nav (and its search icon) moves into the slide-in menu
     (layout._menu, site.js "phone menu"). */
  .site-header{flex-wrap:nowrap;justify-content:flex-start;padding:10px 24px;gap:10px}
  .nav-1{display:none}
  .bx-2{left:auto;right:0}          /* city dropdown opens leftwards, inside the screen */
}

@media (max-width:640px){
  /* safety net: nothing should overflow, but never let a stray element scroll the page
     sideways (clip, unlike hidden, keeps the sticky header working) */
  .page-wrap{overflow-x:clip}
  .site-main img{max-width:100%}
  .site-main iframe:not(.ifr-1){max-width:100%}
  .site-main table{display:block;max-width:100%;overflow-x:auto}

  /* header: the <=800px one-row layout with the phones' 16px gutter */
  .site-header{padding:10px 16px}

  /* footer: one column, stacked bottom bar */
  .site-footer{padding:36px 16px}
  .bx-5{grid-template-columns:minmax(0,1fr);gap:28px}
  .bx-10{flex-direction:column;align-items:flex-start;gap:10px}

  /* heroes (home, category, business): narrower side margins */
  .site-main>.hero{margin-left:12px;margin-right:12px}

  /* home hero (video stays covered: height <= the iframe's 497px) */
  .bx-70{height:460px}
  .sec-2>.bx-71{padding:0 12px;box-sizing:border-box}
  .bx-72{padding:28px 20px}
  .hd1-3{font-size:30px}
  .txt-26{margin:10px 0 20px;font-size:15px}
  .lnk-11{right:12px;bottom:12px;font-size:14px;padding:8px 16px 8px 8px}
  .hero-toggle{left:12px;bottom:12px}
  /* home carousels */
  .sec-3{padding:36px 16px 8px}
  .sec-4{padding:36px 16px 56px}
  .hd2-4{font-size:24px}
  .btn-3,.btn-4{width:40px;height:40px;font-size:20px}
  .btn-3{left:-8px}
  .btn-4{right:-8px}
  .lnk-12{min-width:140px}
  .bx-78,.lnk-13{min-width:260px}
  .bx-75,.bx-77{gap:14px}
  .bx-84{gap:16px}

  /* find local pros index */
  .sec-5{padding:28px 16px 8px}
  .hd1-4{font-size:28px}
  .bx-87{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:40px}
  .img-60{height:110px}
  .bx-88{padding:10px 10px 12px;font-size:14px}

  /* category pages */
  .bx-114{padding:24px 18px}
  .hd1-5{font-size:30px}
  .sp-32{font-size:14px}
  .sec-8{padding:32px 16px 48px;gap:32px}
  .bx-115{gap:36px}
  .bx-116,.bx-121{grid-template-columns:minmax(0,1fr)}
  .bx-122{flex-wrap:wrap;gap:6px 16px}
  .bx-122>.bx-109{flex:1 1 100%}
  .bx-123{flex-wrap:wrap;gap:8px 18px;white-space:normal}

  /* business pages */
  .bx-126{padding:28px 16px;gap:14px}
  .hd1-6{font-size:28px}
  .img-67,.img-71{width:56px;height:56px}
  .sp-36{font-size:11px;letter-spacing:2px}
  .sec-10{padding:28px 16px 48px;gap:32px}
  .bx-127{gap:36px}
  .bx-130{columns:2}
  .bx-142,.bx-145,.bx-146{grid-template-columns:minmax(0,1fr)}
  .bx-136{max-width:calc(100vw - 24px)}
  .btn-10,.btn-12{width:40px;height:40px;font-size:20px}
  .btn-10{left:8px}
  .btn-12{right:8px}

  /* articles */
  .bx-12{margin:0 12px}
  .bx-15{width:calc(100% - 32px);padding:28px 0 20px}
  .bx-17{width:calc(100% - 32px)}
  .hd1-1,.hd1-2{font-size:28px}
  .txt-2,.txt-6,.txt-12,.txt-22{font-size:15px}
  .bx-20{font-size:16px}
  .img-30{float:none;width:60%;margin:0 auto 20px}
  .bx-23{padding:20px;gap:18px}
  .bx-35{padding:20px}
  .bx-39,.bx-68{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-1{padding:8px 16px 40px}
  .bx-26{flex-wrap:wrap}
  .lnk-7{flex-basis:80%}
  .g-issue-frame{height:420px}
  .g-prose{font-size:16px}

  /* magazine, projects, videos grids */
  .sec-6{padding:28px 16px 48px}
  .bx-94{grid-template-columns:minmax(0,1fr);gap:20px}
  .bx-98{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bx-89{grid-template-columns:minmax(0,1fr);gap:20px}
  .bx-100{padding:10px 10px 12px}
  .hd3-2{font-size:14px}
  .bx-99 .sp-23{left:8px;top:8px;padding:5px 9px;font-size:9px}

  /* search */
  .sec-7{padding:28px 16px 48px;gap:28px}
  .lnk-17{gap:12px}
  .bx-108{width:96px}
  .sp-27{font-size:15px}
  .img-64{width:100%;max-width:300px;height:auto;aspect-ratio:1/2}
}

/* Phone menu (client, Oct 19 2026): hamburger + slide-in drawer at <=800px; hidden on wider screens.
   The drawer's search box shows on every page but home (the home hero has the search). */
.g-burger,.g-menu{display:none}
@media (max-width:800px){
  .g-burger{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 0 -10px;padding:0;border:0;background:transparent;color:#1f1f1f;cursor:pointer;border-radius:8px}
  .g-burger:focus-visible,.g-menu-x:focus-visible,.g-menu-link:focus-visible,.g-menu-go:focus-visible{outline:2px solid var(--brand-color-secondary);outline-offset:2px}
  .g-burger-bars,.g-burger-bars::before,.g-burger-bars::after{display:block;width:24px;height:2.5px;border-radius:2px;background:currentColor}
  .g-burger-bars{position:relative}
  .g-burger-bars::before,.g-burger-bars::after{content:"";position:absolute;left:0}
  .g-burger-bars::before{top:-8px}
  .g-burger-bars::after{top:8px}
  .g-menu:not([hidden]){display:block;position:fixed;inset:0;z-index:300}
  .g-menu-scrim{position:absolute;inset:0;background:rgba(31,41,46,.45);opacity:0;transition:opacity .22s ease}
  .g-menu-panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,340px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:10px 20px 32px;box-sizing:border-box;background:#fff;box-shadow:8px 0 32px rgba(31,41,46,.18);transform:translateX(-100%);transition:transform .26s ease}
  .g-menu.is-open .g-menu-scrim{opacity:1}
  .g-menu.is-open .g-menu-panel{transform:none}
  .g-menu-top{display:flex;align-items:center;justify-content:space-between;min-height:50px;margin-bottom:14px}
  .g-menu-logo{display:flex}
  .g-menu-logo img{height:30px;width:auto;display:block}
  .g-menu-x{position:relative;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;color:#1f1f1f;cursor:pointer;border-radius:8px}
  .g-menu-x::before,.g-menu-x::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:2.5px;margin:-1.25px 0 0 -11px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
  .g-menu-x::after{transform:rotate(-45deg)}
  .g-menu-search{display:flex;align-items:center;height:48px;margin:0 0 10px;padding:0 4px 0 14px;border:1px solid #cfd6da;border-radius:8px;background:#fff}
  body[data-page="index"] .g-menu-search{display:none}
  .g-menu-q{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:transparent;font:inherit;font-size:16px;color:#2e2e2e}
  .g-menu-q:focus-visible{outline:2px solid var(--brand-color-secondary);outline-offset:2px}   /* as .inp-2 */
  .g-menu-q::-webkit-search-cancel-button{-webkit-appearance:none}
  .g-menu-go{display:flex;flex:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;background:transparent;color:#5b6266;cursor:pointer;border-radius:6px}
  .g-menu-nav{display:flex;flex-direction:column}
  body[data-page] .g-menu-nav a.g-menu-link{display:flex;align-items:center;min-height:56px;border-bottom:1px solid #edf0f1;font-size:19px;font-weight:500;color:#2e2e2e;text-decoration:none}
  body[data-page] .g-menu-nav a.g-menu-link[aria-current="page"]{color:#527985;font-weight:600}
  html.g-menu-lock{overflow:hidden}
}
@media (max-width:800px) and (prefers-reduced-motion:reduce){
  .g-menu-scrim,.g-menu-panel{transition:none}
}
/* Logo and city picker span the rest of the row (client, Oct 19 2026): the logo grows to fill the
   space (up to 230px wide) and the city picker sits at the right edge */
@media (max-width:800px){
  .bx-1{flex:1;min-width:0;justify-content:space-between;gap:16px}
  .lnk-1{flex:0 1 230px;min-width:0}
  .det-1{flex:none}
  .sum-1{white-space:nowrap}
  .img-1{width:100%;height:auto}
  .sum-1{min-height:44px}                           /* tap target */
  .bx-3,.bx-4{padding:12px 14px}
}
@media (max-width:440px){
  .site-header{gap:8px}
  .sum-1{font-size:13px;letter-spacing:1px}
}
@media (max-width:359px){
  .sum-1{font-size:12px;letter-spacing:.6px}
}

/* ==========================================================================
   Phones (mobile audit, client Oct 19 2026)
   ========================================================================== */
.g-actbar,.g-showall{display:none}     /* phones only (below) */
@media (max-width:640px){
  /* Form fields at 16px: iOS zooms the page in on any field smaller than that */
  html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),html body select,html body textarea{font-size:16px}
  .inp-1{padding:12px}
  .g-sort-s{font-size:16px}
  /* the lead and newsletter forms carry their own !important styles (layout.py): same on phones */
  html body #ffm-form-contact input,html body #ffm-form-contact textarea,html body #ffm-form-contact select,html body #ffm-form-newsletter input{font-size:16px!important}
  html body #ffm-form-newsletter input{padding:12px!important}
  html body #ffm-form-newsletter .ff-submit{font-size:12px!important;padding:15px 18px!important}
  .inp-2,.inp-3{align-self:stretch}                 /* the whole search box height takes the tap */

  /* Tap targets (about 44px): small text links get a taller hit area without moving anything */
  .lnk-18,.lnk-9,.lnk-6,.g-more,.site-main a[href^="tel:"]:not(.g-rg-btn){display:inline-block;padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
  .lnk-21{padding:12px 0;margin:8px 0 -12px}
  .bx-11 .lnk-5{display:inline-block;padding:12px 0;margin:-12px 0}
  .lnk-3,.lnk-10{position:relative}
  .lnk-3::after,.lnk-10::after{content:"";position:absolute;inset:-7px}
  .g-fchip{padding:9px 14px}
  .btn-6,.btn-7{padding:10px 14px}
  .btn-2{width:44px;height:44px}
  .g-sicon{width:44px;height:44px;margin-right:-12px}
  .btn-8{padding:13px 20px}
  .btn-1{padding:15px 18px}

  /* Text at least 12px */
  .btn-1,.sp-6,.sp-34,.sp-36,.g-fchip-x,.g-fbtn-c{font-size:12px}
  .sp-22,.sp-11,.sp-23{font-size:12px!important}     /* beats the media-layout tag sizes */

  /* Search: 5 results per group with ALL selected (site.js capGroups) */
  [data-group] a[data-search][data-cap]{display:none}
  .g-showall{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:12px;padding:0 16px;border:1px solid #cfd6da;border-radius:22px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:#527985;cursor:pointer}
  .g-showall[hidden]{display:none}
  .g-showall:focus-visible{outline:2px solid var(--brand-color-secondary);outline-offset:2px}

  /* Business pages: Website, Directions and Call pinned to the bottom of the screen */
  .g-actbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid #e3e7e9;box-shadow:0 -4px 16px rgba(31,41,46,.08)}
  .g-actbar .g-rg-btn{flex:1;justify-content:center;height:44px;padding:0 8px;border-radius:22px}
  body:has(.g-actbar) .site-footer{padding-bottom:calc(36px + 64px)}

  /* Photo lightbox: the arrows sit above the photo, not behind it */
  .btn-10,.btn-12{z-index:3}

  /* Article hero: photos that aren't 16:9 show whole, at full card width (no gray bars) */
  .img-5.g-hero-contain{aspect-ratio:auto;height:auto;max-height:75vh;background:none}

  /* Magazine issue viewer: edge to edge, as tall as the flipbook needs (the player always leaves room
     for a two-page spread, so a taller box only adds blank space on a phone) */
  .site-main iframe.g-issue-frame{width:100vw;max-width:none;margin:0 0 0 calc(50% - 50vw);height:78vw;max-height:none;border-radius:0}

  /* Footer (client, Oct 20 2026): a wider left margin, Explore in two columns with the TV Schedule's
     line spacing, the social icons lined up on the left */
  .site-footer{padding-left:28px;padding-right:28px}
  .bx-7{align-items:flex-start}
  .bx-9:has(.lnk-5){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;align-content:start}
  .bx-9:has(.lnk-5) .sp-4{grid-column:1/-1}
  .bx-9 .lnk-5{position:relative}
  .bx-9 .lnk-5::after{content:"";position:absolute;inset:-4px 0}   /* a taller tap area without more space */
}

/* Search: photo grid keeps two rows, no scrolling: 4 x 2 on tablets, 3 x 2 on phones */
@media (max-width:1024px){
  .g-prow-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g-prow-grid>:nth-child(n+9){display:none}
}
@media (max-width:640px){
  .g-prow-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .g-prow-grid>:nth-child(n+7){display:none}
  .g-prow-all{width:100%;justify-content:center}
  .g-sbtn{padding:0 14px}
}