/* Sovana — "What your rate covers", shared by availability.html and
   residence.html. Markup comes from booking.js (feesHTML). */

/* ══ WHAT YOUR RATE COVERS ═════════════════════════════════════════════
   Wye Junction's fee breakdown, laid open (no accordion). Since 2026-09-28
   (by request) each group is set after wilde.com/offers: eyebrow and a
   descriptive headline on the left, the note and the items as points on
   the right. No photographs, no tags, no table. */
/* Centred (2026-09-25, by request). Title only since 2026-09-28. */
.fees__head {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
  /* 100, not the site's --head-gap (48) (2026-09-28, by request): the head
     is the title alone here, and the groups below are long. */
  margin-bottom: 100px;
}
.fees__head h2 { margin: 0; color: var(--green); }

.fees__group {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(40px, 6vw, 125px); align-items: start;
  /* CENTRED as a block (2026-09-28, by request): capped and set in the
     middle, and the right column's text fills its column — capped at 60ch
     it stopped short and left the whole group reading left-aligned. */
  max-width: 1200px; margin-inline: auto;
}
/* 48 either side of a hairline between groups (2026-09-28, by request). */
.fees__group + .fees__group {
  margin-top: 48px; padding-top: 48px; border-top: var(--hairline);
}

.fees__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fees__lead h3 { margin: 0; color: var(--green); text-wrap: balance; }

.fees__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fees__gnote { margin: 0; color: var(--ink); }

/* The points: the item in ink, what it costs and how often after it in
   muted. A small gold square marks each — gold as marker, never fill. */
.fees__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fees__list li { position: relative; padding-left: 22px; }
.fees__list li::before {
  content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px;
  background: var(--gold);
}
.fees__key { color: var(--ink); }
.fees__val { color: var(--muted); margin-left: 12px; }
.fees__val.is-tbc { opacity: .8; }

/* Stacked below 900: headline, then its note and points. */
@media (max-width: 900px) {
  .fees__group { grid-template-columns: 1fr; gap: 24px; }
  /* the group headline a step up on tablet and phone (2026-09-29, by
     request — 24 at line height 1 read small over a 16px paragraph):
     28 at 1.2, the size of the section's own title */
  .fees__lead .t-h2-sm { font-size: var(--size-28); line-height: var(--lh-title); }
  /* stacked: the title reads LEFT, over the groups, and sits closer to
     them (2026-09-29, by request — centred, 100 above, on desktop) */
  .fees__head { align-items: flex-start; text-align: left; margin-bottom: 40px; }
}
/* Phones: the detail drops under its item. */
@media (max-width: 720px) {
  .fees__val { display: block; margin-left: 0; }
}


/* ══ AVAILABILITY STATES ════════════════════════════════════════════════
   A residence that is not free keeps its place, its photo and its full
   contrast text (brief §5: sold out stays visible, marked). What changes:
   a tag by the name, a status line with a square marker in place of the
   total, and the button offers the nearest thing that WILL work.
   Gold marker = there is a way in (from / partly / minimum stay);
   outline marker = nothing soon (fully booked). No maroon: it is reserved. */
.st {
  display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0;
  color: var(--green);
}
.st::before {
  content: ""; flex: none; width: 7px; height: 7px; transform: translateY(-1px);
  background: var(--gold);
}
.st--booked::before { background: none; box-shadow: inset 0 0 0 1px var(--muted); }
.row__rate .st + .btn { margin-top: 16px; }
.pcard__status { margin-top: -6px; }

/* the name's tag in the list: outline, like every tag that is not "Included" */
.row.is-from .row__flag, .row.is-partial .row__flag,
.row.is-minstay .row__flag, .row.is-booked .row__flag { align-self: flex-start; }
.pcard__tag--state { border-color: var(--gold); color: var(--green); }

/* Fully booked is the one state that dims its picture — never its words.
   The photo steps back so a scan of the list lands on what is free. */
.row.is-booked .row__media img,
.pcard.is-booked .pcard__plan img { opacity: .5; }

/* Preview label — sample availability must never pass for live data. */
.preview-chip {
  position: fixed; left: 16px; bottom: 16px; z-index: 50; margin: 0;
  padding: 8px 12px; background: var(--green); color: var(--ivory);
  box-shadow: var(--shadow-card);
}