/* ==========================================================================
   VITARENT — this site's own code
   ==========================================================================
   The tailored half of the client package (PRINCIPLES §1b). Values live in
   themes/vitarent-2026.css; this file is selectors — rules for this one site,
   loaded last. Only what goes beyond the design system belongs here, and
   the base keeps every duty: the contrast the panel's text needs is
   measured against the panel this file paints, reveals stay owned by
   reveal.js, reduced-motion stays the base's stop.

   Two gestures live here, and nothing else:
   - the hero: a violet panel with the address prompt, media beside it
   - the signup section: newsletter and e-book side by side
   ========================================================================== */

/* --------------------------------------------------------------------
   HERO — a statement panel with an address prompt

   Not the base's full-bleed photograph: this client's first screen is a
   coloured panel that asks one question. The gradient runs 600→800, so
   the lightest thing under the text is the brand step already measured
   to carry `--color-text-on-primary`; everything darker only helps.

   The input is VISUAL ONLY for now (decided 2026-08-10): the multi-step
   property form lives in another project and is not wired yet, so the
   button is a link and the field is a promise of what arrives with it.
   -------------------------------------------------------------------- */
/* ONE violet. The hero and the calculator panel wear the same gradient
   from the same rule, so the two cannot drift apart — the calculator is
   the page the hero's button opens, and arriving somewhere that is
   almost-but-not-quite the same colour reads as a different site. */
.vr-hero,
.vr-calc-panel {
  background:
    linear-gradient(130deg,
      var(--color-primary-600) 0%,
      var(--color-primary-700) 55%,
      var(--color-primary-800) 100%);
  color: var(--color-text-on-primary);
}

.vr-hero,
.vr-calc-panel {
  /* Air between the bar and the panel (Dissi, 2026-08-10). The measure
     is the panel language's own: the same token that insets the slab's
     sides and separates two panels — the page showing around a panel,
     here between the panel and the header. Core does not do this for a
     hero because the other clients' heroes are full-bleed photographs,
     where flush against the bar is the point. The calculator panel is
     in the list because it opens its page exactly as the hero opens the
     homepage (Dissi, 2026-08-11) — same violet, same distance from the
     bar, same rhythm inside. */
  margin-block-start: var(--panel-inset, var(--space-3));
}

@media (min-width: 48rem) {
  .vr-hero,
  .vr-calc-panel {
    margin-block-start: var(--panel-inset, var(--space-6));
  }
}

.vr-hero__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 56rem) {
  .vr-hero__grid {
    /* The picture takes the larger share (Dissi, 2026-08-10). The text
       column is the constraint that decides it: the headline holds its
       two reveal-lines down to about 26rem, and the wider media column
       is whatever is left after that. */
    grid-template-columns: 0.92fr 1.08fr;
    gap: var(--space-12);
  }
}

/* The full-bleed hero owns the whole viewport width and earns the 5xl
   display step; this one shares its row with the media frame, so the
   scale the theme sets for a full-width statement breaks the headline
   into a word per line here. Its own clamp, sized to the column the
   grid actually gives it: the two reveal-lines stay two lines from
   tablet up, measured at 1280 and 1600. */
.vr-hero .display {
  font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3rem);
}

/* Everything textual inside the panel reads in the on-primary ink; the
   lead only steps back through opacity, so it can never fall out of the
   measured pairing the solid ink has. */
.vr-hero .lead {
  color: var(--color-text-on-primary);
  opacity: 0.88;
}

/* The Figma's badge: a yellow disc with the check cut dark into it.
   A bare yellow glyph on the light chip measured out of sight — yellow
   is a surface here, never an ink, which is the same lesson the button
   tokens encode. The disc is the surface, the chip's check is the ink. */
.vr-hero .eyebrow .icon {
  width: 1.25em;
  height: 1.25em;
  padding: 0.125em;
  border-radius: var(--radius-full);
  background: var(--btn-surface);
  color: var(--btn-ink);
}

/* The address prompt: one field and one button on a shared row, the
   same controls the design system already carries — this rule only
   seats them together. On a narrow screen they stack. */
.vr-hero__prompt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
  max-width: 34rem;
}

.vr-hero__prompt .field {
  flex: 1 1 16rem;
}

/* The picture is delivered already shaped — rounded corners in its own
   alpha, and the couple's heads breaking out above them. So it takes no
   frame, no radius and no ratio box: it sits in the grid cell at its
   own proportions and everything the file draws stays visible. */
.vr-hero__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* On a phone the picture ends the panel instead of floating inside it:
   full width, flush with the panel's foot, tucked in like something in
   a pocket (Dissi, 2026-08-10).

   Three declarations doing one thing. The width and the negative inline
   margins undo the container's gutter, so the photograph reaches the
   panel's own edges; the negative block end undoes the section's bottom
   padding, so its foot IS the panel's foot. `overflow: hidden` is what
   makes it read as a pocket rather than a sticker: the panel's radius
   then cuts the picture's bottom corners to the panel's own curve,
   whatever the file's corners happen to be.

   `.section--panel` deliberately refuses `overflow: hidden` in core,
   because clipping there would amputate any dropdown or sticky element
   a block later contains. Scoped to this one hero the objection does
   not apply — it holds a heading, a field and a picture, and nothing
   that can escape its box. Mobile only: from tablet up the photograph
   sits in its own grid column and the panel's padding is what puts it
   there. */
@media (max-width: 55.99rem) {
  .vr-hero {
    overflow: hidden;
    /* And less violet above the eyebrow (Dissi, 2026-08-10). The
       section rhythm's 64px opens a block that follows another one;
       this panel follows the bar, and its foot is now a photograph
       rather than air, so the top no longer has a bottom to match. 40px
       keeps the eyebrow clear of the bar without the empty band. */
    padding-block-start: var(--space-10);
  }

  /* The calculator opens its page as the hero opens the homepage, on a
     phone too — same 40px above the first line. */
  .vr-calc-panel {
    padding-block-start: var(--space-10);
  }

  /* Playing, the film takes the WHOLE panel (Dissi, 2026-08-11) — the
     pocket again, in all four directions this time: the container's
     gutter and the panel's own padding are all undone, the panel
     becomes the screen, and its radius (overflow is already hidden
     here) rounds the corners the file does not have. */
  .vr-hero__video {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    margin-block-start: calc(var(--space-10) * -1);
    margin-block-end: calc(var(--section-space) * -1);
  }

  .vr-hero__screen {
    border-radius: 0;
  }

  .vr-hero__photo {
    width: calc(100% + var(--gutter) * 2);
    /* base.css caps every image at `max-width: 100%`, which silently
       ate the width above and left the picture short of the panel's
       right edge by one gutter. */
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    margin-block-end: calc(var(--section-space) * -1);
  }
}

/* --------------------------------------------------------------------
   HERO FILM — the play button, and the hero become a screen

   The button floats over the photograph in the CTA yellow — the one
   colour on this panel that means "press here". When the film plays,
   the grid steps aside entirely and the player takes the panel: same
   violet room, different thing happening in it. The stage is built by
   clients/vitarent-2026.js on the click; these rules only dress it.
   -------------------------------------------------------------------- */
.vr-hero__media {
  position: relative;
}

.vr-hero__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-full);
  background: var(--btn-surface);
  color: var(--btn-ink);
  box-shadow: var(--shadow-lg);
  transition: transform var(--motion-duration) var(--motion-easing);
}

.vr-hero__play .icon {
  width: 1.75rem;
  height: 1.75rem;
  /* The triangle's optical centre sits left of its box centre. */
  translate: 2px 0;
}

.vr-hero__play:hover {
  transform: scale(1.06);
}

.vr-hero.is-playing .vr-hero__grid {
  display: none;
}

.vr-hero__video {
  position: relative;
}

/* The stage arrives the way everything on this site arrives: the short
   rise and the expo ease of a reveal (§12), not a cut. The panel's own
   height change is animated by clients/vitarent-2026.js — CSS cannot ease
   between two `auto` heights — and both halves sit behind the same
   reduced-motion gate the reveals answer to. */
@media (prefers-reduced-motion: no-preference) {
  .vr-hero__video {
    animation: vr-stage-in var(--reveal-duration) var(--ease-out-expo) both;
  }

  @keyframes vr-stage-in {
    from {
      opacity: 0;
      translate: 0 var(--reveal-distance);
    }
  }
}

.vr-hero__screen {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Black, not a token: the bars a player letterboxes with are black
     everywhere on earth, and a violet-tinted screen would read as a
     rendering mistake. */
  background: #000;
}

.vr-hero__screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.vr-hero__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
}

/* --------------------------------------------------------------------
   TESTIMONIAL — the author heads the card, as the Figma draws it

   The colours are the theme's (--testimonial-* slots); what is bespoke
   is the arrangement: reviewer first, words after — a face vouching for
   the text, where the base leads with the words and signs them at the
   foot. Same markup, same data, CSS order only. The common-foot logic
   the base builds with `margin-block-start: auto` inverts with it: the
   authors now share the head line, and a short quote's slack falls to
   the card's foot, which is where an empty end of a story belongs.

   The quote glyph goes with it — the Figma's cards carry none, and on
   the solid green it read as a stray mark from another voice.
   -------------------------------------------------------------------- */
.testimonial > .icon {
  display: none;
}

.testimonial__author {
  order: -1;
  margin-block-start: 0;
}

/* --------------------------------------------------------------------
   ARTICLE — the cover sits on the reading column

   The base lets the cover run the container's full width (1136px at
   1280) against a head and a body set on the measure (697px), so the
   photograph reads as breaking out of the column the article is written
   in. Drga and Ingrade were approved that way and keep it; here the
   picture takes the same width as the words (Dissi, 2026-08-10).

   `--measure` and `margin-inline: auto`, which is exactly what
   `.article__head` above it already does — so the two line up by using
   the same rule rather than by matching numbers. The base's 21:9
   letterboxing goes with it: that ratio exists to stop a full-width
   cover from filling the first screen, and at the measure a 16:9 frame
   is 392px tall and has no such power.
   -------------------------------------------------------------------- */
.article__cover {
  max-width: var(--measure);
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .article__cover .img-frame {
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------
   TESTIMONIALS — the join-them CTA shares the paging arrows' row

   The Figma puts the arrows at the row's end (the theme parks them
   there) and the CTA on the page's centre line, both on ONE line. The
   CTA follows the carousel in the flow, so on desktop it is pulled up
   over the nav row: the nav is 24px of margin plus a 44px row, and
   centring the 59px button on those arrows costs another 8 — 84px, on
   the grid, spelled in the spacing steps. Measured, not derived, which
   is why the numbers are named here.

   The arrows may come and go — carousel.js hides its nav the moment
   nothing overflows, and the preview's card stepper changes that count
   live — but the button must not move with them (Dissi, 2026-08-11:
   with two reviews the button jumped down). So on desktop the hidden
   nav KEEPS ITS SPACE: `visibility` instead of the `[hidden]` display,
   scoped to this block, and the button is pulled onto that row
   unconditionally. Two reviews render the same geometry as five with
   the arrows simply not shown — the earlier `:not([hidden])` guard
   answered the overlap and reintroduced the jump.

   Mobile is left out on purpose: there the track scrolls a card at a
   time so the arrows are effectively always present, and reserving a
   ghost row would open a hole between the cards and the button.
   -------------------------------------------------------------------- */
.vr-join {
  margin-block-start: var(--space-8);
  text-align: center;
}

@media (min-width: 56rem) {
  /* base.css enforces `[hidden] { display: none !important }`, and it is
     right to: hidden is not a suggestion. This one spot needs the OTHER
     kind of hidden — gone from sight and from the pointer but still
     holding its row, which is what `visibility` is for. The `!important`
     is the entry fee for disagreeing with a guard that is itself
     important; scoped to this block's nav and nothing else. */
  [data-block="testimonials"] .carousel__nav[hidden] {
    display: flex !important;
    visibility: hidden;
  }

  .carousel + .vr-join {
    margin-block-start: calc(-1 * (var(--space-12) + var(--space-1)));
  }
}

/* --------------------------------------------------------------------
   CALCULATOR — the lead form's column and rhythm

   The components are all core (choice cards, range, steps in form.js);
   what is bespoke is only the arrangement: one reading-width column on
   the page's centre axis, the step's fields in an even rhythm, actions
   and the consent line on the centre line the theme put everything on.
   -------------------------------------------------------------------- */
.vr-calc {
  max-width: 36rem;
  margin-inline: auto;
}

/* The panel's inks. The section is `surface-brand`, so core already
   answers the big things — the eyebrow keeps its chip, the buttons keep
   their yellow, focus outlines flip to the on-primary ink. What is left
   is the quiet text this form owns: hints, the consent line, the step
   intro — all muted colours measured for the paper, unreadable on the
   violet. They take the on-primary ink stepped back through opacity, the
   same move the hero's lead makes, so they can never fall out of the
   measured pairing. The hint INSIDE a choice card stays muted — the card
   is a white surface and the paper's answer is the right one there. */
.vr-calc-panel .lead {
  color: var(--color-text-on-primary);
  opacity: 0.88;
}

.vr-calc-panel .field__hint,
.vr-calc-panel .vr-calc__consent,
.vr-calc-panel .vr-calc__step-head p {
  color: color-mix(in srgb, var(--color-text-on-primary) 78%, transparent);
}

.vr-calc-panel .vr-calc__consent a {
  color: var(--color-text-on-primary);
}

.vr-calc-panel .field__output {
  color: var(--color-text-on-primary);
}

/* The active colour of the controls: yellow on the violet, as the Figma
   draws it. The violet the core defaults to — the slider's fill, the
   chosen card's ring — vanishes into the panel it sits on; the accent
   is the same third colour the buttons already wear, and it is what
   makes "which card did I pick" answerable at a glance (Dissi,
   2026-08-11). */
.vr-calc-panel {
  --range-accent: var(--color-accent);
  /* The chosen card wears the YELLOW, as the Figma draws it — tried in
     green for contrast's sake, put back by Dissi (2026-08-11) once the
     tick landed: the tick is what carries the state now, so the ring is
     free to be the brand's accent. The tick's check is the button's own
     dark ink, because a white check on the yellow disc would vanish —
     the same pairing the buttons already measured (12.13:1). */
  --choice-accent: var(--color-accent);
  --choice-accent-ink: var(--btn-ink);
}

/* The error message is `--color-error` everywhere else — a dark red
   measured for the paper, invisible on the violet. Mixed toward white it
   keeps the hue that says "error" and gains the luminance the slab
   demands; measured in the browser at the tokens' values. */
.vr-calc-panel .field--error .field__message {
  color: color-mix(in srgb, var(--color-error) 28%, #ffffff);
}

.vr-calc__step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.vr-calc__step > * + * {
  margin-block-start: var(--space-6);
}

.vr-calc__step-head {
  text-align: center;
}

.vr-calc__step-head p {
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
}

.vr-calc__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
}

.vr-calc__consent {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------
   E-BOOK DIALOG — the form in the popup

   The shell (box, bar, backdrop, open/close transitions) is the review
   dialog's, reused wholesale — one modal language on the site. What is
   bespoke is the content's shape: a narrower box for a three-field
   form, a centred title, an even field rhythm, and the full-width
   submit the Figma draws.
   -------------------------------------------------------------------- */
.vr-ebook {
  width: min(26rem, calc(100vw - var(--space-8)));
}

/* The shared bar spreads paging left and close right; this dialog has
   no paging, and `space-between` with one child parks the close at the
   START. Right is where a close lives. */
.vr-ebook .quote-dialog__bar {
  justify-content: flex-end;
}

.vr-ebook__title {
  font-size: var(--text-2xl);
  text-align: center;
  margin-block-end: var(--space-6);
}

.vr-ebook__form > * + * {
  margin-block-start: var(--space-4);
}

.vr-ebook__form .btn {
  width: 100%;
  margin-block-start: var(--space-6);
}

.vr-ebook__consent {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------
   SIGNUP — the newsletter and the e-book, side by side

   The one place on the site the newsletter form appears. The footer
   links here instead of carrying a second copy — the "one form on the
   site" decision (BACKLOG, contact-form row) answers newsletter forms
   the same way it answered contact forms: duplicated forms mean
   duplicated submissions to reconcile.
   -------------------------------------------------------------------- */
.vr-signup__grid {
  display: grid;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 56rem) {
  .vr-signup__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}