/*
Theme Name: Pro – Child Theme
Template: pro
Version: 1.0.5
Description: Child theme for Pro, mirroring Media Solution. Hive Production (Hive 2.0).
Author: Hive Production
*/

/* ------------------------------------------------------------------
   Mobile optimisation — Hive pages, added 10 Nov 2026.
   All rules below are scoped to small screens, so desktop
   rendering is unchanged. They fix the mobile audit findings:
   hero sections use the small viewport height (svh) so the first
   screen stays stable when the phone browser chrome shows or
   hides; the header stacks and the CTAs fit a 390px viewport; the
   Industries grid and the Studio tiles stack to one column; ghost
   numerals and display headings scale down.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  /* No sideways scroll on the built (.hive) pages. */
  .hive { overflow-x: clip; }

  /* Hero / moment / teaser full height on phones.
     Inline heights are 92vh (homepages), 88vh (division,
     Partnerships and About pages) and 80vh (moments, teaser).
     100svh == 100vh on desktop, so this is desktop-neutral. */
  [style*="min-height:92vh"] { min-height: 92svh !important; }
  [style*="min-height:88vh"] { min-height: 88svh !important; }
  [style*="min-height:80vh"] { min-height: 80svh !important; }

  /* Display headings: lower the clamp floors so they scale down
     on phones. Only the minimum changes; desktop is identical. */
  .hive h1 { font-size: clamp(44px, 8vw, 110px) !important; }
  .hive h2 { font-size: clamp(36px, 6vw, 72px) !important; }

  /* Ghost numerals in the Method sections. */
  .hive .ghost { font-size: 88px; }

  /* Header: stack the logo above the nav on phones. A single row
     (logo + four links) still clips at phone widths, so the header
     gets two rows instead — no sideways scroll, nothing cut off.
     The flex container is the .wrap div INSIDE the header, so the
     selector must be "header .wrap" (a descendant), not
     "header.wrap". Its display is flex inline, so the stacked rows
     are forced with display:block instead — a block header .wrap
     lets the logo sit on its own line and the nav (a block) span
     the full row width, so its links wrap on the longer-nav pages
     (Partnerships, About) instead of clipping. The nav
     letter-spacing and the link margins are inline too. */
  .hive header .wrap { display: block !important; }
  .hive header nav { letter-spacing: .18em !important; margin-top: 16px; }
  .hive header nav a { margin-left: 16px !important; }
  .hive header img { height: 36px !important; }

  /* CTAs: full width, stacked, easy to tap. */
  .hive .btn,
  .hive .btn2 {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 12px;
    box-sizing: border-box;
    text-align: center;
  }

  /* Industries (About — Extended): the two-column inline grid
     never stacked, so long names overflowed their column. */
  [style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  /* Older .hive-wrap pages (/studio/, /le-studio/, /contact/,
     /contact-fr/): display headings scale down on phones. */
  .hive-wrap .hive-h1 { font-size: clamp(48px, 9vw, 140px); }
  .hive-wrap .hive-h2 { font-size: clamp(36px, 5vw, 72px); }

  /* WPForms submit button: reach the 44px tap-target minimum. */
  .wpforms-container-full .wpforms-submit { min-height: 48px !important; }
}
@media (max-width: 520px) {
  .hive-wrap .hive-tiles { grid-template-columns: 1fr; }
}