/* =============================================================================
   Booking & Service Policies — /policies/

   Loaded AFTER styles.css, which supplies every colour, font and spacing token
   used here. Nothing in this file redefines a token: the page has to look like
   the rest of iBlast, not like a legal appendix bolted on beside it.

   Thirty-five policies is a lot to read. The whole layout is built around
   making that survivable — a contents list that stays put on desktop, grouped
   bands so the eye can find where it is, generous line height, and a measure
   that never runs past about 68 characters.

   No accordions. A reader looking for the cancellation rule should be able to
   use the browser's own find-in-page, and collapsed panels defeat that.
   ============================================================================= */

.pol-body {
  background: var(--porcelain);
  color: var(--ink);
}

/* --- Top bar ------------------------------------------------------------- */

.pol-top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(248, 242, 233, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ink-08);
}
.pol-top__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .8rem;
}
.pol-top__back {
  /* Padded to a real tap target. At its natural line height this link is 23px
     tall, which is under the 24px minimum — it only looked fine on phones
     because the text wrapped onto two lines there. */
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: .2rem;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.pol-top__back:hover { color: var(--crimson-ink); }
.pol-top__cta { flex: none; }

/* --- Hero ---------------------------------------------------------------- */

.pol-hero { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(1.6rem, 3vw, 2.4rem); }
.pol-eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase; color: var(--crimson-ink);
}
.pol-title {
  margin: .5rem 0 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.015em;
  text-wrap: balance;
}
.pol-lede {
  margin-top: 1rem; max-width: 34em;
  font-size: var(--fs-lede); line-height: 1.62; color: var(--ink-70);
}
.pol-meta {
  margin-top: 1.1rem;
  font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-38);
}

/* --- Layout -------------------------------------------------------------- */

.pol-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 62rem) {
  .pol-layout { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
  .pol-toc { position: sticky; top: 5.2rem; }
}

/* --- Contents ------------------------------------------------------------ */

.pol-toc {
  border: 1px solid var(--ink-14); border-radius: 14px;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--warm-white);
}
.pol-toc__h {
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase; color: var(--ink-38);
}
/* Deliberately unnumbered. The groups are not a sequence, and "1–11" beside
   policies numbered "1–36" would read as a second, conflicting numbering. The
   list-style reset in styles.css already hides the markers; the indent that
   was here was reserving room for markers that never appear. */
.pol-toc__list { margin: .75rem 0 0; padding-left: 0; }
.pol-toc__list li { margin-top: .42rem; font-size: var(--fs-sm); }
.pol-toc__list a { color: var(--ink-70); text-decoration: none; }
.pol-toc__list a:hover { color: var(--crimson-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Policy groups ------------------------------------------------------- */

.pol-group { padding-top: clamp(1.6rem, 3.4vw, 2.6rem); }
.pol-group + .pol-group { border-top: 1px solid var(--ink-14); margin-top: clamp(1.8rem, 3.6vw, 2.8rem); }
.pol-group__h {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem); line-height: 1.1;
  letter-spacing: -.012em;
}

/* Anchor targets sit under the sticky bar without this. */
.pol-group[id] { scroll-margin-top: 5rem; }

.pol { margin-top: clamp(1.3rem, 2.6vw, 1.9rem); max-width: 40em; }
.pol h3 {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.012em;
}
.pol__n {
  flex: none;
  display: inline-grid; place-items: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem;
  border-radius: 999px;
  background: var(--wine); color: var(--warm-white);
  font-family: var(--f-ui);
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  transform: translateY(.12rem);
}
.pol p { margin-top: .6rem; font-size: var(--fs-body); line-height: 1.68; color: var(--ink-70); }
.pol strong { color: var(--ink); font-weight: 700; }
/* styles.css resets `ul, ol { list-style: none }` site-wide, which is right for
   the navigation and card grids it was written for — and wrong here. Without
   this line a policy's conditions render as indented lines with no markers,
   and "all four of these" reads as loose sentences rather than a checklist.
   Wine rather than champagne: a champagne dot on porcelain all but vanishes. */
.pol ul { margin: .6rem 0 0; padding-left: 1.15rem; list-style: disc; }
.pol li {
  margin-top: .35rem; padding-left: .2rem;
  font-size: var(--fs-body); line-height: 1.62; color: var(--ink-70);
}
.pol li::marker { color: var(--wine); }
/* Underlined, not just coloured. styles.css sets `a { text-decoration: none }`
   site-wide, so without an explicit underline a link inside a policy reads as
   red emphasis rather than something to tap — and colour alone is no cue at
   all for a colour-blind reader. Same treatment as the notice beside the form. */
.pol a {
  color: var(--crimson-ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pol a:hover { text-decoration-thickness: 2px; }

.pol-contact { margin-top: .9rem; padding-left: 1.15rem; }
.pol-contact li { font-weight: 600; }

/* --- Closing call to action ---------------------------------------------- */

.pol-cta {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  border: 1px solid var(--ink-14); border-radius: 16px;
  background: var(--warm-white);
}
.pol-cta h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1;
}
.pol-cta p { margin-top: .6rem; max-width: 34em; font-size: var(--fs-body); color: var(--ink-70); }
.pol-cta__row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* --- Foot ---------------------------------------------------------------- */

.pol-foot {
  border-top: 1px solid var(--ink-14);
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--warm-white);
}
.pol-foot__inner { display: grid; gap: .3rem; }
.pol-foot p { font-size: var(--fs-sm); color: var(--ink-55); }
.pol-foot a { color: var(--ink); font-weight: 700; text-decoration: none; }
.pol-foot a:hover { color: var(--crimson-ink); }

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

@media (max-width: 26rem) {
  /* The number badge and heading share a baseline row; below about 400px the
     heading needs the full width, so the badge moves onto its own line rather
     than squeezing the words into a two-character column. */
  .pol h3 { flex-wrap: wrap; gap: .45rem; }
  .pol-top__inner { gap: .6rem; }
  .pol-top__cta { padding-inline: .9rem; font-size: var(--fs-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .pol-top { backdrop-filter: none; }
}