/* ══════════════════════════════════════════════════════════════════════
   Sections the prototype did not have.

   The homepage settled the visual language; these reuse it — same bands,
   same cards, same glass — for the shapes an archive needs and a single
   landing page did not.
   ══════════════════════════════════════════════════════════════════════ */

/* ── text beside a photograph ──────────────────────────────────────── */
.split{
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);align-items:center;
}
/* No photograph on this site: one column at the reading measure, not half a grid and a hole. */
.split-alone{grid-template-columns:1fr;max-width:50rem}
.split-flip .split-copy{order:2}
.split-flip .split-media{order:1}
.split-copy .sec-head{margin-bottom:1.4rem}
.split-media{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.split-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ── checklist ─────────────────────────────────────────────────────── */
.checklist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap);
  margin-top:clamp(1.6rem,1rem + 2vw,2.6rem);
}
.checklist-col{
  background:var(--night-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;
}
.checklist-col h3{
  font-family:var(--sans);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-45);margin-bottom:1rem;font-weight:600;
}

/* The tick is decoration; the text carries the meaning, so it is not read out. */
.checklist-col .mini li::before{
  content:"";width:7px;height:7px;border-radius:2px;background:var(--brass);
}

/* ── the archive list: column count comes from the editor ──────────── */
.feature-quad[style*="--cards:3"]{grid-template-columns:repeat(3,1fr)}
.feature-quad[style*="--cards:2"]{grid-template-columns:repeat(2,1fr)}

/* ── pagination ────────────────────────────────────────────────────── */
.pagination{justify-content:center}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  /* Stacked, the photograph leads — the same reading order as "photo on the left"
     on the desktop. Resetting the order here would drop it below the copy, which
     is the opposite of what the layout says at a wider width. */
  .split-flip .split-media{order:1}
  .split-flip .split-copy{order:2}
  .feature-quad[style*="--cards:3"]{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:620px){
  .feature-quad[style*="--cards:3"],
  .feature-quad[style*="--cards:2"]{grid-template-columns:1fr}
}

/* ── footer lists ──────────────────────────────────────────────────── */
/* wp_nav_menu prints class="menu" by default, which in this theme is the
   full-screen mobile panel. The footer menus are given .foot-list instead;
   this rule guards the case where a menu is printed without our class. */
.site-foot .menu{position:static;inset:auto;padding:0;background:none;backdrop-filter:none;overflow:visible}
.foot-list{display:flex;flex-direction:column;gap:.55rem;font-size:var(--step--1)}

/* ── the booking section ───────────────────────────────────────────── */
/*
 * Not .glass-form. That is frosted glass designed to sit over the hero
 * photograph; on a plain dark band it disappears and leaves the white embed
 * floating as a slab. Here the form gets the same treatment as the cards —
 * dark panel, hairline border — so the white iframe reads as something set
 * into the page rather than dropped on top of it.
 */
.booking-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:start}
.booking-copy{position:sticky;top:calc(76px + 1.6rem)}
.booking-copy .sec-lede{max-width:44ch}
.booking-copy .hero-actions{margin-top:1.6rem}
.booking-points{margin-top:1.4rem;max-width:44ch}
.booking-form{
  background:var(--night-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(.7rem,.4rem + .8vw,1.1rem);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
/* No .embed rule here on purpose — see 04-sections.css. This file loads last, so anything about
   the embed written here outranks the rules that manage it, including the one that releases the
   height reservation once the form is on the page. That left 24px of panel under a white card. */

@media (max-width:900px){
  .booking-inner{grid-template-columns:1fr}
  .booking-copy{position:static}
}

/* ── menus are lists ───────────────────────────────────────────────── */
/* The prototype had bare <a> elements in the header. A real WordPress menu is
   a <ul>, and it should stay one — a list of links is a list. These rules put
   the flex layout on the list itself and take the markers off. */
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.7rem}

/* .site-foot ul sets flex-direction:column for the footer columns, and it is more
   specific than a bare .legal-list — so the legal row has to say so explicitly,
   or it stacks. It also must not inherit align-items:center, which in a column
   pushes every link to the middle of the footer. */
.site-foot .legal-list{
  list-style:none;margin:0 0 1.2rem;padding:0;
  display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;
  gap:.7rem 1.6rem;
}
.nav-list li,
.site-foot .legal-list li{margin:0}

/* ── callout ───────────────────────────────────────────────────────── */
/*
 * An accented panel, not a shout. The brass hairline down the left edge and the
 * mark do the stopping; the ground stays close to the band so it reads as part
 * of the page rather than an advertisement pasted onto it.
 */
.callout{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,.8rem + 1.4vw,2rem);
  padding:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);
  border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:var(--r-lg);
  background:
    linear-gradient(115deg,var(--brass-soft),transparent 42%),
    var(--night-2);
  box-shadow:0 40px 90px -60px rgba(0,0,0,.9);
}
.callout-mark{
  width:clamp(38px,34px + 1vw,46px);height:clamp(38px,34px + 1vw,46px);flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:var(--brass-soft);color:var(--brass);
}
.callout-mark svg{width:60%;height:60%}
.callout-body h2{font-size:var(--step-2);margin:.2rem 0 .8rem;max-width:24ch}
.callout-text{color:var(--text-70);max-width:70ch}
.callout-text > * + *{margin-top:.9rem}
.callout-text strong{color:var(--text)}
.callout-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

@media (max-width:620px){
  .callout{grid-template-columns:1fr}
  .callout-actions .btn{width:100%;justify-content:center}
}

/* ── FAQ in the showcase treatment ─────────────────────────────────── */
/* The glass panel is sized for five short facts; a list of questions is taller
   and wider, so the panel grows and the accordions lose the band's own borders
   — over glass they read as separators, not as boxes. */
.faq-showcase .glass-panel{max-width:780px}
.faq-showcase .glass-panel .sec-lede{margin:-.8rem 0 1.4rem;max-width:58ch}
.faq-showcase .faq details{background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding-inline:0}
.faq-showcase .faq details:first-child{border-top:1px solid var(--line-2)}

@media (max-width:900px){
  .faq-showcase .showcase-inner{justify-content:stretch}
  .faq-showcase .glass-panel{max-width:none}
}

/* The copy column ran a third shorter than the form, which reads as a gap rather
   than as breathing room. These three lines fill it with something worth reading
   — what happens after the form is sent, which is the question behind the
   hesitation to send it. */
.booking-steps{display:flex;flex-direction:column;gap:1rem;margin-top:1.8rem;max-width:46ch}
.booking-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;
  font-size:var(--step--1);color:var(--text-70);
}
.booking-steps .step-n{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  color:var(--brass);
}