/*
 * Events section styles — `/yacht-charter-events/` pillar.
 *
 * Slice 02: hero + sticky nav + narrative/venue-list/cost/faq sections.
 * Slice 03 adds .ev-y-card. Slice 07 adds .cal-* (calendar) and
 * .event-card (hub/category grid). Slice 14 adds homepage block styles.
 */

/* Variables mirror the mockup's :root block exactly so every rule below
   can be a 1:1 port of the mockup CSS. See `document/4) event pages,
   total 44 events/boatcrowd-event-detail-*.html` for the source values. */
:root {
  --ev-navy: #0F1B2D;
  --ev-navy-light: #1A2B42;
  --ev-navy-mid: #162336;
  --ev-accent: #E8513D;
  --ev-accent-hover: #D4432F;
  --ev-blue: #1A6FB5;
  --ev-blue-bg: #EEF4FA;
  --ev-charcoal: #333;
  --ev-text: #374151;
  --ev-text-light: #6b7280;
  --ev-border: #e5e7eb;
  --ev-sand: #F8F7F4;
  --ev-sand-dark: #EFEDE8;
  --ev-gray-100: #F3F4F6;
  --ev-gray-200: #E5E7EB;
  --ev-gray-300: #D1D5DB;
  --ev-gray-400: #9CA3AF;
  --ev-gray-500: #6B7280;
  --ev-gray-600: #4B5563;
  --ev-radius: 8px;
  --ev-radius-lg: 12px;
  --ev-radius-xl: 16px;
  --ev-shadow: 0 1px 3px rgba(0,0,0,.1);
  --ev-shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --ev-shadow-lg: 0 12px 40px rgba(0,0,0,.15);
  --ev-transition: 200ms ease;
  /* legacy aliases used by older rules below */
  --ev-text-muted: var(--ev-text-light);
  --ev-bg: var(--ev-gray-100);
}

/* Article-level baseline so child elements inherit Poppins + the right
   font-size scale even when Bootstrap's `body` font is different. */
.ev, .evh, .evc {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ev-charcoal);
  line-height: 1.65;
}
.ev a { color: inherit; text-decoration: none; }

/* ── HERO (full-bleed dark navy, matches mockup `.hero`) ──────────── */

.ev-hero {
  position: relative;
  height: 440px;
  /* Mockup uses `background: var(--gray-200)` (#E5E7EB) so the navy overlay
     in `::after` reads as a visible dark-to-light gradient even when no
     hero image is set. Using a dark navy fallback collapses the gradient. */
  background: var(--ev-gray-200) center/cover no-repeat;
  overflow: hidden;
  color: #fff;
    padding: 0;
}
.ev-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,27,45,.85) 0%, rgba(15,27,45,.5) 50%, rgba(15,27,45,.4) 100%);
  z-index: 1;
}

/* ── BREADCRUMB (matches mockup `.bc-wrap` / `.bc`) ───────────────── */

.ev-bc-wrap {
    margin-top: 60px;
  background: #fff;
  border-bottom: 1px solid var(--ev-gray-100);
}
.ev-bc {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 28px;
  font-family: 'Poppins', system-ui, sans-serif;
  /* Mockup uses html{font-size:15px} so its 0.75rem renders at 11.25px.
     Project html is 16px; pin to 11.25px to match the design pixel-for-pixel. */
  font-size: 11.25px;
  color: var(--ev-text-light);
}
.ev-bc a {
  color: var(--ev-text-light);
  text-decoration: none;
  transition: color var(--ev-transition);
}
.ev-bc a:hover { color: var(--ev-accent); }
.ev-bc .sep { margin: 0 6px; color: var(--ev-gray-300); }
.ev-bc .current { color: var(--ev-navy); font-weight: 500; }
.ev-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ev-hero-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 12px;
}
.ev-hero-h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
}
.ev-hero-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.94rem;
  color: rgba(255,255,255,.88);
}
.ev-hero-meta strong { color: #fff; font-weight: 600; }
.ev-hero-dot { color: rgba(255,255,255,.4); }

/* ── STICKY NAV ───────────────────────────────────────────────────── */
/* Matches mockup `.sticky-nav` + `.sticky-nav-inner` + `.nav-tabs` exactly. */

.ev-sticky-nav {
  position: sticky;
  top: 60px;                 /* site header height (v2 layout) */
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--ev-border);
}
.ev-sticky-nav-inner {
  max-width: 1280px;         /* mockup --max-w */
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ev-sticky-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.ev-sticky-nav ul::-webkit-scrollbar { display: none; }
.ev-sticky-nav li { list-style: none; }
/* High specificity + !important on a few key properties to defeat Bootstrap's
   default link styles (color, text-decoration). */
.ev-sticky-nav ul li a {
  display: block;
  padding: 14px 16px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11.7px;
  font-weight: 500;
  color: #6B7280 !important;             /* mockup --text-light */
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.ev-sticky-nav ul li a:hover,
.ev-sticky-nav ul li a.active {
  color: #333 !important;                /* mockup --charcoal */
  border-bottom-color: var(--ev-accent);
}

/* ── 2-COLUMN LAYOUT (main + sticky enquiry rail) ────────────────── */
/* Mockup `.layout` — max-w 1280, grid 1fr 360px, gap 40px, padding 32 28 56. */

.ev { max-width: 1280px; margin: 0 auto; padding: 32px 28px 56px; scroll-margin-top: 130px; }
.ev-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}
.ev-col-left { min-width: 0; }
.ev-col-right {
  position: sticky;
  top: 124px;  /* site header (60px) + sticky in-page nav (~52px) + 12px breathing */
  align-self: start;
}

/* ── ENQUIRY CARD (right rail) — matches mockup `.enquiry-card` + `.enq-*` ─ */

.ev-enq-card {
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 22px 24px;
}
.ev-enq-eyebrow {
  font-size: 9.3px;
  font-weight: 700;
  color: var(--ev-accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
.ev-enq-headline {
  font-size: 15.75px;
  font-weight: 700;
  color: var(--ev-navy);
  line-height: 1.3;
  margin-bottom: 14px;
}
.ev-enq-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.ev-enq-list li {
  padding: 5px 0 5px 24px;
  position: relative;
  font-size: 11.7px;
  color: #374151;
}
.ev-enq-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 2px;
  background: var(--ev-accent);
}
.ev-enq-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ev-enq-input, .ev-enq-textarea, .ev-enq-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12.3px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ev-navy);
  background: #fff;
  box-sizing: border-box;
}
.ev-enq-input:focus, .ev-enq-textarea:focus, .ev-enq-select:focus {
  outline: none;
  border-color: #1A6FB5;
}
.ev-enq-input::placeholder, .ev-enq-textarea::placeholder { color: #9CA3AF; opacity: 1; }
/* textarea-specific overrides (must be after the shared rule to win specificity)
   — Bootstrap's reboot sets `overflow:auto; resize:vertical` on textarea but
   inherits font/line-height from <body>; we lock font + line-height + min-height
   so the prefilled note text matches the mockup's spacing. */
.ev-enq-textarea {
  display: block;
  min-height: 64px;
  resize: vertical;
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-size: 12.3px !important;
  line-height: 1.5 !important;
}
.ev-enq-select {
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") right 12px center / 10px no-repeat;
}
.ev-enq-thanks {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: var(--ev-radius);
  font-size: 13px;
  line-height: 1.5;
}
.ev-enq-thanks strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
}
.ev-enq-err {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--ev-radius);
  font-size: 12.5px;
}
.ev-enq-captcha {
  margin: 4px 0 8px;
  display: flex;
  justify-content: center;
}
.ev-enq-captcha > div {
  /* The reCAPTCHA iframe is 304px wide — shrink it so it fits the sidebar
     column on narrow viewports without horizontal scroll. */
  transform: scale(0.85);
  transform-origin: 0 0;
  margin-bottom: -16px;
}
@media (min-width: 480px) {
  .ev-enq-captcha > div { transform: none; margin-bottom: 0; }
}
.ev-enq-btn {
  width: 100%;
  padding: 13px 18px;
  background: var(--ev-accent);
  color: #fff;
  border: 0;
  border-radius: var(--ev-radius);
  font-size: 12.9px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(232,81,61,.25);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ev-enq-btn:hover {
  background: var(--ev-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,81,61,.35);
}
.ev-enq-or {
  text-align: center;
  font-size: 0.7rem;
  color: #6B7280;
  margin: 14px 0;
  position: relative;
}
.ev-enq-or::before, .ev-enq-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--ev-border);
}
.ev-enq-or::before { left: 0; }
.ev-enq-or::after  { right: 0; }
.ev-enq-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1.5px solid var(--ev-navy);
  border-radius: var(--ev-radius);
  font-weight: 600;
  font-size: 12.3px;
  color: var(--ev-navy);
  width: 100%;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.ev-enq-call:hover { background: var(--ev-navy); color: #fff; text-decoration: none; }
.ev-enq-call svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.ev-enq-trust {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #EEF4FA;
  border-radius: var(--ev-radius);
  font-size: 10.8px;
  color: #1A6FB5;
  font-weight: 500;
  line-height: 1.45;
}
.ev-enq-trust svg { width: 16px; height: 16px; stroke: #1A6FB5; fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }

/* ── SECTIONS ─────────────────────────────────────────────────────── */
/* Mockup `.section` / `.section-heading` / `.section-sub` 1:1. */

.ev-body { padding-top: 8px; }
.ev-section {
  margin-bottom: 44px;          /* mockup */
  padding: 0;                   /* no top/bottom padding — mockup uses margins */
  border: 0;                    /* no per-section dividers */
  scroll-margin-top: 130px;     /* clears site header + sticky in-page nav */
}
.ev-section-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 21.75px;
  font-weight: 700;
  color: var(--ev-navy);
  line-height: 1.25;
  margin: 0 0 6px;
}
.ev-section-sub {
  font-size: 13.8px;
  color: var(--ev-text-light);
  line-height: 1.6;
  margin: 0 0 18px;
}
.ev-prose {
  /* Mockup uses 0.95rem against html{font-size:15px} = 14.25px. Project html
     is 16px so 0.95rem would render at 15.2px; pin to px to match design. */
  font-size: 14.25px;
  line-height: 1.78;
  color: var(--ev-text);
}
.ev-prose p { margin: 0 0 14px; }
.ev-prose strong { color: var(--ev-navy); font-weight: 600; }
.ev-prose em { font-style: italic; color: var(--ev-navy); }
.ev-prose ul { margin: 8px 0 14px 22px; padding: 0; }
.ev-prose ul li { padding: 4px 0; color: var(--ev-text); }
.ev-prose ul li strong { color: var(--ev-navy); }
.ev-prose blockquote {
  border-left: 3px solid var(--ev-accent);
  padding: 8px 18px;
  margin: 18px 0;
  font-size: 0.95rem;
  color: var(--ev-gray-600);
  font-style: italic;
  background: var(--ev-sand);
  border-radius: 0 var(--ev-radius) var(--ev-radius) 0;
}

/* Intro block (`#overview` rendered as `.intro-block` in mockup) — opening
   paragraph block with bottom divider and a drop-cap on the first letter. */
.ev-section#overview { font-size: 1rem; line-height: 1.78; color: var(--ev-text); margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--ev-border); }
/* Mockup `.intro-block` uses 1rem against html{font-size:15px} = 15px; pin
   here so the intro-block stays a step larger than the 14.25px body prose. */
.ev-section#overview .ev-prose { font-size: 15px; }
.ev-section#overview .ev-prose p { margin-bottom: 14px; }
.ev-section#overview .ev-prose p:first-of-type::first-letter {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ev-accent);
  float: left;
  line-height: 1;
  margin: 6px 12px 0 0;
  font-family: Georgia, serif;
}

/* ── VENUE LIST (marinas / dining / bars / nightlife / beach-clubs) ──── */
/* Matches mockup `.places` / `.place*` exactly (Monaco GP HTML lines 80–89). */

.ev-places {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.ev-place {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ev-border);
  border-radius: 12px;       /* --radius-lg in mockup */
  background: #fff;
}
.ev-place-img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  background: #F8F7F4;        /* mockup --sand */
  border: 1px solid #F3F4F6;  /* mockup --gray-100 */
  border-radius: var(--ev-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Mockup uses a 24px ::after pseudo as the icon, centered by the parent's
   flex. Base rule sizes the box; section-scoped rules (#dine, #bars) inject
   the SVG via background-image. Only dine/bars have icons across all 44
   mockup files — marinas / nightlife / beach-clubs intentionally render as
   the empty sand-colored swatch. */
.ev-place-img::after {
  content: '';
  width: 24px;
  height: 24px;
  background: no-repeat center/contain;
  opacity: 0.45;
}
#dine .ev-place-img::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B2D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3v7'/%3E%3C/svg%3E");
}
#bars .ev-place-img::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B2D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 22h8'/%3E%3Cpath d='M12 11v11'/%3E%3Cpath d='M19 3H5l7 8 7-8Z'/%3E%3C/svg%3E");
}
.ev-place-body { flex: 1; min-width: 0; }
.ev-place-name {
  font-size: 0.90rem;
  font-weight: 700;
  color: var(--ev-navy);
  margin-bottom: 2px;
}
.ev-place-meta {
  font-size: 0.65rem;
  color: #6B7280;             /* mockup --text-light, muted gray (NOT accent) */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ev-place-desc {
  font-size: 11.7px;
  color: #374151;             /* mockup --text, main body charcoal */
  line-height: 1.5;
}

/* ── COST TABLE ───────────────────────────────────────────────────── */
/* Mockup `.cost-table` 1:1. */

.ev-cost-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  overflow: hidden;
  font-size: 0.86rem;
  margin-top: 10px;
}
.ev-cost-table th {
  background: var(--ev-navy);
  color: #fff;
  text-align: left;
  padding: 11px 16px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}
.ev-cost-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--ev-gray-100);
  background: #fff;
  color: var(--ev-text);
}
.ev-cost-table tr:last-child td { border-bottom: none; }
.ev-cost-table tr:nth-child(even) td { background: var(--ev-sand); }
.ev-cost-table td:last-child { color: var(--ev-accent); font-weight: 700; }

.ev-cost-note-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ev-navy);
  margin: 18px 0 8px;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
/* Mockup `.faq-item` / `.faq-q` / `.faq-a` 1:1 — rendered with native
   `<details>` element so styling targets summary and the open state. */

.ev-faq { margin-top: 4px; }
.ev-faq-item {
  border: 0;
  border-bottom: 1px solid var(--ev-border);
  border-radius: 0;
  background: transparent;
  margin: 0;
}
.ev-faq-item:last-child { border-bottom: none; }
.ev-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ev-navy);
  line-height: 1.4;
  transition: color var(--ev-transition);
}
.ev-faq-item summary::-webkit-details-marker { display: none; }
.ev-faq-item summary::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ev-sand);
  color: var(--ev-navy);
  font-weight: 600;
  font-size: 0.86rem;
  flex-shrink: 0;
  margin-left: 14px;
  transition: background var(--ev-transition), color var(--ev-transition), transform var(--ev-transition);
}
.ev-faq-item summary:hover { color: var(--ev-accent); }
.ev-faq-item[open] summary::after {
  content: '×';
  background: var(--ev-accent);
  color: #fff;
}
.ev-faq-answer {
  padding: 0 4px 18px;
  font-size: 0.85rem;
  color: var(--ev-text);
  line-height: 1.72;
}

/* ── YACHTS (auto-queried from Unit inventory) ────────────────────── */
/* Mockup `.yachts-strip` + `.y-card*` + `.see-all-btn` 1:1. */

.ev-yachts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.ev-y-card {
  display: block;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  overflow: hidden;
  transition: all 0.25s ease;
  cursor: pointer;
}
.ev-y-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-lg);
  border-color: var(--ev-gray-300);
}
.ev-y-card-img {
  aspect-ratio: 16 / 10;
  background: var(--ev-gray-200) center/cover no-repeat;
  position: relative;
}
.ev-y-card-body { padding: 12px 14px; }
.ev-y-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ev-navy);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ev-y-card-specs {
  font-size: 0.7rem;
  color: var(--ev-gray-500);
  margin-top: 4px;
}
.ev-y-card-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ev-accent);
  margin-top: 8px;
}
.ev-y-card-price small {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--ev-gray-400);
}

.ev-yachts-cta { margin-top: 20px; text-align: center; }
.ev-see-all-btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1.5px solid var(--ev-navy);
  border-radius: var(--ev-radius);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ev-navy);
  background: transparent;
  transition: all var(--ev-transition);
}
.ev-see-all-btn:hover { background: var(--ev-navy); color: #fff; }

/* ── RELATED EVENTS ──────────────────────────────────────────────── */
/* Mockup `.related-grid` + `.rel-*` 1:1 — card layout with cover image
   on top, body below (NOT the colored border-left treatment I had). */

.ev-related { margin-top: 16px; }
.ev-rel-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.ev-rel-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
}
.ev-rel-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
  border-color: var(--ev-gray-300);
}
.ev-rel-img {
  aspect-ratio: 16 / 9;
  background: var(--ev-gray-200);
}
.ev-rel-body { padding: 14px 16px; }
.ev-rel-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ev-navy);
  margin-bottom: 3px;
}
.ev-rel-meta {
  font-size: 0.7rem;
  color: var(--ev-text-light);
  margin-bottom: 8px;
}
.ev-rel-link {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ev-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
 *                     EVENTS HUB PAGE (evh-* prefix)
 *                /yacht-charter-events landing page.
 *                Mockup: document/2) events hub/boatcrowd-events-hub.html
 *
 *  Prefix policy:
 *    ev-   → event detail page (`/yacht-charter-events/{slug}`)
 *    ev-home- → homepage events block
 *    evh-  → events hub (this file's block)
 *
 *  `ev-event-card` / `ev-event-grid` (further down in this file) remain
 *  used by `event/category.php` — the per-category landing page — and are
 *  unaffected by this hub refactor.
 * ═══════════════════════════════════════════════════════════════════ */

.evh { background: var(--ev-bg); }
.evh-section { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ── Breadcrumb (slim bar above hero) ──────────────────────────── */

.evh-bc-wrap {
    padding-top: 60px;
  background: #fff;
  border-bottom: 1px solid var(--ev-border);
}
.evh-bc {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 28px;
    font-size: 11.25px;
  color: var(--ev-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.evh-bc a { color: var(--ev-text-muted); text-decoration: none; }
.evh-bc a:hover { color: var(--ev-navy); }
.evh-bc-sep { color: rgba(0,0,0,.25); }
.evh-bc-current { color: var(--ev-navy); font-weight: 600; }

/* ── Hero (full-bleed dark gradient) ───────────────────────────── */

.evh-hero {
  padding: 72px 28px 64px;
  background-color: var(--ev-navy);
  background-image: linear-gradient(0deg, rgba(15, 27, 45, .78) 0%, rgba(15, 27, 45, .55) 50%, rgba(15, 27, 45, .45) 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 380px;
}
/* When an admin-uploaded hero image is set (inline style overrides
   background-image with `linear-gradient(...), url(...)`), the navy fallback
   colour underneath keeps unloaded-image moments dark instead of flashing
   white. No extra rule needed — the inline declaration takes over the
   background-image stack on its own. */
.evh-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 24px;
}
.evh-hero-eyebrow {
  display: inline-block;
  font-size: 10.2px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 14px;
  padding: 5px 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
.evh-hero h1 { font-size: 2.2rem; margin: 0 0 18px; font-weight: 700; letter-spacing: -.5px;}
.evh-hero-intro { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,.85); margin: 0; font-weight: 300; max-width: 680px; }
.evh-hero-intro strong { color: #fff; font-weight: 600; }

/* ── Shared section head (eyebrow + h2 + sub) ──────────────────── */

.evh-section-head { padding: 56px 0 28px; }
.evh-section-eyebrow {
  display: inline-block;
  font-size: 9.2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ev-blue);
  margin-bottom: 10px;
}
.evh-section-head h2 { font-size: 1.65rem; color: var(--ev-navy); margin: 0 0 10px; font-weight: 700; letter-spacing: -.3px; }
.evh-section-head p { color: var(--ev-text-muted); font-size: 0.85rem; line-height: 1.65; margin: 0; }

/* ── Featured (3 large cards) ──────────────────────────────────── */

.evh-featured { background: #fff; padding-bottom: 24px; }
.evh-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 8px; }
.evh-feat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.evh-feat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.evh-feat-card-img {
  height: 200px;
  background: linear-gradient(135deg, var(--ev-navy) 0%, var(--ev-navy-mid) 100%);
  /* Cover-fit any inline `background-image: url(...)` passed from the view
     when the featured event has hero.image set; the category gradient stays
     as the fallback when no photo has been uploaded yet. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.evh-feat-card-sporting  .evh-feat-card-img { background-color: #1A6FB5; background-image: linear-gradient(135deg, #1A6FB5 0%, #0F1B2D 100%); }
.evh-feat-card-corporate .evh-feat-card-img { background-color: #E8513D; background-image: linear-gradient(135deg, #E8513D 0%, #6E1E12 100%); }
.evh-feat-card-yacht     .evh-feat-card-img { background-color: #16A34A; background-image: linear-gradient(135deg, #16A34A 0%, #0F4D24 100%); }
/* When a real hero photo is uploaded the inline `background-image:url(...)`
   wins (same property as the gradient). Add a navy fade so eyebrow + location
   pills stay legible against bright photos. */
.evh-feat-card-has-img .evh-feat-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15,27,45,.55) 0%, rgba(15,27,45,.10) 55%, rgba(15,27,45,.25) 100%);
  pointer-events: none;
}
.evh-feat-card-has-img .evh-feat-card-eyebrow,
.evh-feat-card-has-img .evh-feat-card-loc { position: relative; z-index: 1; }
.evh-feat-card-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #fff;
  font-weight: 700;
  padding: 5px 12px;
  background: var(--ev-accent);
  border-radius: 4px;
}

.evh-feat-card-loc {
    color: rgba(255,255,255,.88);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.evh-feat-card-body { padding: 20px 22px 22px; }
.evh-feat-card-name { font-weight: 700; font-size: 1.1rem; color: var(--ev-navy); margin-bottom: 6px; line-height: 1.3; }
.evh-feat-card-dates { font-size: 0.74rem; color: var(--ev-accent); font-weight: 600; margin-bottom: 12px; }
.evh-feat-card-blurb { font-size: 0.76rem; color: var(--ev-text); line-height: 1.55; margin-bottom: 12px; }
.evh-feat-card-more { display: inline-block; font-size: 0.84rem; font-weight: 600; color: var(--ev-accent); }
.evh-feat-card:hover .evh-feat-card-more { color: var(--ev-accent); }

/* ── Calendar (year banner + month rows) ───────────────────────── */

.evh-cal-section { background: var(--ev-sand, #f8f6f1); padding-bottom: 56px; }
.evh-cal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.evh-cal-stat {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
}
.evh-cal-stat-label {
  font-size: 0.66rem;
  color: var(--ev-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.evh-cal-stat-count { font-size: 1.5rem; font-weight: 700; color: var(--ev-navy); line-height: 1; }
.evh-cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.evh-cal-stat-sporting  .evh-cal-dot { background: #1A6FB5; }
.evh-cal-stat-corporate .evh-cal-dot { background: var(--ev-accent); }
.evh-cal-stat-yacht     .evh-cal-dot { background: #16A34A; }

.evh-cal-year-banner {
  background: var(--ev-sand-dark);
  color: var(--ev-navy);
  padding: 8px 14px;
  border-left: 3px solid var(--ev-accent);
    border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 28px 0 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.evh-cal-year-label {     font-size: 0.8rem; font-weight: 700; letter-spacing: -.3px; }
.evh-cal-year-count { font-size: 0.66rem; font-weight: 500;}

.evh-cal-month-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--ev-border);
}
.evh-cal-month-label {
  font-weight: 600;
  color: var(--ev-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.77rem;
  padding-top: 6px;
}
.evh-cal-event-list { display: flex; flex-wrap: wrap; gap: 10px; }
.evh-cal-event-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  padding: 9px 13px;
  border: 1px solid var(--ev-border);
  border-left-width: 3px;
  border-radius: 6px;
  flex: 0 0 auto;
  transition: box-shadow 0.2s;
}
.evh-cal-event-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.evh-cal-event-card-sporting  { border-left-color: #1A6FB5; }
.evh-cal-event-card-corporate { border-left-color: var(--ev-accent); }
.evh-cal-event-card-yacht     { border-left-color: #16A34A; }
.evh-cal-event-name { font-weight: 700; color: var(--ev-navy); font-size: 0.8rem; }
.evh-cal-event-meta { font-size: 0.66rem; color: var(--ev-text-muted); margin-top: 2px; }

/* ── Category sections (3 categories) ──────────────────────────── */

.evh-cat-section { padding: 0 0 32px; background: #fff; }
.evh-cat-section-alt { background: var(--ev-sand, #f8f6f1); }
.evh-cat-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 56px 0 28px;
  gap: 28px;
  flex-wrap: wrap;
}
.evh-cat-section-head-text { flex: 1 1 60%; max-width: 720px; }
.evh-cat-section-attend {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ev-accent);
  margin-bottom: 8px;
  padding: 3px 10px;
  background: rgba(232,81,61,.08);
  border-radius: 12px;
}
.evh-cat-section-head h2 { font-size: 1.45rem; color: var(--ev-navy); margin: 0 0 12px; font-weight: 700; letter-spacing: -.3px; }
.evh-cat-section-head p { color: var(--ev-text); font-size: 0.75rem; line-height: 1.65; margin: 0; }
.evh-cat-cta {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ev-blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0;
    white-space: nowrap;
    transition: gap var(--ev-transition), color var(--ev-transition);
}
.evh-cat-cta:hover { gap: 8px; color: var(--ev-accent); }

/* Cat-section card grid (3 columns of detailed event cards) */
.evh-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 8px; }
.evh-event-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.evh-cat-section-alt .evh-event-card { background: #fff; }
.evh-event-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.09); }
.evh-event-card-sporting  { border-top: 3px solid #1A6FB5; }
.evh-event-card-corporate { border-top: 3px solid var(--ev-accent); }
.evh-event-card-yacht     { border-top: 3px solid #16A34A; }
.evh-event-card-img {
  position: relative;
  padding: 12px;
  /* Width comes from the card column (`grid-template-columns: repeat(3, 1fr)`).
     With width auto = fill and aspect-ratio set, the browser computes height
     to keep the 16:10 ratio — so the image area scales with card width
     (≈ 380px card → 237px tall on desktop, ≈ 340px card → 212px on mobile). */
  aspect-ratio: 16 / 10;
  background: #fff;
  /* When `hero.image` is present, the view appends inline
     `style="background-image:url(...)"` which wins over the category gradient
     below. These three keep the photo cover-fitted regardless of source size. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Strengthen the ::after overlay when a real photo is used so light photos
   don't wash out the dark year/date badges in the top corners. */
.evh-event-card-has-img .evh-event-card-img::after {
    background: linear-gradient(0deg, rgba(15, 27, 45, .55) 0%, rgba(15, 27, 45, .10) 60%, rgba(15, 27, 45, .35) 100%);
}
.evh-event-card-img::after {
    /* `content` is required — without it the pseudo-element doesn't exist
       in the render tree at all. `position:absolute + inset:0` overlays the
       parent (which has `position:relative` above). `pointer-events:none`
       so clicks pass through to the anchor link wrapping the card. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 27, 45, .42) 0%, rgba(15, 27, 45, 0) 50%);
    pointer-events: none;
}
/* Category gradient placeholders — use `background-image` LONGHAND so the
   shorthand doesn't reset `background-size: cover` / `background-position:
   center` set on `.evh-event-card-img`. When an event has hero.image, inline
   `style="background-image:url(...)"` overrides this gradient — but size /
   position / repeat must survive both code paths. */
.evh-event-card-sporting  .evh-event-card-img { background-image: linear-gradient(135deg, #d4e6f7 0%, #a5c8e8 100%); }
.evh-event-card-corporate .evh-event-card-img { background-image: linear-gradient(135deg, #fadbd5 0%, #f1aea3 100%); }
.evh-event-card-yacht     .evh-event-card-img { background-image: linear-gradient(135deg, #d6f0e0 0%, #aedabe 100%); }
.evh-event-card-year {
  position: absolute;
  top: 12px;
  left: 12px;
  /* z-index keeps the badge above the ::after gradient overlay; without it
     the overlay (later in paint order) covers the badge. */
  z-index: 1;
  background: rgba(15,27,45,.85);
  color: #fff;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .5px;
  backdrop-filter: blur(6px);
}
.evh-event-card-year-next {
  background: var(--ev-accent);
  box-shadow: 0 0 0 2px rgba(232,81,61,.25);
}
.evh-event-card-date {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  background: rgba(255,255,255,.96);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--ev-navy);
  text-transform: uppercase;
  letter-spacing: .7px;
  backdrop-filter: blur(6px);
  text-align: center;
  line-height: 1.2;
}
.evh-event-card-date strong { display: block; font-size: 0.85rem; line-height: 1; margin-top: 2px; font-weight: 700; color: var(--ev-accent); }
.evh-event-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.evh-event-card-name { font-weight: 700; color: var(--ev-navy); font-size: 1.02rem; margin-bottom: 4px; line-height: 1.3; }
.evh-event-card-loc { font-size: 0.78rem; margin-bottom: 8px; color: var(--ev-accent); }
.evh-event-card-blurb { font-size: 0.82rem; color: var(--ev-text); line-height: 1.55; margin-bottom: 12px; }
.evh-event-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--ev-border);
}
.evh-event-card-when { font-size: 0.78rem; color: var(--ev-accent); font-weight: 600; }
.evh-event-card-link { font-size: 0.8rem; font-weight: 600; color: var(--ev-navy); }
.evh-event-card:hover .evh-event-card-link { color: var(--ev-accent); }

/* ── Expert CTA ────────────────────────────────────────────────── */
/* Design: sand-coloured card on white page, dark navy text, orange dash
   markers on blue bullet text, plain right column (no border / no inner
   card). Matches the EXPERT CTA in `document/2) events hub/...html`. */

.evh-expert { padding: 64px 0 80px; background: #fff; }
.evh-expert-card {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  padding: 44px 48px;
  background: var(--ev-sand);
  border: 1px solid var(--ev-sand-dark);
  border-radius: 14px;
  color: var(--ev-text);
    align-items: center;
}
.evh-expert-text .evh-section-eyebrow {
  color: var(--ev-accent);
  margin-bottom: 14px;
  font-size: 0.63rem;
}
.evh-expert-text h2 {
  font-size: 1.5rem;
  color: var(--ev-navy);
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.2;
}
.evh-expert-text p {
  color: var(--ev-text);
  font-size: 0.84rem;
  line-height: 1.65;
  margin: 0 0 24px;
}
.evh-expert-list { list-style: none; padding: 0; margin: 0; }
.evh-expert-list li {
  position: relative;
  padding: 8px 0 8px 30px;
  color: var(--ev-blue);
  font-size: 0.82rem;
  line-height: 1.5;
}
.evh-expert-list li::before {
  /* Short orange horizontal dash, centred against the first line of text. */
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 16px;
  height: 2px;
  background: var(--ev-accent);
}

/* Right column: plain block, no card / no border. Aligns top with the H2. */
.evh-expert-actions {
  /* Vertical centering is handled by the parent's `align-items: center`.
     If `align-self` is set here it overrides the parent's rule and the
     buttons snap back to the top. */
  display: flex;
  flex-direction: column;
}
.evh-expert-actions h3 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ev-gray-400);
  margin: 0 0 16px;
  font-weight: 600;
}
.evh-expert-btn {
  display: block;
  text-align: center;
  padding: 15px 18px;
  background: var(--ev-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.84rem;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 12px;
  transition: background var(--ev-transition);
}
.evh-expert-btn:hover { background: var(--ev-accent-hover); color: #fff; }
.evh-expert-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--ev-navy);
  border-radius: 8px;
  color: var(--ev-navy);
  font-weight: 600;
  font-size: 0.84rem;
  text-decoration: none;
  transition: background var(--ev-transition);
}
.evh-expert-call svg { width: 16px; height: 16px; }
.evh-expert-call:hover { background: var(--ev-sand-dark); color: var(--ev-navy); }

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .evh-hero { padding: 56px 24px 48px; }
  .evh-hero h1 { font-size: 2rem; }
  .evh-feat-grid,
  .evh-event-grid { grid-template-columns: repeat(2, 1fr); }
  .evh-cal-stats { grid-template-columns: 1fr; }
  .evh-cal-month-row { grid-template-columns: 1fr; gap: 6px; }
  .evh-expert-card { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 600px) {
  .evh-section { padding: 0 18px; }
  .evh-hero h1 { font-size: 1.7rem; }
  .evh-feat-grid,
  .evh-event-grid { grid-template-columns: 1fr; }
  .evh-cat-section-head { flex-direction: column; align-items: flex-start; }
  .evh-cat-cta { align-self: stretch; text-align: center; }
}

.ev-event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ev-event-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-left: 3px solid var(--ev-accent);
  border-radius: var(--ev-radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ev-event-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.ev-event-card-sporting  { border-left-color: #1A6FB5; }
.ev-event-card-corporate { border-left-color: var(--ev-accent); }
.ev-event-card-yacht     { border-left-color: #16A34A; }
.ev-event-card-img {
  height: 130px;
  background: linear-gradient(135deg, #1A2B42 0%, #0F1B2D 100%);
  position: relative;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #fff;
}
.ev-event-card-year {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  background: rgba(255,255,255,.18);
  padding: 4px 8px;
  border-radius: 4px;
}
.ev-event-card-date { text-align: right; font-size: 0.8rem; }
.ev-event-card-date strong { display: block; font-size: 1.2rem; font-weight: 700; line-height: 1; margin-top: 2px; }
.ev-event-card-body { padding: 14px 16px 16px; }
.ev-event-card-name { font-weight: 700; color: var(--ev-navy); font-size: 1rem; margin-bottom: 4px; }
.ev-event-card-loc { font-size: 0.78rem; color: var(--ev-text-muted); margin-bottom: 8px; }
.ev-event-card-when { font-size: 0.82rem; color: var(--ev-accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
 *                     EVENTS CATEGORY PAGE (evc-* prefix)
 *                /yacht-charter-events/{sporting|corporate|yacht-shows}.
 *                Mockup: document/3) three event categories/...html
 *
 *  Reuses evh-bc-*, evh-hero, evh-section, evh-section-head/-eyebrow,
 *  and evh-expert-* from the hub block — only the category-specific
 *  pieces (cat-nav pills, richer event card with loc-in-img, why-block
 *  prose, other-cats grid) are defined here under the `evc-` prefix.
 * ═══════════════════════════════════════════════════════════════════ */

.evc { background: var(--ev-bg); }

/* ── Category nav (pill row under the hero) ───────────────────── */
.evc-cat-nav {
  background: #fff;
  border-bottom: 1px solid var(--ev-border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.evc-cat-nav-inner {
  max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.evc-cat-nav-inner::-webkit-scrollbar { display: none; }
.evc-cat-nav-link {
    display: block;
    padding: 15px 18px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    transition: all .2s;
    white-space: nowrap;
}
.evc-cat-nav-link:hover { background: var(--ev-gray-100); color: var(--ev-navy); }
.evc-cat-nav-link.active {
    color: var(--ev-navy);
    border-color: var(--ev-accent);
    font-weight: 600;
}
.evc-cat-nav-link.active:hover { background: var(--ev-navy); color: #fff; }

/* ── Events section ───────────────────────────────────────────── */
.evc-events-section { background: #fff; padding: 0 0 32px; }
.evc-events-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 56px 0 28px;
  flex-wrap: wrap;
}
.evc-events-section-head-text { flex: 1 1 60%; max-width: 700px; }
.evc-events-section-head h2 {
  font-size: 1.35rem;
  color: var(--ev-navy);
  margin: 0;
  font-weight: 700;
  letter-spacing: -.3px;
}
.evc-events-section-next {
  align-self: flex-end;
  font-size: 0.66rem;
  color: var(--ev-text-light);
  padding: 10px 18px;
  font-weight: 600;
}

/* ── Category event card (richer than hub's compact card) ─────── */
.evc-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 8px; }
.evc-event-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  overflow: hidden;
  transition: transform var(--ev-transition), box-shadow var(--ev-transition);
}
.evc-event-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.evc-event-card-sporting  { border-top: 3px solid #1A6FB5; }
.evc-event-card-corporate { border-top: 3px solid var(--ev-accent); }
.evc-event-card-yacht     { border-top: 3px solid #16A34A; }

.evc-event-card-img {
  position: relative;
  padding: 14px;
  aspect-ratio: 16 / 10;
  background-color: var(--ev-gray-200);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Category placeholder gradients — longhand so background-size etc. set on
   `.evc-event-card-img` are not reset and inline `style="background-image"`
   from the view (when hero.image is set) cleanly overrides. */
.evc-event-card-sporting  .evc-event-card-img { background-image: linear-gradient(135deg, #d4e6f7 0%, #a5c8e8 100%); }
.evc-event-card-corporate .evc-event-card-img { background-image: linear-gradient(135deg, #fadbd5 0%, #f1aea3 100%); }
.evc-event-card-yacht     .evc-event-card-img { background-image: linear-gradient(135deg, #d6f0e0 0%, #aedabe 100%); }
.evc-event-card-has-img .evc-event-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,27,45,.08) 0%, rgba(15,27,45,.02) 35%, rgba(15,27,45,.55) 100%);
  pointer-events: none;
}

.evc-event-card-date {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  background: rgba(255,255,255,.96);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.57rem;
  font-weight: 700;
  color: var(--ev-navy);
  text-transform: uppercase;
  letter-spacing: .7px;
  text-align: center;
  line-height: 1.2;
  backdrop-filter: blur(6px);
}
.evc-event-card-date strong { display: block; font-size: 0.89rem; line-height: 1; margin-top: 3px; font-weight: 700; color: var(--ev-accent); }
.evc-event-card-year {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  background: rgba(15,27,45,.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .5px;
  backdrop-filter: blur(6px);
}
.evc-event-card-year-next {
  background: var(--ev-accent);
  box-shadow: 0 0 0 2px rgba(232,81,61,.25);
}
.evc-event-card-loc {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  background: rgba(15,27,45,.78);
  color: #fff;
  padding: 5px 11px;
  border-radius: 4px;
  font-size: 0.67rem;
  font-weight: 500;
  backdrop-filter: blur(6px);
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evc-event-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.evc-event-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ev-navy);
  margin-bottom: 6px;
  line-height: 1.3;
}
.evc-event-card-when {
  font-size: 0.72rem;
  color: var(--ev-accent);
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.45;
}
.evc-event-card-blurb {
  font-size: 0.76rem;
  color: var(--ev-text);
  line-height: 1.6;
  margin-bottom: 14px;
}
.evc-event-card-more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ev-accent);
  transition: gap var(--ev-transition), color var(--ev-transition);
}
.evc-event-card:hover .evc-event-card-more { gap: 8px; color: var(--ev-accent); }

.evc-empty {
  padding: 36px;
  text-align: center;
  color: var(--ev-text-muted);
  background: var(--ev-sand);
  border-radius: var(--ev-radius);
}

/* ── Why block (prose explaining why charter for this category) ── */
.evc-why-block { background: var(--ev-sand); padding: 56px 0 64px; }
.evc-why-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.evc-why-eyebrow {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ev-blue);
  margin-bottom: 14px;
}
.evc-why-inner h2 {
  font-size: 1.6rem;
  color: var(--ev-navy);
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.25;
}
.evc-why-inner p {
  color: var(--ev-text);
  font-size: 0.86rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.evc-why-inner p strong { color: var(--ev-navy); font-weight: 600; }

/* ── Other categories (2 cards linking to siblings) ──────────── */
.evc-other-cats { background: #fff; padding: 0 0 64px; }
.evc-other-cats-head { text-align: center; }
.evc-other-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-bottom: 8px;
}
.evc-other-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--ev-transition), box-shadow var(--ev-transition);
}
.evc-other-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.09); }
.evc-other-card-img { min-height: 160px; background-size: cover; background-position: center; }
.evc-other-card-sporting  .evc-other-card-img { background-color: #0F1B2D; background-image: linear-gradient(135deg, #1A6FB5 0%, #0F1B2D 100%); }
.evc-other-card-corporate .evc-other-card-img { background-color: #6E1E12; background-image: linear-gradient(135deg, #E8513D 0%, #6E1E12 100%); }
.evc-other-card-yacht     .evc-other-card-img { background-color: #0F4D24; background-image: linear-gradient(135deg, #16A34A 0%, #0F4D24 100%); }
.evc-other-card-has-img .evc-other-card-img { background-image: none; } /* the inline style="background-image:url(...)" wins; reset gradient so it doesn't double-up */
.evc-other-card-body { padding: 20px 22px; }
.evc-other-card-name { font-size: 1rem; font-weight: 700; color: var(--ev-navy); margin-bottom: 8px; }
.evc-other-card-desc { font-size: 0.74rem; color: var(--ev-text); line-height: 1.55; margin-bottom: 12px; }
.evc-other-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ev-navy);
  transition: gap var(--ev-transition), color var(--ev-transition);
}
.evc-other-card-link svg { width: 14px; height: 14px; }
.evc-other-card:hover .evc-other-card-link { gap: 8px; color: var(--ev-accent); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .evc-event-grid { grid-template-columns: repeat(2, 1fr); }
  .evc-other-grid { grid-template-columns: 1fr; }
  .evc-other-card { grid-template-columns: 140px 1fr; }
}
@media (max-width: 600px) {
  .evc-event-grid { grid-template-columns: 1fr; }
  .evc-events-section-head { flex-direction: column; align-items: flex-start; }
  .evc-events-section-next { align-self: stretch; text-align: center; }
  .evc-other-card { grid-template-columns: 1fr; }
  .evc-other-card-img { min-height: 110px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *                     HOMEPAGE BLOCK (slice 14)
 *                Mockup: document/1) homepage/...redesign.html L593+
 * ═══════════════════════════════════════════════════════════════════ */

.ev-home {
  background: var(--ev-navy);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.ev-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(232,81,61,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(26,111,181,.08) 0%, transparent 55%);
  pointer-events: none;
}
.ev-home-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.ev-home-header { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.ev-home-eyebrow {
  display: inline-block;
  font-size: 10.2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ev-accent);
  margin-bottom: 12px;
}
.ev-home-header h2 { font-size: 27.75px; margin: 0 0 14px; font-weight: 700; color: #fff; }
.ev-home-header p  { font-size: 13.2px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 0; }

/* 3 category cards */
.ev-home-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 48px;
}
.ev-home-cat {
  display: block;
  text-decoration: none;
  padding: 28px 24px;
  border-radius: var(--ev-radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 4px solid var(--ev-accent);
  transition: transform 0.2s, background 0.2s;
}
.ev-home-cat:hover { transform: translateY(-3px); background: rgba(255,255,255,.07); }
.ev-home-cat-sporting  { border-top-color: #1A6FB5; }
.ev-home-cat-corporate { border-top-color: var(--ev-accent); }
.ev-home-cat-yacht     { border-top-color: #16A34A; }
.ev-home-cat-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
}
.ev-home-cat-name { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.3; }
.ev-home-cat-desc { font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.ev-home-cat-link { font-size: 0.84rem; font-weight: 600; color: var(--ev-accent); }

/* Featured chips */
.ev-home-featured {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 36px;
  margin-top: 8px;
}
.ev-home-featured-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.55);
  text-align: center;
  margin-bottom: 18px;
}
.ev-home-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 920px;
  margin: 0 auto;
}
.ev-home-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 0.86rem;
  transition: background 0.2s, border-color 0.2s;
}
.ev-home-chip:hover { background: rgba(255,255,255,.12); border-color: var(--ev-accent); }
.ev-home-chip-date {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ev-accent);
  text-transform: uppercase;
}

/* CTA */
.ev-home-cta { display: flex; justify-content: center; margin-top: 40px; }
.ev-home-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--ev-accent);
  color: #fff;
  border-radius: var(--ev-radius);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(232,81,61,.3);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ev-home-cta-btn:hover {
  background: var(--ev-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(232,81,61,.4);
}

/* ── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ev-home { padding: 56px 0; }
  .ev-home-inner { padding: 0 16px; }
  .ev-home-header h2 { font-size: 1.5rem; }
  .ev-home-cats { grid-template-columns: 1fr; gap: 14px; }
}
.ev-see-all-btn {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  color: var(--ev-navy);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.ev-see-all-btn:hover { background: var(--ev-bg); }

/* ── MOBILE ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ev { padding: 16px 16px 60px; }
  .ev-hero { height: 380px; }
  .ev-hero-inner { padding-bottom: 32px; }
  .ev-hero-h1 { font-size: 1.7rem; }
  .ev-hero-meta { font-size: 0.82rem; gap: 10px; }
  .ev-layout { grid-template-columns: 1fr; gap: 24px; }
  .ev-col-right { position: static; top: auto; }
  .ev-places { grid-template-columns: 1fr; }
  .ev-yachts { grid-template-columns: 1fr; }
  .ev-rel-cards { grid-template-columns: 1fr; }
  .ev-cost-table th, .ev-cost-table td { padding: 10px 12px; font-size: 0.84rem; }
}