/* For owners — the page for people who own a home on Ischia. A text page with no photographs:
   the offer, what we look after as six small white cards, the owners' own reviews, and every way
   to reach Peppino to close (laid out from the owner's reference, 6 October 2026).

   Palette: the site's own (theme.css), under this page's role names. Cards stand white on the
   cream with a hairline edge and 8px corners, as About's do. This sheet is linked only on
   /for-owners/; elsewhere it is held out of the cascade with media="not all", which is why it may
   style :root. */

:root {
  --owners-ground: var(--color-ground);
  --owners-ink: var(--color-ink);
  --owners-ink-soft: var(--color-ink-soft);
  --owners-muted: var(--color-muted);
  --owners-line: var(--color-line);
  /* A card on the cream ground is white; the warm card is for cards on a white band */
  --owners-card: var(--color-section);
  --owners-section: clamp(4.5rem, 2.5rem + 6vw, 9rem);
  --owners-measure: 60rem;
  --owners-card-gap: clamp(1rem, 0.7rem + 0.9vw, 1.375rem);
}

.owners {
  padding-bottom: var(--space-prefooter);
  color: var(--owners-ink);
}

/* Every block shares one measure between the gutters; hairlines run to its edges, not past them */
.owners > * {
  width: min(var(--owners-measure), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.owners > * + * {
  margin-top: var(--owners-section);
}

/* ---------- Opening ---------- */
.owners-intro {
  padding-top: clamp(3rem, 2rem + 4vw, 6.5rem);
  text-align: center;
}

.owners-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  color: var(--owners-ink);
}

.owners-lead {
  max-width: 38em;
  margin: var(--space-m) auto 0;
  font-size: var(--text-lead);
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--owners-ink-soft);
}

/* ---------- What we look after ---------- */
/* Wider than the reading column, so three cards a row still hold a comfortable line */
.owners > .owners-services {
  width: min(72rem, 100% - 2 * var(--gutter));
}

.owners-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-align: center;
  text-wrap: balance;
  color: var(--owners-ink);
}

.owners-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--owners-card-gap);
  margin-top: var(--space-l);
}

.owners-card {
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border: 1px solid var(--owners-line);
  border-radius: 8px;
  background: var(--owners-card);
}

.owners-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 1.15;
  color: var(--owners-ink);
}

.owners-card__text {
  margin-top: var(--space-2xs);
  font-size: var(--text-body);
  line-height: 1.65;
  text-wrap: pretty;
  color: var(--owners-ink-soft);
}

/* ---------- The owners' reviews ---------- */
/* The site's review card on the page's own ground: white cards with a hairline edge, no section
   band, and the page's measure rather than the reviews section's own */
.owners-reviews {
  --review-surface: var(--owners-card);
  --review-gap: var(--owners-card-gap);
  --control-ink: var(--owners-ink);
  --control-ground: var(--owners-ground);
  padding-block: 0;
  background: none;
}

.owners > .owners-reviews {
  width: min(80rem, 100% - 2 * var(--gutter));
}

.owners-reviews .reviews__inner {
  width: auto;
}

.owners-reviews__title {
  text-align: center;
  text-wrap: balance;
}

.owners-reviews .reviews__carousel {
  margin-top: var(--space-l);
}

.owners-reviews .review {
  border: 1px solid var(--owners-line);
}

/* Four lines before "Read more", not two: an owner's review is the whole case for the page */
.owners-reviews .review__quote p {
  -webkit-line-clamp: 4;
  min-height: 6em;
}

/* Past a phone the four sit side by side, two by two on a tablet: nothing to scroll, so no arrows */
@media (min-width: 44.01rem) {
  .owners-reviews .reviews__track {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
  }

  .owners-reviews .review {
    flex-basis: calc((100% - var(--review-gap)) / 2);
  }

  .owners-reviews .reviews__controls {
    display: none;
  }
}

@media (min-width: 64.01rem) {
  .owners-reviews .review {
    flex-basis: calc((100% - 3 * var(--review-gap)) / 4);
  }
}

/* ---------- Close ---------- */
.owners-close {
  text-align: center;
}

.owners-close__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  color: var(--owners-ink);
}

/* Every way to reach Peppino, straight under the heading: two equal columns, each button over
   the number or address it uses (the columns keep the width they had when there were three) */
/* The two ways in sit close as a pair (the owner's direction, 15 October 2026): each column is
   exactly as wide as its button, so the gap between the columns is the gap between the buttons */
.owners-reach {
  display: grid;
  /* Two equal columns as wide as the wider button, so a longer label in either language widens
     both rather than spilling out of its button (15 October 2026) */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-m) var(--space-l);
  width: fit-content;
  margin: var(--space-l) auto 0;
}

.owners-reach__way {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

/* The two buttons one width, whatever their labels */
.owners-reach__way .btn {
  width: 100%;
  min-width: 14rem;
  white-space: nowrap;
}

.owners-reach__detail {
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--owners-ink-soft);
  overflow-wrap: anywhere;
}

/* The number or address goes where its button does. It keeps the caption's look and takes the
   footer's line on hover, drawn in from the left. */
.owners-reach__detail a {
  padding-bottom: 0.2em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  text-decoration: none;
  transition: background-size 0.4s var(--ease-out);
}

.owners-reach__detail a:hover,
.owners-reach__detail a:focus-visible {
  background-size: 100% 1px;
}

/* ---------- Narrower screens ---------- */
@media (max-width: 64rem) {
  .owners-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 44rem) {
  .owners-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The two ways stay side by side across the page, as the homepage's closing pair does
     (components.css; Danylo, 5 November 2026: they stacked until then). Each way is a subgrid of
     the pair's two rows, so both buttons are one height and the number and the address start on
     one line. */
  .owners-reach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    column-gap: var(--pair-gap);
    row-gap: 0;
    width: min(100%, 30rem);
  }

  .owners-reach__way {
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    row-gap: 0.5rem;
  }

  .owners-reach__way .btn {
    min-width: 0;
    max-width: none;
    min-height: 2.75rem;
    padding-inline: var(--pair-pad);
    white-space: normal;
    text-wrap: balance;
    line-height: 1.3;
  }

  .owners-reach__detail {
    font-size: var(--pair-note);
    text-align: center;
    overflow-wrap: normal;
  }
}

/* A phone (the owner's direction, 20 October 2026): the cards' titles a step heavier (500 to 600,
   as Beach House's Good to know notes) */
@media (max-width: 40rem) {
  .owners-card__title {
    font-weight: 600;
  }
}