/* ==========================================================================
   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
   one-row header stops fitting at ~776px, so it switches to two rows) 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 */
  .site-header{flex-wrap:wrap;padding:10px 24px 0;gap:4px 16px}
  .nav-1{width:100%;justify-content:space-between;gap:12px;font-size:14px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:6px 0 12px}
  .nav-1::-webkit-scrollbar{display:none}
  .img-2{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: two-row layout comes from the <=800px block; phones get the 16px gutter */
  .site-header{padding:10px 16px 0}

  /* 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;top: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}
}