/* ==========================================================================
   Norealle — mobile.css
   Phone and small-tablet refinements, loaded after every other stylesheet.
   Every rule sits inside a max-width query, so desktop is untouched.
   ========================================================================== */

/* Short language labels exist in the markup but only show on small phones.
   site.css fades every span inside .lang (meant for the "/" divider), so the
   label spans are reset to full strength; the link itself still sets opacity. */
.lang__short{display:none}
.lang .lang__full,.lang .lang__short{opacity:1}

@media (max-width:899px){

  /* ------------------------------------------------------------ header -- */
  .hdr{padding:10px var(--gut);gap:12px}
  .hdr__mark{font-size:.9rem;letter-spacing:.28em;padding:12px 0}
  .hdr__right{gap:16px}
  .hdr .btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px}

  /* bigger invisible hit areas on the language links, same look */
  .lang a{position:relative}
  .lang a[aria-current="false"]{opacity:.72}
  .lang a::after{content:"";position:absolute;inset:-12px -8px}

  /* anchors land below the fixed header, not under it */
  #formula,#ritual,#buy{scroll-margin-top:64px}

  /* -------------------------------------------------------------- hero -- */
  /* site.css hides the Scroll hint under 900px, but a later rule re-shows it
     and it lands on top of the second button. */
  .hero .hero__cue{display:none}

  /* bottle in the upper part of the screen, copy underneath it */
  .hero__canvas{
    top:-2vh;top:-2svh;
    height:64vh;height:64svh;
    width:auto;max-width:none;
  }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(19,17,16,.40) 0%,rgba(19,17,16,.08) 14%,rgba(19,17,16,0) 28%,
      rgba(19,17,16,.18) 44%,rgba(19,17,16,.70) 58%,rgba(19,17,16,.93) 70%,
      rgba(19,17,16,1) 84%);
  }
  .hero__copy{padding-bottom:max(26px,env(safe-area-inset-bottom))}
  .hero h1{
    max-width:none;
    font-size:clamp(1.9rem,8.6vw,2.6rem);
    line-height:1.08;
    text-wrap:balance;
  }
  .hero__sub{margin-top:.9rem;font-size:.98rem;line-height:1.55}

  /* one obvious action: full-width filled Buy, the formula as a quiet link */
  .hero__cta{flex-direction:column;align-items:stretch;gap:4px;margin-top:1.5rem}
  .hero__cta .btn{text-align:center}
  .hero__cta .btn:first-child{
    background:var(--terracotta);border-color:var(--terracotta);color:var(--warm-white);
    padding:17px 20px;
  }
  .hero__cta .btn + .btn{
    border-color:transparent;padding:13px 0;
    text-decoration:underline;text-underline-offset:6px;
    text-decoration-color:rgba(243,236,227,.35);
  }

  /* ------------------------------------------------------- ingredients -- */
  /* On desktop the card in the middle of the screen is highlighted and the
     rest are dimmed. On a phone that dims the card you are still reading. */
  .ing .card{opacity:1}
  .ing__cap{letter-spacing:.08em;line-height:1.35;gap:6px}
  .card__inci{font-size:.74rem}

  /* ------------------------------------------------------------ labels -- */
  .eyebrow{font-size:.74rem}

  /* --------------------------------------------------------------- buy -- */
  .buy .btn--fill{display:block;text-align:center;padding:18px 20px}

  /* ------------------------------------------------------------ footer -- */
  .ftr__legal a{display:inline-block;padding:12px 0;margin:-12px 0}
}

/* Small phones: "EN / FR" in the header instead of the full names, so the Buy button fits.
   The full names stay in the page for screen readers. */
@media (max-width:520px){
  .hdr .lang__short{display:inline}
  .hdr .lang__full{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}

/* Phones turned sideways: the hero is short, so keep the bottle out of the copy. */
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  .hero__stage{min-height:0;justify-content:flex-start}
  .hero__canvas{height:96vh;height:96svh;top:2vh;left:auto;right:0;transform:none}
  .hero__scrim{
    background:linear-gradient(90deg,rgba(19,17,16,.95) 0%,rgba(19,17,16,.85) 45%,rgba(19,17,16,.2) 70%,rgba(19,17,16,0) 85%);
  }
  .hero__copy{justify-content:center;padding-top:56px;padding-bottom:0;max-width:64%;margin:0}
  .hero__sub{font-size:.92rem}
  .hero h1{font-size:clamp(1.6rem,4.6vw,2.2rem)}
  .hero__cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:1rem}
  .hero__cta .btn + .btn{padding:10px 0}
}