/* ECI Event Landing Page – PDF-inspired visual design
   Safe defaults, minimal conflicts, easy to override.
   Tip: If your theme adds heavy global styles, you can increase specificity with .eci-wrap .eci-*
*/

:root {
  --eci-bg: #0a0f1e;
  --eci-ink: #0b1220;
  --eci-ink-soft: #334155;
  --eci-paper: #ffffff;
  --eci-muted: #f1f5f9;
  --eci-accent: #1e40af;     /* Deep blue */
  --eci-accent-2: #0ea5e9;   /* Cyan */
  --eci-accent-3: #60a5fa;   /* Lighter blue for gradients */
  --eci-radius: 18px;
  --eci-ring: 0 0 0 3px rgba(14,165,233,.25);
  --eci-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  --wp--style--global--content-size: 1200px !important;
}

.eci-shell {
  max-width: 1100px;
  margin-inline: auto;
  padding: 32px 20px;
  font-family: var(--eci-font);
  color: var(--eci-ink);
}

/* HERO */
.eci-hero {
  position: relative;
  overflow: clip;
  border-radius: var(--eci-radius);
  color: #fff;
  margin-top: 24px;
  box-shadow: 0 12px 40px rgba(2,6,23,.35);
  --wp--style--global--content-size: 1200px;
}
.eci-hero .eci-shell { position: relative; z-index: 2; padding: 80px 20px; }
.eci-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(65% 85% at 20% 20%, rgba(30,64,175,.55), transparent 60%),
    radial-gradient(60% 80% at 80% 15%, rgba(14,165,233,.45), transparent 55%),
    linear-gradient(140deg, #0b1020 0%, #05070f 65%);
  filter: saturate(120%);
}
.eci-hero-wave {
  position: absolute; left: -5%; right: -5%; bottom: -1px; height: 110px; z-index: 1;
  background:
     radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,.22), transparent 70%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 70%);
}

.eci-eyebrow {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .95;
  margin-bottom: 8px;
  font-size: .9rem;
}
.eci-title {
  font-size: clamp(2rem, 3vw + 1.2rem, 3.1rem);
  line-height: 1.02;
  margin: 0 0 12px;
  font-weight: 800;
}
.eci-hero-line {
  font-size: clamp(1.05rem, .9vw + 1rem, 1.25rem);
  margin: 2px 0;
  opacity: .95;
}

.eci-meta {
  display: inline-flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.eci-meta .eci-divider { opacity: .7; }

.eci-cta { margin-top: 20px; }

/* BUTTONS */
.eci-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  padding: .95rem 1.25rem;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
  will-change: transform;
  user-select: none;
  border: 1px solid transparent;
}
.eci-btn:focus { outline: none; box-shadow: var(--eci-ring); }
.eci-btn:hover { transform: translateY(-1px); }

.eci-btn-primary { background: linear-gradient(180deg, var(--eci-accent-3), var(--eci-accent)); color: #fff; box-shadow: 0 14px 28px rgba(14,165,233,.25); }
.eci-btn-primary:hover { box-shadow: 0 18px 34px rgba(14,165,233,.3); }

.eci-btn-outline { background: #fff; color: var(--eci-ink); border-color: #dbe3ef; box-shadow: 0 8px 18px rgba(2,6,23,.08); }
.eci-btn-outline:hover { background: #f8fbff; }

.eci-btn-lg { padding: 1.1rem 1.6rem; font-size: 1.05rem; }

/* INTRO */
.eci-intro, .eci-programme, .eci-costs, .eci-final, .eci-reasons {
  margin-top: 28px;
  border-radius: var(--eci-radius);
  background: var(--eci-paper);
  box-shadow: 0 1px 2px rgba(2,6,23,.06), 0 8px 24px rgba(2,6,23,.06);
}

.eci-intro-grid {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .eci-intro-grid { grid-template-columns: 1fr; }
}

.eci-h2 {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, .8vw + 1.05rem, 1.7rem);
  line-height: 1.15;
  font-weight: 800;
  color: var(--eci-ink);
}
.eci-shell p { color: var(--eci-ink-soft); font-size: 1.05rem; }

/* REASONS */
.eci-reasons-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) {
  .eci-reasons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .eci-reasons-grid { grid-template-columns: 1fr; }
}
.eci-reason {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--eci-muted);
  border: 1px solid #e6eef7;
  border-radius: 14px;
}
.eci-icon { fill: var(--eci-accent); flex: 0 0 auto; margin-top: 2px; }

/* PROGRAMME TIMELINE */
.eci-timeline { display: grid; gap: 16px; }
.eci-day {
  background: #fff;
  border: 1px solid #e6eef7;
  border-radius: 16px;
  padding: 16px;
}
.eci-day-header {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 6px;
}
.eci-date {
  border-radius: 12px;
  overflow: hidden;
  background: var(--eci-ink);
  color: #fff;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.08);
}
.eci-dow {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px;
  background: var(--eci-accent);
  font-weight: 700;
}
.eci-dom { font-size: 1.6rem; font-weight: 800; padding: 8px 0 6px; }
.eci-day-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--eci-ink); }
.eci-day-list { margin: .3rem 0 0 1.2rem; color: var(--eci-ink-soft); }
.eci-day-list li { margin: .35rem 0; }

/* COSTS */
.eci-costs-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 880px) {
  .eci-costs-card { grid-template-columns: 1fr .9fr; align-items: center; }
}
.eci-price { font-size: 2rem; margin: 10px 0 6px; color: var(--eci-ink); }
.eci-price-note { margin-top: 0; }

.eci-costs-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* FINAL CTA */
.eci-final-shell { padding: 48px 20px; }
.eci-final {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  text-align: center;
}
.eci-final-inner { max-width: 800px; margin-inline: auto; }
.eci-final p { max-width: 60ch; margin: 0 auto 14px; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .eci-btn { transition: none; }
}