/* /assets/tighten.css — "streamlined, not cluttered" on phones.  1 Oct 2026.
   Jeremy asked for the public pages to feel less like a wall and to lead people
   to an enquiry. The Ratzon homepage was 37,000 px tall on a 375 px phone —
   46 screenfuls — with five stacked video grids and three competing forms.

   EVERYTHING HERE IS SCOPED TO html.tight, which tighten.js adds only on a
   phone-sized screen. Nothing is deleted or hidden without a way to open it.
   To switch the whole thing off: remove the tighten.js <script> line. */

@media (max-width: 768px) {

  /* ---- 1. video grids become swipe rows ------------------------------------
     Five grids of 3-8 clips were stacking one per row: 1,200 px each, 6,000 px
     in all. Side by side with snap scrolling they are ~300 px each and feel
     like something to flick through instead of something to get past. */
  html.tight .video-grid{
    display:flex !important;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    align-items:flex-start;          /* without this, flex stretches every card to
                                        the tallest one and the row stays 1,200 px */
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 14px;
    scrollbar-width:none;
    /* mobile-polish.css reserves 1,200 px for every off-screen .video-grid
       (content-visibility:auto + contain-intrinsic-size). Once these are one
       swipe row high that reservation is wrong by ~900 px each, which makes the
       page read as far longer than it is and makes the scrollbar jump. */
    contain-intrinsic-size:1px 300px;
  }
  html.tight .video-grid::-webkit-scrollbar{display:none}
  html.tight .video-grid > *{
    flex:0 0 84vw;
    min-width:84vw;
    max-width:84vw;
    height:auto;
    align-self:flex-start;
    scroll-snap-align:center;
    margin:0 !important;
  }
  html.tight .video-grid > * iframe,
  html.tight .video-grid > * .ytf-poster{ width:100% }

  html.tight .tight-swipe{
    font:500 .78rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    letter-spacing:.04em; text-transform:uppercase;
    opacity:.6; margin:-6px 0 10px; display:flex; gap:6px; align-items:center;
  }

  /* ---- 2. long sections fold --------------------------------------------- */
  html.tight .tight-fold{ position:relative; overflow:hidden; }
  html.tight .tight-fold.is-shut{ max-height:68vh; }
  html.tight .tight-fold.is-shut::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:130px;
    background:linear-gradient(to bottom, rgba(10,10,10,0), rgba(10,10,10,.82) 55%, rgba(10,10,10,.97));
    pointer-events:none;
  }
  html.tight .tight-more{
    display:block; width:100%; margin:10px 0 4px; padding:13px 16px;
    background:rgba(201,163,93,.12); color:#c9a35d;
    border:1px solid rgba(201,163,93,.42); border-radius:11px;
    font:600 .95rem/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    min-height:46px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  html.tight .tight-more:active{ background:rgba(201,163,93,.22) }

  /* ---- 3. one action pill instead of two ---------------------------------
     Two separate floating buttons sat in opposite bottom corners on every
     screenful. They are now one pill that opens the same two choices. */
  html.tight .reachout-float,
  html.tight .whatsapp-float{ display:none !important; }

  html.tight .tight-ask{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    z-index:210; display:flex; gap:8px; align-items:stretch;
    background:#141414; border:1px solid rgba(201,163,93,.5);
    border-radius:999px; padding:5px 5px 5px 13px;
    white-space:nowrap;
    box-shadow:0 8px 28px rgba(0,0,0,.55);
    font:600 .92rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    max-width:calc(100vw - 24px);
  }
  html.tight .tight-ask .lbl{ color:#e8e8e8; align-self:center; white-space:nowrap; font-size:.86rem }
  html.tight .tight-ask a{
    display:flex; align-items:center; justify-content:center; text-decoration:none;
    padding:9px 12px; border-radius:999px; font-size:.84rem; min-height:40px;
    white-space:nowrap;          /* without this the labels wrap one letter per line */
    flex:0 0 auto;
  }
  html.tight .tight-ask a.wa{ background:#25d366; color:#05240f }
  html.tight .tight-ask a.frm{ background:#c9a35d; color:#1a1300 }
  html.tight .tight-ask.gone{ display:none }

  /* keep the pill clear of the footer and of any in-page sticky bar */
  html.tight body{ padding-bottom:72px }
}