/**
 * GETU Shopping — "Xaropes para cafeterias" campaign landing page.
 *
 * PRODUCTION MAPPING POINT
 * ------------------------
 * Deploy to wp-content/themes/bricks-child/assets/css/getu-cafeterias.css.
 * Enqueued site-wide by getu-chrome.php; component-scoped, so it no-ops off
 * the /para-cafeterias/ page (nothing else carries these .lp-* classes).
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Ported verbatim from landing-cafeterias.html's share of style.css — ONLY the
 * classes that page needs that aren't already global. Reused as-is and NOT
 * restated here: .grain / .wine-atmos / .kicker / the .btn family (getu-chrome.css),
 * .media (getu-cold-brew.css), .reveal / .reveal-d1..4 (getu-home.css). The
 * --ease-out / --ease-spring / --shadow-float tokens resolve against the aliases
 * getu-chrome.css already defines, so the reference values carry over unchanged.
 *
 * Built mobile-first, exactly as the reference: the phone layout is the base and
 * the desktop composition is layered on at >=640px / >=1024px.
 */

/* --- Fluid type. One ramp from 320 to 1440+; upper clamps land on the approved
       desktop sizes (76px / 52px). --- */
.lp-h1 { font-size: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem); line-height: .95; }
.lp-h2 { font-size: clamp(1.75rem, 1rem + 3.1vw, 3.25rem); line-height: 1.06; }
.lp-h2-cta { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.875rem); line-height: 1.08; }
.lp-lead { font-size: clamp(1rem, .95rem + .28vw, 1.125rem); }
/* Measure: never let body copy run past a comfortable line length. */
.lp-measure { max-width: 58ch; }

/* --- Vertical rhythm. One fluid scale so sections never stack up on phones
       nor gape on desktop. --- */
.lp-section { padding-block: clamp(3.25rem, 1.5rem + 5.4vw, 6rem); }
/* The hero carries the header above it, so it needs less top room than a
   mid-page section — and on a short phone every pixel decides whether the CTA
   lands above the fold. */
.lp-hero-inner { padding-block: clamp(2.25rem, .5rem + 5.4vw, 6rem); }
.lp-section-head { margin-bottom: clamp(2.5rem, 1rem + 4.6vw, 3.5rem); }

/* --- Hero --- */
/* Desktop: copy sits in the dark left third of the photograph. */
.lp-hero-scrim {
  background:
    linear-gradient(100deg, rgba(20,6,10,.94) 0%, rgba(20,6,10,.80) 34%, rgba(20,6,10,.42) 58%, rgba(20,6,10,.18) 100%),
    radial-gradient(110% 80% at 12% 10%, rgba(110,26,42,.38), transparent 60%);
}
/* Below lg the copy spans the full width, so the scrim darkens the whole frame. */
@media (max-width: 1023px) {
  .lp-hero-scrim {
    background:
      linear-gradient(180deg, rgba(20,6,10,.90) 0%, rgba(20,6,10,.76) 46%, rgba(20,6,10,.93) 100%),
      radial-gradient(120% 70% at 20% 6%, rgba(110,26,42,.34), transparent 62%);
  }
  /* Keep the bottles — the subject — in frame as the viewport narrows. */
  .lp-hero-img { object-position: 72% center; }
}

/* On phones the promise should reach the CTA before the fold, so the three USPs
   move below it and read as supporting proof instead of a gate. */
@media (max-width: 639px) {
  .lp-hero-copy { display: flex; flex-direction: column; }
  .lp-hero-cta { order: 2; margin-top: 1.75rem; }
  .lp-hero-usps { order: 3; margin-top: 2rem; }
}

/* --- "Como funciona": a row per step on phones (scannable, half the height),
       the mockup's four centred columns from lg up. --- */
.lp-step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.125rem; text-align: left; }
.lp-step-figure { width: 60px; height: 60px; }
.lp-step-figure svg { width: 24px; height: 24px; }
.lp-step-num { width: 26px; height: 26px; font-size: 14px; }
@media (min-width: 1024px) {
  .lp-step { display: block; text-align: center; }
  .lp-step-figure { width: 88px; height: 88px; }
  .lp-step-figure svg { width: 30px; height: 30px; }
  .lp-step-num { width: 32px; height: 32px; font-size: 16px; }
  .lp-step-title { margin-top: 1.5rem; }
  .lp-step-text { max-width: 240px; margin-inline: auto; }
  /* The rule carries the sequence, so it is drawn only between siblings — never
     after the last one, and only where the steps sit side by side. */
  .lp-step + .lp-step::before {
    content: ""; position: absolute; top: 2.75rem; right: calc(50% + 2.75rem); width: calc(100% - 5.5rem); height: 1px;
    background: linear-gradient(to right, transparent, rgba(110,26,42,.28));
  }
}

/* --- Solution cards: an image-left row on phones, the mockup's stacked card
       from sm up. Reordered rather than shrunk — five 4:3 cards in a column
       turned the section into ~2.4k px of scrolling. --- */
.lp-solution { display: grid; grid-template-columns: clamp(96px, 27vw, 116px) 1fr; align-items: stretch; min-height: 104px; }
/* Width comes from the grid column and height from the row — no aspect-ratio here,
   or a taller card (three lines of copy) would widen its own image. */
.lp-solution-media { height: 100%; }
.lp-solution-body { padding: .875rem 1rem; align-self: center; }
.lp-solution-icon { display: none; }
@media (min-width: 640px) {
  .lp-solution { display: block; min-height: 0; }
  .lp-solution-media { aspect-ratio: 4 / 3; height: auto; }
  .lp-solution-body { padding: 1.25rem; }
  .lp-solution-icon { display: inline-grid; }
}

/* --- Lift shared by the step, stat, quality and solution cards. Hover-only, so
       it never fires on touch. --- */
@media (hover: hover) {
  .lp-card { transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out); }
  .lp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
  .lp-card img { transition: transform .7s var(--ease-out); }
  .lp-card:hover img { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-card:hover, .lp-card:hover img { transform: none; }
}