:root {
  /* Fresh, Modern European Color Palette inspired by europarejser.eu */
  --color-primary: #2872fa; /* European Blue */
  --color-primary-hover: #1559ed;
  --color-primary-light: #eff6ff; /* Soft blue tint */
  --color-accent: #f59e0b; /* Warm Gold Accent */
  --color-badge-blue: #dbeafe;
  --color-badge-blue-text: #1d4ed8;
  --color-badge-green: #dcfce7;
  --color-badge-green-text: #15803d;
  --color-badge-amber: #fef3c7;
  --color-badge-amber-text: #b45309;
  
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f5f9;
  --color-text-main: #334155;
  --color-text-heading: #192a3d;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-success: #16a34a;
  --color-danger: #dc2626;

  /* Primary tints for borders/dots inside light-blue surfaces (route
     timeline, card hovers, guarantee badge). */
  --color-primary-border: #bfdbfe;
  --color-primary-ring: #93c5fd;
  --color-primary-dot-ring: #dbeafe;
  
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 10px rgba(25, 42, 61, 0.06);
  --shadow-card-hover: 0 16px 32px rgba(25, 42, 61, 0.12);
  --shadow-cta: 0 4px 12px rgba(40, 114, 250, 0.25); /* btn-primary hover / focus rings */
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --max-width: 1240px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.3;
}

/* Utilities */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.badge-blue { background: var(--color-badge-blue); color: var(--color-badge-blue-text); }
.badge-green { background: var(--color-badge-green); color: var(--color-badge-green-text); }
.badge-amber { background: var(--color-badge-amber); color: var(--color-badge-amber-text); }
.badge-neutral { background: var(--color-surface-subtle); color: var(--color-text-muted); }

/* Header & Navigation */
.header-topbar {
  background-color: #ffffff;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.header-topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.topbar-highlight {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-heading);
  font-weight: 600;
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1.5rem;
  height: 4.75rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.logo-badge {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  letter-spacing: -0.02em;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.logo-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1rem, 1.8vw, 2rem);
  list-style: none;
  margin: 0;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-main);
  transition: color 0.15s ease;
  position: relative;
  padding: 0.25rem 0;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.nav-actions .btn {
  white-space: nowrap;
}

.site-header .custom-logo {
  height: 4.75rem;
  max-height: none;
  width: auto;
  max-width: 320px;
}

.site-header .custom-logo-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* Real logo in drawer / footer (er_site_logo_plain) */
.logo-image {
  display: flex;
  align-items: center;
}

.logo-image .custom-logo {
  max-height: 48px;
  max-width: 200px;
  width: auto;
  height: auto;
}

.footer-brand .logo-image .custom-logo {
  /* Force the render height: the real logo SVG declares a tiny intrinsic
     size (76×45), so max-height alone never enlarges it. The base
     .logo-image rule caps max-height at 48px (drawer) — max-height beats
     height, so it must be lifted here for the footer logo to scale. */
  height: 128px;
  width: auto;
  max-height: none;
  max-width: 400px;
}

/* Smaller footer logo on tablet/phone (the footer stacks to one column at
   ≤900px, where 128px would dominate). */
@media (max-width: 900px) {
  .footer-brand .logo-image .custom-logo {
    height: 88px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}

.btn-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text-heading);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.btn-lg {
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
}

/* Hero Section */
.hero {
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 3.5rem 0 4.5rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-tagline {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 2.9rem);
  line-height: 1.18;
  margin-bottom: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text-heading);
}

.hero-tagline span.highlight {
  color: var(--color-primary);
}

.hero-description {
  font-size: 1.12rem;
  color: var(--color-text-main);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hero-photo-main {
  grid-column: span 2;
  height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hero-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo-sub {
  height: 130px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hero-photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-guarantee-badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  margin-top: 1.25rem;
  grid-column: span 2;
}

.hero-guarantee-badge .guarantee-badge-logo {
  margin: 0;
  flex-shrink: 0;
}

.hero-guarantee-badge .guarantee-badge-logo img {
  width: auto;
  height: 48px;
  max-width: 110px;
  object-fit: contain;
  display: block;
}

/* Trust / Guarantee Strip */
.trust-strip {
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
  padding: 1.75rem 0;
}

.trust-flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.trust-icon {
  width: 44px;
  height: 44px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.trust-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.trust-icon .trust-icon-image {
  width: auto;
  max-width: 36px;
  max-height: 32px;
  height: auto;
  display: block;
}

.trust-text-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text-heading);
}

.trust-text-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Section Common */
.section {
  padding: 4.5rem 0;
}

/* Guides band: the PoC styled #guides with an inline background + borders
   (theme-poc/index.html) which migration 1.7.0 replaced with this class —
   the matching rule was missing until 2.0.7. */
.er-front-section-alt {
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-header {
  margin-bottom: 3rem;
  max-width: 720px;
}

.section-header.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  display: block;
}

.section-title {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  color: var(--color-text-heading);
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Tour Cards Grid — fixed 3 columns so card width is stable no matter how many tours */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

/* "Se alle rejser" link centered below the featured-tours grid. */
.tours-grid-footer {
  margin-top: 2.5rem;
  text-align: center;
}

.tour-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tour-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-ring);
}

.tour-card-visual {
  height: 230px;
  position: relative;
  overflow: hidden;
}

.tour-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tour-card:hover .tour-card-visual img {
  transform: scale(1.04);
}

.tour-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 42, 61, 0.2) 0%, rgba(25, 42, 61, 0.75) 100%);
  z-index: 1;
  pointer-events: none;
}

.tour-card-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-route-preview {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: calc(100% - 2rem);
  z-index: 2;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(25, 42, 61, 0.85);
  backdrop-filter: blur(4px);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
}

/* Long routes (e.g. Strasbourg) must never flood the card image: cap the
   pill at two lines and let over-long words wrap instead of overflowing. */
.tour-route-preview span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.tour-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tour-card-title {
  font-size: 1.35rem;
  color: var(--color-text-heading);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.tour-card-excerpt {
  color: var(--color-text-main);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Tour Sights Thumbnail Preview */
.tour-sights-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sight-thumb {
  flex: 1;
  height: 54px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.sight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sight-label {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 4px;
  text-align: center;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-guide-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.86rem;
  color: var(--color-text-heading);
  background: var(--color-surface-subtle);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}

.tour-guide-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.tour-highlights-list {
  list-style: none;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--color-border-light);
  padding-top: 1.25rem;
}

.tour-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--color-text-main);
  margin-bottom: 0.6rem;
}

.tour-highlight-icon {
  color: var(--color-primary);
  font-weight: bold;
}

.tour-card-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-price-box {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.price-amount {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.1;
}

.price-per {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Feature/Why Us Section */
.why-section {
  background: #ffffff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.feature-box,
.feature-card {
  padding: 1.75rem;
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-icon-wrapper {
  width: 48px;
  height: 48px;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.feature-icon-wrapper svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: 0.5rem;
}

.feature-desc {
  font-size: 0.9rem;
  color: var(--color-text-main);
  line-height: 1.6;
}

/* Visual Photo Highlights Gallery on Frontpage — the grid class is reused by
   the native core/gallery block on the front page (see the Gutenberg bridge
   section at the end of this file). The PoC .gallery-photo-item markup is
   gone; items are .wp-block-image figures now. */
.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

/* Bus Specifications Showcase with Imagery */
.bus-amenities-banner {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  margin: 3.5rem 0 0;
  box-shadow: var(--shadow-sm);
}

.bus-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.bus-photos-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.bus-photo-card {
  height: 170px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bus-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Single-photo variant: when the photo-duo block renders only one image
   (image_two_id = 0), the duo grid collapses to one column and the lone
   photo grows taller so it still balances the text column. */
.bus-photos-duo:has(> .bus-photo-card:only-child) {
  grid-template-columns: 1fr;
}

.bus-photos-duo .bus-photo-card:only-child {
  height: 300px;
}

.bus-spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.bus-spec-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--color-text-main);
}

/* Guides Spotlight Section — compact horizontal cards: avatar left, text
   right. Guide photos come in mixed aspect ratios, so the image is forced
   into a square and cropped to a circle instead of relying on the source
   crop. auto-fit + capped width keeps the row centered under the centered
   section header even when only two guides exist. */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin: 2rem auto 0;
}

.guide-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem;
}

.guide-card-photo {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

.guide-card-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.guide-card-info {
  padding: 0;
  min-width: 0;
}

.guide-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: 0.15rem;
}

.guide-card-role {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.guide-card-bio {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Testimonials / Delegate Endorsements */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.testimonial-stars {
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}

.testimonial-quote {
  font-size: 0.95rem;
  color: var(--color-text-main);
  margin-bottom: 1.5rem;
  line-height: 1.65;
  flex: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-author strong {
  color: var(--color-text-heading);
  font-size: 0.92rem;
}

.testimonial-author .text-muted {
  font-size: 0.8rem;
}

/* SVG Icon Utilities */
.icon-svg {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  /* Icons are always primary blue (owner rule), regardless of surrounding
     text color. Exception: the Inkluderet & Ikke Inkluderet section uses
     text glyphs (.inclusion-check/.exclusion-cross), not .icon-svg. */
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

/* Unused PoC icon/quote utilities removed (.icon-svg-fill, .icon-badge,
   .quote-stars, .quote-text, .quote-author, .author-avatar, .author-info) —
   testimonials render via .testimonial-* classes. */

.spec-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}

.spec-icon-box svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* PoC quote/author utilities removed — see note above. */

/* Product Detail Page Specifics & Gallery */

/* Gallery hero grid (tour page): main photo spans both rows, two subs right. */
.tour-gallery-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 170px 170px;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.gallery-hero-main {
  grid-row: span 2;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 260px;
}

.gallery-hero-main img,
.gallery-hero-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.gallery-hero-main img {
  position: absolute;
  inset: 0;
}

.gallery-hero-sub {
  position: relative;
}

.gallery-badge-count {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Sticky In-Page Navigation Bar for UX */
.inpage-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 90;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-sm);
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
}

.inpage-nav-list {
  display: flex;
  gap: 2rem;
  list-style: none;
  overflow-x: auto;
}

.inpage-nav-link {
  display: block;
  padding: 0.85rem 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.inpage-nav-link:hover,
.inpage-nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* PoC detail-layout / sidebar-card styles removed — the live tour page uses
   .er-tour-layout / .er-tour-sidebar / .booking-card (see tour detail
   additions below). */

/* Day-by-day Itinerary with Photos */
.itinerary-day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.itinerary-day-header {
  background: var(--color-surface-subtle);
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  /* The header is a <button> for keyboard accessibility — reset the UA
     button styles so it renders like the original div. */
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  border-left: none;
  border-right: none;
  border-top: none;
}

.itinerary-day-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text-heading);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.itinerary-day-body {
  padding: 1.25rem;
}

.itinerary-day-inner {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.itinerary-day-photo {
  width: 140px;
  height: 95px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.itinerary-day-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PoC itinerary-briefing-tag removed — no markup renders it. */

/* PoC inclusions-dual-grid removed — the live section uses .inclusions-grid
   with .inclusion-card / .exclusion-card (see Inclusions / Exclusions below). */

/* PoC sticky-booking-sidebar styles removed — the live tour page uses
   .er-tour-sidebar / .booking-card (see tour detail additions below). */

.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-family: inherit;
  background: #ffffff;
  color: var(--color-text-main);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(40, 114, 250, 0.15);
}
/* PoC guest-counter / modal-checkout styles removed — the live booking form
   uses .er-person-grid / .er-person-card and WooCommerce's own checkout. */

/* Footer */
.site-footer {
  background: #ffffff;
  color: var(--color-text-muted);
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.6fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  margin-top: 1rem;
  line-height: 1.6;
  max-width: 320px;
  color: var(--color-text-main);
}

.footer-heading {
  color: var(--color-text-heading);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.65rem;
}

.footer-links a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.footer-bottom-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.footer-bottom-legal .footer-guarantee {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.footer-bottom-legal .guarantee-logo {
  height: 30px;
  width: auto;
  display: block;
}

/* Anchor scroll offset — single source of truth. The in-page nav (~88px) plus
   breathing room; --scroll-offset is reused by the tour-page overrides below. */
:root {
  --scroll-offset: 5.5rem;
}

section[id], article[id], div[id] {
  scroll-margin-top: var(--scroll-offset);
}

/* Mobile Nav Button & Drawer */
.nav-toggle-btn {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--color-text-heading);
  line-height: 1;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: #ffffff;
  z-index: 1100;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
}

.mobile-nav-drawer.active {
  right: 0;
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-nav-link {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--color-primary);
}

.mobile-drawer-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Route Timeline Graphic — full definition lives in the "Tour detail page
   additions" section below (.route-timeline-wrap block). */

/* Itinerary Accordion Controls */
.itinerary-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.itinerary-btn-tool {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.itinerary-btn-tool:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.itinerary-day-header.clickable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.itinerary-day-header.clickable:hover {
  background: var(--color-border);
}

.itinerary-chevron {
  transition: transform 0.25s ease;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.itinerary-day.collapsed .itinerary-chevron {
  transform: rotate(-90deg);
}

.itinerary-day.collapsed .itinerary-day-body {
  display: none;
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(4px);
  z-index: 1201;
}

.lightbox-content {
  position: relative;
  z-index: 1202;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0f172a;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.lightbox-image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.lightbox-caption {
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}

.lightbox-close:hover {
  background: rgba(0, 0, 0, 0.9);
}

/* Lightbox prev/next navigation + counter */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, opacity 0.2s;
}

.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.9);
}

.lightbox-prev {
  left: 0.75rem;
}

.lightbox-next {
  right: 0.75rem;
}

.lightbox-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.lightbox-nav[disabled]:hover {
  background: rgba(0, 0, 0, 0.6);
}

.lightbox-counter {
  position: absolute;
  bottom: 0.55rem;
  right: 0.9rem;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 640px) {
  .lightbox-prev {
    left: 0.4rem;
  }
  .lightbox-next {
    right: 0.4rem;
  }
}



/* PoC tooltip + booking-receipt styles removed — no markup renders them. */

/* Print Styles */
@media print {
  .site-header,
  .header-topbar,
  .inpage-nav,
  .modal-backdrop,
  .site-footer,
  .itinerary-actions,
  .nav-actions {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .container {
    max-width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }

  .itinerary-day {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    margin-bottom: 1.5rem !important;
  }

  .itinerary-day.collapsed .itinerary-day-body {
    display: block !important;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .hero-grid,
  .bus-banner-grid,
  .footer-grid,
  .photo-gallery-grid,
  .tour-gallery-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* tours-grid drops to 2 columns on tablet, 1 on phones (below) */
  .tours-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  /* guides-grid is auto-fit: it collapses to one column on its own. */

  .tour-gallery-hero {
    grid-template-rows: auto;
  }

  .gallery-hero-main {
    height: 240px;
  }

  .gallery-hero-sub {
    display: none;
  }

  .nav-links, .nav-actions {
    display: none;
  }

  .nav-toggle-btn {
    display: block;
  }

  .itinerary-day-inner {
    grid-template-columns: 1fr;
  }

  .itinerary-day-photo {
    width: 100%;
    height: 160px;
  }

  .trust-flex {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 600px) {
  .tours-grid {
    grid-template-columns: 1fr;
  }

  .trust-flex {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   WordPress additions (Europa Rejser theme)
   ========================================================================== */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.site-header .custom-logo-link img {
  height: 4.75rem;
  max-height: none;
  width: auto;
}

.er-page-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 2.75rem 0;
}

.er-page-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0.4rem;
  color: var(--color-text-heading);
}

.er-content-area {
  padding: 3rem 1.5rem 4.5rem;
}

.er-page-content {
  max-width: 820px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}

.er-page-content p,
.er-tour-overview p {
  margin-bottom: 1.1rem;
  font-size: 0.98rem;
}

.er-page-content img {
  border-radius: var(--radius-md);
}

.er-single-thumb {
  margin-bottom: 1.75rem;
}

.er-single-thumb img {
  border-radius: var(--radius-md);
}

/* Post cards (blog / archive / search) */
.er-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

.er-post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.er-post-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.er-post-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.er-post-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}

.er-post-title {
  font-size: 1.2rem;
  margin: 0;
}

.er-post-title a:hover {
  color: var(--color-primary);
}

.er-post-card-body .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Pagination */
.er-pagination {
  margin-top: 2.75rem;
  display: flex;
  justify-content: center;
}

.er-pagination .nav-links {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.er-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--color-text-main);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.er-pagination .page-numbers.current,
.er-pagination .page-numbers:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* Comments */
.er-comments {
  max-width: 820px;
  margin: 2rem auto 0;
}

.er-comments-title {
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.comment-list .comment-body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.comment-list .children {
  list-style: none;
  padding-left: 2rem;
}

.comment-form input:not([type='submit']):not([type='checkbox']),
.comment-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.comment-form .submit {
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.comment-form .submit:hover {
  background-color: var(--color-primary-hover);
}

/* Search form */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
}

.search-form input[type='search'] {
  flex: 1;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}

.search-form .search-submit {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 1.25rem;
  font-weight: 600;
  cursor: pointer;
}

/* Front-page gallery title (native block heading on the Forside page). */
.front-gallery-title {
  font-size: 1.6rem;
  margin: 0;
}

/* PoC contact-CTA styles removed — the front-page contact section is now the
   europa-rejser/cta-section block (.er-cta-* at the end of this file). */

/* Footer contact lines */
.footer-contact-line {
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  color: var(--color-text-heading);
}

.footer-contact-line a {
  color: var(--color-primary);
}

.footer-contact-address {
  font-size: 0.84rem;
  color: var(--color-text-muted);
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

/* Tour detail page additions */
.er-tour-header {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 2.25rem 0;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
}

.er-tour-title {
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.45rem 0 0.35rem;
  color: var(--color-text-heading);
}

.er-tour-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin: 0;
}

.er-gallery-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 2rem 0 2.25rem;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
}

/* PoC gallery-hero-grid / -3col / -overlay removed — the live gallery hero
   renders .tour-gallery-hero (main + two subs), styled in the base section. */

.er-quick-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-main);
}

.er-quick-meta > div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.er-quick-meta .icon-svg {
  color: var(--color-primary);
  width: 16px;
  height: 16px;
}

.route-timeline-wrap {
  margin-top: 1.5rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}

.route-timeline-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-heading);
  margin-bottom: 1rem;
}

.route-steps-trail {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.route-trail-line {
  flex: 1;
  height: 3px;
  background: var(--color-primary-border);
  border-radius: 2px;
  margin-top: 1.05rem;
  position: relative;
}

.route-trail-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  border: solid var(--color-primary);
  border-width: 0 3px 3px 0;
  padding: 3px;
  transform: rotate(-45deg);
}

.route-step-node {
  text-align: center;
  min-width: 120px;
}

.route-step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-primary-dot-ring);
  margin: 0 auto 0.5rem;
}

.route-step-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-text-heading);
}

.route-step-country {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.route-step-time {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 600;
}

/* Tour layout two-column */
.er-tour-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}

/* Grid items default to min-width:auto, which lets unbreakable content force
   the 1fr track wider than the viewport on small screens. */
.er-tour-main {
  min-width: 0;
}

.er-tour-section {
  margin-bottom: 3.5rem;
}

.er-tour-section-title {
  font-size: 1.85rem;
  color: var(--color-text-heading);
  margin: 0.4rem 0 1.5rem;
}

.er-tour-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.75rem;
}

.er-fact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
}

.er-fact .icon-svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.er-fact strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.er-fact span {
  font-weight: 600;
  color: var(--color-text-heading);
}

/* Guide profile */
.er-guide-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.er-guide-profile {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.er-guide-avatar {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--color-primary-light);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

.er-guide-info {
  flex: 1;
  min-width: 260px;
}

.er-guide-name {
  font-size: 1.3rem;
  color: var(--color-text-heading);
  margin-bottom: 0.25rem;
}

.er-guide-role {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.er-guide-bio {
  font-size: 0.92rem;
  color: var(--color-text-main);
  line-height: 1.65;
  margin-bottom: 0.5rem;
}

.er-guide-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  align-items: center;
  flex-wrap: wrap;
}

.er-guide-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.er-guide-meta .icon-svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.er-guide-meta strong {
  color: var(--color-text-heading);
}

/* FAQ — shared card style. Tour page (faq.php) uses .er-faq-list; block
   patterns use .er-faq-grid (two columns) with a slightly airier card. */
.er-faq-list {
  display: grid;
  gap: 1rem;
}

.er-faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.er-faq-q {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-heading);
}

.er-faq-a {
  font-size: 0.92rem;
  color: var(--color-text-main);
  margin: 0;
}

/* Booking card */
.er-tour-sidebar {
  position: sticky;
  top: 4rem;
  align-self: start;
  /* Grid items default to min-width:auto; without this the booking card's
     unbreakable departure <select> forces the 1fr track (and the whole page)
     wider than small phone viewports once the layout stacks at <=1024px. */
  min-width: 0;
}

.booking-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

.booking-card-head {
  background: transparent;
  color: var(--color-text-heading);
  padding: 0 0 1.25rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.booking-card-head .price-label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 1;
  margin-bottom: 0.25rem;
  color: var(--color-text-muted);
}

.booking-price {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-heading);
  margin-top: 0.25rem;
}

.booking-sub {
  font-size: 0.82rem;
  color: var(--color-badge-green-text);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* PoC calculator booking controls removed — the live booking form uses
   .form-control / .er-person-grid / .er-person-card (see multi-person
   booking form section below). */

/* Checkbox/radio labels: used bare (single-room, member toggle, PoC modal-era
   groups) and inside .er-radio-group stacks — no side padding by default. */
.booking-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0;
  margin-top: 1.1rem;
  font-size: 0.86rem;
  color: var(--color-text-main);
  cursor: pointer;
}

.booking-checkbox input {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.booking-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0.9rem 1.75rem 0;
}

/* Shop toolbar + departure overview */
.er-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.er-departure-overview {
  padding-top: 1rem;
}

.er-departure-overview .container {
  padding: 0;
}

/* 404 page */
.er-404-search {
  margin: 1.5rem auto 0;
  max-width: 480px;
}

.er-404-search .search-form {
  margin: 0 auto;
}

.er-404-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Search results page */
.er-search-grid {
  margin-top: 2rem;
}

.er-search-empty {
  margin-top: 1.5rem;
}

.departure-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

.departure-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.departure-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.departure-table td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.92rem;
  color: var(--color-text-main);
  vertical-align: middle;
}

.departure-table tbody tr:hover {
  background: #fbfdff;
}

.departure-table a {
  color: var(--color-text-heading);
  font-weight: 700;
}

.departure-table a:hover {
  color: var(--color-primary);
}

.er-departure-duration {
  font-size: 0.8rem;
}

.er-departure-cta-cell {
  text-align: right;
}

.er-departure-cta-cell .btn {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

/* Scrollspy active link on tour page */
.inpage-nav-link.inpage-nav-book {
  color: var(--color-primary);
  font-weight: 700;
}

/* Anchor scroll offset (tour page) */
.er-tour-section,
#about,
#booking-card {
  scroll-margin-top: var(--scroll-offset);
}

/* Itinerary print styles */
@media print {
  body * {
    visibility: hidden;
  }

  .er-tour-layout,
  .er-tour-layout * {
    visibility: visible;
  }

  .er-tour-layout {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .er-tour-sidebar,
  .inpage-nav,
  .itinerary-actions {
    display: none !important;
  }
}

/* Responsive additions */
@media (max-width: 1024px) {
  .er-tour-layout {
    grid-template-columns: 1fr;
  }

  .er-tour-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .er-tour-facts {
    grid-template-columns: 1fr;
  }

  .er-page-content {
    padding: 1.5rem;
  }
}

/* Logged-in admin bar: keep sticky inpage-nav/sidebar offsets correct */
body.admin-bar .inpage-nav {
  top: 32px;
}

body.admin-bar .er-tour-sidebar {
  top: calc(4rem + 32px);
}

@media (max-width: 782px) {
  body.admin-bar .inpage-nav {
    top: 0px;
  }

  body.admin-bar .er-tour-sidebar {
    top: calc(4rem + 46px);
  }
}
/* Prevent horizontal scroll from 100vw full-bleed sections (scrollbar width).
   clip (not hidden) keeps position: sticky working. */
body {
  overflow-x: clip;
}

/* Inclusions / Exclusions dual grid */
.inclusions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.inclusion-card,
.exclusion-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.inclusion-card {
  border-top: 3px solid var(--color-success);
}

.exclusion-card {
  border-top: 3px solid var(--color-danger);
}

.er-inclusion-title {
  color: var(--color-success);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.er-exclusion-title {
  color: var(--color-danger);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.inclusion-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inclusion-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: var(--color-text-main);
  border-bottom: 1px solid var(--color-border-light);
}

.inclusion-item:last-child {
  border-bottom: none;
}

.inclusion-check {
  color: var(--color-success);
  font-weight: 700;
  flex-shrink: 0;
}

.exclusion-cross {
  color: var(--color-danger);
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .inclusions-grid {
    grid-template-columns: 1fr;
  }
}

/* Tilmeld Rejsende form */
.er-section-sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: -0.5rem 0 1.5rem;
}

.er-person-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.er-person-grid .form-group {
  margin-bottom: 0;
}

.er-person-submit {
  width: 100%;
}

@media (max-width: 700px) {
  .er-person-grid {
    grid-template-columns: 1fr;
  }
}

/* Multi-person booking form */
.er-booking-top {
  margin-bottom: 1.25rem;
}

.er-person-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: 1.25rem;
}

.er-person-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.er-person-card-single {
  margin-top: 1rem;
}

/* Radio / checkbox-group stacks inside person cards (rendered by
   booking.php for ThemeHigh radio + checkboxgroup field types). */
.er-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.er-radio-group .booking-checkbox {
  margin-top: 0;
}

/* Itinerary day sub-label (e.g. "Travel day") in the day header. */
.day-sub-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-right: 0.5rem;
}

/* Guide role line inside tour-card guide badges. */
.tour-guide-role-mini {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}


/* Booking sidebar card (right column) */
.er-tour-sidebar .booking-card {
  padding: 1.75rem;
}

.er-tour-sidebar .bullet-green {
  color: var(--color-success);
  font-weight: 700;
}

.er-total-box {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  margin: 1.25rem 0;
}

.er-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.er-total-row span {
  color: var(--color-text-main);
}

.er-total-value {
  font-size: 1.35rem;
  color: var(--color-primary);
  font-weight: 800;
}

.er-total-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}

.er-book-cta {
  width: 100%;
}

.er-book-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0.75rem 0 0;
}

.er-book-guarantee .icon-svg {
  color: var(--color-primary);
}

.booking-card-inclusions {
  border-top: 1px solid var(--color-border);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.booking-card-inclusions h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 0.75rem;
}

.er-booking-contact {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  text-align: center;
}

.er-booking-contact .er-contact-strong {
  font-weight: 700;
  display: block;
  color: var(--color-text-heading);
}

.er-booking-contact span {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Mobile sticky booking bar (product page)
   ==========================================================================

   On <= 1024px the tour layout stacks and the booking card (right column)
   lands far down the page. This bar is the mobile stand-in for that column:
   fixed to the bottom, always reachable, with the live total and a CTA that
   scrolls to (or submits) the booking form. JS adds .er-mbb-hidden while the
   booking form itself is on screen so it never covers the submit button. */

.er-mobile-book-bar {
  display: none;
}

@media (max-width: 1024px) {
  .er-mobile-book-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(0);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Slide out of the way while the booking form is on screen. */
  .er-mobile-book-bar.er-mbb-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }

  .er-mbb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.65rem 1.25rem;
  }

  .er-mbb-price {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
  }

  .er-mbb-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .er-mbb-total {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-heading);
    white-space: nowrap;
  }

  .er-mbb-cta {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }

  /* Keep the bar from covering the end of the page content. */
  body.single-product .site-footer {
    margin-bottom: 4.25rem;
  }

  /* Admin bar sits on top; nothing to offset for a bottom bar, but keep the
     print rule below from being the only mention of the bar. */
}

@media print {
  .er-mobile-book-bar {
    display: none !important;
  }
}

/* Member discount checkbox (Europabevægelsen) */
.er-member-group {
  align-self: end;
  grid-column: 1 / -1;
}

.er-member-toggle-wrap {
  margin-top: 0;
  align-items: center;
  min-height: 42px;
  padding: 0.45rem 0.75rem;
  font-weight: 600;
  color: var(--color-text-heading);
}

.er-member-toggle-wrap input {
  margin-top: 0;
  accent-color: var(--color-primary);
}



/* ==========================================================================
   Page & Front page: native Gutenberg blocks
   ==========================================================================

   Pages are built from core blocks (group/heading/paragraph/
   buttons/image/gallery) that reuse the theme's class names
   (.hero, .hero-grid, .trust-flex, .feature-card, ...). The original
   PoC-derived rules in this file therefore keep working.

   The one structural difference: WP renders each group as
     <div class="wp-block-group {classes}">
       <div class="wp-block-group__inner-container is-layout-flow">…</div>
     </div>
   The inner container would otherwise become the group's single grid/flex
   item and collapse the layout into one column. `display: contents` makes
   its children act as direct children of the group instead, so rules like
   `.hero-grid { display:grid; grid-template-columns: 1.15fr 0.85fr }`
   apply to the real children (hero-content + hero-image-grid).
   ========================================================================== */

.er-front-page .wp-block-group > .wp-block-group__inner-container,
.er-full-width-page .wp-block-group > .wp-block-group__inner-container,
.er-page-content .wp-block-group > .wp-block-group__inner-container,
.entry-content .wp-block-group > .wp-block-group__inner-container {
	display: contents;
}

/* Badge paragraphs must not stretch (display:contents makes the group the
   flex/grid context; keep the badge inline). The .badge base rule at the top
   of this file already carries the visual styling. */
p.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: var(--radius-pill);
}

p.badge-blue,
.badge-blue {
	background: var(--color-badge-blue);
	color: var(--color-badge-blue-text);
}

p.badge-green,
.badge-green {
	background: var(--color-badge-green);
	color: var(--color-badge-green-text);
}

p.badge-amber,
.badge-amber {
	background: var(--color-badge-amber);
	color: var(--color-badge-amber-text);
}

/* Bus banner: the badge needs breathing room above the title — the global
   element reset strips the paragraph margin the PoC carried inline. */
.bus-amenities-banner p.badge {
	margin-bottom: 0.75rem;
}

/* Hero: badge sits above the tagline */
.wp-block-group.hero-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wp-block-group.hero-content p.badge {
	margin-bottom: 1.25rem;
}

/* Guarantee badge: the group is a flex row */
.wp-block-group.hero-guarantee-badge p {
	margin: 0;
}

.wp-block-group.hero-guarantee-badge p.er-guarantee-sub {
	font-size: 0.82rem;
}

/* Trust items: the group is a flex row; the text column needs its own stack. */
.wp-block-group.trust-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wp-block-group.trust-text p {
	margin: 0;
}

/* Feature cards: group is a flex column; the icon box keeps its size. */
.wp-block-group.feature-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* Buttons: theme classes (btn-primary/btn-outline/btn-lg) land on the
   .wp-block-button WRAPPER, while the visible element is the inner
   .wp-block-button__link. Neutralize the wrapper and style only the link. */
.wp-block-button.btn-primary,
.wp-block-button.btn-outline,
.wp-block-button.btn-lg {
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
	transform: none;
	transition: none;
}

.wp-block-button.btn-primary .wp-block-button__link {
	background-color: var(--color-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.85rem 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button.btn-primary .wp-block-button__link:hover {
	background-color: var(--color-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-cta);
}

.wp-block-button.btn-outline .wp-block-button__link {
	background-color: #ffffff;
	border: 1px solid var(--color-border);
	color: var(--color-text-heading);
	border-radius: var(--radius-sm);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.85rem 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button.btn-outline .wp-block-button__link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: var(--color-primary-light);
}

/* Gallery: core/gallery gets .photo-gallery-grid; override core nested-image sizing */
.wp-block-gallery.photo-gallery-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}

/* Gallery: core/gallery gets .photo-gallery-grid; override core nested-image sizing.
   Specificity note: the custom grid display forces percentage widths to resolve
   against the grid TRACK, and core's `.columns-N figure…:not(#individual-image)`
   width calc is (1,3,1) — HIGHER than a plain `.wp-block-gallery.photo-gallery-grid
   figure…:not(#individual-image)` (1,2,1). The old override silently lost and
   collapsed every tile to ~25% of one track. Include `.columns-N` (or rely on the
   !important display rule + width override below) so the override actually wins. */
.wp-block-gallery.photo-gallery-grid figure.wp-block-image:not(#individual-image) {
	width: 100% !important;
}

.wp-block-gallery.photo-gallery-grid .wp-block-image {
	height: 180px;
	border-radius: var(--radius-md);
	overflow: hidden;
	position: relative;
	box-shadow: var(--shadow-sm);
	margin: 0;
	cursor: pointer;
}

.wp-block-gallery.photo-gallery-grid .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.wp-block-gallery.photo-gallery-grid .wp-block-image:hover img {
	transform: scale(1.06);
}

.wp-block-gallery.photo-gallery-grid figure.wp-block-image figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
	color: #fff;
	padding: 1rem 0.75rem 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0;
	text-shadow: none;
	max-height: none;
	overflow: visible;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.wp-block-gallery.photo-gallery-grid figure.wp-block-image:has(figcaption)::before {
	display: none;
}

/* Images inside hero/bus layouts must fill their fixed-height figures. */
.wp-block-image.hero-photo-main img,
.wp-block-image.hero-photo-sub img,
.wp-block-image.bus-photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-image.hero-photo-main,
.wp-block-image.hero-photo-sub,
.wp-block-image.bus-photo-card {
	margin: 0;
}

/* FAQ Grid in Blocks */
.er-faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 2rem;
}

.er-faq-question {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-text-heading);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.er-faq-answer {
	font-size: 0.92rem;
	color: var(--color-text-main);
	line-height: 1.6;
	margin: 0;
}

/* Contact Grid in Blocks */
.er-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
	margin-top: 2rem;
}

.er-contact-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 2.25rem;
	box-shadow: var(--shadow-sm);
}

.er-contact-info-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.er-contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.er-contact-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.er-contact-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--color-primary);
	stroke-width: 2;
	fill: none;
}

/* ==========================================================================
   UX/a11y additions (v2.0.0)
   ========================================================================== */

/* Visible keyboard focus everywhere (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* "Om Konceptet" section grid (migration 2.0.0). */
.er-concept-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .er-concept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .er-concept-grid {
    grid-template-columns: 1fr;
  }
}

/* Member checkbox: sentence-case label so it reads as a checkbox, not a heading. */
.er-member-toggle-wrap span {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.92rem;
}

/* Departure table: scroll affordance on small screens. */
@media (max-width: 700px) {
  .departure-table-wrap {
    position: relative;
  }

  .departure-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
}

/* Touch targets: comfortable hit areas for nav + inpage links. */
.nav-link {
  padding: 0.6rem 0;
}

.inpage-nav-link {
  padding: 1rem 0;
}

/* Departure line on tour cards — one unified muted style for both upcoming
   ("Næste afrejse") and past ("Sidste afrejse") dates (owner request). */
.tour-next-departure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}

.tour-next-departure svg {
  flex-shrink: 0;
}

/* ==========================================================================
   CTA section (europa-rejser/cta-section block)
   ==========================================================================

   Soft-blue band with centered title, text and button group — mirrors the
   original PoC contact section and the editor preview in blocks-editor.css.
   The block renders a bare <div class="er-cta-section"> (no .section class),
   so it carries its own padding. */

.er-cta-section {
  padding: 4.5rem 0;
  background: var(--color-primary-light);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.er-cta-title {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  color: var(--color-text-heading);
  margin: 0 0 0.85rem;
  letter-spacing: -0.02em;
}

.er-cta-text {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--color-text-main);
  line-height: 1.6;
}

.er-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Small-phone safeguards (≤ 400px devices)
   ==========================================================================

   From the 2026-09-10 responsive audit: grids sized with minmax(320px, 1fr)
   and the two-column bus spec list cannot compress below 320px, which pushed
   pages wider than 320px viewports once gutters were subtracted. Single
   columns below the 600px ladder keep every card fully visible on the
   smallest common phones. Split-file mirrors: the guide/testimonial/bus
   rules live in theme-base.css, the posts-grid/route/page-title rules in
   theme-tour.css. */

@media (max-width: 400px) {
  .guides-grid,
  .testimonials-grid,
  .er-posts-grid {
    grid-template-columns: 1fr;
  }

  .bus-spec-list {
    grid-template-columns: 1fr;
  }
}

/* Route timeline: four 120px-min nodes exceed a phone viewport. Scroll
   inside the card (same pattern as .departure-table-wrap) instead of
   stretching the page. */
@media (max-width: 480px) {
  .route-timeline-wrap {
    overflow-x: auto;
  }

  .route-steps-trail {
    min-width: max-content;
  }

  /* Guide profile: the info column is flex:1 (flex-basis 0%) with a
     260px min-width above, so on phones it neither wraps nor shrinks.
     Full-row basis makes it wrap under the avatar; min-width:0 lets the
     full row actually compress to the card. Both are needed — basis
     alone still honours the 260px min-width, min-width alone (with
     basis 0%) never triggers the wrap. */
  .er-guide-info {
    flex-basis: 100%;
    min-width: 0;
  }

  /* Itinerary day header: the right-aligned sub-label ("Ankomst &
     Velkomst" etc.) shares one flex row with the title. Without shrink
     room it is pushed past the card edge and clipped by .itinerary-day's
     overflow:hidden — let it wrap to its own row instead. */
  .itinerary-day-header {
    row-gap: 0.4rem;
  }

  .itinerary-day-title,
  .itinerary-day-header > div {
    min-width: 0;
  }

  .day-sub-label {
    white-space: normal;
  }

  /* Overview fact rows: the text column is a plain flex item (grow 0), so
     short facts clamp at max-content (e.g. "Varighed" stays 120px wide
     while the row has ~110px of dead space) and long facts wrap hard.
     Let the text column take the remaining width. */
  .er-fact > div {
    flex: 1;
    min-width: 0;
  }

  /* Day title: the "Dag N" badge + title share one flex row that gets
     crushed at 320px (title drops to ~78px, 5 words-per-line). Let the
     badge sit on its own line when the title needs room. */
  .itinerary-day-title {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .itinerary-day-title .badge {
    flex-shrink: 0;
  }

  /* Booking checkbox labels (member toggle, single room): give the text
     more line height so multi-line labels read as sentences, not a wall. */
  .booking-checkbox span {
    line-height: 1.5;
  }
}

/* Long one-word page titles ("Handelsbetingelser") must break instead of
   pushing the document wider than the viewport. */
.er-page-title,
.er-tour-title {
  overflow-wrap: break-word;
}