/* ===========================================================================
   hifi studio — responsive layer
   ---------------------------------------------------------------------------
   The pages are authored with inline styles for a fixed desktop canvas. Inline
   styles beat any stylesheet rule, so every override here needs !important.
   That is deliberate and confined to this file: nothing below runs above the
   tablet breakpoint, so the desktop design is untouched.

   Breakpoints
     <= 1024px  tablet   : narrower gutters, two-column grids
     <=  768px  phone    : single column, rails shrink, home stops scrolling
                           sideways and stacks vertically
   ======================================================================== */

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 1024px) {
  .hifi-shell            { margin: 0 48px !important; }
  .hifi-work-layout      { grid-template-columns: 180px 1fr !important;
                           gap: 32px !important;
                           padding: 0 32px 96px !important; }
  .hifi-work-grid        { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ----------------------------------------------------------------- phone -- */
@media (max-width: 768px) {

  /* --- shell + fixed rails ------------------------------------------------ */
  .hifi-shell            { margin: 0 0 0 44px !important; }
  .hifi-rail             { width: 44px !important; }
  /* The right-hand "book a consultation" rail costs a fifth of a phone screen;
     the same call to action already sits in the menu and at the foot of every
     page, so it steps aside here. */
  .hifi-rail-right       { display: none !important; }
  .hifi-progress         { left: 44px !important; right: 0 !important; }

  /* --- menu overlay ------------------------------------------------------- */
  .hifi-overlay          { padding: 32px 24px 32px 60px !important; }
  .hifi-menu-word        { font-size: 38px !important; letter-spacing: -0.5px !important; }
  .hifi-menu-nav         { gap: 2px !important; }

  /* --- generic section padding + type ------------------------------------- */
  .hifi-shell section,
  .hifi-shell > section  { padding-left: 20px !important; padding-right: 20px !important; }
  .hifi-shell h1         { font-size: 34px !important; line-height: 1.08 !important;
                           letter-spacing: -1px !important; }
  .hifi-shell h2         { font-size: 26px !important; line-height: 1.12 !important;
                           letter-spacing: -0.6px !important; }
  /* Nothing may be wider than its container. This alone neutralises the
     hard-coded panel widths (940px, 1100px, 600px …) the desktop layout uses,
     without having to hunt each one down. */
  .hifi-shell div, .hifi-shell section, .hifi-shell p,
  .hifi-shell h1, .hifi-shell h2, .hifi-shell footer,
  .hifi-shell aside, .hifi-shell nav {
                           max-width: 100% !important; }
  /* Multi-column blocks collapse to one column (any element, not just divs —
     the footer is a <footer>). */
  .hifi-shell [style*="grid-template-columns"]:not(.hifi-work-grid):not(.hifi-work-layout) {
                           grid-template-columns: 1fr !important; }

  /* The canvas editor stamps some text blocks with a fixed width AND height
     measured on the desktop canvas (e.g. "width: 283px; height: 63px"). On a
     narrow screen that text wraps to more lines and spills out of the box, so
     text elements give their fixed height back. Restricted to div/span/p so
     image boxes and <image-slot> keep their intended heights. */
  .hifi-shell div[style*="px; height:"],
  .hifi-shell span[style*="px; height:"],
  .hifi-shell p[style*="px; height:"],
  .hifi-shell div[style*="px;height:"],
  .hifi-shell span[style*="px;height:"],
  .hifi-shell p[style*="px;height:"] {
                           width: auto !important; height: auto !important;
                           min-height: 0 !important; }

  /* Grids declared in a page's own <style> block rather than inline, so the
     attribute selector above cannot reach them. */
  .hifi-step             { grid-template-columns: 1fr !important;
                           gap: 8px !important; padding: 30px 0 !important; }
  .hifi-proj-row         { grid-template-columns: 1fr !important;
                           gap: 6px !important; padding: 20px 0 !important; }

  /* --- portfolio ---------------------------------------------------------- */
  .hifi-work-layout      { grid-template-columns: 1fr !important;
                           padding: 0 20px 80px !important; gap: 28px !important; }
  .hifi-filters          { position: static !important; border-right: 0 !important;
                           border-bottom: 1px solid #E5E5E5 !important;
                           padding: 0 0 20px !important; }
  .hifi-work-grid        { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* --- project photo mosaic ------------------------------------------------ */
  /* columns:3 340px in Project.dc.html's own <style> already drops to a
     single column on its own at this width; only the side padding needs
     easing to match every other phone section. */
  .hifi-mosaic            { padding: 0 20px 40px !important; }

  /* --- home: stop the sideways scroll, stack the panels -------------------- */
  .hifi-shell:has(> .hifi-hscroll) { height: auto !important; overflow: visible !important; }
  .hifi-hscroll          { display: block !important; height: auto !important;
                           overflow: visible !important; }
  /* Panels are a mix of <section> and <div> (the footer panel is a div). */
  .hifi-hscroll > section,
  .hifi-hscroll > div    { width: 100% !important; height: auto !important;
                           min-height: 0 !important; flex: none !important;
                           display: block !important;
                           padding: 44px 20px !important; }
  /* the hero splits its text panel and photo into two stacked blocks */
  .hifi-hscroll > section > div,
  .hifi-hscroll > div > div { width: 100% !important; height: auto !important; }
  .hifi-hscroll image-slot { height: 260px !important; display: block !important; }
  /* hero photo and the "Recent Works" cards read as portrait crops on phones,
     rather than the wide letterbox strip the fixed 260px height above gives
     every other image-slot in the row */
  .hifi-hscroll image-slot#hero-main,
  .hifi-hscroll image-slot#home-portfolio-flagship,
  .hifi-hscroll image-slot#home-portfolio-2,
  .hifi-hscroll image-slot#home-portfolio-3,
  .hifi-hscroll image-slot#home-portfolio-4 {
                           height: auto !important; aspect-ratio: 4 / 5 !important; }
  /* the card's own <a> wrapper is hard-coded to the desktop crop height
     (420px); once the slot inside goes portrait at aspect-ratio 4/5 it's
     usually taller, so let the wrapper follow instead of leaving a gap
     before the project name below it */
  .hifi-hscroll a[style*="height: 420px"] { height: auto !important; }
  /* "Who We Are" text stacks directly under its photo with no gap once the
     section collapses to one column -- give the text block some breathing
     room above the "02 — WHO WE ARE" label. */
  .hifi-hscroll > section[data-screen-label="Home / About Preview"] > div:last-child {
                           margin-top: 28px !important; }
  /* the three testimonial columns carry desktop side-padding and a
     column-divider border meant for sitting shoulder-to-shoulder in a
     3-column grid -- once that grid collapses to one column on phones, the
     uneven left padding reads as misaligned text and the border becomes a
     stray vertical line, so both are reset here. */
  .hifi-hscroll > section[data-screen-label="Home / Testimonials"] > div > div {
                           padding: 0 !important; border-right: 0 !important;
                           margin-bottom: 32px !important; }
  .hifi-hscroll > section[data-screen-label="Home / Testimonials"] > div > div:last-child {
                           margin-bottom: 0 !important; }
  .hifi-hscroll > section > div[style*="padding: 56px"] { padding: 0 !important; }
  /* the hero's absolutely-positioned caption block returns to normal flow --
     margin-bottom keeps its last line of text from sitting flush against the
     photo panel stacked right below it. */
  .hifi-hscroll div[style*="position: absolute"] {
                           position: static !important; margin-top: 18px !important;
                           margin-bottom: 28px !important; }
}

/* --- floating WhatsApp button (markup lives in Footer.dc.html) ------------- */
.hifi-wa-float           { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hifi-wa-float:hover     { transform: scale(1.08);
                           box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
@media (max-width: 768px) {
  /* the right rail is hidden on phones, so the button hugs the corner */
  .hifi-wa-float         { right: 16px !important; bottom: 16px !important;
                           width: 54px !important; height: 54px !important; }
}

/* Very small phones. */
@media (max-width: 400px) {
  .hifi-shell            { margin: 0 0 0 40px !important; }
  .hifi-rail             { width: 40px !important; }
  .hifi-progress         { left: 40px !important; }
  .hifi-shell h1         { font-size: 29px !important; }
  .hifi-menu-word        { font-size: 32px !important; }
}

/* Nothing should ever scroll the page sideways -- but it must still scroll
   vertically. Home.dc.html's own stylesheet sets `overflow:hidden` (both
   axes) on html/body to support the desktop wheel-to-horizontal-scroll trick
   above; once .hifi-hscroll stacks into a normal, much-taller-than-100vh
   column on phones, that inherited overflow-y:hidden has nothing to do with
   horizontal scroll any more -- it just traps the whole page and blocks
   scrolling entirely. Restoring overflow-y here (!important beats that
   unqualified rule regardless of source order) is what lets the phone
   actually scroll down the stacked panels. */
@media (max-width: 768px) {
  html, body             { max-width: 100% !important; overflow-x: hidden !important;
                           overflow-y: auto !important; }
  img, video, image-slot { max-width: 100% !important; }
}