/* ============================================================
   SpainHolidayFun — holiday-bright palette over the Tailnews shell.
   Loaded AFTER theme/css/style.css so these win. We override the
   theme's news-red accent with a Mediterranean palette and add a
   few small helpers (category chips, hero, money block).
   ============================================================ */

:root {
  --shf-coral: #ff6b4a;   /* primary accent (was news red) */
  --shf-coral-dark: #e8552a;
  --shf-teal: #13b5b1;    /* sea / secondary accent */
  --shf-teal-dark: #0e8f8c;
  --shf-sun: #ffc93c;     /* sunshine highlight */
  --shf-ink: #1f2937;
}

/* =========================================================
   PURGED-UTILITY SHIM. The theme ships a PURGED Tailwind build,
   so a number of spacing/layout utilities the templates rely on
   were stripped out (silently → "missing padding"). Re-declare
   the exact standard Tailwind values here (loaded last, so they
   win). Covers everything grepped as used-but-absent.
   ========================================================= */
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt-0 { padding-top: 0; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pr-16 { padding-right: 4rem; }
.mb-0 { margin-bottom: 0; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.object-cover { object-fit: cover; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.top-2 { top: 0.5rem; }
.left-2 { left: 0.5rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-24 { height: 6rem; }
.h-28 { height: 7rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-56 { height: 14rem; }
.w-3 { width: 0.75rem; }
.w-7 { width: 1.75rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.rounded-none { border-radius: 0; }

/* --- Accent: remap the theme's red utilities to coral --- */
.bg-red-600, .bg-red-700 { background-color: var(--shf-coral) !important; }
.hover\:bg-red-700:hover { background-color: var(--shf-coral-dark) !important; }
.text-red-500, .text-red-600, .text-red-700, .text-red-800 { color: var(--shf-coral-dark) !important; }
.border-red-600, .border-red-700 { border-color: var(--shf-coral) !important; }

/* The little accent tick before section headings + card categories */
.border-l-2, .border-l-3 { border-color: var(--shf-coral) !important; }

/* --- Brand wordmark in the (black) top nav + footer --- */
.shf-brand { color: #fff; letter-spacing: -0.01em; }
.shf-brand b { color: var(--shf-sun); }
.shf-brand .shf-mark { display: inline-flex; width: 1.05em; height: 1.05em; margin-right: .28em; }
.shf-brand .shf-mark svg { width: 100%; height: 100%; display: block; }

/* --- Category chip (bright, rounded) --- */
.shf-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  background: var(--shf-teal);
  color: #fff;
  line-height: 1.4;
}
.shf-chip-coral { background: var(--shf-coral); }
.shf-chip-sun { background: var(--shf-sun); color: var(--shf-ink); }

/* --- Moat badges (⭐ Local Gems · 🇬🇧 English-friendly · Free) --- */
.shf-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.shf-badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.7rem; font-weight: 700; line-height: 1.4;
  padding: 0.12rem 0.5rem; border-radius: 9999px;
  background: #fff; border: 1px solid #e5e7eb; color: var(--shf-ink);
  white-space: nowrap;
}
.shf-badge-gem  { background: #fff7e6; border-color: #f4d58d; color: #8a6d1a; }
.shf-badge-eng  { background: #eaf4ff; border-color: #bcdcff; color: #1c4f8a; }
.shf-badge-free { background: #eafaf0; border-color: #b7e6c8; color: #1c7a45; }

/* --- Past-event card: grey the thumbnail + a corner flag --- */
.shf-past-card .shf-cardimg { filter: grayscale(100%) brightness(0.88); }
.shf-past-tag {
  position: absolute; bottom: 0.5rem; left: 0.5rem; z-index: 2;
  background: rgba(0,0,0,0.72); color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 9999px;
}

/* --- Audience tags (Great for visitors / Good for expats) --- */
.shf-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  color: #555; background: #f1f1f1; border-radius: 0.3rem;
  padding: 0.08rem 0.45rem; margin-right: 0.25rem;
}

/* --- Downloads list (PDF programmes / schedules) --- */
.shf-downloads { list-style: none; margin: 0; padding: 0; }
.shf-download {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.8rem; margin-bottom: 0.4rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.4rem;
  font-weight: 600; color: var(--shf-ink);
}
.shf-download:hover { border-color: var(--shf-coral); color: var(--shf-coral-dark); }

/* --- Filter bar (cadence / cost / audience) --- */
.shf-filterbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.shf-filter-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: #9ca3af; margin: 0 0.15rem 0 0.5rem;
}
.shf-filter-label:first-child { margin-left: 0; }
.shf-filter {
  font-size: 0.78rem; font-weight: 600; color: #444;
  padding: 0.25rem 0.7rem; border-radius: 9999px;
  background: #fff; border: 1px solid #e5e7eb; transition: all .15s ease;
}
.shf-filter:hover { border-color: var(--shf-coral); color: var(--shf-coral-dark); }
.shf-filter-active { background: var(--shf-coral) !important; border-color: var(--shf-coral) !important; color: #fff !important; }

/* --- Date-confidence note (honest unconfirmed-dates line) --- */
.shf-date-note {
  font-size: 0.8rem;
  color: var(--shf-coral-dark);
  font-style: italic;
}

/* --- Facts box on event pages --- */
.shf-facts { background: #fff; border: 1px solid #efefef; border-top: 4px solid var(--shf-teal); }
.shf-facts dt { font-weight: 700; color: var(--shf-ink); }
.shf-facts dd { color: #555; }

/* --- Money / affiliate block --- */
.shf-money {
  background: linear-gradient(135deg, #fff6ef 0%, #eefbfa 100%);
  border: 1px solid #ffe2d4;
  border-radius: 0.5rem;
  padding: 1.3rem; /* explicit — the theme purges p-5 */
}
.shf-btn {
  display: inline-block;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  background: var(--shf-coral);
  color: #fff !important;
  transition: background 0.15s ease;
}
.shf-btn:hover { background: var(--shf-coral-dark); }
.shf-btn-teal { background: var(--shf-teal); }
.shf-btn-teal:hover { background: var(--shf-teal-dark); }

/* --- Hero gradient overlay (ensure present even if purged) --- */
.bg-gradient-cover {
  background-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 100%);
}

/* --- Image placeholder (bright, intentional — used until real images land in 05/06) --- */
.shf-ph {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--shf-teal) 0%, var(--shf-sun) 55%, var(--shf-coral) 100%);
  position: relative;
}
.shf-ph::after {
  content: "☀";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Region tile (home + hubs) --- */
.shf-region-tile { position: relative; overflow: hidden; border-radius: 0.5rem; }
.shf-region-tile img { transition: transform 0.4s ease; }
.shf-region-tile:hover img { transform: scale(1.06); }

/* =========================================================
   HUB PAGES (region / city / category) — photo hero band +
   event-card thumbnail. A real photo is layered OVER the
   Mediterranean gradient via the --shf-img custom property, so
   a missing/404 image degrades gracefully to the gradient.
   (h-48 & friends are purged from the theme, so card-image
   height is set explicitly here, not via a Tailwind utility.)
   ========================================================= */

/* Full-width photo hero band atop a hub */
.shf-hubhero {
  position: relative;
  overflow: hidden;
  border-radius: 0.6rem;
  min-height: 15rem;
  display: flex;
  align-items: flex-end;
  background-image: var(--shf-img, none),
    linear-gradient(120deg, var(--shf-teal) 0%, var(--shf-teal-dark) 48%, var(--shf-coral) 100%);
  background-size: cover;
  background-position: center;
}
@media (min-width: 640px) { .shf-hubhero { min-height: 19rem; } }
.shf-hubhero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.05) 100%);
}
/* Past event: grey the photo (via ::before so the heading/badges keep colour) + flag */
.shf-hubhero.shf-past { background-image: linear-gradient(120deg, #8a8a8a 0%, #5f5f5f 100%); }
.shf-hubhero.shf-past::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--shf-img, none);
  background-size: cover; background-position: center;
  filter: grayscale(100%) contrast(0.95) brightness(0.9);
}
.shf-past-flag {
  position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2;
  background: rgba(0,0,0,0.72); color: #fff; font-weight: 700; font-size: 0.78rem;
  padding: 0.3rem 0.75rem; border-radius: 9999px;
}
.shf-hubhero-inner { position: relative; z-index: 1; width: 100%; padding: 1.4rem; color: #fff; }
@media (min-width: 640px) { .shf-hubhero-inner { padding: 2.25rem; } }
.shf-hubhero-bc { font-size: 0.85rem; color: rgba(255,255,255,0.82); margin-bottom: 0.5rem; }
.shf-hubhero-bc a { color: rgba(255,255,255,0.92); }
.shf-hubhero-bc a:hover { color: #fff; }
.shf-hubhero h1 { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
@media (min-width: 640px) { .shf-hubhero h1 { font-size: 2.6rem; } }
.shf-hubhero-meta { color: rgba(255,255,255,0.92); margin-top: 0.5rem; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

/* Event/guide card image — explicit height, photo over gradient */
.shf-cardimg {
  display: block;
  width: 100%;
  height: 11rem;
  background-image: var(--shf-img, none),
    linear-gradient(135deg, var(--shf-teal) 0%, var(--shf-sun) 55%, var(--shf-coral) 100%);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
.hover-img:hover .shf-cardimg { transform: scale(1.05); }

/* =========================================================
   DETAIL PAGES (event / guide) — hero, facts, prose, card
   (The theme's purged CSS lacks grid/sizing utilities, so the
   layout here is defined explicitly rather than via Tailwind.)
   ========================================================= */

/* Card shell */
.shf-card {
  background: #fff;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
}
.shf-body { padding: 1.4rem; }
@media (min-width: 640px) { .shf-body { padding: 2.25rem; } }

/* Hero band — no photo (bright Mediterranean gradient) */
.shf-hero {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem 1.75rem;
  background: linear-gradient(120deg, var(--shf-teal) 0%, var(--shf-teal-dark) 48%, var(--shf-coral) 100%);
}
@media (min-width: 640px) { .shf-hero { padding: 2.75rem 2.25rem 2.25rem; } }
.shf-hero::after {
  content: "";
  position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,201,60,0.55), transparent 70%);
  pointer-events: none;
}
.shf-hero > * { position: relative; }
.shf-hero h1 { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.12; margin-top: 0.6rem; }
@media (min-width: 640px) { .shf-hero h1 { font-size: 2.5rem; } }
.shf-hero .shf-hero-meta { color: rgba(255,255,255,0.94); margin-top: 0.6rem; font-weight: 500; }

/* Hero band — with photo */
.shf-hero-photo { position: relative; }
.shf-hero-photo img { display: block; width: 100%; height: 17rem; object-fit: cover; }
@media (min-width: 640px) { .shf-hero-photo img { height: 24rem; } }
.shf-hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 65%, transparent 100%);
}
@media (min-width: 640px) { .shf-hero-cap { padding: 2rem; } }
.shf-hero-cap h1 { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.12; margin-top: 0.5rem; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
@media (min-width: 640px) { .shf-hero-cap h1 { font-size: 2.5rem; } }

/* Quick-facts strip (icons + label/value), wraps on mobile */
.shf-facts2 {
  display: flex; flex-wrap: wrap; gap: 1rem 2.25rem;
  background: #fff; border: 1px solid #ececec; border-top: 3px solid var(--shf-teal);
  border-radius: 0.6rem; padding: 1.1rem 1.3rem; margin-bottom: 1.6rem;
}
.shf-fact { display: flex; gap: 0.6rem; align-items: flex-start; }
.shf-fact-ico { font-size: 1.2rem; line-height: 1.3; }
.shf-fact-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: #a3a3a3; font-weight: 700; }
.shf-fact-val { color: #2b2b2b; font-weight: 600; line-height: 1.35; }

/* Readable article prose (used on events, guides, hub intros) */
.shf-prose { color: #3a3a3a; font-size: 1.03rem; line-height: 1.75; }
.shf-prose > p { margin-bottom: 1.1rem; }
.shf-prose h2 { font-size: 1.45rem; font-weight: 700; margin: 1.9rem 0 0.6rem; color: #1f2937; }
.shf-prose h3 { font-size: 1.18rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: #1f2937; }
.shf-prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.1rem; }
.shf-prose ol { list-style: decimal; padding-left: 1.4rem; margin-bottom: 1.1rem; }
.shf-prose li { margin-bottom: 0.4rem; }
.shf-prose a { color: var(--shf-coral-dark); text-decoration: underline; }
.shf-prose strong { color: #1f2937; font-weight: 700; }
.shf-prose blockquote { border-left: 4px solid var(--shf-teal); padding: 0.5rem 1rem; background: #f4fbfb; margin: 1.3rem 0; color: #444; }
.shf-prose img { max-width: 100%; height: auto; border-radius: 0.4rem; margin: 1.2rem 0; }

/* =========================================================
   SIDEBAR — "Coming up soon" with image thumbnails + cleaner
   newsletter group; balanced affiliate banner. (Theme-purged
   utilities don't reach here, so these are explicit.)
   ========================================================= */

/* Coming-up-soon list */
.shf-side-head {
  background: var(--shf-ink);
  color: #fff;
  padding: 0.85rem 1.1rem;
  border-radius: 0.55rem 0.55rem 0 0;
}
.shf-side-head h2 { color: #fff; font-size: 1.05rem; font-weight: 700; }
.shf-side-head .shf-side-sub { color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 500; }
.shf-side-list {
  background: #fff;
  border: 1px solid #ececec;
  border-top: 0;
  border-radius: 0 0 0.55rem 0.55rem;
  overflow: hidden;
}
.shf-side-item {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid #f2f2f2;
  transition: background 0.15s ease;
}
.shf-side-item:last-child { border-bottom: 0; }
.shf-side-item:hover { background: #fafafa; }
.shf-side-thumb {
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.5rem;
  background-image: var(--shf-img, none),
    linear-gradient(135deg, var(--shf-teal) 0%, var(--shf-sun) 55%, var(--shf-coral) 100%);
  background-size: cover;
  background-position: center;
}
.shf-side-body { min-width: 0; }
.shf-side-title { display: block; font-weight: 700; color: var(--shf-ink); line-height: 1.2; font-size: 0.95rem; }
.shf-side-item:hover .shf-side-title { color: var(--shf-coral-dark); }
.shf-side-meta { display: block; font-size: 0.78rem; color: #8a8a8a; margin-top: 0.2rem; }

/* Newsletter signup group (sidebar / footer / home).
   The FORM carries the border+radius; input is borderless and the button
   stretches to full height so nothing peeks around it. */
.shf-news-form {
  display: flex;
  align-items: stretch;
  border: 1px solid #e3d6cc;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.shf-news-form:focus-within { border-color: var(--shf-coral); }
.shf-news-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0.7rem 0.9rem;
  color: #333;
  background: transparent;
  font: inherit;
  line-height: 1.3;
}
.shf-news-form input:focus { outline: none; }
.shf-news-form button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 1.2rem;
  white-space: nowrap;
  font-weight: 700;
}

/* Affiliate / money block — action card: icon badge · text · CTA */
.shf-money-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
}
.shf-money-ico {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.shf-money-text { flex: 1 1 12rem; }
.shf-money-cta { flex: 0 0 auto; }
.shf-money-note { font-size: 0.72rem; color: #9a8d85; margin-top: 0.9rem; }

/* Standard content pages (About, Contact, Privacy, …) — centred readable
   column. Explicit, so it never depends on purged max-w/mx-auto utilities. */
.shf-page {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 0.6rem;
  padding: 1.6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
@media (min-width: 640px) { .shf-page { padding: 2.5rem 2.75rem; } }
.shf-page-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--shf-ink);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .shf-page-title { font-size: 2.4rem; } }

/* ============================================================
   MAGAZINE HOMEPAGE — varied editorial composition. All of the
   following are hand-written (the public theme ships a PURGED
   Tailwind build), reuse the palette vars + the --shf-img photo
   pattern (missing image → Mediterranean gradient), and degrade
   gracefully. Sections: section heading · hero mosaic · feature
   band (region + editorial spotlight) · category rows · local
   gems scroller · bento region explorer.
   ============================================================ */

/* --- Section heading (coral bar OR emoji icon + optional "see all") --- */
.shf-sec-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.15rem; }
.shf-sec-head h2 { font-size: 1.5rem; font-weight: 800; color: var(--shf-ink); line-height: 1.15; }
@media (min-width: 640px) { .shf-sec-head h2 { font-size: 1.7rem; } }
.shf-sec-bar { flex: 0 0 auto; width: 0.3rem; height: 1.5rem; border-radius: 2px; background: var(--shf-coral); }
.shf-sec-dark h2 { color: #fff; }
.shf-sec-ico { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; }
.shf-sec-sub { color: #6b7280; font-size: 0.92rem; margin: -0.6rem 0 1.1rem; }
.shf-sec-more { margin-left: auto; align-self: center; color: var(--shf-coral-dark); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.shf-sec-more:hover { text-decoration: underline; }

/* --- Hero mosaic: 1 big lead + 3 stacked, photo cells with title overlay --- */
.shf-mosaic { display: flex; flex-direction: column; gap: 0.9rem; }
.shf-mosaic-rest { display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 1024px) {
  .shf-mosaic { flex-direction: row; align-items: stretch; }
  .shf-mosaic-lead { flex: 1.9 1 0; }
  .shf-mosaic-rest { flex: 1 1 0; }
}
.shf-mosaic-cell {
  position: relative; overflow: hidden; border-radius: 0.6rem;
  display: flex; align-items: flex-end; min-height: 12rem;
  background-image: var(--shf-img, none),
    linear-gradient(135deg, var(--shf-teal) 0%, var(--shf-sun) 55%, var(--shf-coral) 100%);
  background-size: cover; background-position: center;
  transition: transform 0.2s ease;
}
.shf-mosaic-rest .shf-mosaic-cell { flex: 1 1 0; }
.shf-mosaic-lead { min-height: 17rem; }
@media (min-width: 1024px) { .shf-mosaic-lead { min-height: 25rem; } }
.shf-mosaic-cell:hover { transform: translateY(-2px); }
.shf-mosaic-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.shf-mosaic-cap { position: relative; z-index: 1; padding: 1rem 1.1rem; width: 100%; }
.shf-mosaic-lead .shf-mosaic-cap { padding: 1.5rem; }
.shf-mosaic-cap h3 { color: #fff; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
.shf-mosaic-cell h3 { font-size: 1.02rem; }
.shf-mosaic-lead h3 { font-size: 1.6rem; }
@media (min-width: 640px) { .shf-mosaic-lead h3 { font-size: 2rem; } }
.shf-mosaic-meta { font-size: 0.78rem; color: rgba(255,255,255,0.85); margin-top: 0.25rem; }
.shf-mosaic-chip {
  display: inline-block; background: var(--shf-coral); color: #fff;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.12rem 0.5rem; border-radius: 9999px; margin-bottom: 0.5rem;
}

/* --- Feature band: big media + body (region spotlight + editorial spotlight) --- */
.shf-feature {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 0.8rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
@media (min-width: 1024px) {
  .shf-feature { flex-direction: row; align-items: stretch; }
  .shf-feature--image-right { flex-direction: row-reverse; }
  .shf-feature--bleed { flex-direction: column; }
}
.shf-feature--editorial { background: linear-gradient(135deg, #fff6ef 0%, #eefbfa 100%); border: 1px solid #ffe2d4; }
.shf-feature-media {
  position: relative; min-height: 15rem;
  background-image: var(--shf-img, none),
    linear-gradient(120deg, var(--shf-teal) 0%, var(--shf-teal-dark) 48%, var(--shf-coral) 100%);
  background-size: cover; background-position: center;
}
@media (min-width: 1024px) {
  .shf-feature-media { flex: 0 0 42%; min-height: auto; }
  .shf-feature--bleed .shf-feature-media { flex: 0 0 auto; min-height: 20rem; }
}
.shf-feature-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 55%, transparent 100%);
}
.shf-feature-media-cap { position: absolute; z-index: 1; left: 0; bottom: 0; padding: 1.3rem 1.5rem; }
.shf-feature-media-cap--br { left: auto; right: 0; text-align: right; }
.shf-feature-kicker {
  display: inline-block; background: var(--shf-sun); color: var(--shf-ink);
  font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.2rem 0.7rem; border-radius: 9999px; margin-bottom: 0.55rem;
}
.shf-feature-media-cap h2 { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
@media (min-width: 640px) { .shf-feature-media-cap h2 { font-size: 2.4rem; } }
.shf-feature-body { padding: 1.5rem; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .shf-feature-body { padding: 2rem 2.25rem; } }
.shf-feature-eyebrow { color: var(--shf-coral-dark); font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem; }
.shf-feature-title { font-size: 1.5rem; font-weight: 800; color: var(--shf-ink); line-height: 1.2; margin-bottom: 0.6rem; }
@media (min-width: 640px) { .shf-feature-title { font-size: 1.85rem; } }
.shf-feature-intro { color: #4a4a4a; line-height: 1.65; margin-bottom: 1.1rem; }
.shf-feature-events { margin-top: 0.4rem; }
.shf-feature-actions { text-align: right; margin-bottom: 1.4rem; }
.shf-feature-subhead {
  font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: #8a8a8a; margin-bottom: 0.85rem; padding-top: 0.4rem; border-top: 1px solid #ececec;
}

/* --- Local Gems horizontal scroller --- */
.shf-scroller {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 0.25rem 0.25rem 0.75rem;
}
.shf-scroller::-webkit-scrollbar { height: 8px; }
.shf-scroller::-webkit-scrollbar-track { background: transparent; }
.shf-scroller::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 9999px; }
.shf-scroll-card {
  scroll-snap-align: start; flex: 0 0 15.5rem; max-width: 15.5rem;
  background: #fff; border-radius: 0.6rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
@media (min-width: 640px) { .shf-scroll-card { flex-basis: 17.5rem; max-width: 17.5rem; } }

/* --- Bento region explorer: varied tile sizes + live event counts --- */
.shf-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
@media (min-width: 640px) { .shf-bento { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .shf-bento { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; } }
.shf-bento-tile {
  position: relative; overflow: hidden; border-radius: 0.6rem;
  min-height: 9rem; display: flex; align-items: flex-end;
  background-image: var(--shf-img, none),
    linear-gradient(120deg, var(--shf-teal) 0%, var(--shf-teal-dark) 50%, var(--shf-coral) 100%);
  background-size: cover; background-position: center;
  transition: transform 0.2s ease;
}
.shf-bento-tile:hover { transform: translateY(-2px); }
.shf-bento-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.05) 65%, transparent 100%);
  transition: background 0.2s ease;
}
.shf-bento-tile:hover::after { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.22) 70%, transparent 100%); }
.shf-bento--lg { grid-column: span 2; grid-row: span 2; min-height: 18.8rem; }
@media (max-width: 639px) { .shf-bento--lg { grid-row: span 1; min-height: 11rem; } }
.shf-bento-cap { position: relative; z-index: 1; padding: 0.9rem 1rem; width: 100%; }
.shf-bento-name { color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.15; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.shf-bento--lg .shf-bento-name { font-size: 1.5rem; }
.shf-bento-count {
  display: inline-block; margin-top: 0.35rem;
  background: rgba(255,255,255,0.92); color: var(--shf-ink);
  font-weight: 700; font-size: 0.72rem; padding: 0.12rem 0.55rem; border-radius: 9999px;
}
.shf-bento-gem {
  display: inline-block; margin-left: 0.35rem; vertical-align: middle;
  background: var(--shf-sun); color: var(--shf-ink);
  font-weight: 800; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem; border-radius: 9999px;
}

/* --- Related events / regions footer on guide articles --- */
.shf-related { margin-top: 2rem; }
.shf-region-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.shf-region-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px;
  padding: 0.4rem 0.9rem; font-weight: 700; color: var(--shf-ink); transition: all 0.15s ease;
}
.shf-region-pill:hover { border-color: var(--shf-coral); color: var(--shf-coral-dark); }