/* =============================================================================
   Mobile / tablet responsive fixes — subrosa landing (start page focus)
   -----------------------------------------------------------------------------
   Loaded LAST so it overrides earlier rules by source order. Only touches small
   and medium screens; the desktop design is left completely unchanged.
   Selectors reuse the :not(#_):not(#_) specificity boost from inline-extracted.css
   where needed to match it.
   ============================================================================= */

/* ---- Hero title centering (all widths) ------------------------------------- */
/* BE XCLR8ED is white-space:nowrap and grows with the viewport (17vw). Once it is
   wider than .hero__content (max-width:1000px), text-align:center can no longer
   center it — it anchors left and drifts right on wide screens. Center it on the
   viewport with a transform that works regardless of the element's width. */
.hero__content { overflow: visible; }
.hero__title-block {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---- Top bar switch (<= 860px) --------------------------------------------- */
@media (max-width: 860px) {
  /* The full bar (Home + Solutions + LinkedIn/Careers/Capital/Get in Touch/search)
     needs ~785px; below that it runs off the edge. So hide the left side and
     center the rest well before it overflows (was 639px — too late). */
  .topbar { justify-content: center; }
  .topbar__home,
  .topbar__link--left { display: none; }
  .topbar__inner { margin-left: 0; margin-right: 0; }
}

/* ---- Phones (<= 639px) ------------------------------------------------------ */
@media (max-width: 639px) {

  /* (3) Top bar on phones: tighter padding (hide/center already done at <=860). */
  .topbar__inner { padding: 0 0.5rem; }
  .topbar__link { padding: 0 0.5rem; }
  .topbar__sep { margin: 0; }

  /* (1) Hero: shrink only the first tagline ("It's time…") on phones so it fits.
         BE XCLR8ED (.hero__title) and BE ACCELERATED (.hero__title-sub) are left
         exactly at their original size/position — do NOT touch them. */
  .sc1afad2ad2:not(#_):not(#_) { font-size: 2.2em; }
}

/* ---- Phones + tablets (<= 900px) ------------------------------------------- */
@media (max-width: 900px) {

  /* (1) Hero taglines have white-space:nowrap and spill past the edge between
         ~640 and 900px — let them wrap so they stay inside the viewport. */
  .sc1afad2ad2:not(#_):not(#_),
  .s1c58952954:not(#_):not(#_) { white-space: normal; }

  /* (2,4) "About"-style section inners have no horizontal padding, so their
           eyebrow / heading / body text hug the screen edges. Add breathing room
           (matches the already-fixed "About subrosa" block). */
  .s90f8f34ab0:not(#_):not(#_),   /* #discover — About subrosa            */
  .sbc3756ee3e:not(#_):not(#_),   /* #vision   — Who we are / Vision&Mission */
  .s10c49fc43d:not(#_):not(#_) {  /* #meaning  — Who we are / The Meaning  */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ---- Below desktop (<= 1023px) --------------------------------------------- */
@media (max-width: 1023px) {

  /* (3) The "We strive to uphold our core values…" subtitle has white-space:nowrap
         and overflows on anything narrower than the desktop layout. Let it wrap
         like every other subtitle. (Fits on one line on desktop, so unchanged there.) */
  .s86abdab991:not(#_):not(#_) { white-space: normal; }
}

/* ---- (Task 1b) Stakeholder grid "#global" — fit narrow screens ------------- */
@media (max-width: 639px) {
  /* one column so long titles fit the screen width */
  #global .glass-grid--2x2 { grid-template-columns: 1fr; }
  /* stack the italic teaser ("Finding the right partners") under the title,
     let both wrap, drop the inline dot separator */
  #global .glass-card--accordion summary { flex-wrap: wrap; padding-left: 1.25rem; padding-right: 1.25rem; }
  #global .glass-card--accordion summary h3 { white-space: normal; }
  #global .accordion-teaser { white-space: normal; flex-basis: 100%; }
  #global .accordion-sep { display: none; }
}

/* ---- (Task 3) "Get in Touch" button: flip to LinkedIn / #teamsubrosa ------- */
.cta-flip { display: inline-block; }

@media (hover: hover) and (pointer: fine) {
  .cta-flip { perspective: 900px; }
  .cta-flip__inner {
    position: relative;
    transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
    transform-style: preserve-3d;
  }
  .cta-flip:hover .cta-flip__inner,
  .cta-flip:focus-within .cta-flip__inner { transform: rotateX(180deg); }
  .cta-flip .cta-flip__front,
  .cta-flip .cta-flip__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  /* keep the flip clean: neutralise .s-cta__btn:hover translateY on the faces */
  .cta-flip .cta-flip__front:hover { transform: none; }
  .cta-flip .cta-flip__back {
    position: absolute; inset: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    white-space: nowrap;
    transform: rotateX(180deg);
  }
  .cta-flip .cta-flip__back:hover { transform: rotateX(180deg); }
}

@media (hover: none) {
  /* Touch devices have no hover: show the button + the LinkedIn link stacked so
     #teamsubrosa stays reachable (no flip). */
  .cta-flip__inner { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
  .cta-flip .cta-flip__back { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
}

/* ---- Flip button: LinkedIn icon on BOTH faces ----------------------------- */
.cta-flip__front, .cta-flip__back {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.cta-flip__front svg, .cta-flip__back svg { flex-shrink: 0; }

/* ---- Mini mobiles (<= 430px): stack the core-values 2x2 cards ------------- */
@media (max-width: 430px) {
  /* Respectful Diversity / Innovation & Integrity / XCLR8ED Speed / Commitment
     are too cramped side-by-side on ~340px screens — one per row (like the
     full-width "Make an Impact" card below them). */
  .values-grid-2x2 { grid-template-columns: 1fr; }
}

/* ---- Mini mobiles (<= 400px): top bar + HWF accordions --------------------- */
@media (max-width: 400px) {
  /* Top bar: even centered, LinkedIn/Careers/Capital/Get in Touch + search is too
     wide (~364px). Drop the search and its separator so the links fit. */
  .topbar__search { display: none; }
  .topbar__inner > .topbar__sep:last-of-type { display: none; }

  /* HWF accordions ("Rare Disease Patient Support" etc.): the nowrap title forces
     the card wider than the screen. Shrink the title + let it wrap so the buttons
     fit (at ~400px the original design already fits, so only smaller screens). */
  details[name="hwf-accordion"] summary { padding-left: 1.1rem; padding-right: 1.1rem; }
  details[name="hwf-accordion"] summary h3 { font-size: 0.92rem; white-space: normal; }
}