/* ============================================================
   upcoming-events.css — UpcomingEventsSection + EventCard (compact)

   Three layouts (all horizontal scroll):
   - Desktop (≥ 1360px):  5 cards, ~1.8 visible, 100px L/R padding
   - Tablet  (768–1359px): 5 cards, ~1.5 visible,  80px L/R padding
   - Mobile  (< 768px):   5 cards, ~1 visible,    20px L/R padding

   No background fill on section — ClayBackground provides it.
   Banner is absolutely positioned, oversized, top-left anchored,
   z-index above cards so the ceramic arm overlaps the card row.
   ============================================================ */


/* ============================================================
   UpcomingEventsSection — outer container
   position: relative anchors the absolute banner.
   overflow: hidden clips banner bleed and card row overflow.
   No background — ClayBackground provides the clay texture.
   ============================================================ */

.upcoming-events-section {
  position: relative;
  z-index: 1;                 /* paint above HIW section (overflow: visible parallax) */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* push EventCardRow + SeeMoreLink to bottom,
                                  leaving fixed space above for the banner */
  height: 1143px;             /* desktop — fixed (+40px for divider clearance) */
  overflow: hidden;
}

@media (max-width: 1359px) and (min-width: 768px) {
  .upcoming-events-section {
    height: 1129px;           /* tablet — fixed (+100px) */
  }
}

@media (max-width: 767px) {
  .upcoming-events-section {
    height: 790px;            /* mobile — fixed (+70px for banner clearance) */
  }
}


/* ============================================================
   UpcomingEventsBanner
   Absolutely positioned, oversized PNG, top-left anchored
   (MIN/MIN constraints — does not reposition as section resizes).
   z-index: 2 — sits above the EventCardRow (z-index: 1) so the
   ceramic arm visually overlaps the top of the card area.
   filter: drop-shadow follows the PNG alpha channel.
   Dimensions + offsets per breakpoint from annotation.
   ============================================================ */

.upcoming-events-banner {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  /* Desktop: 1930 × 1160 at x: −875, y: −580 */
  width: 1930px;
  height: 1160px;
  left: -875px;
  top: -850px;
  filter: drop-shadow(var(--shadow-tile));
}

.upcoming-events-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;            /* override base.css img { max-width: 100% } */
}

@media (max-width: 1359px) and (min-width: 768px) {
  .upcoming-events-banner {
    /* Tablet: 1451 × 872 at x: −683, y: −392 */
    width: 1451px;
    height: 872px;
    left: -683px;
    top: -392px;
  }
}

@media (max-width: 767px) {
  .upcoming-events-banner {
    /* Mobile: 879 × 528 at x: −396, y: −252 */
    width: 879px;
    height: 528px;
    left: -396px;
    top: -252px;
  }
}


/* ============================================================
   EventCardRow
   Horizontal scroll at all breakpoints. Cards are wider than
   the section — section clips, creating the scroll peek.
   Scrollbar hidden across all browsers.

   Desktop:  padding T/B space-layout-2xl (100px), L/R space-layout-2xl (100px)
   Tablet:   padding T/B space-layout-2xl (100px), L/R space-layout-xl  (80px)
   Mobile:   padding T/B space-layout-2xl (44px via mobile token), L/R space-layout-md (20px)

   T/B padding uses space-layout-2xl which switches from 100px → 44px
   via the mobile token override — no separate media query needed.
   L/R padding differs all three ways so explicit overrides are used.
   ============================================================ */

.event-card-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: var(--space-layout-lg);          /* 44px — fixed, no token switch */
  padding-top: var(--space-layout-2xl);     /* 100px desktop / 44px mobile */
  padding-bottom: var(--space-layout-2xl);  /* 100px desktop / 44px mobile */
  padding-left: var(--space-layout-2xl);    /* 100px desktop default */
  padding-right: var(--space-layout-2xl);   /* 100px desktop default */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.event-card-row::-webkit-scrollbar {
  display: none;
}

/* Tablet: 80px L/R */
@media (max-width: 1359px) and (min-width: 768px) {
  .event-card-row {
    padding-left: var(--space-layout-xl);
    padding-right: var(--space-layout-xl);
  }
}

/* Mobile: 20px L/R */
@media (max-width: 767px) {
  .event-card-row {
    padding-left: var(--space-layout-md);
    padding-right: var(--space-layout-md);
  }
}


/* ============================================================
   EventCard — compact variant
   Width: fixed 506px desktop/tablet, 285px mobile.
   Height: HUG — determined by content; token mode switch
   (44px → 24px padding/gap) reduces card height on mobile.
   overflow: visible — filter:drop-shadow and tile PNG edges show.
   filter: drop-shadow(var(--shadow-card)) — follows tile alpha channel.
   ============================================================ */

.event-card {
  position: relative;
  flex: 0 0 auto;
  width: 506px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-component-xs);            /* 4px — ContentArea → CTA gap */
  padding-bottom: var(--space-component-xl); /* 44px desktop / 24px mobile */
  box-sizing: border-box;
  overflow: visible;
  filter: drop-shadow(var(--shadow-card));
}

@media (max-width: 767px) {
  .event-card {
    width: 285px;
  }
}


/* ============================================================
   EventCard background tile
   Absolutely fills the card. No border-radius / overflow: hidden —
   the PNG tile has organic rounded edges; CSS must not clip them.
   object-fit: fill stretches the tile to fill the container
   without preserving aspect ratio.
   ============================================================ */

.event-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.event-card__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}


/* ============================================================
   ContentArea
   Vertical flex column. Padding and gap both use space-component-xl:
     Desktop/tablet: 44px  |  Mobile: 24px  (token handles it).
   ============================================================ */

.event-card__content-area {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-component-xl);
  padding: var(--space-component-xl);
  box-sizing: border-box;
}


/* ============================================================
   Title
   Alphabet Soup Regular, type-size-h2:
     Desktop/tablet: 40px  |  Mobile: 24px  (token handles it).
   Centred text. min-height: 60px (Figma fixed title frame height).
   ============================================================ */

.event-card__title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-component-lg);    /* desktop (≥1360px) — 24px */
}

@media (max-width: 1359px) {
  .event-card__title {
    padding-block: var(--space-component-md);  /* tablet + mobile — 16px desktop mode / 12px mobile */
  }
}

.event-card__title-text {
  font-family: var(--type-family-display);
  letter-spacing: 0.03em;
  font-size: var(--type-size-h2);
  font-weight: var(--type-weight-regular);
  line-height: 1.1;
  text-align: center;
  color: var(--color-text-default);
  margin: 0;
}


/* ============================================================
   Info — wrapper around EventDetails
   ============================================================ */

.event-card__info {
  width: 100%;
  display: flex;
  gap: var(--space-component-xs);
  align-items: flex-start;
  justify-content: flex-start;
}

/* EventDetails — MetaArea + SpecsArea stacked */
.event-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  align-items: flex-start;
}


/* ============================================================
   MetaArea — date, time, location stacked on separate lines
   Text style: Body/Lead → Avance Pro Regular, type-size-h3
     Desktop/tablet: 24px  |  Mobile: 20px  (token handles it)
   ============================================================ */

.event-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  align-items: flex-start;
  font-family: var(--type-family-body);
  font-size: var(--type-size-h3);
  font-weight: var(--type-weight-regular);
  line-height: normal;
  color: var(--color-text-default);
}

.event-card__meta p {
  margin: 0;
}


/* ============================================================
   SpecsArea — PriceInfo row + AvailabilityIndicator text
   ============================================================ */

.event-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  align-items: flex-start;
}

/* PriceInfo: "€65 per person · All inclusive" on one line */
.event-card__price-info {
  display: flex;
  flex-direction: row;
  gap: 0;                                   /* no gap — space is part of text */
  align-items: center;
  font-family: var(--type-family-body);
  font-size: var(--type-size-h3);
  font-weight: var(--type-weight-regular);
  line-height: normal;
  color: var(--color-text-default);
  white-space: nowrap;
}

/* AvailabilityIndicator — compact: text only, no TokenRow */
.availability-indicator--compact {
  font-family: var(--type-family-body);
  font-size: var(--type-size-h3);
  font-weight: var(--type-weight-regular);
  line-height: normal;
  color: var(--color-text-default);
}

.availability-indicator--compact p {
  margin: 0;
}


/* ============================================================
   Sold-out compact card variant
   Applied by adding `event-card--sold-out` to the card root.
   Greys out title/meta/price info, keeps the "Sold out"
   availability text at full opacity AND bigger + bolder so it
   becomes the card's visual focal point.
   ============================================================ */

.event-card--sold-out .event-card__title,
.event-card--sold-out .event-card__meta,
.event-card--sold-out .event-card__price-info {
  opacity: 0.4;
}

.event-card--sold-out .availability-indicator--compact {
  font-size: var(--type-size-h2);
  font-weight: var(--type-weight-bold);
}


/* ============================================================
   CTA Button — "Book Your Spot →"
   Fixed width: 213px. Alphabet Soup Regular, type-size-h4 (24px).
   Background: button-tile-primary.png (organic PNG tile, like card bg).
   No border-radius / overflow: hidden — PNG edge defines the shape.
   ============================================================ */

.event-card__cta {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-component-sm) var(--space-component-lg);
  text-decoration: none;
  box-sizing: border-box;
}

.event-card__cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.event-card__cta-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;              /* stretch to match container — same as card bg */
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.event-card__cta:hover .event-card__cta-bg img {
  filter: drop-shadow(var(--shadow-card-hover));
}

.event-card__cta-label {
  position: relative;
  z-index: 1;
  font-family: var(--type-family-display);
  letter-spacing: 0.03em;
  font-size: var(--type-size-h4);
  font-weight: var(--type-weight-regular);
  line-height: normal;
  color: var(--color-action-primary-label);  /* white */
  white-space: nowrap;
  transition: transform 0.15s ease;
}


/* SeeMoreLink — extra bottom padding for divider clearance */
.upcoming-events-section .see-more-link {
  padding-bottom: var(--space-component-5xl);
}