/* The property page — every home's own page (/stays/[slug]/), on <body class="property">.
   First built for Beach House (hence the --bh-* role names) from the owner's nine approved comps
   (01-hero … 09-footer), which were signed off and are no longer kept in the project; the
   page itself is now the record of them.

   Palette: the site's own (theme.css), under this page's role names. Each --bh-* role points at
   a global one and adds no colour of its own.

   Sections 06–09 are the shared .host / .reviews / .how / .site-footer components from
   components.css, unchanged; only 01–05 are new and live in this file. */

.property {
  --bh-ground: var(--color-ground);
  --bh-ink: var(--color-ink);
  --bh-muted: var(--color-muted);
  /* Brass for marks only — bullets, map dots, the separators in the place line, icon accents.
     Where words need colour they take the label green. */
  --bh-brass: var(--color-accent);
  --bh-brass-ink: var(--color-label);
  --bh-line: var(--color-line);
  --bh-media-bg: var(--color-media);
  /* The white band that opens at Good to know and runs on through the host card and the guest
     reviews, and the warm card that sits on it — the same figure/ground the reviews use. */
  --bh-panel: var(--color-section);
  --bh-card: var(--color-card);

  background: var(--bh-ground);
  color: var(--color-ink-soft);
}

/* Cormorant sets small and upright here, as it does on the activities and stays headings:
   the hero italic belongs to the homepage, not to a property page. */
.property {
  --bh-display-style: normal;

  /* The one seam on this page where the ground changes colour is .location -> .good-to-know,
     and a colour change is read against the ink on either side of it, not against the boxes.
     Above it sits the hard bottom edge of the map; below it the "Good to know" cap, which
     starts about 0.1em of leading below the top of its own line box. Equal paddings therefore
     land the colour change ~0.1em high. Half of that leading moves from the white side to the
     ivory side below: the air across the seam is unchanged and the break falls in its middle.

     Every term of the heading's own size clamp - clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem) on
     .property-section__title - scaled by 0.05, so the correction tracks the heading at every
     width the way the 0.8 seam clamps track .property-section. */
  --bh-seam-shift: clamp(0.1125rem, 0.075rem + 0.11vw, 0.175rem);
}

.property-section {
  padding-block: clamp(3.5rem, 2rem + 5vw, 7.5rem);
}

.property-section__inner {
  width: min(84rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Three seams run 20% tighter than the shared .property-section rhythm, because at full width
   they read as holes rather than as air. Each clamp is the base one with all three terms
   scaled by 0.8, which scales the resolved value by exactly 0.8 at every viewport width.
   These sit below .property-section deliberately: they tie it on specificity, so source
   order is what decides. */
.gallery {
  padding-top: clamp(2.8rem, 1.6rem + 4vw, 6rem);
}

.amenities {
  padding-bottom: clamp(2.8rem, 1.6rem + 4vw, 6rem);
}

/* Its foot carries half the heading's leading across the colour seam - see --bh-seam-shift */
.location {
  padding-block: clamp(2.8rem, 1.6rem + 4vw, 6rem);
  padding-bottom: calc(clamp(2.8rem, 1.6rem + 4vw, 6rem) + var(--bh-seam-shift));
}

.property-section__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--display-weight, 400);
  font-style: var(--bh-display-style, normal);
  line-height: 1.05;
  letter-spacing: var(--display-tracking, -0.01em);
  color: var(--bh-ink);
  text-align: center;
  text-wrap: balance;
}

/* ---------- 01 Hero ----------
   The copy on the page gutter, then the owner's photograph upright on the right. The
   photograph runs closer to the right edge than the gutter would put it, so the picture and
   the copy close on each other. */
.property-hero {
  display: grid;
  /* The photograph keeps the weight it had before the copy moved in on it */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.09fr);
  align-items: center;
  column-gap: clamp(2rem, 0.5rem + 5vw, 6rem);
  padding-block: clamp(1rem, 0.4rem + 2vw, 3.25rem) clamp(2rem, 0.8rem + 2.8vw, 4rem);
  /* In the page frame, the photograph's side still a fifth of a gutter nearer the edge */
  padding-inline: var(--frame-inset) calc(var(--frame-inset) - var(--gutter) * 0.2);
}

.property-hero__copy {
  max-width: 40rem;
}

.property-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--display-weight, 400);
  font-style: var(--bh-display-style, normal);
  line-height: 1;
  letter-spacing: var(--display-tracking, -0.01em);
  color: var(--bh-ink);
}

/* Place, region, country as one line. The separators are the page's brass, the words are not:
   they read as punctuation rather than as three tags. */
.property-hero__place {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  margin-top: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
  font-size: var(--text-small);
  color: var(--bh-muted);
}

.property-hero__place li + li::before {
  content: "\00B7";
  margin-inline-end: 0.5em;
  color: var(--bh-brass);
}

.property-hero__lead {
  /* Three lines at the comp's width; a 34ch measure took it to four */
  max-width: 46ch;
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* The rule is the hinge between the sentence and the counts, so it is paid for on both
   sides from one role and never hugs either. */
.property-hero__facts {
  --fact-band: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem) clamp(1.5rem, 0.8rem + 2.4vw, 3.5rem);
  max-width: 32rem;
  margin-top: var(--fact-band);
  padding-top: var(--fact-band);
  border-top: 1px solid var(--bh-line);
}

/* A count is one line, or for named beds one line per kind, stacked in the beds' cell, each with
   its own icon; the grid keeps its two by two, and the row with the beds grows to hold them */
.property-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--text-body);
  line-height: 1.3;
}

.property-hero__facts .fact-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* A phone (the owner's direction, 20 October 2026): every home's page as Beach House's was tuned
   first. The counts as on the Stays cards, the bedrooms on the left and the guests on the right,
   the beds under the bedrooms and the bathrooms under the guests. */
@media (max-width: 40rem) {
  .property main .property-hero__facts .fact--bedrooms {
    grid-area: 1 / 1;
  }

  .property main .property-hero__facts .fact--guests {
    grid-area: 1 / 2;
  }

  .property main .property-hero__facts .fact--beds {
    grid-area: 2 / 1;
  }

  .property main .property-hero__facts .fact--bathrooms {
    grid-area: 2 / 2;
  }

  /* The bed lines take the grid's own row spacing, so every line in both columns sits on one
     even pitch */
  .property main .property-hero__facts .fact--beds {
    gap: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  }

  /* The dots alone under the photographs, no counter */
  .property main .gallery__count {
    display: none;
  }

  /* The nearby places under a centred label, two by two (a fifth or sixth place opens a new row,
     from the left), and the button under them centred */
  .property main .location__eyebrow {
    text-align: center;
  }

  .property main .location__places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }

  .property main .location__cta {
    display: flex;
    justify-content: center;
  }

  /* Good to know's three notes ("Children aged 6 and over", "Beachfront setting", "Early arrival
     & late departure"): their titles a step heavier (500 to 600), so they stand out on a small
     screen without the cards' icons to carry them */
  .property main .gtk-note__title {
    font-weight: 600;
  }

  /* "Meet the people behind Ischia HomeStays" on one line, so the button keeps the site's one
     height: a little less air at its ends and its capitals closed up a touch. A phone under 360px
     still wraps it rather than cutting it. */
  .property main .welcome__action .btn {
    padding-inline: 1rem;
    letter-spacing: 0.07em;
  }

  /* The local host's label and name beside the portrait, the pair centred on it, and the two
     sentences straight under the three, the full width of the column. The rows either side of the
     pair share the portrait's spare height equally. */
  .property main .local-host {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr auto;
    grid-template-areas:
      "portrait ."
      "portrait eyebrow"
      "portrait name"
      "portrait ."
      "text text";
    column-gap: 1.25rem;
    row-gap: 0;
  }

  .property main .local-host__main {
    display: contents;
  }

  .property main .local-host__portrait,
  .property main .local-host__initial {
    grid-area: portrait;
    align-self: center;
  }

  /* The label on one line beside the portrait: lighter (500, the face's own; at 600 the browser
     fakes the bold), a size smaller and closer set. A phone under about 375px still wraps it. */
  .property main .local-host__eyebrow {
    grid-area: eyebrow;
    font-size: calc(var(--text-label) * 11 / 12);
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .property main .local-host__name {
    grid-area: name;
  }

  .property main .local-host__text {
    grid-area: text;
    margin-top: var(--space-m);
  }

  /* No opening "Enquire now" on a phone (Danylo, 5 November 2026): the facts lead straight on
     to the gallery, whose own "Enquire now" follows the photographs */
  .property-hero__actions {
    display: none;
  }
}

.property-fact-icon {
  flex: none;
  width: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
  height: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
  color: var(--bh-ink);
}

/* Centred on the white channel the eye reads between the two columns of counts, not on the
   grid's own middle. The columns are 1fr each, but their labels fill only about half of one,
   so the mathematical centre lands some 60px to the right of the gap and the button reads as
   pushed off. 24.5rem puts it on the channel; measured against the counts as they are set.
   Larger than a default .btn too (owner's direction): it is the one thing on this screen the
   reader is meant to press, and at the shared size it read as a footnote to the facts. */
.property-hero__actions {
  max-width: 24.5rem;
  margin-top: clamp(2rem, 1.3rem + 2.4vw, 3.75rem);
  text-align: center;
}

.property-hero__actions .btn {
  min-height: 3.25rem;
  padding: 0.95rem 2.5rem;
  font-size: calc(var(--text-body) * 0.82);
}

.property-hero__media {
  /* 91.5% of its column, on the same centre: the full column made a frame taller than the
     screen. The height it gives up is handed back as margin above and below (block margins
     resolve against the column's width, so 4.25% of it, times 10/9 for the frame's shape),
     and nothing around the photograph moves. */
  width: 91.5%;
  justify-self: center;
  margin: calc(4.25% * 10 / 9) 0;
  /* The comp frames the upright photograph a little wider than the file, so the crop is
     declared here rather than baked into the asset and can be retuned without a re-export. */
  aspect-ratio: 9 / 10;
  overflow: hidden;
  background: var(--bh-media-bg);
}

/* The <picture> around the photograph (AVIF first) steps aside, so the image fills the frame */
.property-hero__media picture {
  display: contents;
}

.property-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Each home says where its photograph is cropped from; Beach House's is the default, the
     owner's crop, which holds the blue door and the pots and lets the bare wall at the top give way */
  object-position: var(--hero-focal, 50% 56.7%);
}

/* The castle view in an upright frame: the owner's crop, the shutters' edge at the left and the
   castle and the beach filling the rest */
.property-hero--casa-al-mulino {
  --hero-focal: 31.1% 50%;
}

/* The villa and its pergola stand left of centre; the bougainvillea gives way at the right */
.property-hero--domus-aenaria {
  --hero-focal: 38% 50%;
}

/* The owner's crop: the table and chairs on the left, with the railing and the sea running out
   beside them */
.property-hero--mare-nostrum {
  --hero-focal: 34.9% 50%;
}

/* The round table, the front door and the first armchair with its red lamp */
.property-hero--isclana-house {
  --hero-focal: 42% 50%;
}

/* ---------- 02 Gallery ----------
   One moving row of the owner's fifteen photographs, three in view, the middle one larger.
   Each caption travels inside its own item, so the photograph and its label are one thing. */
.gallery {
  --shot-w: clamp(9rem, 21.8vw, 22rem);
  --shot-w-active: calc(var(--shot-w) * 1.43);
  --shot-gap: clamp(0.625rem, 0.4rem + 0.6vw, 1rem);
  --shot-caption-gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
  --shot-caption-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  /* One move, on --ease-glide: the slide, the grow and the shrink all share it, so the row stays
     centred throughout. A gentle start and a long settle, so you can follow the next photograph
     across as it grows into the centre and the last one shrinks away (the owner's pick, tuned in
     dev-tools/motion-lab). Read by PropertyGallery.tsx, which moves the row itself. */
  --gallery-time: 900ms;
}

.gallery__frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 2vw, 2.75rem);
  margin-top: clamp(2rem, 1.2rem + 2.6vw, 4rem);
}

/* The arrows sit out at the page margins, where the comp puts them, so the gallery is
   given a wider column than the sections above and below it. */
.gallery .property-section__inner {
  width: min(96rem, 100% - 2 * var(--gutter));
}

/* Exactly three photographs wide, and it clips the strip that runs on past them in both
   directions. Sized from the same three roles the items are, so the window and its contents
   can never disagree. */
.gallery__viewport {
  width: min(100%, calc(var(--shot-w) * 2 + var(--shot-w-active) + var(--shot-gap) * 2));
  margin-inline: auto;
  overflow: hidden;
  /* A vertical drag over the row still scrolls the page; only sideways is the carousel's */
  touch-action: pan-y;
}

.gallery__track {
  display: flex;
  align-items: center;
  gap: var(--shot-gap);
  will-change: transform;
}

.gallery.is-ready .gallery__track {
  /* Held at the height of the centre photograph and its caption at rest. Halfway through a move
     the photograph growing in and the one shrinking out are both between sizes, neither as tall
     as the centre one, and a row sized by its contents would sag for that moment and pull the
     arrows, dots and button up with it. Held, the row only moves sideways and every photograph
     grows and shrinks about one centre line. The 2px is rounding slack, never seen. */
  min-height: calc(var(--shot-w-active) * 10 / 11 + var(--shot-caption-gap) + var(--shot-caption-size) * 1.3 + 2px);
}

/* Before the script runs the row is a plain, readable strip of every photograph. Its scrollbar is
   hidden while the script is on its way: on a desktop it is a strip of its own under the row, and
   when the gallery went live it vanished and pulled the page below it up. Without JavaScript it
   shows (PropertyPage.tsx). */
.gallery:not(.is-ready) .gallery__viewport {
  overflow-x: auto;
  scrollbar-width: none;
}

.shot {
  flex: 0 0 var(--shot-w);
  margin: 0;
}

.shot__media {
  display: block;
  aspect-ratio: 7 / 8;
  overflow: hidden;
  background: var(--bh-media-bg);
}

.shot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot__caption {
  margin-top: var(--shot-caption-gap);
  font-size: var(--shot-caption-size);
  line-height: 1.3;
  color: var(--bh-ink);
  text-align: center;
}

.shot.is-active {
  flex-basis: var(--shot-w-active);
}

.shot.is-active .shot__media {
  aspect-ratio: 11 / 10;
}

/* Live, the script moves the row frame by frame and sets --grow on the photographs either side of
   where it stands, 1 at the centre, so the sizes follow the row (PropertyGallery.tsx) */
.gallery.is-ready .shot {
  flex-basis: calc(var(--shot-w) + (var(--shot-w-active) - var(--shot-w)) * var(--grow, 0));
}

.gallery.is-ready .shot__media {
  aspect-ratio: calc(7 / 8 + (11 / 10 - 7 / 8) * var(--grow, 0));
}

/* The arrows and the dots are the shared carousel controls (components.css) */
.gallery__position {
  display: grid;
  justify-items: center;
  gap: clamp(0.625rem, 0.5rem + 0.4vw, 1rem);
  margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
}

.gallery__count {
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bh-muted);
}

.gallery__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

/* A home whose photographs have not arrived: three blank frames where the row will be, centred
   and still, and a quiet note saying so. The frames clip at the edges on a phone, as the row does. */
/* Doubled class: it has to outrank the scrollable no-script strip, .gallery:not(.is-ready) */
.gallery.gallery--pending .gallery__viewport {
  margin-top: clamp(2rem, 1.2rem + 2.6vw, 4rem);
  overflow: hidden;
}

.gallery--pending .gallery__track {
  justify-content: center;
}

.gallery--pending .shot {
  display: block;
  flex-shrink: 0;
}

.gallery--pending .shot:not(.is-active) .shot__media {
  opacity: 0.6;
}

.gallery__pending-note {
  margin-top: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  color: var(--bh-muted);
  text-align: center;
}

/* ---------- The gallery / amenities seam ----------
   A hairline on the content column, in the page's own --bh-line. The anchor is zero-height and
   carries the line as its top border, so the rhythm the comps set either side of it is
   unchanged. */
.property-joint {
  width: min(84rem, 100% - 2 * var(--gutter));
  height: 0;
  margin-inline: auto;
  border-top: 1px solid var(--bh-line);
}

/* ---------- A home's story ----------
   Beach House's family, under the gallery: the section heading, then the prose centred under it,
   its lines running wider than the heading (the owner's direction, 15 October 2026), on the
   seams' tighter rhythm. */
.story {
  padding-block: clamp(2.8rem, 1.6rem + 4vw, 6rem);
}

.story__body {
  max-width: 56em;
  margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0;
  text-align: center;
  text-wrap: pretty;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.story__body p + p {
  margin-top: 1em;
}

/* ---------- 03 Amenities ----------
   Eight always, the other sixteen revealed below the same two rows — one inline
   disclosure, never a dialog, and nothing is repeated when it opens.
   Each column is as wide as its longest label and the space left over is shared evenly,
   either side included, so the block sits centred under the heading however short the
   labels in the last column are. */
.amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  justify-content: space-evenly;
  /* The rows half as far apart as they were (6 November 2026, Peppino: a row of one-line items
     sat three of its own heights from the next); it was clamp(2rem, 0.6rem + 6.4vw, 9rem) */
  gap: clamp(1.25rem, 0.4rem + 3.2vw, 4.5rem) clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
  margin-top: clamp(2.5rem, 1.5rem + 3.6vw, 5.5rem);
}

/* The rest of the list continues the same grid rather than opening a second one, so the
   columns stay on one set of tracks and the rhythm does not break at the seam. */
.amenities__grid--more {
  margin-top: clamp(1.25rem, 0.4rem + 3.2vw, 4.5rem);
}

.amenities__grid--more[hidden] {
  display: none;
}

/* A last row that does not fill the width is centred under the ones above it */
.amenity {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
  font-size: var(--text-body);
  line-height: 1.35;
}

.amenity__icon {
  flex: none;
  width: clamp(1.5rem, 1.2rem + 0.9vw, 1.9375rem);
  height: clamp(1.5rem, 1.2rem + 0.9vw, 1.9375rem);
  color: var(--bh-ink);
}

/* The site's text link (components.css), centred under the grid */
.amenities__toggle {
  display: block;
  margin: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) auto 0;
  padding: 0.25rem 0;
}

/* ---------- 04 Location ----------
   A picture of the neighbourhood, not a live map. There is nothing on it worth panning to,
   and a map that pans is a trap under a thumb halfway down a long page. The list beside it
   names the same places the image labels. */
.location__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(14rem, 25%, 21rem);
  gap: clamp(1.75rem, 0.8rem + 3vw, 4rem);
  margin-top: clamp(2rem, 1.2rem + 2.6vw, 4rem);
}

.location__map {
  /* The asset's own ratio, held at every width: a crop of a map loses the coastline that
     makes it legible */
  aspect-ratio: 1517 / 902;
  margin: 0;
  background: var(--bh-media-bg);
}

.location__map img {
  width: 100%;
  height: auto;
}

.location__aside {
  padding-top: clamp(0.5rem, 0.3rem + 0.6vw, 1.25rem);
}

/* The site's label, as over every other heading */
.location__eyebrow {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-label);
}

.location__places {
  display: grid;
  gap: clamp(1.5rem, 0.9rem + 2vw, 3rem);
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
}

/* An "Enquire now" under the nearby places, at the list's own spacing */
.location__cta {
  margin-top: clamp(1.5rem, 0.9rem + 2vw, 3rem);
}

/* Or centred under the map, in the map's own column, and a little wider than the page's other
   buttons (Mare Nostrum, 15 October 2026). The list beside the map runs down both rows, so the
   button sits straight under the map however long the list is; where the two stack, it simply
   follows the list. */
.location__layout:has(.location__cta--centre) {
  row-gap: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.location__layout:has(.location__cta--centre) .location__aside {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.location__cta--centre {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.property main .location__cta.location__cta--centre .btn {
  min-width: 16rem;
}

.place {
  position: relative;
  padding-left: 1.5rem;
}

.place::before {
  content: "";
  position: absolute;
  left: 0;
  /* Sits on the name's first-line centre, not on the top of the box */
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bh-brass);
}

/* A place beyond the map's edge has no marker to match; its name keeps the others' indent */
.place--off-map::before {
  content: none;
}

.place__name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--display-weight, 400);
  font-style: var(--bh-display-style, normal);
  line-height: 1.15;
  letter-spacing: var(--display-tracking, -0.01em);
  color: var(--bh-ink);
}

/* A short note beside a place's name, on its baseline, in the meta's type ("Arriving by ferry");
   on a column too narrow for both it drops under the name */
.place__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
}

.place__aside {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--bh-muted);
}

/* The establishment behind a generic name: the meta's own type, held tight under the name so it
   reads as part of it, not as one of the meta lines below */
.place__subtitle {
  margin-top: 0.125rem;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--bh-muted);
}

.place__meta {
  margin-top: 0.375rem;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--bh-muted);
}

/* ---------- 05 Good to know ----------
   Three panels of house practicalities, then the two things a family needs to read before
   they book. The two notes open over the page; the rubbish line expands in place.

   This is where the white band opens. It runs unbroken from here through the host card and
   the guest reviews below — .reviews paints its own #fff and is shared with both homepages,
   so nothing there is forked; only the start of the band moves. */
.good-to-know {
  background: var(--bh-panel);
  /* The foot of this section is paid by .reviews, which pays the whole seam once — see the
     padding-block-start on .property .reviews below. Two paddings inside one continuous white
     band would pool into a gap with nothing in it. */
  padding-block: calc(clamp(2.8rem, 1.6rem + 4vw, 6rem) - var(--bh-seam-shift)) 0;
}

.good-to-know__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.6rem + 2.2vw, 2.75rem);
  margin-top: clamp(2rem, 1.2rem + 2.6vw, 4rem);
}

/* A card on the white band, the way a review card is — a softer corner than the review's 8px,
   so the two read as relatives rather than twins. The border is gone: on a warm card against
   white the surface already does that work, and the line only muddied the corner. */
.gtk-group {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: 14px;
  background: var(--bh-card);
}

.gtk-group__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gtk-group__icon {
  flex: none;
  width: clamp(1.5rem, 1.2rem + 0.9vw, 1.9375rem);
  height: clamp(1.5rem, 1.2rem + 0.9vw, 1.9375rem);
  color: var(--bh-ink);
}

/* The cards' and notes' titles a step heavier than the display face's 500 (Danylo, 5 November
   2026), so they no longer read like the lines under them, on every home's page */
.gtk-group__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 575;
  font-style: var(--bh-display-style, normal);
  line-height: 1.15;
  letter-spacing: var(--display-tracking, -0.01em);
  color: var(--bh-ink);
}

.gtk-group__list {
  display: grid;
  gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
  margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.gtk-group__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--text-body);
  line-height: 1.45;
}

.gtk-group__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--bh-brass);
}

/* Check-in and check-out are the two facts people come back to look up */
.gtk-group__list--strong li {
  font-weight: 500;
}

/* The rubbish note belongs to its bullet, not to the foot of the card: pinned to the bottom it
   read as "read more about leaving", which is not what it says. */
/* Its gap is the space before it, widened, not a margin: a space at the end of a line goes, so a
   "Read more" that wraps starts flush with the text above it (it sat a margin in until Danylo's
   review, 5 November 2026) */
.gtk-group__gap {
  word-spacing: 0.4em;
}

.gtk-group__list li .disclosure__panel {
  max-width: none;
  margin-top: 0.5rem;
}

/* Packed to the top: a note with no "Read more" beside one that has it would otherwise spread its
   title and line over the taller row */
.gtk-note {
  display: grid;
  align-content: start;
  gap: clamp(0.5rem, 0.4rem + 0.4vw, 0.875rem);
}

.gtk-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.6vw, 4rem);
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}

.gtk-note__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 575;
  font-style: var(--bh-display-style, normal);
  line-height: 1.15;
  letter-spacing: var(--display-tracking, -0.01em);
  color: var(--bh-ink);
}

/* A home with one note (Isclana House) sets it under the middle card, centred, rather than alone
   on the left (Danylo, 5 November 2026): the cards' own three columns and gap */
.gtk-notes:has(> .gtk-note:only-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 0.6rem + 2.2vw, 2.75rem);
}

.gtk-note:only-child {
  grid-column: 2;
  justify-items: center;
  text-align: center;
}

.gtk-note__text {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* ---------- The inline disclosures ----------
   One control and one panel, used by both the panels above and the two notes below. The control
   is the site's text link (components.css). */
.disclosure__panel {
  margin-top: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
  max-width: 62ch;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.disclosure__panel[hidden] {
  display: none;
}

/* The nav marks Stays as the section this page belongs to, which is aria-current="true"
   rather than "page"; components.css only underlines "page". */
.property .site-nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

/* ---------- 06–08 The shared sections, retuned for this page ---------- */

/* The host block opens the white panel here rather than sitting under a homepage heading,
   so it carries no rule beneath it — the guest reviews' own heading does that work. */
.property .reviews {
  --color-focus: var(--review-heading);
  /* One continuous white band runs from Good to know through to here, so the seam between the
     two sections is paid once, from this side, instead of both of them padding into it. */
  padding-block-start: clamp(5.2rem, 3rem + 7.2vw, 10.4rem);
}

/* ---------- Narrow screens ---------- */

/* The hero's two columns give out first: the photograph leads, then the copy under it,
   so the name and the counts are never squeezed into a half-column. */
@media (max-width: 60rem) {
  /* One column, photograph first, on the page's own gutters */
  .property-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    padding-inline: var(--gutter);
  }

  /* Full width again: the 4:3 frame fits the screen and lines up with the copy's gutters */
  .property-hero__media {
    order: -1;
    width: auto;
    margin: 0;
    aspect-ratio: 4 / 3;
  }

  /* The 4:3 frame is wide enough for the whole of each wide photograph's subject */
  .property-hero--domus-aenaria,
  .property-hero--isclana-house {
    --hero-focal: 50% 50%;
  }

  /* The owner's crop: a little left of centre, the table kept whole */
  .property-hero--mare-nostrum {
    --hero-focal: 38.9% 50%;
  }

  /* The owner's crop: from the left edge, so the shutters frame the view */
  .property-hero--casa-al-mulino {
    --hero-focal: 0% 50%;
  }

  /* The owner's crop of the upright photograph: high in the frame, the facade's upper windows kept */
  .property-hero--beach-house {
    --hero-focal: 50% 29.1%;
  }

  .property-hero__copy,
  .property-hero__lead,
  .property-hero__facts,
  .property-hero__actions {
    max-width: none;
  }

  /* Four columns of amenities become two before the labels start breaking mid-word */
  .amenities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 1rem + 2.4vw, 3rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  }

  .amenities__grid--more {
    margin-top: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  }

  /* The map keeps the width and the list follows it, rather than both shrinking */
  .location__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .location__layout:has(.location__cta--centre) .location__aside {
    grid-row: auto;
    grid-column: auto;
  }

  .good-to-know__groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .gtk-notes,
  .gtk-notes:has(> .gtk-note:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .gtk-note:only-child {
    grid-column: auto;
  }
}

/* One photograph at a time, the full width of the column, swiped or stepped through. Its frame
   is the desktop centre frame's shape, so a phone shows exactly the crop the owner set for the
   centre photograph, and no photograph needs a second crop. */
@media (max-width: 52rem) {
  /* One column: the gallery's button and counter close the section on their own */
  .property-joint {
    display: none;
  }

  .gallery {
    --shot-w: 100%;
    --shot-w-active: 100%;
  }

  /* The photograph takes the whole row; the arrows step down beneath it, one at each end */
  .gallery__frame {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  }

  .gallery__viewport {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  /* Every photograph is the same size here, so nothing grows or shrinks and the row needs no hold */
  .gallery.is-ready .gallery__track {
    min-height: 0;
  }

  .gallery__frame > .carousel-arrow {
    grid-row: 2;
    justify-self: start;
  }

  .gallery__frame > .carousel-arrow:last-child {
    justify-self: end;
  }

  .shot__media,
  .shot.is-active .shot__media,
  .gallery.is-ready .shot__media {
    aspect-ratio: 11 / 10;
  }

  .amenities__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- One rhythm, no dividers (15 October 2026) ----------
   Tried on Beach House and then given to every home at the owner's direction: every hairline
   between sections goes (the joints around a home's story, and the lines under the team welcome
   and the local host; the short rule in the hero between the sentence and the counts stays), and
   every section meets the next across one and the same space, --flow, a little tighter than
   before. Each section pays half of it on either side, so where the ground changes colour the
   change falls in the middle. The hero photograph's lower margin goes, so the hero's foot is its
   own padding; the reviews panel pays the whole seam from Good to know, as the white band runs
   through both. The team welcome and the local host stay one group, and the guest reviews follow
   them across the whole space, as a section of their own would. The space before the footer is
   the site's own and unchanged. Each home's page carries data-home, for a home that needs its
   own tuning later. */
.property main {
  --flow: clamp(4rem, 2.5rem + 5.5vw, 8rem);
}

.property main .property-joint {
  display: none;
}

.property main > .property-hero {
  padding-block-end: calc(var(--flow) / 2);
}

.property main .property-hero__media {
  margin-block-end: 0;
}

.property main > .property-section {
  padding-block: calc(var(--flow) / 2);
}

.property main > .good-to-know {
  padding-block: calc(var(--flow) / 2) 0;
}

.property main > .reviews {
  padding-block: var(--flow) calc(var(--flow) / 2);
}

.property main > .how {
  padding-block-start: calc(var(--flow) / 2);
}

.property main .welcome {
  padding-block-end: 0;
  border-bottom: 0;
}

.property main .local-host {
  padding-block: calc(var(--flow) / 2);
  border-bottom: 0;
}

/* The owner's fine tuning, set on Beach House and kept for every home (15 October 2026), each
   against the measured gap:
   - the gallery sits 5% of the space lower under the hero;
   - its "Enquire now" comes 5% closer to the photographs, and runs wider than the site's other
     buttons, though not as wide as the row of dots above it;
   - "See all amenities" comes 10% closer to the amenities;
   - the map stands as far above the colour change into Good to know as the heading's letters
     stand below it: the heading's cap sits about 0.115 of its size inside its line box, so the
     map's side gets that much more;
   - the reviews' "Enquire now" comes 5% closer to the row, the space under it unchanged. */
.property main > .gallery {
  padding-block-start: calc(var(--flow) * 0.55);
}

.property main .gallery__cta {
  margin-top: calc(clamp(2rem, 1.4rem + 2vw, 3.25rem) * 0.95);
}

/* The gallery's "Enquire now" sets the page's one button size: the one under the nearby places,
   the reviews' "Enquire now" and both buttons in How to stay with us take it too, so the closing
   pair stands even about the middle (the owner's direction, 15 October 2026) */
.property main .gallery__cta .btn,
.property main .location__cta .btn,
.property main .reviews__cta .btn,
.property main .how__actions .btn {
  min-width: 13rem;
}

/* Side by side on a narrow screen, the closing pair takes its columns' width instead
   (components.css) */
@media (max-width: 52rem) {
  .property main .how__actions .btn {
    min-width: 0;
  }
}

.property main .amenities__toggle {
  margin-top: calc(clamp(2.5rem, 1.6rem + 3vw, 4.5rem) * 0.9);
}

.property main > .location {
  padding-block-end: calc(var(--flow) / 2 + var(--text-h2) * 0.115);
}

/* The local host stands as far below the team welcome's button as the guest reviews stand below
   the local host: the whole space (the owner's direction, 15 October 2026) */
.property main .local-host {
  padding-block-start: var(--flow);
}

/* Where a page leaves the team welcome out (the Italian Beach House, Mare Nostrum and Domus
   Aenaria, Peppino's review of 25 October 2026), the local host opens the panel on the section's
   own space */
.property main .local-host:first-child {
  padding-block-start: 0;
}

.property main .reviews__cta {
  margin-top: calc(clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem) * 0.95);
}

/* A home's own Instagram and Facebook (Beach House, 5 November 2026; components/shared/FindUs.tsx),
   after the close and on the same rhythm: How to stay pays half the space under its buttons, the
   cards the other half above their heading, and the site's own space before the footer below */
.property main > .how:has(+ .property-find) {
  padding-block-end: calc(var(--flow) / 2);
}

.property main > .property-find {
  padding: calc(var(--flow) / 2) var(--gutter) 0;
}