/**
 * @file
 * Event landing page components (built for KAPSICON 2026).
 *
 * Reusable across event landing pages. Applied via field_paragraph_extra_class
 * on Section Block / Product Slider paragraphs — nothing here is node-scoped.
 *
 * Palette is taken from the approved design:
 *   brand purple  #5519E6  -> var(--taevas-blue)
 *   section grey  #E6E6E6
 *   glow purple   #A85BFB
 * Design canvas is 1280px wide, so px values below map ~1:1 at that width.
 */

/* ==========================================================================
   Section shells
   ========================================================================== */

.evt-section {
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}

.evt-section--light {
  background: #e6e6e6;
}

/* "What to expect" — circular purple glow anchored to the top-right corner,
   falling off to black. Radius is in vw so the falloff stays proportional. */
.evt-section--expect {
  background:
    radial-gradient(circle 64vw at 100% 0%,
      #a85bfb 0%,
      #5f3190 50%,
      #000000 100%);
}

/* "Plan your visit" is the page's pre-footer. It deliberately does NOT define
   its own background or padding here: it carries the same `py-4` class and the
   same field_paragraph_bg_gradient value as the standard pre-footer on every
   other page (linear-gradient(180deg,#5519E4,#8129E2,#9E46EE,#E9CDFC,#FEFDFE),
   rendered inline by paragraph--paragraph_block.html.twig), so the band reads
   identically site-wide and stays editable from the paragraph form. */

/* ==========================================================================
   Hero

   The banner artwork carries all of the hero copy, so it must never be
   cropped. Giving the header the artwork's own aspect ratio makes the
   inherited `background-size: cover` fit exactly — full bleed, no crop, no
   distortion — at every viewport width. Desktop and mobile assets have
   different ratios, matching the 768px swap in custom.css.
   ========================================================================== */

.evt-hero.header {
  aspect-ratio: 4001 / 1502;
  height: auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}

@media (max-width: 768px) {
  .evt-hero.header {
    aspect-ratio: 1016 / 1805;
  }
}

/* Make the whole banner clickable through to the form.
   custom.css deliberately stacks the header's .container (z-index:6 !important)
   above .header-click-overlay (z-index:5 !important) so that real header
   content stays clickable. This hero has no content in that container — all of
   the copy, including the "I'm Interested" button, is baked into the artwork —
   so the empty container would otherwise swallow every click on the banner.
   Letting the empty layout wrappers ignore pointer events passes clicks
   through to the overlay, while any element actually added to the hero later
   keeps its own hit area. */
.evt-hero > .container,
.evt-hero > .container > .row,
.evt-hero > .container > .row > [class*="col-"] {
  pointer-events: none;
}

.evt-hero > .container a,
.evt-hero > .container button,
.evt-hero > .container input,
.evt-hero > .container select,
.evt-hero > .container textarea {
  pointer-events: auto;
}

/* ==========================================================================
   Section heading + intro
   ========================================================================== */

.evt-head {
  text-align: center;
  margin-bottom: 52px;
}

.evt-head h2,
.evt-head .evt-head__title {
  color: var(--taevas-blue);
  font-size: clamp(28px, 3.45vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}

/* The .paragraph--type--paragraph-content class sits on this same element and
   custom.css pins its <p> to 0.9rem/--taevas-black. Qualifying with that class
   raises specificity enough to win regardless of stylesheet order. */
.paragraph--type--paragraph-content.evt-head p {
  color: #111111;
  font-size: clamp(15px, 1.42vw, 18px);
  line-height: 1.5;
  font-weight: 400;
  max-width: 780px;
  margin: 0 auto;
}

/* On the dark section the same heading block flips to white. */
.evt-section--expect .evt-head h2,
.evt-section--expect .evt-head .evt-head__title {
  color: #ffffff;
}

.evt-section--expect .paragraph--type--paragraph-content.evt-head p {
  color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   Product slider — flat card variant
   Markup comes from paragraph--product_slider.html.twig when
   field_paragraph_extra_class contains "product-slider--flat".
   ========================================================================== */

.product-slider--flat {
  padding: 0;
}

.product-slider--flat .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Equal-height slides. */
.product-slider--flat .swiper-wrapper {
  align-items: stretch;
}

.product-slider--flat .swiper-slide {
  height: auto;
  display: flex;
}

.product-slider--flat .ps-flat-card {
  background: var(--taevas-blue);
  border-radius: 24px;
  padding: 34px 26px 30px;
  color: #ffffff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-slider--flat .ps-flat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(85, 25, 230, 0.32);
}

/* Reserve two lines so single-line titles (e.g. "EquiCOG®") don't pull the
   image and copy below them out of line with the neighbouring cards. */
.product-slider--flat .ps-flat-card__title {
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 16px;
  text-align: center;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-slider--flat .ps-flat-card__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.product-slider--flat .ps-flat-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-slider--flat .ps-flat-card__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-slider--flat .ps-flat-card__subtitle {
  font-size: clamp(14px, 1.2vw, 15px);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 10px;
  color: #ffffff;
}

.product-slider--flat .ps-flat-card__desc,
.product-slider--flat .ps-flat-card__desc p {
  font-size: clamp(12px, 1vw, 12.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

.product-slider--flat .ps-flat-card__cta {
  margin-top: 22px;
  align-self: center;
  display: inline-block;
  background: #e6e6e6;
  color: var(--taevas-blue);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1;
  padding: 13px 34px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.product-slider--flat .ps-flat-card__cta:hover,
.product-slider--flat .ps-flat-card__cta:focus {
  background: #ffffff;
  color: var(--taevas-blue);
  text-decoration: none;
}

/* Navigation arrows sit under the rail, centred. Doubled-up class beats
   `.product-slider .article-slider-navigation{justify-content:start}` in
   article-slider.css regardless of which stylesheet loads first. */
.product-slider.product-slider--flat .article-slider-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.product-slider--flat .swiper-navigation {
  display: flex;
  gap: 14px;
}

.product-slider--flat .swiper-button-prev,
.product-slider--flat .swiper-button-next {
  position: static;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--taevas-blue);
  background: transparent;
  color: var(--taevas-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.product-slider--flat .swiper-button-prev:hover,
.product-slider--flat .swiper-button-next:hover {
  background: var(--taevas-blue);
  color: #ffffff;
}

.product-slider--flat .swiper-button-prev::after,
.product-slider--flat .swiper-button-next::after {
  display: none;
}

/* ==========================================================================
   "What to expect" bento

   Built from Image Box paragraphs inside a 7/5 Section Block:
     region top    -> heading (.evt-head)
     region first  -> two Image Boxes, image position "left"
     region second -> one Image Box, image position "top"
   Card variant is driven by the position modifier the Image Box template
   already emits, so no extra per-card class is needed.
   ========================================================================== */

/* Left column stacks its two cards and matches the right column's height. */
.evt-expect > .row,
.evt-expect > .container > .row {
  align-items: stretch;
}

.evt-expect > .row > [class*="col-"],
.evt-expect > .container > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Card shell — applies to both orientations. */
.evt-expect .image-box {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  overflow: hidden;
  margin-bottom: 0;
  flex: 1 1 auto;
  display: flex;
}

.evt-expect .image-box__container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.evt-expect .image-box__title {
  font-size: clamp(19px, 1.85vw, 23px);
  font-weight: 500;
  line-height: 1.28;
  margin: 0 0 14px;
  color: #ffffff;
}

.evt-expect .image-box__description,
.evt-expect .image-box__description p {
  font-size: clamp(14px, 1.2vw, 15px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* --- Horizontal card (image left, copy right) --- */
.evt-expect .image-box--position-left .image-box__row {
  display: grid;
  grid-template-columns: 257px 1fr;
  gap: 0;
  align-items: stretch;
  height: 100%;
}

.evt-expect .image-box--position-left .image-box__image--left {
  max-width: none;
  margin: 0;
  height: 100%;
}

.evt-expect .image-box--position-left .image-box__image--left img,
.evt-expect .image-box--position-left .image-box__image--left picture {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  display: block;
}

.evt-expect .image-box--position-left .image-box__content {
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Vertical card (image on top, centred copy below) --- */
.evt-expect .image-box--position-top .image-box__image--top {
  margin-bottom: 0;
}

.evt-expect .image-box--position-top .image-box__image--top img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

.evt-expect .image-box--position-top .image-box__content {
  padding: 26px 32px 32px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   Memories marquee
   Two stacked images_container paragraphs scrolling in opposite directions.
   The image list must be duplicated in the field — the shared keyframe
   translates -50%, so one full set has to sit either side of the midpoint.
   ========================================================================== */

/* The gallery rows live inside the layout column, so the stacking gap goes
   there rather than on the section. */
.evt-memories > .row > [class*="col-"],
.evt-memories > .container > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.evt-memories .images-container {
  padding: 0;
  margin: 0;
}

/* The heading sits in its own nested Section Block purely to pick up the
   .container width — strip the section padding it inherits with it. */
.evt-memories__head.section {
  padding-top: 0;
  padding-bottom: 0;
}

/* The shared gallery reserves a 400px-tall collage stage; these rows are only
   as tall as the artwork, so drop the reserved height and its padding. */
.evt-memories .images-container__gallery {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  justify-content: flex-start;
}

/* images-container.css staggers each slot with a per-index translateY and
   forces a fixed aspect-ratio (a scattered collage look). This design wants
   clean aligned rows at the images' own proportions. */
.evt-memories .images-container__image {
  transform: none;
}

.evt-memories .images-container__image img {
  aspect-ratio: auto;
}

.evt-memories .images-container__scroll-track {
  gap: 26px;
  align-items: stretch;
}

/* images-container.css pins each slot to a fixed 280px (min-width included).
   Without resetting min-width, portrait shots sit in an over-wide slot and
   show dead space beside the image — the wrapper must shrink to the artwork. */
.evt-memories .images-container__image {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
}

.evt-memories .images-container__image img {
  height: 280px;
  width: auto;
  max-width: none;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

/* Every gallery row after the first runs the other way. Targeted structurally
   because the Images Container paragraph has no CSS-class field of its own. */
.evt-memories .images-container ~ .images-container .images-container__scroll-track,
.evt-memories > .row > [class*="col-"] > *:nth-child(n + 3)
  .images-container__scroll-track,
.evt-memories > .container > .row > [class*="col-"] > *:nth-child(n + 3)
  .images-container__scroll-track {
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  .evt-memories .images-container__scroll-track {
    animation: none !important;
  }

  .evt-memories .images-container__scroll-wrapper {
    overflow-x: auto;
  }
}

/* ==========================================================================
   "Plan your visit" — copy + form
   ========================================================================== */

/* Two equal columns from the Section Block layout: copy left, form right.
   Gutter and padding are left to the shared `g-4` / `py-4` rhythm so this
   matches the standard pre-footer band. */
.evt-visit > .row,
.evt-visit > .container > .row {
  align-items: center;
}

.evt-visit__copy {
  color: #ffffff;
}

.evt-visit__copy h2,
.evt-visit__copy .evt-visit__title {
  font-size: clamp(28px, 3.45vw, 44px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0 0 28px;
}

.evt-visit__copy h3,
.evt-visit__copy .evt-visit__lead {
  font-size: clamp(18px, 1.95vw, 25px);
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 20px;
}

/* Qualified for the same reason as .evt-head p — without it this copy
   inherits --taevas-black and disappears into the purple gradient. */
.paragraph--type--paragraph-content.evt-visit__copy p {
  font-size: clamp(15px, 1.42vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* Frosted panel behind the Odoo-driven campaign form. The Campaign Form
   paragraph has no CSS-class field, so this hangs off the section class. */
.evt-visit .campaign-form-container {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 24px 60px rgba(32, 2, 115, 0.18);
}

.evt-visit .campaign-form-wrapper {
  max-width: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
  .evt-expect > .row > [class*="col-"],
  .evt-expect > .container > .row > [class*="col-"] {
    gap: 44px;
  }

  .evt-expect .image-box--position-left .image-box__row {
    grid-template-columns: 210px 1fr;
  }

  .evt-expect .image-box--position-top .image-box__image--top img {
    height: 280px;
  }

}

@media (max-width: 991.98px) {
  .evt-section {
    padding: 56px 0;
  }

  .evt-head {
    margin-bottom: 38px;
  }

  /* Bento collapses to one column; Bootstrap already drops col-lg-* to full
     width here, so only the inter-card gap needs restating. */
  .evt-expect > .row > [class*="col-"],
  .evt-expect > .container > .row > [class*="col-"] {
    gap: 32px;
  }

  .evt-expect > .row > [class*="col-"]:first-child,
  .evt-expect > .container > .row > [class*="col-"]:first-child {
    margin-bottom: 32px;
  }

  .evt-visit > .row,
  .evt-visit > .container > .row {
    row-gap: 36px;
  }

  .evt-memories .images-container__image img {
    height: 210px;
  }
}

@media (max-width: 767.98px) {
  .evt-section {
    padding: 44px 0;
  }

  /* Stack the horizontal card so the image isn't crushed. */
  .evt-expect .image-box--position-left .image-box__row {
    grid-template-columns: 1fr;
  }

  .evt-expect .image-box--position-left .image-box__image--left img {
    height: 200px;
    min-height: 0;
  }

  .evt-expect .image-box--position-left .image-box__content {
    padding: 22px 24px 26px;
  }

  .evt-expect .image-box--position-top .image-box__image--top img {
    height: 220px;
  }

  .evt-memories {
    gap: 16px;
  }

  .evt-memories .images-container__scroll-track {
    gap: 16px;
  }

  .evt-memories .images-container__image img {
    height: 165px;
    border-radius: 12px;
  }

  .product-slider--flat .ps-flat-card {
    padding: 28px 22px 26px;
    border-radius: 20px;
  }

  .evt-visit .campaign-form-container {
    padding: 24px;
    border-radius: 18px;
  }
}