/* MAGMA — system-wide responsive layer.

   Desktop base is 1280px. Fluid values (bands, gutters, type) live on the
   elements themselves as clamp(); this file carries only what an inline style
   cannot express: media queries that restructure layout.

   Breakpoints: 1024 (tablet landscape) / 900 / 768 / 680 / 600 / 460 / 420.
   Components opt in with data-magma="…"; page templates with data-r="…". */

/* ── masthead ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* four dropdown items with carets need ~615px at the 64px gap, which overruns
     the rail before the burger breakpoint — the gap closes first. */
  [data-magma="utility-nav"] { gap: 32px !important; }
  [data-magma="utility-search"] { flex-shrink: 1; min-width: 0; }
  /* 140px of placeholder measured by scrollWidth, +8 for the caret */
  [data-magma="utility-search"] input { width: 148px !important; min-width: 0; }
}
@media (max-width: 940px) {
  [data-magma="utility-nav"] { gap: 24px !important; }
  [data-magma="utility-search"] { max-width: 216px; }
}
@media (max-width: 720px) {
  [data-magma="utility-bar"] { height: 44px !important; }
  [data-magma="utility-nav"] { display: none !important; }
  [data-magma="utility-burger"] { display: grid !important; }
}


@media (max-width: 640px) {
  /* below this the field is compact on purpose and the placeholder ellipsizes */
  [data-magma="utility-search"] { max-width: 172px; }
  [data-magma="utility-search"] input { width: 112px !important; }
}
@media (max-width: 460px) {
  /* The field stays — it just becomes icon-width until focus opens it. */
  [data-magma="utility-search"] input { width: 0 !important; padding: 0 !important; }
  [data-magma="utility-search"]:focus-within input { width: 132px !important; }
}
@media (max-width: 600px) {
  [data-magma="site-header"] { height: 64px !important; padding-block: 12px !important; }
  [data-magma="header-actions"] { gap: 8px !important; }
  [data-magma="header-secondary"] { display: none !important; }
}
@media (max-width: 420px) {
  [data-magma="header-linkedin"] { display: none !important; }
}

/* ── footer ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-magma="footer-grid"] { flex-wrap: wrap !important; gap: 40px !important; }
  [data-magma="footer-grid"] > * { flex: 1 1 200px !important; }
}
@media (max-width: 1024px) {
  /* nowrap + flex-shrink:0 is what keeps the row on one line at 1280; once the
     row cannot hold 703px it has to wrap, and the plates must be allowed to shrink
     or they run off the screen. */
  /* Only the WRAPPING changes. The plates are certification artwork at fixed
     proportions (117–150 × 41) — stretching them to a share of the row distorts
     the logos, so they keep their own size and simply reflow. */
  [data-magma="footer-badges"] { flex-wrap: wrap !important; flex-shrink: 1 !important; justify-content: flex-start !important; }
}
@media (max-width: 600px) {
  [data-magma="footer-badges"] { gap: 20px !important; }
  [data-magma="footer-stores"] { flex-direction: row !important; flex-wrap: wrap !important; }
}

/* ── content primitives ───────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-magma="story-block"] { flex-direction: column !important; }
  [data-magma="story-media"] { flex: 0 0 auto !important; width: 100% !important; min-height: 46vw !important; }
  [data-magma="legal-layout"] { gap: 40px !important; }
  [data-magma="legal-toc"] { position: static !important; width: 100% !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 14px 24px !important; }
}

/* ── overlays ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [data-magma="modal-panel"] { max-width: none !important; }
  [data-magma="modal-scrim"] { padding: 16px !important; }
}

/* ── hero fills the first screen; the chrome above it shrinks with the viewport ── */
@media (max-width: 768px){[data-r="hero-shell"]{min-height:calc(100svh - 104px)!important}}
@media (max-width: 460px){[data-r="hero-shell"]{min-height:calc(100svh - 88px)!important}}
/* On a laptop-height screen the sketch's generous hero gaps would push the fold down,
   so the vertical rhythm and the map band compress to keep the hero to one screen.

   The height belongs to the FRAME. This rule used to name [data-r="hero-map"], back
   when the map was the band itself; once it was wrapped in a frame — to clip the
   parallax and carry the opacity — the frame took the band's height and this rule
   went on shrinking the layer inside it. The frame stayed 22.8vw, the layer became
   14vw, and the difference showed as a grey strip under the globes on every screen
   shorter than 900px: 40px at 700 wide, 128px at 1440. */
@media (max-height: 900px){
  [data-r="hero-frame"]{height:clamp(120px,14vw,200px)!important}
  [data-r="hero-facts"]{margin-top:clamp(28px,5vw,64px)!important}
  [data-r="hero-cta"]{margin-top:clamp(20px,2.4vw,32px)!important}
}

/* An <x-import> mount is display:contents, so the card is the cell's grandchild and
   no `flex` on the mount reaches it — cards then size to their own copy and come out
   unequal. A grid cell stretches whatever lands in its column, whatever the depth. */
[data-r~="cell"]{display:grid !important;grid-template-columns:1fr}

/* ── news feed: three equal posts, wrapping down the breakpoints ────── */
[data-r="feed"] > *{flex:1 1 0!important;min-width:0}
@media (max-width: 1024px){
  [data-r="feed"]{display:grid!important;grid-template-columns:1fr 1fr!important}
  [data-r="feed"] > *{flex:none!important}
}
@media (max-width: 680px){[data-r="feed"]{grid-template-columns:1fr!important}}

/* ── page-template structures ─────────────────────────────────────── */
@media (max-width: 1024px) {
  [data-r="row"] { gap: 40px !important; flex-wrap: wrap !important; }
  [data-r="row-head"] { max-width: none !important; flex: 1 1 100% !important; }
  [data-r="cards"] { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: stretch !important; }
  [data-r="cards"] > * { flex: none !important; }
  [data-r="stagger"] { margin-top: 0 !important; }
  [data-r="slider-nav"] > p { width: 100% !important; }
  /* Same trap as the split rows: `flex:1 1 0` on the questions column becomes a
     HEIGHT basis once the row stacks, which leaves an empty canvas under the list. */
  [data-r="faq"] { flex-direction: column !important; }
  [data-r="faq"] > * { flex: 0 0 auto !important; justify-content: flex-start !important; }
  /* The desktop crop (134%×224% at 49.8%/6.2%) frames the statue inside a 560×504
     box; in a phone-width box that same crop lands on the empty sky above it. */
  /* The plate is an empty div with only a background, so in a stacked column with
     align-items:flex-start its width collapses to 0 — it reserved height and showed
     nothing. It has to stretch. */
  [data-r="faq-img"] { align-self: stretch !important; width: 100% !important;
    min-height: 0 !important; height: clamp(200px,46vw,380px) !important;
    background-size: cover !important; background-position: 50% 26% !important; }
}

@media (max-width: 900px) {
  [data-r="decor"] { display: none !important; }
  [data-r="hero-body"] { padding-left: clamp(16px,2.5vw,36px) !important; }
  [data-r="hero-title"] { padding-right: clamp(16px,4vw,56px) !important; }
  [data-r~="umbrella"] { min-height: 0 !important; }
  /* the extra bottom padding exists only to clear the 85px logo strip */
  [data-r~="umbrella"]:has([data-r~="strip"]) { padding-bottom: 140px !important; }
  [data-r="hero"] { min-height: 0 !important; padding-bottom: 72px !important; }
  /* Once the row stacks, the source's flush-left glyph bleed stops making sense
     and the copy would touch both frame edges. */
  [data-r="row"] { padding: 28px 24px !important; }
  [data-r="row-body"] { flex-wrap: wrap !important; gap: 24px !important; }
  [data-r="split"] { flex-direction: column !important; align-items: flex-start !important; gap: 32px !important; }
  [data-r="stats"] { flex-wrap: wrap !important; gap: 28px 40px !important; }
  [data-r~="panel"] { padding: 40px 28px !important; }
}

@media (max-width: 680px) {
  /* Two cells: the headline text stacks in the left cell, the print sits in the
     right one and spans both text rows. */
  [data-r="headline"] { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "line-a art" "line-b art" !important; align-items: start !important; justify-items: start !important; column-gap: 14px !important; row-gap: 0 !important; }
  [data-r="headline"] > span:nth-child(1) { grid-area: line-a; }
  [data-r="headline"] > span:nth-child(3) { grid-area: line-b; }
  [data-r="hero-art"] { grid-area: art; align-self: center !important; justify-self: end !important; margin: 0 !important; }
  [data-r="facts"] > * { width: 100% !important; }
  [data-r="cta"] { flex-direction: column !important; width: 100% !important; }
  [data-r="cards"] { grid-template-columns: 1fr !important; }
  [data-r="row"] { gap: 24px !important; padding: 24px 20px !important; }
  [data-r="row-head"] { gap: 16px !important; }
  [data-r="slider-nav"] { flex-wrap: wrap !important; }
  [data-r="rate-table"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="rate-table"] > *:nth-child(4n+1) { grid-column: 1 / -1; }
}

/* ── mobile hero: the desktop composition is rebuilt, not squeezed ──── */
@media (max-width: 680px) {
  /* No forced screen height on phones: the composition is ~520px tall, so a
     100svh shell split the slack above and below the headline. */
  [data-r="hero-shell"] { min-height: 0 !important; }
  [data-r="hero"] { justify-content: flex-start !important; padding-top: 24px !important; padding-bottom: 44px !important; }
  [data-r="hero-title"] { padding-top: 14px !important; }
  [data-r="hero-title"] { padding-right: var(--layout-gutter) !important; }
  [data-r="hero-script"] { margin-left: 0 !important; margin-top: 2px !important; }
  [data-r="hero-facts"] { margin-top: 28px !important; flex-direction: column !important; gap: 0 !important; }
  [data-r="hero-facts"] > * { width: 100% !important; flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; padding: 14px 0 !important; border-top: 1px solid var(--magma-grey-200) !important; }
  [data-r="hero-cta"] { margin-top: 28px !important; gap: 24px !important; flex-direction: column !important; align-items: stretch !important; }
  [data-r="hero-buttons"] { width: 100% !important; flex-direction: column !important; }
  [data-r="hero-pair"] { gap: 24px !important; }
  [data-r="hero-pair"] > * { width: auto !important; flex: 1 1 44% !important; }
}

@media (max-width: 600px) {
  /* The photo band moves into the H1 block: at phone width a separate full-bleed
     strip after the CTA reads as a stray image, and the hemispheres are unreadable.

     Again the frame, not the layer: hiding the layer alone left the frame holding
     160px of empty ground where the band had been. */
  [data-r="hero-frame"] { display: none !important; }
  [data-r="hero-art"] { display: block !important; }
}
@media (max-width: 420px) {
  [data-r="hero-art"] { width: 96px !important; height: 92px !important; margin-top: 14px !important; }
}

/* ── mobile vertical rhythm ─────────────────────────────────────────── */
/* Every section's top padding is a clamp whose MINIMUM (64–80px) was sized for a
   tablet, so at 375px the vw term collapses and phones inherit desktop-scale
   gaps. Three steps replace the seven ad-hoc minima. */
@media (max-width: 680px) {
  section[data-screen-label] { padding-top: 52px !important; }
  section[data-screen-label="Art of payments"] { padding-bottom: 36px !important; }
  section[data-screen-label="FAQ"] { padding-bottom: 48px !important; }
  section[data-screen-label="Why choose Magma"] > [data-r="split"] { padding-bottom: 44px !important; }
  [data-r~="umbrella"] > div:nth-child(2) { padding-top: 32px !important; }
  [data-r~="umbrella"]:has([data-r~="strip"]) { padding-bottom: 112px !important; }
}
@media (max-width: 460px) {
  section[data-screen-label] { padding-top: 40px !important; }
  section[data-screen-label="Art of payments"] { padding-bottom: 28px !important; }
  section[data-screen-label="FAQ"] { padding-bottom: 36px !important; }
  section[data-screen-label="Why choose Magma"] > [data-r="split"] { padding-bottom: 32px !important; }
}

@media (max-width: 460px) {
  [data-r="pair"] { flex-direction: column !important; gap: 20px !important; }
  [data-r="hero-pair"] { gap: 16px !important; }
  [data-r="hero-pair"] > * { flex: 1 1 44% !important; }
  [data-r="row-head"] > [data-r="glyph"] { width: 64px !important; }
}

/* Specimen helper: pins the desktop end of the fluid ramp so type cards and
   print/export contexts show the source values rather than a viewport-scaled one. */
.magma-type-fixed{--fs-hero:122px;--fs-mega:80px;--fs-display:72px;--fs-brandline:35px;--fs-headline:30px;--fs-title:24px;--fs-subhead:20px}

/* The component-built kit tightens the same frame padding on small screens. */
@media (max-width: 900px) { [data-magma="highlight-row"] { padding: 28px 24px !important; } }
@media (max-width: 680px) { [data-magma="highlight-row"] { padding: 24px 20px !important; gap: 24px !important; } }

/* media rows in the content templates: image and copy swap to stacked */
@media (max-width: 900px){
  [data-r="media-row"]{flex-direction:column !important}
  [data-r="media-row"] > *{flex:1 1 auto !important;min-height:0 !important}
  [data-r="media-row"] > *:last-child{min-height:46vw !important;max-height:420px !important}
}

/* statement panels: content height on phones, no desktop-scale floor or padding */
@media (max-width: 680px){
  [data-r="umbrella-body"]{padding-top:32px !important;padding-bottom:32px !important}
  [data-r~="umbrella"]:has([data-r~="strip"]) [data-r="umbrella-body"]{padding-bottom:0 !important}
}

/* A px flex-basis on a split child becomes a HEIGHT once the row turns into a
   column, which inflates the block and strands its CTA at the bottom. */
@media (max-width: 900px){
  [data-r="split"] > *{flex:0 0 auto !important}
}

/* The logo strip is a strip, not a split.
 *
 * [data-r="split"] turns into a column at 900 because most splits are a block of
 * copy beside a call — stacked, they read. The regulator marks are not that: five
 * of them in a column stand five rows tall and the plate becomes a page. So the
 * strip opts out of the column and lays its marks on a grid instead, three across
 * on a tablet and two on a phone.
 *
 * The marks are scoped by section, not by the shared "strip" hook — the ink panel
 * names its frosted bar the same thing.
 *
 * height:44px is an inline style on the image, so it takes !important to unset:
 * a mark as wide as ICA has to give up height to fit a 141px cell, or it spills
 * out of the grid it was put in to contain it.
 */
@media (max-width: 900px) {
  [data-part="logo-strip"] [data-r="split"],
  [data-section="logo-strip"] [data-r="split"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 28px 24px !important;
  }

  [data-part="logo-strip"] [data-r="split"] > *,
  [data-section="logo-strip"] [data-r="split"] > * {
    max-width: 100% !important;
    justify-content: center !important;
  }

  [data-part="logo-strip"] [data-r="split"] img,
  [data-section="logo-strip"] [data-r="split"] img {
    height: auto !important;
    max-height: 44px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 680px) {
  [data-part="logo-strip"] [data-r="split"],
  [data-section="logo-strip"] [data-r="split"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
  }
}