/*!
 * location-pages.css  —  ONE shared stylesheet for every Holi location page.
 * No location names in any selector. Variants are generic modifiers only.
 *
 * TOKENS are mapped to values measured on the live holiamsterdam.nl theme:
 *   fonts      Poppins (already loaded by the theme, do NOT enqueue again)
 *   colours    theme :root  --pink #dc1074 · --saffron #f6b302 · --ink #191919
 *              --cream #FBF3E7 · --cream-2 #F3E6D3 · --line rgba(36,21,18,.14)
 *              brand green #27b253 (hero H1, outline-button hover) and #0e6229 (--maroon-dark)
 *   container  1170px      radius  --radius 3px (buttons are 0)
 *   buttons    a.cfs-hyperlink: uppercase, 600, 1px border, 15px 30px, 0.3s linear
 */

.holi-location-page {
  --holi-font-heading: "Poppins", sans-serif;
  --holi-font-body: "Poppins", sans-serif;

  --holi-color-primary: #0e6229;        /* theme --maroon-dark; AA with white text (8:1) */
  --holi-color-primary-hover: #0a4a1f;
  --holi-color-brand-green: #27b253;    /* theme brand green: accents on dark, not text on white */
  --holi-color-secondary: #dc1074;      /* theme --pink: card/section sub-headings */
  --holi-color-accent: #f6b302;         /* theme --saffron */
  --holi-color-accent-hover: #ffc72e;
  --holi-color-ink: #191919;
  --holi-color-bg: #ffffff;
  --holi-color-surface: #FBF3E7;        /* theme --cream */
  --holi-color-surface-2: #F3E6D3;      /* theme --cream-2 */
  --holi-color-text: #333333;           /* live body paragraph colour */
  --holi-color-muted: #5b524c;
  --holi-color-line: rgba(36, 21, 18, .14);
  --holi-color-on-dark: #ffffff;
  --holi-focus: #191919;

  --holi-radius-sm: 0;                  /* live buttons are square */
  --holi-radius-md: 3px;                /* theme --radius */
  --holi-shadow-card: 0 6px 24px rgba(36, 21, 18, .08);
  --holi-container: 1170px;             /* live .container max-width */
  --holi-gutter: max(16px, env(safe-area-inset-left, 0px));
  --holi-section-space: clamp(48px, 7vw, 88px);
  --holi-measure: 68ch;

  font-family: var(--holi-font-body);
  color: var(--holi-color-text);
  background: var(--holi-color-bg);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.holi-location-page *,
.holi-location-page *::before,
.holi-location-page *::after { box-sizing: border-box; }

.holi-location-page :where(img) { max-width: 100%; height: auto; display: block; }
.holi-location-page :where(p) { margin: 0; font-size: 15px; line-height: 1.7; color: var(--holi-color-text); }
.holi-location-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* ---------- layout primitives ---------- */
.holi-location-container {
  width: 100%;
  max-width: calc(var(--holi-container) + 2 * var(--holi-gutter));
  margin-inline: auto;
  padding-inline: var(--holi-gutter);
}

.holi-location-section { padding-block: var(--holi-section-space); }
.holi-location-section--tint { background: var(--holi-color-surface); }
.holi-location-page .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.holi-location-section--compact { padding-block: clamp(32px, 4.5vw, 56px); }

.holi-location-page h1,
.holi-location-page h2,
.holi-location-page h3 {
  font-family: var(--holi-font-heading);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.holi-location-page h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem);
  line-height: 1.2;
  color: var(--holi-color-ink);
}
.holi-location-page h3 {
  font-size: clamp(2.125rem, 1.05rem + .4vw, 1.25rem);
  line-height: 1.3;
  color: var(--holi-color-secondary);
}

.holi-location-section__head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3.5vw, 40px); max-width: 100%; }
.holi-location-section__head p { max-width: 100%; }

.holi-location-prose { display: grid; gap: 1.1em; max-width: 100%; }

/* two-column text + media, collapses to one column */
.holi-location-split {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .holi-location-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .holi-location-split--media-first { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .holi-location-split--media-first .holi-location-split__media { order: -1; }
  .holi-location-split__media { position: sticky; top: 24px; }
}

/* ---------- figures / images ---------- */
.holi-location-figure { margin: 0; position: relative; overflow: hidden; background: var(--holi-color-surface-2); border-radius: var(--holi-radius-md); }
.holi-location-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.holi-location-figure--wide img { aspect-ratio: 16 / 9; }
.holi-location-figure figcaption {
  position: absolute; inset: auto 0 0 auto;
  padding: 3px 10px; font-size: .75rem; line-height: 1.5; font-weight: 500;
  color: var(--holi-color-on-dark); background: rgba(25, 25, 25, .78);
}

/* ---------- buttons (mirrors live a.cfs-hyperlink) ---------- */
.holi-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; min-width: 160px; max-width: 100%;
  padding: 13px 28px;
  font-size: 14px;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--holi-radius-sm);
  cursor: pointer; transition: background-color .3s linear, color .3s linear, border-color .3s linear;
}
.holi-btn--primary { background: var(--holi-color-primary); border-color: var(--holi-color-primary); color: #fff; }
.holi-btn--primary:hover { background: var(--holi-color-primary-hover); border-color: var(--holi-color-primary-hover); color: #fff; }
.holi-btn--accent { background: var(--holi-color-accent); border-color: var(--holi-color-accent); color: var(--holi-color-ink); }
.holi-btn--accent:hover { background: var(--holi-color-accent-hover); border-color: var(--holi-color-accent-hover); color: var(--holi-color-ink); }
.holi-btn--outline { background: transparent; border-color: var(--holi-color-ink); color: var(--holi-color-ink); }
.holi-btn--outline:hover { background: var(--holi-color-ink); color: #fff; }
.holi-btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.holi-btn--outline-light:hover { background: #fff; color: var(--holi-color-ink); }

.holi-location-link {
  color: var(--holi-color-primary); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.holi-location-page section {
  padding-bottom: 3rem;
}
.holi-location-link:hover { text-decoration-thickness: 2px; }

.holi-location-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.holi-location-actions > .holi-btn { flex: 0 1 auto; }

.holi-location-page a:focus-visible,
.holi-location-page button:focus-visible,
.holi-location-page summary:focus-visible {
  outline: 3px solid var(--holi-focus); outline-offset: 3px;
}
.holi-location-hero, .holi-location-final-cta { --holi-focus: #f6b302; }
.holi-location-page {
  overflow: visible !important;
}
/* ---------- breadcrumb ---------- */
.holi-location-breadcrumb { background: var(--holi-color-surface); border-bottom: 1px solid var(--holi-color-line); }
.holi-location-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; padding-block: 12px; font-size: .875rem; line-height: 1.4; }
.holi-location-breadcrumb li { display: inline-flex; align-items: center; color: var(--holi-color-muted); }
.holi-location-breadcrumb li + li::before { content: "/"; margin-inline: 10px; color: var(--holi-color-muted); }
.holi-location-breadcrumb a { color: var(--holi-color-ink); text-decoration: none; }
.holi-location-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.holi-location-breadcrumb [aria-current="page"] { font-weight: 600; color: var(--holi-color-ink); }

/* ---------- hero ---------- */
.holi-location-hero { background: var(--holi-color-ink); color: var(--holi-color-on-dark); }
.holi-location-hero__inner {
  display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(32px, 5vw, 72px); align-items: center;
}
@media (min-width: 960px) {
  .holi-location-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .holi-location-hero--no-image .holi-location-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
.holi-location-hero__content { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; min-width: 0; }
.holi-location-hero__eyebrow {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--holi-color-accent);
}
.holi-location-page .holi-location-hero h1 {
  color: #fff; font-size: clamp(4.875rem, 1.2rem + 3vw, 3.25rem); line-height: 1.12; letter-spacing: -.01em;
}
.holi-location-hero__copy { color: rgba(255, 255, 255, .88); max-width: 60ch; }
.holi-location-hero__media { min-width: 0; }
.holi-location-hero__media .holi-location-figure { border-radius: var(--holi-radius-md); }
.holi-location-hero__media .holi-location-figure img { aspect-ratio: 3 / 2; }
@media (max-width: 959px) { .holi-location-hero__media .holi-location-figure img { aspect-ratio: 16 / 9; } }
.holi-location-hero .holi-location-actions { margin-top: 4px; }

/* ---------- quick facts ---------- */
.holi-location-quickfacts { background: var(--holi-color-surface); border-bottom: 1px solid var(--holi-color-line); }
.holi-location-quickfacts__grid {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  padding-block: clamp(8px, 1.5vw, 16px);
}
.holi-location-quickfacts__item {
  display: grid; gap: 4px; align-content: start; padding: 16px 20px;
  border-inline-start: 3px solid var(--holi-color-accent);
  margin-block: 8px;
}
.holi-location-quickfacts dt {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--holi-color-muted);
}
.holi-location-quickfacts dd { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--holi-color-ink); }
.holi-location-quickfacts__note { margin-top: 4px !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 400; color: var(--holi-color-muted) !important; }

/* ---------- reasons (why visit) ---------- */
.holi-location-reasons__grid { display: grid; gap: clamp(16px, 2.5vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.holi-location-card {
  display: flex; flex-direction: column; min-width: 0; background: #fff;
  border: 1px solid var(--holi-color-line); border-radius: var(--holi-radius-md); overflow: hidden;
}
.holi-location-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.holi-location-card__body { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2.5vw, 28px); flex: 1 1 auto; }

/* ---------- travel ---------- */
.holi-location-travel__grid {
  display: grid; gap: clamp(16px, 2.5vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-bottom: clamp(24px, 3vw, 36px);
}
.holi-location-travel__grid[data-count="1"] { max-width: 44rem; }
.holi-location-travel-card {
  display: grid; gap: 10px; align-content: start; min-width: 0; padding: clamp(20px, 2.5vw, 28px);
  background: #fff; border-top: 4px solid var(--holi-color-brand-green); border-radius: var(--holi-radius-md);
  box-shadow: var(--holi-shadow-card);
}
.holi-location-travel-card__mode {
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--holi-color-muted);
}

/* ---------- map / directions ---------- */
.holi-location-map {
  display: grid; gap: 20px; align-items: center; padding: clamp(20px, 3vw, 32px);
  background: var(--holi-color-surface-2); border-radius: var(--holi-radius-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .holi-location-map { grid-template-columns: minmax(0, 1fr) auto; } }
.holi-location-map__route { display: grid; gap: 4px; min-width: 0; }
.holi-location-map__route strong { font-size: 1.0625rem; color: var(--holi-color-ink); }
.holi-location-map__frame { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; background: #fff; border-radius: var(--holi-radius-md); overflow: hidden; }
.holi-location-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.holi-location-map__frame .holi-btn { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.holi-location-map__frame[hidden] { display: none; }

/* ---------- dining ---------- */
.holi-location-dining .holi-location-actions { margin-top: clamp(20px, 3vw, 32px); }

/* ---------- landmarks ---------- */
.holi-location-landmarks__grid { display: grid; gap: clamp(16px, 2.5vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.holi-location-landmark-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--holi-color-line); border-radius: var(--holi-radius-md); overflow: hidden; }
.holi-location-landmark-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.holi-location-landmark-card__body { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.5vw, 28px); flex: 1 1 auto; }
.holi-location-landmark-card__type { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--holi-color-muted); }
.holi-location-landmark-card__body .holi-location-link { margin-top: auto; padding-top: 6px; font-size: 14px; }

/* ---------- FAQ accordion ---------- */
.holi-location-faq__list { display: grid; gap: 0; max-width: 100%; border-top: 1px solid var(--holi-color-line); }
.holi-location-faq__item { border-bottom: 1px solid var(--holi-color-line); }
.holi-location-faq__item h3 { font-size: inherit; margin: 0; color: var(--holi-color-ink); }
.holi-location-faq__button {
  all: unset; box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; cursor: pointer; font: 700 1.8rem/1.45 var(--holi-font-heading); color: var(--holi-color-ink);
}
.holi-location-faq__button:hover { color: var(--holi-color-secondary); }
.holi-location-faq__button:focus-visible { outline: 3px solid var(--holi-focus); outline-offset: 2px; }
.holi-location-faq__icon {
  flex: none; width: 28px; height: 28px; position: relative; border: 1px solid currentColor; border-radius: 50%;
}
.holi-location-faq__icon::before, .holi-location-faq__icon::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.holi-location-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.holi-location-faq__button[aria-expanded="true"] .holi-location-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.holi-location-faq__panel { padding: 0 4px 22px; max-width: 92%; }
.holi-location-faq__panel[hidden] { display: none; }
.holi-location-faq__panel a { color: var(--holi-color-primary); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.holi-location-faq__more { margin-top: 24px; }

/* ---------- related ---------- */
.holi-location-related__list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.holi-location-related__link {
  display: grid; gap: 2px; padding: 16px 20px; text-decoration: none; background: #fff;
  border: 1px solid var(--holi-color-line); border-left: 3px solid var(--holi-color-secondary); border-radius: var(--holi-radius-md);
  transition: border-color .3s linear, box-shadow .3s linear;
}
.holi-location-related__link:hover { border-left-color: var(--holi-color-primary); box-shadow: var(--holi-shadow-card); }
.holi-location-related__kind { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--holi-color-muted); }
.holi-location-related__label { font-weight: 600; color: var(--holi-color-ink); overflow-wrap: anywhere;font-size: 16px; }

/* ---------- final CTA ---------- */
.holi-location-final-cta { background: var(--holi-color-primary); color: #fff; }
.holi-location-final-cta__inner { display: grid; gap: 20px; justify-items: start; padding-block: clamp(48px, 7vw, 88px); }
.holi-location-page .holi-location-final-cta h2 { color: #fff; 100%; }
.holi-location-final-cta p { color: rgba(255, 255, 255, .92); max-width: 100%; }

/* ---------- responsive guards ---------- */
@media (max-width: 480px) {
	.holi-location-page .holi-location-hero h1 {
  font-size: clamp(2.875rem, 1.2rem + 3vw, 3.25rem); 
		line-height: 1.25;
}
	.holi-location-page :where(p) { 
  font-size: 14px; 
}
	.holi-location-page h1, .holi-location-page h2, .holi-location-page h3 {
  text-wrap: auto;
}
	.holi-location-faq__button {
  font: 700 1.5rem/1.45 var(--holi-font-heading); 
}
  .holi-location-actions { flex-direction: column; align-items: stretch; }
  .holi-location-actions > .holi-btn { width: 100%; }
  .holi-btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .holi-location-page * { transition: none !important; animation: none !important; }
}