/* Stays — the five homes as editorial rows, one per screen-width band, the photograph and the
   copy trading sides down the page. Measured from the approved comp.

   This file holds structure only. Every colour reads a --stays-* role with a fallback to a
   global role; css/theme.css sets the values. Nothing here paints a colour literal. */

.stays {
  background: var(--color-ground);
  color: var(--color-ink);
}

/* ---------- Page opening ---------- */

/* Measured off the comp rather than set by feel: the opening closes about a third of the way
   down, so the first home is already in view when the page loads. Loosening this is what pushes
   the photograph below the fold. */
.stays__intro {
  display: grid;
  /* The comp leaves the right third of the opening empty; the title never runs the full width.
     The column is the 68rem the opening used to be, less its gutters, set in the page frame so
     the title stands on the same edge as the rows. */
  grid-template-columns: minmax(0, calc(68rem - 2 * var(--gutter)));
  gap: var(--space-s);
  padding:
    var(--stays-intro-top, clamp(0.75rem, 0.4rem + 0.8vw, 1.25rem))
    var(--frame-inset)
    var(--stays-divider-gap, clamp(0.5rem, 0.3rem + 0.5vw, 0.875rem));
}

/* The band the opening hairline sits in. The intro pays the half above and the first row pays
   the half below, so the line rides the centre of the gap rather than hugging the title. Both
   halves read one role: widen the band and the line stays centred in it. */
.stay:first-child {
  padding-top: var(--stays-divider-gap, clamp(0.875rem, 0.5rem + 1vw, 1.5rem));
}

.stays__title {
  /* Breaks after "place", as the comp does. Themes retune it for their own face. */
  max-width: var(--stays-title-measure, 12ch);
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  /* Read through a page-scoped role, never --display-style directly: this file loads after the
     themes, so a theme setting font-style on the selector would lose to it. */
  font-style: var(--stays-display-style, var(--display-style, normal));
  font-size: var(--stays-title-size, var(--text-display));
  line-height: var(--display-leading, 1);
  letter-spacing: var(--display-tracking, -0.01em);
  color: var(--stays-title, var(--color-ink));
}

/* One quiet line under the title (12 October 2026): who looks after the homes. Body size, not
   the lead role, so the title and the first row stay the opening's two weights. */
.stays__lead {
  /* Three lines in English, not four (Danylo, 5 November 2026; it was 48ch), evened out */
  max-width: 62ch;
  text-wrap: balance;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--stays-body, var(--color-ink-soft));
}

/* ---------- The five rows ---------- */

/* An ordered list, because the numbering down the page is real. base.css resets ul but not ol,
   so the markers and the default indent are cleared here. */
.stays__list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* The hairline above row one closes the opening; each row then carries its own */
  border-top: 1px solid var(--stays-line, var(--color-line));
}

.stay {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(2rem, 0.5rem + 4.5vw, 6rem);
  /* Tight, as the comp sets it: the hairlines hug the photograph and the row's air comes from
     the copy column, which is centred against a taller picture. The hairlines run the full
     width; the photograph and copy stop at the page frame. */
  padding: clamp(0.875rem, 0.5rem + 1vw, 1.5rem) var(--frame-inset);
  border-bottom: 1px solid var(--stays-line, var(--color-line));
}

/* The last row closes on the photograph, not on a hairline: a rule there would read as the
   start of another section rather than the end of the five. */
.stay:last-child {
  border-bottom: 0;
}

/* Even rows mirror: the photograph crosses to the right and the copy to the left, so the eye
   is handed back and forth down the page rather than running one gutter all the way. */
.stay:nth-child(even) .stay__media {
  grid-column: 2;
  grid-row: 1;
}

.stay:nth-child(even) .stay__body {
  grid-column: 1;
  grid-row: 1;
}

/* ---------- Photograph ---------- */

/* One frame shape down the page, the comp's. Five different frames would read as an accident
   rather than a rhythm, and the rows would lurch. */
.stay__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--stays-media-bg, var(--color-line));
}

/* The photograph is a way into the home (StaysPage.tsx), filling its frame */
.stay__media-link {
  display: block;
  height: 100%;
}

.stay__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Beach House's photograph is upright, so the frame crops it. A row with an upright picture
     says where to crop from, below, rather than taking the middle and losing the subject. */
  object-position: var(--stay-focal, center);
  transition: transform 0.9s var(--ease-out);
}

/* The owner's crop of this upright photograph: a band from the blue-framed windows down, the
   neighbour's grey wall at the top giving way */
.stay--beach-house {
  --stay-focal: center 31.7%;
}

/* The owner's crop: both windows and the arch, the right edge of the facade giving way */
.stay--casa-al-mulino {
  --stay-focal: 35.5% 50%;
}

/* The owner's crop: right of centre, toward the railing and the marina */
.stay--mare-nostrum {
  --stay-focal: 61.9% 50%;
}

/* The page's one authored moment: the photograph leans in as you reach for the home.
   Slow and single, so it reads as the picture breathing rather than a hover trick. */
.stay:hover .stay__media img,
.stay:focus-within .stay__media img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .stay__media img {
    transition: none;
  }

  .stay:hover .stay__media img,
  .stay:focus-within .stay__media img {
    transform: none;
  }
}

/* ---------- Copy column ---------- */

.stay__body {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

/* How far through the five you are. In a collection this short the count is wayfinding,
   not decoration: it tells a reader deciding between homes how much is left to see. */
.stay__index {
  font-family: var(--font-display);
  font-size: calc(var(--text-body) * 1.35);
  /* Cormorant defaults to old-style figures, which set "01 / 05" as a row of differing heights;
     lining figures keep it reading as a count */
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--stays-index, var(--color-label));
}

.stay__location {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stays-location, var(--color-ink-soft));
}

.stay__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-style: var(--stays-display-style, var(--display-style, normal));
  /* Just under the page title: in the comp each home's name is the hero of its own row */
  font-size: var(--stays-name-size, clamp(2.25rem, 1rem + 3.4vw, 4.125rem));
  /* A figure in a name would otherwise drop below the baseline in Cormorant's default old-style
     numerals and read as a footnote mark rather than part of the word */
  font-variant-numeric: lining-nums;
  line-height: var(--display-leading, 1.02);
  letter-spacing: var(--display-tracking, -0.015em);
  color: var(--stays-name, var(--color-ink));
}

/* The name is a way into the home too: it keeps the heading's look, and the photograph beside it
   leans in on hover as it always has */
.stay__name-link {
  color: inherit;
  text-decoration: none;
}

/* Name, place and counts are one answer: what the home is called, where it stands, what it
   holds. Grouping them lets the intervals inside stay tight while the body's own gap does the
   separating, so the sentence and the button below read as the next thought rather than two
   more lines of the same list. */
.stay__identity {
  display: grid;
  justify-items: start;
}

/* The place is a caption to the name and sits close enough to belong to it */
.stay__identity .stay__location {
  margin-top: 0.5rem;
}

/* The counts step away from the caption without leaving the block */
.stay__identity .stay__facts {
  margin-top: 0.9rem;
}

/* On a wide screen the counts run the copy column's full width, spread evenly from the first to
   the last, so the bathrooms end on the column's right edge rather than leaving air beyond them
   (the owner's direction, 15 October 2026). Narrower, where they may wrap, they keep their own
   spacing. */
@media (min-width: 64rem) {
  .stay__identity {
    justify-self: stretch;
  }

  .stay__identity .stay__facts {
    justify-self: stretch;
    justify-content: space-between;
  }
}

/* Guests, bedrooms, beds, bathrooms. The first thing a family checks, so it stays a plain
   readable line: the icons mark each count, they never replace the word, and with no mark
   between them the counts take the air to separate. */
.stay__facts {
  display: flex;
  flex-wrap: wrap;
  /* Each count's first line on one level: a home's named beds stack under their first line */
  align-items: flex-start;
  /* A twentieth over body size (the owner's pick, 15 October 2026), icons and words together (the
     icons are sized to the words in em). Where the copy column is narrow the size steps down with
     it, never below 16px; a row that still does not fit wraps. */
  gap: 0.45rem 0.6rem;
  font-size: max(1rem, 1.05 * min(var(--text-body), calc(1.34vw - 2.1px)));
  color: var(--stays-facts, var(--color-ink-soft));
}

/* Sized in em so each mark tracks the label it belongs to at every breakpoint, and lifted by a
   hair because Noto Sans's lowercase centre sits below the icon's own. Two colours: the outline
   takes the row's own, the pillows, the lampshade and the water take the accent the sprite reads
   through --icon-accent. */
.stay__fact-icon {
  flex: none;
  width: 1.45em;
  height: 1.45em;
  margin-top: -0.05em;
  /* The drawings carry their padding inside the 24 box, which would step the row in from the
     name above it; this puts their ink back on the column's edge. */
  margin-left: -0.12em;
  color: var(--stays-fact-icon, var(--color-label));
  --icon-accent: var(--stays-fact-accent, currentColor);
}

/* A count is one line, or for named beds one line per kind ("1 double bed" over "1 sofa bed") */
.stay__facts li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stay__facts .fact-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* In Italian the counts run longer ("1 camera da letto", "1 divano letto matrimoniale"), and on
   one row three homes' counts wrapped. So on a wide screen the Italian counts stand in a small
   grid instead (the owner's direction, 15 October 2026): guests, bedrooms and the first bed in
   the first row, the bathrooms under the guests, level with the second bed line, and any further
   beds below that. Every line is one fixed height and the rows share the beds' own gap, so the
   bathrooms meet the second bed line exactly. Every home takes it, even those that would fit. */
@media (min-width: 64rem) {
  /* Spread exactly as the English counts are: the three columns sized to their own words, equal
     gaps between them, and the last one ending on the copy column's right edge, the same edge as
     the English bathrooms (the owner's direction, 15 October 2026) */
  html[lang="it"] .stay__identity .stay__facts {
    --fact-row: 1.6em;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: var(--fact-row);
    justify-content: space-between;
    column-gap: 0.6em;
    row-gap: 0.3rem;
  }

  html[lang="it"] .stay__facts .fact-line {
    height: var(--fact-row);
    white-space: nowrap;
  }

  html[lang="it"] .stay__facts > li:nth-child(1) {
    grid-area: 1 / 1;
  }

  html[lang="it"] .stay__facts > li:nth-child(2) {
    grid-area: 1 / 2;
  }

  html[lang="it"] .stay__facts > li:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  html[lang="it"] .stay__facts > li:nth-child(3):has(.fact-line:nth-child(2)) {
    grid-row: 1 / span 2;
  }

  html[lang="it"] .stay__facts > li:nth-child(3):has(.fact-line:nth-child(3)) {
    grid-row: 1 / span 3;
  }

  html[lang="it"] .stay__facts > li:nth-child(4) {
    grid-area: 2 / 1;
  }
}

/* A phone (the owner's direction, 20 October 2026): the bedrooms lead, then the guests, then the
   bathrooms, the three on one row, and a home's beds one line per kind under the bedrooms. Where
   the card is too narrow for three, two columns: bedrooms and guests on top, the beds under the
   bedrooms and the bathrooms under the guests, level with the first bed. Every line, beds and
   counts alike, keeps the beds' own spacing, so the columns read as one even grid. */
@media (max-width: 40rem) {
  /* The opening centred, the title and its line (Danylo, 5 November 2026) */
  .stays__intro {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .stay__identity {
    container: stay-identity / inline-size;
    justify-self: stretch;
  }

  /* Equal columns across the card, so every card's guests and bathrooms start on the same line,
     whatever its beds are called */
  .stay__identity .stay__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    justify-self: stretch;
    column-gap: 1.25rem;
    row-gap: 0.3rem;
  }

  .stay__facts .fact--bedrooms {
    grid-area: 1 / 1;
  }

  .stay__facts .fact--guests {
    grid-area: 1 / 2;
  }

  .stay__facts .fact--beds {
    grid-area: 2 / 1;
  }

  .stay__facts .fact--bathrooms {
    grid-area: 2 / 2;
  }

  .stay__facts .fact-line {
    white-space: nowrap;
  }

  @container stay-identity (min-width: 27rem) {
    .stay__identity .stay__facts {
      grid-template-columns: repeat(3, minmax(max-content, 1fr));
    }

    .stay__facts .fact--bathrooms {
      grid-area: 1 / 3;
    }
  }
}

/* Optical margin alignment. Every line in the column starts on the same grid line, but the
   display face sets its capital in from the edge of its own box, so the name alone looked
   stepped in against the place beneath it. Pulling it back by that bearing lines the ink up. */
.stay__identity .stay__name {
  margin-left: -0.04em;
}

/* Let the sentence use the column: at a 32ch measure it ran to three and four lines */
.stay__description {
  max-width: 48ch;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--stays-body, var(--color-ink-soft));
}

.stay__cta {
  margin-top: var(--space-2xs);
  /* .btn--primary carries a lifted shadow from components.css. On this page the photographs are
     the only mass, so the button sits flat on the ground with the hairlines and the type until
     it is hovered, when it takes the shared lift and shadow like every other button. */
  box-shadow: none;
}

.stay__cta:focus-visible:not(:hover) {
  box-shadow: none;
}

/* Until each home has its own page the button leaves the site, and a link that leaves says so */
.stay__cta svg {
  margin-left: 0.7em;
  flex: none;
}

/* The button letters the label in tracked uppercase; the name it announces to a screen reader
   is a sentence and should not inherit that */
.stay__cta .visually-hidden {
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Narrower screens ---------- */

/* One column, photograph first on every row: on a phone the picture is what makes someone
   stop, and the mirroring has no meaning once the rows are stacked. */
@media (max-width: 60rem) {
  .stay {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    padding-block: var(--space-l);
  }

  .stay:nth-child(even) .stay__media,
  .stay:nth-child(even) .stay__body {
    grid-column: 1;
    grid-row: auto;
  }

  .stay--beach-house {
    --stay-focal: center 27.6%;
  }

  .stay--mare-nostrum {
    --stay-focal: 56.9% 50%;
  }
}