/* ============================================================
   HBC — global mobile responsiveness layer
   Loaded last on every page. Targets ≤768px (mobile) with
   extra tightening ≤480px. `html body` prefixes out-rank
   per-page !important rules where needed.
   ============================================================ */

/* ---------- Always: hard overflow guards ---------- */
html, body{
  max-width: 100vw;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; }

@media (max-width: 768px){

  /* ---------- 1. Section rhythm: 24px sides, clean stacking ---------- */
  html body section,
  html body footer,
  html body .footer,
  html body .page-hero,
  html body .hero{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Sections whose inner wrapper already carries the side padding */
  html body .priser-section,
  html body .price-cat,
  html body .gallery-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Residual multi-column layouts → single column */
  html body .ft-grid{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  html body .cta-facts{ grid-template-columns: 1fr !important; }
  html body .contact-inner{ grid-template-columns: 1fr !important; gap: 48px !important; }
  html body .price-grid{ grid-template-columns: 1fr !important; }
  html body .member-inner,
  html body .intro-inner,
  html body .clinic-inner,
  html body .what-inner,
  html body .results-inner,
  html body .om-inner{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  html body .member--reverse .member-inner{ direction: ltr !important; }

  /* ---------- 2. Index hero: frosted glass panel ----------
     Scoped via :has(.hero__glass) — the emerald heroes also use
     .hero__content (bottom-anchored) and must not inherit this padding */
  html body .hero__content:has(.hero__glass){
    padding: 88px 20px 108px !important;
  }
  html body .hero__glass{
    width: 100% !important;
    max-width: none !important;
    padding: 40px 24px !important;
  }
  html body .hero__glass .headline{
    font-size: clamp(32px, 8.5vw, 42px) !important;
    line-height: 1.05 !important;
  }
  html body .hero__glass .subhead{ font-size: 15px !important; }
  /* Stamp badge scaled down proportionally */
  html body .hero__stamp{
    padding: 7px 12px !important;
    font-size: 8.5px !important;
    gap: 6px !important;
    transform: translate(-8%, -50%) rotate(-8deg) !important;
  }
  html body .hero__stamp svg{ width: 11px !important; height: 11px !important; }
  /* Facts strip: compact */
  html body .hero__strip{
    gap: 6px 24px !important;
    padding: 10px 16px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
  }

  /* ---------- 2b. Treatment page hero (.page-hero) ----------
     Per-page nav overrides force padding-top: 0 !important, which leaves the
     centered content cramped at the top — restore breathing room so it sits
     in the middle/lower part of the hero. */
  html body .page-hero{
    padding-top: 112px !important;
    padding-bottom: 56px !important;
  }
  html body .page-hero__eyebrow{ font-size: 11px !important; }

  /* ---------- 3. Typography: heading floor handled by
       heading-scale.css (clamp(34px, 9vw, 44px) ≤768px) ---------- */
  html body .page-hero__sub,
  html body .subhead{ font-size: 15px !important; line-height: 1.6 !important; }

  /* ---------- 5. Images ---------- */
  html body .om-portrait{
    width: 80% !important;
    max-width: 480px !important;
    aspect-ratio: auto !important;
    height: 400px !important;
    justify-self: center !important;
    margin: 8px auto 24px !important;
    transform: none !important;
    overflow: hidden !important;
  }
  html body .om-portrait img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Om oss stack order on mobile: text → photo → logos */
  html body .om-oss .om-inner{ display: grid !important; grid-template-columns: 1fr !important; }
  html body .om-oss .om-inner .om-content{ order: 1; grid-row: auto !important; }
  html body .om-oss .om-inner .om-portrait{ order: 2; grid-row: auto !important; grid-column: 1 !important; }
  html body .om-oss .om-inner .om-certs{ order: 3; grid-row: auto !important; grid-column: 1 !important; }
  /* Team portraits: compact, left-aligned with the content */
  html body .member__media{
    width: 100% !important;
    max-width: 320px !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* Certification logos: smaller, centered */
  html body .om-certs{
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
  }
  html body .om-certs img{
    height: 70px !important;
    max-height: 70px !important;
    width: auto !important;
  }

  /* ---------- 6. Buttons: comfortably tappable ---------- */
  html body a.btn,
  html body button.btn,
  html body .btn,
  html body .card__btn,
  html body .page-hero__cta,
  html body .priser-btn,
  html body .nav__drawer-cta,
  html body .boka-btn,
  html body form button,
  html body input[type="submit"]{
    min-height: 48px;
  }
  html body .page-hero__cta,
  html body .priser-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Booking iframe full width */
  html body .boka-frame{ width: 100% !important; }
  html body .boka-frame iframe{ width: 100% !important; }

  html body .price-grid{ grid-template-columns: minmax(0, 1fr) !important; }
  html body .price-cat__title{ overflow-wrap: break-word !important; hyphens: auto !important; }
  /* Long single-word headings must never inflate layout */
  html body h1, html body h2{ overflow-wrap: break-word; }

  /* Price rows: never overflow — long campaign prices wrap to a right-aligned second line */
  html body .price-row{
    gap: 14px !important;
    flex-wrap: wrap !important;
  }
  html body .price-row__val{
    margin-left: auto !important;
    text-align: right !important;
  }

  /* ---------- 6b. Treatment flip-cards on mobile ----------
     Real 3D flip, same as desktop. WebKit mirroring fix: both faces
     are backface-hidden AND separated 1px on the Z axis, so even when
     mobile WebKit flattens the layers the correct face is painted on
     top. The back face stays in normal flow (the front is absolutely
     positioned over it), so every card is exactly as tall as its own
     back content — front and back share that height, nothing clips,
     nothing jumps on flip. */
  html body .grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  html body .card,
  html body .card.is-feature{
    aspect-ratio: auto !important;
    height: auto !important;
    grid-column: auto !important;
    perspective: 1400px !important;
    -webkit-perspective: 1400px !important;
  }
  html body .card__inner{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    will-change: transform;
  }
  html body .card__face{
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  html body .card__front{
    position: absolute !important;
    inset: 0 !important;
    transform: rotateY(0deg) translateZ(1px) !important;
    -webkit-transform: rotateY(0deg) translateZ(1px) !important;
  }
  /* Back face in normal flow: it defines the card's height */
  html body .card__back,
  html body .card.is-feature .card__back{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 420px;
    display: flex !important;
    flex-direction: column !important;
    transform: rotateY(180deg) translateZ(1px) !important;
    -webkit-transform: rotateY(180deg) translateZ(1px) !important;
    padding: 26px 22px 22px !important;
  }
  /* Back content is always readable — the scroll-reveal may never
     fire for content that starts rotated away from the viewer */
  html body .card__back .anim{
    opacity: 1 !important;
    transform: none !important;
  }
  /* NYHET stamp: on desktop it pokes past the card's top-right corner;
     on mobile that puts it outside the viewport. Keep it fully inside
     the card (16px offsets ≈ ≥12px clearance after the 8° rotation). */
  html body .card.is-feature::before{
    top: 16px !important;
    right: 16px !important;
    transform: rotate(8deg) !important;
  }
  /* …but not over the back face — it would cover the close button,
     and the back has its own NYHET label */
  html body .card.is-feature.is-flipped::before{ display: none; }
  /* Back content: readable sizes, no clipping */
  html body .card__back-title,
  html body .card.is-feature .card__back-title{
    font-size: 24px !important;
    max-width: none !important;
    margin-right: 40px !important; /* clear the close button */
  }
  html body .card__back-desc,
  html body .card.is-feature .card__back-desc{
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: none !important;
  }
  html body .card__stats{
    max-width: none !important;
    margin: 16px 0 18px !important;
  }
  html body .card__actions{
    max-width: none !important;
    flex-wrap: wrap !important;
    margin-top: auto !important;
  }
  html body .card__btn{ flex: 1 1 130px !important; }
  html body .card__name,
  html body .card.is-feature .card__name{ font-size: 20px !important; }
  html body .card__name-label{ max-width: 78% !important; }
  html body .card.is-feature .card__name-label{ padding: 13px 18px 14px !important; }

  /* ---------- 7. Footer: single column, tidy spacing ---------- */
  html body .footer{ padding-top: 64px !important; }
  html body .ft-brand img{ height: 72px !important; width: auto !important; }
  html body .ft-bottom{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 20px !important;
  }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px){
  html body section,
  html body footer,
  html body .footer,
  html body .page-hero,
  html body .hero{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body .priser-section,
  html body .price-cat,
  html body .gallery-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .hero__content:has(.hero__glass){ padding: 80px 14px 100px !important; }
  html body .hero__glass{ padding: 34px 18px !important; }
  html body .member{ padding-top: 56px !important; padding-bottom: 56px !important; }
}