/*
 * Service pages (site.service-page): the few pieces the compiled Tailwind
 * build (main.css) has no class for. Colours and type are the site theme's
 * own: ink #171613, char #211F1A, clay #A2674A, stone #847C70,
 * bone #F2F0ED, peach highlight #E0B295; Cormorant Garamond / DM Sans.
 */

/* Hero ground: the dark ink plate, warmed towards the right like the
   previous design's gradient, in the theme's own palette. */
.sp-hero-ground {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(162, 103, 74, .22) 0%, rgba(162, 103, 74, 0) 55%),
    linear-gradient(115deg, #171613 0%, #1C1A16 50%, #2A251F 100%);
}

/* Below lg, Tailwind's own grid-cols utility isn't active, so the grid has no
   explicit column count and the browser auto-places the two children side by
   side instead of stacking them - pushing the booking card off-screen. */
@media (max-width: 1023px) { .sp-hero-grid { grid-template-columns: 1fr; } }

/* A long section heading that would otherwise wrap on desktop; left full
   size on mobile where wrapping to two lines is normal and expected. */
@media (min-width: 1024px) { .sp-h-fit { font-size: 0.8em; } }
@media (min-width: 1024px) { .sp-hero-grid { align-items: end; } }
.sp-push-end { margin-top: auto; }

.sp-book {
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Highlighted words in section headings (the previous design's gold italic). */
.sp-h em { font-style: italic; color: #A2674A; }
.sp-dark .sp-h em { color: #E0B295; }
.sp-dark .rich-content a { color: #E0B295; }
.sp-dark .rich-content li::marker { color: #E0B295; }

/* Soft tinted ground for the benefit-card band. */
.sp-tint { background: #F8F7F5; }

.sp-card { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .45s ease; }
.sp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(23, 22, 19, .35); border-color: rgba(162, 103, 74, .35); }

/* Session facts: hairline dividers between cells, matching the stats strip. */
.sp-chip + .sp-chip { border-left: 1px solid rgba(23, 22, 19, .10); }
@media (max-width: 1023px) {
  .sp-chip:nth-child(3) { border-left: 0; }
  .sp-chip:nth-child(n+3) { border-top: 1px solid rgba(23, 22, 19, .10); }
}
.sp-chip:first-child { padding-left: 0; }
@media (max-width: 1023px) { .sp-chip:nth-child(3) { padding-left: 0; } }

/* Intro panel image fills its column top to bottom. */
.sp-intro-media { position: relative; min-height: 280px; }
.sp-intro-media img { position: absolute; inset: 0; }
@media (min-width: 1024px) { .sp-intro-media { min-height: 460px; } }

.sp-map { height: 340px; border: 0; }
@media (min-width: 1024px) { .sp-map { height: 100%; min-height: 420px; } }

/* Headline stat tag overlapping the "why" photo. */
.sp-stat-tag { position: absolute; left: -12px; bottom: 24px; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .55); }
@media (max-width: 639px) { .sp-stat-tag { left: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .sp-card { transition: none; }
  .sp-card:hover { transform: none; }
}