/* =============================================================================
   CAVALLINO V2 · HOMEPAGE
   Arrival → reservation → dining → oven → bar → horse → round table →
   Vinothek. The shared footer (base.css) closes the page.

   One cinematic, full-bleed arrival; everything after it sits inside the
   framed gutters (.shell--frame). Each chapter pairs its words with its own
   photograph rather than pinning pictures to the viewport edge. Boldness is
   spent twice only: the arrival's light and scale, and the hanging horse.
   ========================================================================== */

:root {
  /* Vertical rhythm shared by every chapter. */
  --chapter-pad: clamp(var(--s8), 8vw, var(--s10));
}

/* =============================================================================
   HERO — arrival
   The verified room photograph, graded warm (sepia, saturation, contrast)
   and lit from its own lamps. Nothing is added to or removed from the room.
   ========================================================================== */

.hero { position: relative; isolation: isolate; background: var(--espresso-900); }

/* Roughly the viewport below the masthead, so the booking instrument begins
   as soon as scrolling does. */
.hero__frame {
  position: relative;
  overflow: hidden;
  height: calc(100svh - var(--masthead-h));
  min-height: 540px;
  max-height: 940px;
}

.hero__media {
  position: absolute;
  inset: 0;
  /* Scaling from here keeps the top edge covered while the image drifts. */
  transform-origin: 50% 40%;
}
.hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pillar, lamps and frieze stay whole at desktop widths. */
  object-position: 36% 45%;
}

/* Functional legibility and depth: the lower and left axes carry the words,
   a soft vignette deepens the corners. */
.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(18, 12, 7, 0.95) 0%, rgba(18, 12, 7, 0.74) 24%, rgba(18, 12, 7, 0.22) 54%, rgba(18, 12, 7, 0) 70%),
    linear-gradient(to right, rgba(18, 12, 7, 0.66) 0%, rgba(18, 12, 7, 0.2) 42%, rgba(18, 12, 7, 0) 62%),
    radial-gradient(130% 95% at 62% 32%, rgba(18, 12, 7, 0) 58%, rgba(18, 12, 7, 0.5) 100%);
}

.hero__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding-bottom: clamp(var(--s7), 8svh, var(--s9));
}
.hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--brass-bright);
}
.hero__title {
  margin-top: var(--s3);
  color: var(--ivory);
  font-size: clamp(2.3rem, 7.2vw, 3.2rem);
  text-wrap: balance;
}
/* From tablet width the greeting stands on one line, sized to fit it. */
@media (min-width: 760px) {
  .hero__title { white-space: nowrap; font-size: min(5.4vw, 5.6rem); }
}
.hero__lead {
  margin-top: var(--s5);
  max-width: 46ch;
  color: rgba(247, 242, 231, 0.88);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__more { border-color: rgba(247, 242, 231, 0.42); color: var(--ivory); }
.hero__more:hover { border-color: var(--brass-bright); }

/* =============================================================================
   BOOKING INSTRUMENT — functional utility
   Locked shape: DATE | TIME | GUESTS | RESERVE. It follows the arrival
   directly and no longer crosses into it.
   ========================================================================== */

.booking { position: relative; padding-block: clamp(var(--s6), 4vw, var(--s8)); }

.booking__instrument {
  background: var(--ground);
  border: var(--bd-hair) solid var(--rule);
  border-radius: var(--r-ctl);
  padding: clamp(var(--s5), 2.4vw, var(--s7));
}

.booking__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s5);
  margin-bottom: clamp(var(--s5), 2vw, var(--s6));
}
.booking__title { font-size: var(--fs-h3); }
.booking__note { margin: 0; font-size: var(--fs-small); color: var(--on-ground-muted); }

.booking__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: end;
}
.booking__form .action--primary {
  min-height: 60px;
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
}

/* The status line. Empty it has no box at all; it states a fact and is never
   styled as a success. */
.booking__status { margin: 0; }
.booking__status:not(:empty) {
  margin-top: clamp(var(--s5), 2vw, var(--s6));
  padding-left: var(--s4);
  border-left: var(--bd-state) solid var(--accent);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--on-ground);
}

/* =============================================================================
   CHAPTER — the shared frame
   One column by default; the twelve-column compositions live in the desktop
   block only.
   ========================================================================== */

.chapter { position: relative; padding-block: var(--chapter-pad); }

.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(var(--s5), 3vw, var(--s7));
}

.chapter__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--tr-display);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.chapter__text { margin-top: var(--s4); max-width: 40ch; color: var(--on-ground-muted); }

/* A future route, on a rule: plain text — no link, no arrow, no pointer and
   no focus. The round that builds the page turns it into a link. */
.route-mark {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: var(--s6) 0 0;
  color: var(--on-ground-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  cursor: default;
}
.route-mark::before {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  translate: 0 -0.32em;
  background: currentColor;
  opacity: 0.5;
}

/* =============================================================================
   DINING — daylight
   ========================================================================== */

.dining__media { aspect-ratio: 4 / 3; }
.dining__media > img { object-position: 50% 52%; }
/* The second-room photograph sits above the rule; the rule above the title. */
.dining__second { aspect-ratio: 4 / 3; margin-bottom: var(--s5); }
.dining__title { padding-top: var(--s5); border-top: var(--bd-hair) solid var(--rule); white-space: nowrap; font-size: min(var(--fs-h1), 9vw); }

/* =============================================================================
   FIRE — espresso begins
   ========================================================================== */

.fire__title {
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.fire__media { position: relative; }
.fire__photo { aspect-ratio: 4 / 3; }
.fire__photo > img { object-position: 50% 55%; }

/* The one graphic label on the page: static, brass, over the plaster corner
   and clear of the fire. */
.fire__tag {
  position: absolute;
  top: calc(-1 * var(--s4));
  left: calc(-1 * var(--s3));
  z-index: 1;
  margin: 0;
  padding: var(--s2) var(--s4);
  background: var(--brass-bright);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  rotate: -3deg;
}

/* =============================================================================
   BAR — the same espresso ground, a quieter register
   ========================================================================== */

.bar__media { aspect-ratio: 16 / 10; }
.bar__media > img { object-position: 50% 85%; }
.bar__say { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: var(--bd-hair) solid var(--rule); }
.bar__title { font-size: var(--fs-h2); font-weight: 500; }
.bar__text { margin-top: 0; }

/* =============================================================================
   THE HORSE — one monumental, centred moment
   The artwork is never cropped, recoloured, filtered or reshaped. It hangs
   from its two upper rings: every rotation pivots at 50% 3%, rests at zero
   and stays within a few degrees, so it reads as depth, never as a tilt.
   ========================================================================== */

.horse { padding-block: var(--chapter-pad) calc(var(--chapter-pad) * 1.1); }

.horse__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.horse__title { max-width: 16ch; }

.horse__figure {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: clamp(var(--s6), 4vw, var(--s8)) 0 0;
  perspective: 1400px;
}
.horse__mount {
  width: min(100%, 58svh, 520px);
  transform-origin: 50% 3%;
  transform-style: preserve-3d;
}
.horse__art {
  width: 100%;
  height: auto;
  transform-origin: 50% 3%;
}
.horse__text {
  margin: clamp(var(--s6), 4vw, var(--s8)) auto 0;
  max-width: 46ch;
  color: var(--on-ground-muted);
}

/* =============================================================================
   SPECIAL HOUSE EXPERIENCE — on sand
   ========================================================================== */

.special[data-mode] {
  --ground: var(--sand);
  --rule: rgba(25, 21, 18, 0.18);
}

.special__media { aspect-ratio: 3 / 2; }
.special__media > img { object-position: 50% 58%; }
.special__text {
  margin-left: clamp(0px, 12vw, 96px);
  padding-top: var(--s4);
  border-top: var(--bd-hair) solid var(--rule);
  max-width: 34ch;
  text-wrap: pretty;
}

/* =============================================================================
   VINOTHEK — an editorial introduction
   ========================================================================== */

/* Two photographs: the room above left, a wine detail overlapping below right. */
.vinothek__pair { position: relative; padding-bottom: 18%; }
.vinothek__media { aspect-ratio: 4 / 3; width: 82%; }
.vinothek__detail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  aspect-ratio: 3 / 4;
  outline: 8px solid var(--ground);
}
.vinothek__media > img { object-position: 36% 50%; }

.vinothek__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--accent-text);
}
.vinothek__title {
  margin-top: var(--s3);
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.vinothek__lead { margin-top: var(--s5); }
.vinothek__pickup { margin-top: var(--s3); color: var(--on-ground-muted); }

.vinothek__cta { color: var(--on-ground); font-size: var(--fs-body); }
.vinothek__cta::before { width: 48px; background: var(--accent); opacity: 1; }

/* =============================================================================
   MOTION
   Scroll-linked, reversible in both directions and gated on no-preference
   explicitly: the global reduced-motion rule shortens durations, which does
   not stop a scroll-linked animation. The heading is never animated.
   ========================================================================== */

@keyframes hero-settle {
  from { transform: none; }
  to   { transform: translate3d(0, 4%, 0) scale(1.1); }
}

@keyframes horse-hang {
  0%       { transform: rotateX(3deg); }
  45%, 55% { transform: rotateX(0deg); }
  100%     { transform: rotateX(-2.5deg); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__frame { view-timeline: --hero block; }
    .hero__media {
      animation: hero-settle linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 75%;
    }

    .horse__mount {
      animation: horse-hang linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet and up ------------------------------------------------------- */
@media (min-width: 760px) {
  .booking__form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s5) var(--s6);
  }
  .booking__form .booking__submit { grid-column: 1 / -1; }
}

/* --- Desktop composition ------------------------------------------------- */
@media (min-width: 1024px) {
  /* DATE | TIME | GUESTS | RESERVE, on one confident line. */
  .booking__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
    gap: var(--s6);
  }
  .booking__form .booking__submit { grid-column: auto; }
  .booking__form .field + .field {
    padding-left: var(--s6);
    border-left: var(--bd-hair) solid var(--rule);
  }

  .chapter__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 40px);
  }

  /* Dining: the photograph inside the frame, the invitation on its lower edge. */
  .dining__media {
    grid-column: 1 / 9;
    aspect-ratio: 3 / 2;
    max-height: calc(100svh - 200px);
  }
  .dining__say { grid-column: 9 / 13; align-self: end; }
  .dining__title { font-size: min(var(--fs-h1), 2.6vw); }

  /* Fire: the words lead into the photograph beside them. */
  .fire__say { grid-column: 1 / 6; grid-row: 1; align-self: center; }
  .fire__media { grid-column: 6 / 13; grid-row: 1; }

  /* Bar: a framed panorama, its words on one line beneath. */
  .bar__media {
    grid-column: 1 / 13;
    aspect-ratio: 21 / 9;
    max-height: calc(100svh - 240px);
  }
  .bar__say {
    grid-column: 1 / 13;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 40px);
    align-items: baseline;
  }
  .bar__title { grid-column: 1 / 5; }
  .bar__text { grid-column: 5 / 10; }

  .horse__mount { width: clamp(360px, min(44vw, 64svh), 680px); }

  /* Round table: a centred plate, its title above, its sentence stepping in. */
  .special__title { grid-column: 3 / 11; grid-row: 1; }
  .special__media {
    grid-column: 3 / 11;
    grid-row: 2;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - 220px);
  }
  .special__text { grid-column: 7 / 11; grid-row: 3; margin-left: 0; }

  /* Vinothek: an upright photograph with its words beside it. */
  .vinothek__pair { grid-column: 1 / 7; grid-row: 1; padding-bottom: 16%; }
  .vinothek__media { aspect-ratio: 4 / 5; max-height: calc(100svh - 260px); width: 78%; }
  .vinothek__detail { width: 42%; }
  .vinothek__say { grid-column: 8 / 13; grid-row: 1; align-self: center; }
}

/* --- Wide desktop -------------------------------------------------------- */
@media (min-width: 1440px) {
  .hero__media > img { object-position: 40% 45%; }
}

/* --- Portrait screens: lamps and the grape frieze carry the arrival ------- */
@media (max-width: 759.98px) {
  .hero__media > img { object-position: 62% 40%; }
}

/* --- Small phones -------------------------------------------------------- */
@media (max-width: 560px) {
  .hero__frame { min-height: 520px; }
  .hero__actions .action { flex: 1 1 auto; }

  .booking__instrument { padding: var(--s5) var(--s4); }
  .booking__form .action--primary { width: 100%; }

  .special__text { margin-left: 0; }
}

/* A photograph still to come: a quiet tinted panel in the same frame the
   photograph will fill, so the layout is final before the picture arrives. */
.photo-slot {
  display: block;
  background:
    linear-gradient(135deg, rgba(25, 21, 18, 0.05), rgba(25, 21, 18, 0.12)),
    var(--ground-sunken, #E1D5BF);
  border-radius: var(--r-media, 0);
}