/*
 * Ticino Stays — shared brand foundation.
 * "One collection, one grid, seven photographs."
 *
 * Loaded on every page that uses the experience stylesheet, AFTER
 * ticino-stays-audit.css and BEFORE ticino-stays-vira-reference.css. It owns
 * the tokens and the four cross-page components (host band, direct-booking,
 * interlude, stay-card vocabulary) so the homepage and the property pages stop
 * drifting apart. Page stylesheets should consume these tokens rather than
 * redefining colour, radius or type roles.
 *
 * Nothing here touches booking, pricing, availability, Stripe or refunds.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Colour — already shared between both pages; now named once. */
  --ts-brand-paper: #f4f1ea;
  --ts-brand-sand: #ebe3d6;
  --ts-brand-ink: #151a17;
  --ts-brand-forest: #1f3128;
  --ts-brand-rust: #9f5034;
  --ts-brand-soft: #59645e;
  --ts-brand-cream: #fffdf8;
  --ts-brand-gold: #d9bd8f;
  --ts-brand-line: rgba(21, 26, 23, .10);
  --ts-brand-line-on-dark: rgba(255, 253, 248, .18);

  /* Radius — four values, chosen from what already renders well rather than
     from a formula. Panels/framed photography 20, secondary media 14,
     controls 10, and a true pill only where the shape IS the point. */
  --ts-r-panel: 20px;
  --ts-r-media: 14px;
  --ts-r-control: 10px;
  --ts-r-pill: 999px;

  /* Photographic matte: the sand mount already used around the homepage
     property imagery, reused as a shared signature on the two hero
     photographs. Deliberately narrow -- it should read as a mount, not a
     frame, and the photograph stays the subject. */
  --ts-matte: clamp(14px, 1.4vw, 24px);

  /* Editorial spacing rhythm. */
  --ts-space-band: clamp(64px, 8vw, 132px);
  --ts-space-section: clamp(48px, 6vw, 96px);

  /* Type roles. --ts-font-display is the emotional/display role: hero lines,
     property names, interlude lines. --ts-font-section stays the editorial
     text serif. --ts-font-body stays the UI sans and is never used above 20px.
     Both are emitted per-role by ts_brand_typography_variables(). */
  --ts-brand-display: var(--ts-font-hero, Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", "Noto Serif Display", Georgia, serif);
  --ts-brand-serif: var(--ts-font-section, var(--ts-font-heading, Georgia, "Times New Roman", serif));
  --ts-brand-sans: var(--ts-font-body, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

/* ==========================================================================
   2. Typography roles — no sans above 20px, anywhere.
   The Font Studio can assign a role to the body face; that is fine for labels
   and UI but produced 57px and 62px grotesque headings on the homepage. These
   rules pin the large emotional headings to the display role and the editorial
   headings to the text serif, whatever the role setting happens to be.
   ========================================================================== */
.ts-experience .ts-hero h1,
.ts-experience .ts-property-copy h3,
.ts-experience .ts-property-copy h3 a,
.ts-experience .ts-final button,
.ts-experience .ts-host h2,
.ts-experience .ts-hostband__headline,
.ts-experience .ts-interlude__line,
.ts-experience .ts-property-interlude > p {
  font-family: var(--ts-brand-display);
  font-weight: 400;
}

.ts-experience .ts-manifesto h2,
.ts-experience .ts-section-heading h2,
.ts-experience .ts-collection-intro h2,
.ts-experience .ts-faq summary,
.ts-experience .ts-price-promise-home h2,
.ts-experience .ts-hostband__closing {
  font-family: var(--ts-brand-serif);
  font-weight: 400;
}

/* Optical correction: a didone at very large sizes needs tighter tracking than
   Georgia, and the fallback may be either. */
.ts-experience .ts-hero h1 { letter-spacing: -.045em; }
.ts-experience .ts-property-copy h3 { letter-spacing: -.032em; }

/* ==========================================================================
   3. Eyebrow + index — one label language.
   ========================================================================== */
.ts-experience .ts-kicker,
.ts-experience .ts-place,
.ts-experience .ts-eyebrow {
  font-family: var(--ts-brand-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-brand-rust);
}
.ts-experience .ts-property-index {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ts-brand-rust);
  font: italic 400 13px/1 var(--ts-brand-serif);
  letter-spacing: .06em;
}
.ts-experience .ts-property-index i {
  display: block;
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

/* ==========================================================================
   4. Button family — primary / secondary / tertiary, sentence case.
   Uppercase survives only on eyebrows, the header nav and the index.
   ========================================================================== */
.ts-experience .ts-book-button,
.ts-experience .ts-hero-actions a,
.ts-experience .ts-hero-actions button,
.ts-experience .ts-property-actions a,
.ts-experience .ts-property-actions button,
.ts-experience .ts-hostband__cta,
.ts-experience .ts-direct__cta,
.ts-experience .ts-price-promise-home > .ts-price-promise-copy > a,
.ts-experience .ts-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--ts-r-control);
  font-family: var(--ts-brand-sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* Primary — solid forest on paper, solid cream when it sits on photography. */
.ts-experience .ts-book-button,
.ts-experience .ts-price-promise-home > .ts-price-promise-copy > a,
.ts-experience .ts-btn--primary {
  color: var(--ts-brand-cream);
  background: var(--ts-brand-forest);
  border-color: var(--ts-brand-forest);
}
.ts-experience .ts-book-button:hover:not(:disabled),
.ts-experience .ts-price-promise-home > .ts-price-promise-copy > a:hover,
.ts-experience .ts-btn--primary:hover { background: #18261a; border-color: #18261a; color: var(--ts-brand-cream); }

.ts-experience .ts-hero-actions a:first-child,
.ts-experience .ts-btn--on-photo {
  color: var(--ts-brand-ink);
  background: var(--ts-brand-cream);
  border-color: var(--ts-brand-cream);
}
.ts-experience .ts-hero-actions a:first-child:hover,
.ts-experience .ts-btn--on-photo:hover { color: var(--ts-brand-ink); background: #fff; }

/* Secondary — outline. */
.ts-experience .ts-btn--secondary {
  color: inherit;
  background: transparent;
  border-color: currentColor;
  opacity: .92;
}
.ts-experience .ts-btn--secondary:hover { opacity: 1; }

/* Tertiary — a quiet text action with an arrow. */
.ts-experience .ts-hero-actions button,
.ts-experience .ts-btn--text {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: 650;
  border-bottom: 1px solid rgba(255, 253, 248, .45);
}
.ts-experience .ts-hero-actions button:hover,
.ts-experience .ts-btn--text:hover { border-bottom-color: currentColor; background: transparent; }

.ts-experience .ts-gallery-count {
  display: inline-flex;
  min-height: 44px;
  width: max-content;
  max-width: calc(100% - 36px);
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: var(--ts-r-control);
  color: var(--ts-brand-cream);
  background: rgba(13, 18, 15, .68);
  font-family: var(--ts-brand-sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  backdrop-filter: blur(6px);
}

.ts-experience summary,
.ts-experience details > summary { cursor: pointer; }
.ts-experience summary > *,
.ts-experience summary::marker { cursor: inherit; }

/* ==========================================================================
   5. Radius normalisation — the page stylesheets carried 11 different values.
   ========================================================================== */
.ts-experience .ts-property-main,
.ts-experience .ts-property-visual,
.ts-experience .ts-stay-finder > div,
.ts-experience .ts-price-promise-home,
.ts-experience .ts-collection-map .ts-map-frame { border-radius: var(--ts-r-panel); }

.ts-experience .ts-property-second,
.ts-experience .ts-host-image,
.ts-experience .ts-hostband__portrait { border-radius: var(--ts-r-media); }

.ts-experience .ts-stay-finder input,
.ts-experience .ts-stay-finder select,
.ts-experience .ts-stay-finder button { border-radius: var(--ts-r-control); }

/* --------------------------------------------------------------------------
   Photographic matte, homepage scale.

   The property blocks already mount their photography on sand, and it is the
   most obviously premium thing on the page. The hero now shares it, but at a
   different scale: the photograph still bleeds to the very top, so the
   overlaid header keeps sitting on the image rather than on a beige strip,
   and the sand appears only at the sides and the foot. Grand scale on the
   homepage, intimate scale on a property page -- one language, two sizes.

   The hero paints its photograph as a background-image, so the mount is made
   with background-clip rather than an extra element: the sand is the element's
   own background-color showing through the padding. The overlay and the foot
   bar are inset to match, or they would sit on the mount.

   The outer radius carries the matte width so the content-box clip resolves
   to exactly --ts-r-panel on the photograph itself.
   -------------------------------------------------------------------------- */
.ts-experience .ts-hero {
  padding: 0 var(--ts-matte) var(--ts-matte);
  background-color: var(--ts-brand-sand);
  background-origin: content-box;
  background-clip: content-box;
  border-radius: 0 0 calc(var(--ts-r-panel) + var(--ts-matte)) calc(var(--ts-r-panel) + var(--ts-matte));
}
.ts-experience .ts-hero-overlay {
  inset: 0 var(--ts-matte) var(--ts-matte);
  border-radius: 0 0 var(--ts-r-panel) var(--ts-r-panel);
}
.ts-experience .ts-hero-foot {
  right: var(--ts-matte);
  bottom: var(--ts-matte);
  left: var(--ts-matte);
}

/* ==========================================================================
   6. Interlude — one family. Sand ground, rust label left, display line right.
   The property-specific sentence stays owner-editable per property.
   ========================================================================== */
.ts-experience .ts-interlude,
.ts-experience .ts-property-interlude {
  display: grid;
  grid-template-columns: minmax(140px, .28fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding: clamp(44px, 6vw, 84px) clamp(24px, 4vw, 64px);
  color: var(--ts-brand-ink);
  background: var(--ts-brand-sand);
  border-radius: 0;
}
.ts-experience .ts-interlude__label,
.ts-experience .ts-property-interlude > span {
  margin: 0;
  color: var(--ts-brand-rust);
  font-family: var(--ts-brand-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ts-experience .ts-interlude__line,
.ts-experience .ts-property-interlude > p {
  max-width: 22ch;
  margin: 0;
  font: 400 clamp(26px, 3.1vw, 44px)/1.16 var(--ts-brand-display);
  letter-spacing: -.015em;
}

/* ==========================================================================
   7. Host band — one component, two scales. This is the brand's single dark
   moment on a page, and it always means the same thing: a real person.
   ========================================================================== */
.ts-experience .ts-hostband-ground {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--ts-brand-forest);
}
.ts-experience .ts-hostband {
  display: grid;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  color: var(--ts-brand-cream);
  background: var(--ts-brand-forest);
}
.ts-experience .ts-hostband--full {
  /* The forest ground stays full-bleed; the content keeps the page's own
     measure so the band reads as part of the grid, not a separate slab. */
  width: min(1380px, calc(100% - clamp(36px, 7vw, 120px)));
  min-height: 0;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 78px);
  margin: 0 auto;
  padding: clamp(54px, 7vw, 100px) 0;
}
.ts-experience .ts-hostband--compact {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--ts-r-panel);
}
.ts-experience .ts-hostband__portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ts-r-media);
  background: rgba(255, 253, 248, .08);
}
.ts-experience .ts-hostband--full .ts-hostband__portrait { aspect-ratio: 4 / 5; }
.ts-experience .ts-hostband--compact .ts-hostband__portrait { aspect-ratio: 1 / 1; }
.ts-experience .ts-hostband__portrait img { width: 100%; height: 100%; object-fit: cover; }
.ts-experience .ts-hostband__portrait figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 22px 16px 12px;
  background: linear-gradient(0deg, rgba(10, 14, 11, .62), transparent);
  color: var(--ts-brand-cream);
  font-family: var(--ts-brand-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ts-experience .ts-hostband__copy { display: grid; gap: 14px; min-width: 0; }
.ts-experience .ts-hostband__eyebrow {
  margin: 0;
  color: var(--ts-brand-gold);
  font-family: var(--ts-brand-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ts-experience .ts-hostband__headline {
  margin: 0;
  color: var(--ts-brand-cream);
  letter-spacing: -.02em;
}
.ts-experience .ts-hostband--full .ts-hostband__headline { font-size: clamp(38px, 3.9vw, 60px); line-height: 1.02; }
.ts-experience .ts-hostband--compact .ts-hostband__headline { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; }
.ts-experience .ts-hostband__copy p:not([class]) {
  margin: 0;
  max-width: 62ch;
  color: rgba(255, 253, 248, .8);
  font-family: var(--ts-brand-sans);
  font-size: 16px;
  line-height: 1.7;
}
.ts-experience .ts-hostband__assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ts-brand-line-on-dark);
}
.ts-experience .ts-hostband__assurances li {
  padding: 14px 20px 0;
  border-left: 1px solid var(--ts-brand-line-on-dark);
}
.ts-experience .ts-hostband__assurances li:first-child { padding-left: 0; border-left: 0; }
.ts-experience .ts-hostband__assurances strong {
  display: block;
  color: var(--ts-brand-cream);
  font: 650 14px/1.35 var(--ts-brand-sans);
}
.ts-experience .ts-hostband__assurances span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 253, 248, .62);
  font: 400 13px/1.45 var(--ts-brand-sans);
}
.ts-experience .ts-hostband__closing {
  margin: 6px 0 0;
  color: var(--ts-brand-cream);
  font: italic 400 clamp(19px, 1.6vw, 25px)/1.28 var(--ts-brand-serif);
}
.ts-experience .ts-hostband__cta {
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  color: var(--ts-brand-forest);
  background: var(--ts-brand-cream);
  border-color: var(--ts-brand-cream);
}
.ts-experience .ts-hostband__cta:hover { color: var(--ts-brand-forest); background: #fff; border-color: #fff; }
.ts-experience .ts-hostband__contact { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
.ts-experience .ts-hostband__meta {
  margin: 0;
  color: rgba(255, 253, 248, .58);
  font: 400 13.5px/1.5 var(--ts-brand-sans);
}

/* ==========================================================================
   8. Direct booking — one language. Full band on the homepage, a restrained
   hairline strip on a property page (deliberately NOT another big section).
   ========================================================================== */
.ts-experience .ts-direct__reasons {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.ts-experience .ts-direct__reasons li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  position: static;
  min-height: 0;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--ts-brand-line);
  border-radius: 0;
  background: transparent;
  color: #253029;
  font-family: var(--ts-brand-sans);
  font-size: 15.5px;
  line-height: 1.55;
}
.ts-experience .ts-direct__reasons li:last-child { border-bottom: 1px solid var(--ts-brand-line); }
/* The rows already close on a hairline, so the price-match note must not
   draw a second one 22px below it. */
.ts-experience .ts-direct__reasons + .ts-price-match-rule { margin-top: 18px; padding-top: 0; border-top: 0; }
.ts-experience .ts-direct__reasons li::before {
  content: "";
  position: static;
  display: block;
  width: 7px;
  height: 7px;
  justify-self: center;
  border-radius: 50%;
  background: var(--ts-brand-rust);
  transform: translateY(-2px);
}

/* Restrained property-page variant: one hairline row, three assurances. */
.ts-experience .ts-direct--compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ts-brand-line);
  border-bottom: 1px solid var(--ts-brand-line);
}
.ts-experience .ts-direct--compact li {
  padding: 16px 22px;
  border-left: 1px solid var(--ts-brand-line);
}
.ts-experience .ts-direct--compact li:first-child { padding-left: 0; border-left: 0; }
.ts-experience .ts-direct--compact strong {
  display: block;
  color: #27312c;
  font: 650 14.5px/1.35 var(--ts-brand-sans);
}
.ts-experience .ts-direct--compact span {
  display: block;
  margin-top: 3px;
  color: var(--ts-brand-soft);
  font: 400 14px/1.5 var(--ts-brand-sans);
}

/* ==========================================================================
   9. Stay-card vocabulary — shared language, deliberately different densities.
   The homepage keeps its large editorial block; property pages use the
   compact card. Both read: index rule → place → name → mood.
   ========================================================================== */
.ts-experience .ts-staycard { display: grid; gap: 0; min-width: 0; }
.ts-experience .ts-staycard__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--ts-r-panel);
  background: var(--ts-brand-sand);
}
.ts-experience .ts-staycard__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.ts-experience .ts-staycard__frame:hover img { transform: scale(1.03); }
.ts-experience .ts-staycard__index {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 6px;
  color: var(--ts-brand-rust);
  font: italic 400 12.5px/1 var(--ts-brand-serif);
  letter-spacing: .06em;
}
.ts-experience .ts-staycard__index i { display: block; width: 34px; height: 1px; background: currentColor; opacity: .5; }
.ts-experience .ts-staycard__place {
  margin: 0 0 6px;
  color: var(--ts-brand-rust);
  font: 700 12px/1.3 var(--ts-brand-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ts-experience .ts-staycard__name {
  margin: 0;
  font: 400 clamp(22px, 1.9vw, 28px)/1.1 var(--ts-brand-display);
  letter-spacing: -.02em;
}
.ts-experience .ts-staycard__name a { color: var(--ts-brand-ink); text-decoration: none; }
.ts-experience .ts-staycard__name a:hover { color: var(--ts-brand-rust); }
.ts-experience .ts-staycard__mood {
  margin: 5px 0 0;
  color: var(--ts-brand-soft);
  font: italic 400 15.5px/1.4 var(--ts-brand-serif);
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .ts-experience .ts-interlude,
  .ts-experience .ts-property-interlude { grid-template-columns: 1fr; gap: 14px; }
  .ts-experience .ts-interlude__line,
  .ts-experience .ts-property-interlude > p { max-width: none; }
  .ts-experience .ts-hostband--full,
  .ts-experience .ts-hostband--compact { grid-template-columns: 1fr; }
  .ts-experience .ts-hostband--full .ts-hostband__portrait { aspect-ratio: 3 / 2; }
  .ts-experience .ts-hostband--compact .ts-hostband__portrait { width: min(220px, 56%); }
  .ts-experience .ts-hostband__assurances { grid-template-columns: 1fr; border-top: 0; }
  .ts-experience .ts-hostband__assurances li {
    padding: 12px 0;
    border-left: 0;
    border-top: 1px solid var(--ts-brand-line-on-dark);
  }
  .ts-experience .ts-direct--compact { grid-template-columns: 1fr; }
  .ts-experience .ts-direct--compact li { padding: 13px 0; border-left: 0; border-top: 1px solid var(--ts-brand-line); }
  .ts-experience .ts-direct--compact li:first-child { border-top: 0; }
}

@media (max-width: 620px) {
  /* On a phone the mount costs more than it gives -- 48px off a 390px
     photograph is visible. The hero goes back to full bleed. */
  .ts-experience .ts-hero {
    padding: 0;
    background-origin: padding-box;
    background-clip: border-box;
    border-radius: 0;
  }
  .ts-experience .ts-hero-overlay { inset: 0; border-radius: 0; }
  .ts-experience .ts-hero-foot { right: 0; bottom: 0; left: 0; }

  .ts-experience .ts-hostband--full { width: 100%; padding: 42px 20px 48px; }
  .ts-experience .ts-hostband--full .ts-hostband__portrait { aspect-ratio: 4 / 3; }
  .ts-experience .ts-hostband--compact { padding: 24px 20px 28px; }
  .ts-experience .ts-hostband__cta { width: 100%; }
}