/* ============================================================
    CREWFITCLUB — event-detail.css
    Event Detail page extension stylesheet.

    Loads AFTER style.css.
    Uses all CSS custom properties from style.css :root.
    Contains ONLY classes absent from style.css.
    Zero token redefinitions. Zero overrides of shared classes.

    TABLE OF CONTENTS
    ─────────────────────────────────────────────────────────
    01. Skip link
    02. Breadcrumb
    03. Hero section
    04. Hero action buttons (share/save)
    05. Hero content overlay
    06. Photo thumbnail strip
    07. Sidebar booking card (hero-level)
    08. Light countdown (white background variant)
    09. Feature highlights strip
    10. Main two-column layout
    11. Tab navigation
    12. Tab content panels
    13. Section typography helpers
    14. Mini-features row
    15. How It Works steps
    16. Phone mockup UI
    17. Terms list
    18. Right sidebar widgets
    19. Progress bar
    20. Share links
    21. Organizer block
    22. Reward cards
    23. Rewards section
    24. Responsive overrides
    ============================================================ */


/* ============================================================
   01. SKIP LINK
   ============================================================ */
.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: calc(var(--z-modal) + 10);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transition-base);
}
.skip-link:focus { transform: translateY(0); }


/* ============================================================
   02. BREADCRUMB
   ============================================================ */
.ed-breadcrumb {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-5);
  padding: var(--space-3) 0;
}

.ed-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ed-breadcrumb__link {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.ed-breadcrumb__link:hover { color: var(--color-primary); }

.ed-breadcrumb__sep {
  font-size: var(--fs-sm);
  color: var(--color-gray-4);
}

.ed-breadcrumb__current {
  font-size: var(--fs-sm);
  color: var(--color-dark);
  font-weight: var(--fw-medium);
}


/* ============================================================
   03. HERO SECTION
   ============================================================ */
.ed-hero {
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}

/* Container modified for hero — removes default padding capping
   so the image bleeds to max-width, then sidebar floats at right */
.ed-hero__container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  align-items: stretch;
  padding-right: 0; /* sidebar card sits at the right edge */
}

/* Left pane: photo + overlay content */
.ed-hero__left {
  position: relative;
  min-height: 520px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
}

.ed-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Multi-layer gradient: left darker for text, bottom for photo strip */
.ed-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(5, 5, 5, 0.82) 0%,
      rgba(5, 5, 5, 0.55) 55%,
      rgba(5, 5, 5, 0.28) 100%
    ),
    linear-gradient(
      to top,
      rgba(5, 5, 5, 0.75) 0%,
      transparent 35%
    );
}

/* Content area over photo */
.ed-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-6) var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}


/* ============================================================
   04. HERO ACTION BUTTONS (share / save)
   ============================================================ */
.ed-hero__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ed-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}
.ed-action-btn:hover { opacity: 0.8; }
.ed-action-btn svg   { color: var(--color-white); }


/* ============================================================
   05. HERO CONTENT OVERLAY
   ============================================================ */
.ed-hero__badge-row {
  margin-bottom: var(--space-3);
}

.ed-monthly-badge {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 0.3rem var(--space-3);
}

.ed-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: var(--fw-black);
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-4);
}

/* Activity type pills */
.ed-hero__activities {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.ed-activity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-white);
}
.ed-activity svg { color: var(--color-white); opacity: 0.9; }

.ed-hero__tagline {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-5);
  max-width: 420px;
}

.ed-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.ed-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.8);
}
.ed-hero__meta-item svg { opacity: 0.7; }


/* ============================================================
   06. PHOTO THUMBNAIL STRIP
   ============================================================ */
.ed-photo-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}
.ed-photo-strip::-webkit-scrollbar { display: none; }

.ed-photo-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2.5px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    opacity var(--transition-fast);
  opacity: 0.65;
}
.ed-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-photo-thumb:hover { opacity: 0.9; }
.ed-photo-thumb.ed-photo-thumb--active {
  border-color: var(--color-primary);
  opacity: 1;
}


/* ============================================================
   07. SIDEBAR BOOKING CARD (hero-level on desktop)
   The .ed-sidebar sits in the hero grid column on desktop.
   On tablet/mobile it drops below the hero.
   ============================================================ */
.ed-sidebar {
  background: var(--color-white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: flex;
  flex-direction: column;
}

.ed-booking-card {
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

/* Join button — no radius-pill override needed, uses .btn-full from style.css */
.ed-join-btn {
  text-align: center;
  justify-content: center;
  border-radius: var(--radius-md) !important; /* rectangular in design */
  font-size: var(--fs-md);
}

/* Share event button */
.ed-share-event-btn {
  border: 1.5px solid var(--color-gray-5);
  color: var(--color-dark);
  border-radius: var(--radius-md) !important;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: 0.6875rem var(--space-4);
  background: var(--color-white);
  gap: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
}
.ed-share-event-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Price row */
.ed-booking-card__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ed-booking-card__price {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--color-dark);
  line-height: 1;
}

.ed-booking-card__price-original {
  font-size: var(--fs-md);
  color: var(--color-gray-3);
  text-decoration: line-through;
}

.ed-booking-card__discount-badge {
  background: var(--color-success-muted);
  color: var(--color-success);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 0.2rem var(--space-2);
  border-radius: var(--radius-xs);
  letter-spacing: var(--ls-wide);
}

/* Meta list */
.ed-booking-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-5);
}

.ed-booking-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-gray-1);
}
.ed-booking-card__meta-item svg {
  color: var(--color-gray-3);
  flex-shrink: 0;
}

/* Countdown label */
.ed-booking-card__countdown-wrap {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-5);
}

.ed-booking-card__countdown-label {
  font-size: var(--fs-xs);
  color: var(--color-gray-2);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
  text-align: center;
}

/* Remind me row */
.ed-booking-card__remind {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-5);
}

.ed-booking-card__remind-text {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
}

.ed-remind-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.ed-remind-btn:hover { opacity: 0.75; }


/* ============================================================
   08. LIGHT COUNTDOWN (dark values on white background)
   Different from .countdown in style.css which has white
   values on dark backgrounds.
   ============================================================ */
.ed-countdown-light {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ed-countdown-light__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
}

.ed-countdown-light__value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: var(--color-light-bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--color-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ed-countdown-light__label {
  font-size: 0.6rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--color-gray-3);
  text-align: center;
}

.ed-countdown-light__sep {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-gray-4);
  padding-bottom: var(--space-4);
  align-self: flex-start;
  margin-top: var(--space-2);
}


/* ============================================================
   09. FEATURE HIGHLIGHTS STRIP
   ============================================================ */
.ed-feature-strip {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-5);
  border-bottom: 1px solid var(--color-gray-5);
  padding: var(--space-6) 0;
}

.ed-feature-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.ed-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-gray-5);
}
.ed-feature-item:last-child { border-right: none; }

.ed-feature-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}
.ed-feature-item__icon svg { width: 22px; height: 22px; }

.ed-feature-item__value {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  line-height: var(--lh-snug);
}

.ed-feature-item__label {
  font-size: var(--fs-xs);
  color: var(--color-gray-2);
  line-height: var(--lh-normal);
}


/* ============================================================
   10. MAIN TWO-COLUMN LAYOUT
   ============================================================ */
.ed-main-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-8);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  align-items: start;
}

.ed-content-col {
  min-width: 0; /* prevent grid blowout */
}

.ed-sidebar-col {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}


/* ============================================================
   11. TAB NAVIGATION
   ============================================================ */
.ed-tabs {
  border-bottom: 2px solid var(--color-gray-5);
  margin-bottom: var(--space-8);
  position: sticky;
  top: var(--navbar-height);
  background: var(--color-white);
  z-index: var(--z-raised);
}

.ed-tabs__track {
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ed-tabs__track::-webkit-scrollbar { display: none; }

.ed-tab {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-gray-2);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}
.ed-tab:hover {
  color: var(--color-dark);
}
.ed-tab.is-active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-primary);
}


/* ============================================================
   12. TAB CONTENT PANELS
   ============================================================ */
.ed-tab-panel {
  display: block;
}
.ed-tab-panel[hidden] {
  display: none;
}


/* ============================================================
   13. SECTION TYPOGRAPHY HELPERS
   ============================================================ */
.ed-content-section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-gray-5);
}
.ed-content-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.ed-section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  line-height: var(--lh-snug);
}

.ed-section-body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-1);
}


/* ============================================================
   14. MINI-FEATURES ROW (4-icon grid inside About tab)
   ============================================================ */
.ed-mini-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
}

.ed-mini-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  line-height: var(--lh-snug);
}

.ed-mini-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.ed-mini-feature__icon svg { width: 20px; height: 20px; }


/* ============================================================
   15. HOW IT WORKS STEPS
   ============================================================ */
/* Two-column block: steps left, phone mockup right */
.ed-how-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-gray-5);
}

.ed-how-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.ed-how-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.ed-how-step__num {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-muted);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: 1;
}

.ed-how-step__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.ed-how-step__desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
  line-height: var(--lh-relaxed);
}


/* ============================================================
   16. PHONE MOCKUP UI
   ============================================================ */
.ed-how-block__visual {
  width: 220px;
  flex-shrink: 0;
}

.ed-phone-mockup {
  position: relative;
  width: 220px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--color-dark);
}

.ed-phone-mockup img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  opacity: 0.25;
  display: block;
}

.ed-phone-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
}

.ed-phone-ui {
  width: 100%;
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ed-phone-ui__header {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
}
.ed-phone-ui__date {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
  text-align: center;
}

/* Progress ring */
.ed-phone-ui__circle {
  position: relative;
  display: flex;
  justify-content: center;
  margin: var(--space-2) 0;
}
.ed-phone-ui__circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ed-phone-ui__circle-text span:first-child {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}
.ed-phone-ui__circle-text span:last-child {
  font-size: 0.5rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.2;
}

/* Day dots */
.ed-phone-ui__days {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}
.ed-phone-ui__days span {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.5);
}
.ed-phone-ui__days span.done {
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 0.7;
}
.ed-phone-ui__days span.active {
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(232,25,44,0.35);
}

.ed-phone-ui__goal-label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
  text-align: center;
}
.ed-phone-ui__goal-val {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
}
.ed-phone-ui__add-btn {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  width: 100%;
}
.ed-phone-ui__recent-label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}
.ed-phone-ui__activity-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.7);
  gap: var(--space-2);
  flex-wrap: wrap;
}


/* ============================================================
   17. TERMS LIST
   ============================================================ */
.ed-terms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: disc;
  padding-left: var(--space-5);
  margin-top: var(--space-4);
}

.ed-terms-list li {
  font-size: var(--fs-base);
  color: var(--color-gray-1);
  line-height: var(--lh-relaxed);
}


/* ============================================================
   18. RIGHT SIDEBAR WIDGET CARDS
   ============================================================ */
.ed-widget-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.ed-widget-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  line-height: var(--lh-snug);
}

.ed-widget-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}


/* ============================================================
   19. PROGRESS BAR (community goal)
   ============================================================ */
.ed-progress__labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.ed-progress__current {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--color-dark);
  line-height: 1;
}

.ed-progress__of {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-2);
}

.ed-progress__pct {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-gray-2);
}

.ed-progress__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-gray-5);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.ed-progress__bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ed-progress__goal-label {
  font-size: var(--fs-xs);
  color: var(--color-gray-3);
  margin-top: var(--space-1);
}


/* ============================================================
   20. SHARE LINKS
   ============================================================ */
.ed-share-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ed-share-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gray-5);
  transition: color var(--transition-fast), background var(--transition-fast);
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  text-align: left;
}
.ed-share-link:last-child { border-bottom: none; }
.ed-share-link:hover { color: var(--color-primary); }

.ed-share-link__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-white);
}

.ed-share-link__icon--fb  { background: #1877F2; }
.ed-share-link__icon--tw  { background: var(--color-dark); }
.ed-share-link__icon--wa  { background: #25D366; }
.ed-share-link__icon--ig  { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.ed-share-link__icon--copy { background: var(--color-gray-5); color: var(--color-gray-1); }

.ed-share-link__arrow {
  margin-left: auto;
  color: var(--color-gray-4);
  flex-shrink: 0;
}
.ed-share-link:hover .ed-share-link__arrow { color: var(--color-primary); }


/* ============================================================
   21. ORGANIZER BLOCK
   ============================================================ */
.ed-organizer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ed-organizer__logo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: var(--space-2);
  background: var(--color-white);
}

.ed-organizer__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.ed-organizer__desc {
  font-size: var(--fs-xs);
  color: var(--color-gray-2);
  line-height: var(--lh-relaxed);
}


/* ============================================================
   22. REWARD CARDS
   ============================================================ */
.ed-rewards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.ed-reward-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.ed-reward-card--center {
  border-color: var(--color-gray-4);
  box-shadow: var(--shadow-sm);
}

.ed-reward-card__header {
  margin-bottom: var(--space-2);
}

.ed-reward-card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-primary);
}

.ed-reward-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-1);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.ed-reward-card__img-wrap {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ed-reward-card__img-wrap img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}


/* ============================================================
   23. REWARDS SECTION (full-width below main layout)
   ============================================================ */
.ed-rewards-section {
  padding: var(--space-12) 0;
}

.ed-rewards-cta {
  border-radius: var(--radius-lg);
  margin-top: var(--space-8);
}
/* Override padding for inline CTA */
.ed-rewards-cta .cta-banner__inner {
  padding: 0;
}


/* ============================================================
   24. RESPONSIVE OVERRIDES
   ============================================================ */

/* ── 1199px: tighten hero columns ── */
@media (max-width: 1199px) {
  .ed-hero__container { grid-template-columns: 1fr 290px; }
  .ed-feature-strip__grid { grid-template-columns: repeat(3, 1fr); }
  .ed-feature-item:nth-child(3) { border-right: none; }
  .ed-feature-item:nth-child(4) { border-top: 1px solid var(--color-gray-5); }
  .ed-feature-item:nth-child(5) { border-top: 1px solid var(--color-gray-5); border-right: none; }
}

/* ── 991px: stack hero / drop sidebar ── */
@media (max-width: 991px) {

  /* Hero becomes single column */
  .ed-hero__container {
    grid-template-columns: 1fr;
  }
  .ed-hero__left {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    min-height: 420px;
  }
  .ed-sidebar {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .ed-booking-card {
    padding: var(--space-5);
  }

  /* Feature strip: 3 col */
  .ed-feature-strip__grid { grid-template-columns: repeat(3, 1fr); }
  .ed-feature-item:nth-child(3) { border-right: none; }
  .ed-feature-item:nth-child(n+4) { border-top: 1px solid var(--color-gray-5); }
  .ed-feature-item:nth-child(6) { border-right: none; }

  /* Main layout stack */
  .ed-main-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .ed-sidebar-col {
    position: static;
    order: -1; /* sidebar appears above tabs on tablet */
  }

  /* How block stacks */
  .ed-how-block {
    grid-template-columns: 1fr;
  }
  .ed-how-block__visual {
    display: none; /* hide phone mockup on tablet */
  }

  /* Mini features: 2x2 */
  .ed-mini-features { grid-template-columns: repeat(2, 1fr); }

  /* Rewards grid: stack */
  .ed-rewards-grid { grid-template-columns: 1fr; }
}

/* ── 767px: mobile ── */
@media (max-width: 767px) {

  .ed-hero__left { min-height: 360px; }
  .ed-hero__content { padding: var(--space-5); }
  .ed-hero__title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .ed-hero__tagline { font-size: var(--fs-sm); }

  /* Feature strip: 2 col */
  .ed-feature-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ed-feature-item { border-right: 1px solid var(--color-gray-5); border-bottom: 1px solid var(--color-gray-5); }
  .ed-feature-item:nth-child(2n) { border-right: none; }
  .ed-feature-item:nth-last-child(-n+2) { border-bottom: none; }

  /* Tabs scroll on mobile */
  .ed-tabs { position: static; }

  /* Mini features: single col */
  .ed-mini-features { grid-template-columns: repeat(2, 1fr); }

  /* Rewards */
  .ed-rewards-grid { grid-template-columns: 1fr; }

  /* Booking card: full width */
  .ed-booking-card__countdown-wrap { overflow-x: auto; }

  /* CTA banner stacks */
  .ed-rewards-cta .cta-banner__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ── 479px ── */
@media (max-width: 479px) {
  .ed-hero__activities { gap: var(--space-3); }
  .ed-mini-features { grid-template-columns: 1fr 1fr; }
  .ed-how-steps { gap: var(--space-4); }
}