/* @font-face can't nest inside a selector (unlike the rest of this file),
   so it sits at the top level. Scoped to this component (not vars.css/
   base.css) since it's only used here — keeps the font off pages that never
   render the banner. */
@font-face {
  font-family: "Duepuntozero";
  src: url("../fonts/Duepuntozero/duepuntozero.regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Duepuntozero";
  src: url("../fonts/Duepuntozero/duepuntozero.bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.plura-wp-component .jomi-banner {
  position: relative; /* positions button & logo */
  background-color: var(--jomi-color-surface); /* neutral fallback when no background image is set */
  height: 100dvh;
  overflow: hidden;
  /* Banner text (year, name, dates, scroll-down label) reads as branding/
     graphic, not selectable copy — no text-select I-beam or highlight.
     Inherited, so this one declaration covers every descendant. */
  -webkit-user-select: none;
  user-select: none;
  cursor: default;


  /* === LOGO + CONTENT ===
     A content-sized, centred flex lockup: the logo plus the body field's own
     top-level blocks as direct children (siblings, no wrapper). They flow in a
     centred row; a .u-full block wraps onto its own line below (e.g. dates). */
  .banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap; /* lets a .u-full child break onto its own line below the lockup */
    align-items: center;
    justify-content: center;
    gap: 1rem 2rem; /* row-gap between wrapped lines / column-gap between logo & text */
    text-align: left;
    z-index: 2; /* above the background image and scroll-down control */
    color: var(--jomi-color-primary); /* banner text */
    pointer-events: none; /* let clicks fall through to the scroll-down */

    > * { pointer-events: auto; }

    /* Starts hidden via CSS, not JS — a browser can paint before
       DOMContentLoaded, when anim.js's own hide would run. Revealed in
       sequence by anim.js, with a safety-net timeout in case that never
       completes (e.g. GSAP fails to load). */
    > * {
      opacity: 0;
      visibility: hidden;
    }

    #event-logo {
      display: block;
      /* Definite width + height:auto so the SVG's viewBox aspect ratio
         supplies the height. Needed because logo-jomi.svg carries only a
         viewBox (no width/height attrs), so it has no intrinsic size to
         fall back on — without this it collapses to 0×0. */
      width: clamp(220px, 28vw, 300px);
      height: auto;
      /* The outermost <svg> clips to its viewport by default; let the GSAP
         animation (scale pulses, stroke caps) spill past the viewBox edge
         instead of being cropped. Visual only — doesn't affect layout. */
      overflow: visible;
    }

    /* .jomi-alert brings its own card (theme/assets/css/components.css); drop
       its margin (flex gap handles spacing) and give it a full line of its own. */
    .jomi-alert {
      margin-block: 0;
      width: 100%;
    }

    /* === TEXT SCHEME 1 ===
       Big year over an uppercase name, dates/location on their own accent-
       coloured line below. This is the recurring shape (this year's and last
       year's banner both use it) — bundled as one preset so the body field
       only needs two divs, no editor-authored wrappers (every token already
       self-wraps in its own jomi-token-<name> class):
         <div class="u-anim-text scheme1 scheme1-line1">%event-year-2% %title%</div>
         <div class="scheme1 scheme1-line2">%event-dates% %event-location%</div>
       A future edition needing a different look gets a scheme2-*, not a
       rewrite of this one. */
    .scheme1 {
      /* Bold is the scheme's baseline weight — .scheme1-line1 overrides it
         to 400 below (Duepuntozero's name/title stays regular); the year
         overrides back to bold, now that a bold Duepuntozero file exists. */
      font-weight: var(--jomi-font-weight-bold);
    }

    .scheme1-line1 {
      display: flex;
      flex-direction: column;
      gap: 0.15em;
      text-transform: uppercase; /* inherited; a no-op on the year's digits, so no need to scope it to .jomi-token-title */
      /* Fixed width, not max-width: with max-width the box sizes to its
         content's own preferred width, which SplitText changes — pre-split
         it's measured from the unwrapped text (wide, hits the cap);
         post-split, from the widest individual pre-wrapped line ("DE
         MEDICINA", narrower) — shrinking the column the moment it splits.
         A fixed width is content-independent, so splitting can't move it.
         vw-based like the logo's clamp(), since .banner-content has no
         width to take a % of. Tuned by eye against Duepuntozero's glyphs. */
      width: clamp(250px, 24vw, 260px);
      font-family: "Duepuntozero", var(--jomi-font-family);
      /* Default weight for this block's text is regular — the name/title
         stays this way; the year opts back into bold below. */
      font-weight: 400;

      .jomi-token-event-year-2 {
        font-size: var(--jomi-font-size-display);
        line-height: var(--jomi-line-height-display);
        font-weight: var(--jomi-font-weight-bold);
      }

      .jomi-token-title {
        /* No display:block needed — flexbox already blockifies direct
           children, stacking it under the year via flex-direction:column.
           Three tiers up from the original h5. */
        font-size: var(--jomi-font-size-h2);
        line-height: var(--jomi-line-height-h2);
        /* Visible on digits (unlike uppercase), so kept off the year on purpose. */
        letter-spacing: var(--jomi-letter-spacing-wide);
      }

      /* An ordinal suffix (e.g. 2ᵃˢ) keeps its own case under the uppercase above. */
      sup {
        text-transform: none;
      }
    }

    .scheme1-line2 {
      width: 100%;
      text-align: center;
      /* Two tiers up from h6 — h6 and h5 both read too small for this line. */
      font-size: var(--jomi-font-size-h4);
      line-height: var(--jomi-line-height-h4);
      font-weight: var(--jomi-font-weight-semibold); /* overrides .scheme1's inherited bold */

      /* %event-dates% already self-wraps in this class (jomi_banner_token_span) */
      .jomi-token-event-dates {
        color: var(--jomi-color-accent);
      }
    }
  }


  /* === SCROLL-DOWN === */

  /* Bottom-centre; the wrapper (not the link) carries the GSAP float.
     Starts hidden (see .banner-content > * above) — last in anim.js's
     reveal sequence. */
  .scroll-down-wrap {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 2vw, 2rem);
    transform: translateX(-50%);
    will-change: transform;
    z-index: 2; /* keep above logo */
    opacity: 0;
    visibility: hidden;
  }

  /* Label above a chevron; currentColor drives both text and icon */
  .scroll-down {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    color: var(--jomi-color-text);
    text-decoration: none;
    font-family: var(--jomi-font-family);
    font-size: var(--jomi-font-size-small);
    line-height: var(--jomi-line-height-small);
    -webkit-tap-highlight-color: transparent;
    z-index: 1; /* above the background image */

    /* Keyboard accessibility: show focus ring on the anchor */
    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px var(--jomi-focus-ring);
      border-radius: 999px;
    }

    &:hover {
      color: var(--jomi-color-primary);
    }

    .scroll-down__text {
      font-weight: var(--jomi-font-weight-semibold);
    }

    .scroll-down__icon {
      width: 1.75rem;
      height: 1.75rem;
    }
  }


  /* === BACKGROUND ===
     Two treatments, chosen by the shortcode:
     - .is-default-bg  → the bundled bg.jpg, composition-specific: image on
       the right, revealed by a left→right surface fade (desktop; mobile uses
       the frosted logo card). Same treatment as slider-intro.
     - a chosen image (per-event / global default) → unknown composition, so
       cover the area and lay a flat overlay for legibility (both breakpoints). */
  .jomi-images {
    height: 100%;
    position: relative;
    z-index: 0; /* background layer, behind everything */
    /* Starts hidden — first in anim.js's reveal sequence. */
    opacity: 0;
    visibility: hidden;

    .jomi-image {
      position: absolute;
    }

    /* Default (bundled) image: right-aligned, full height, natural width. */
    .jomi-image.is-default-bg {
      height: 100%;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      right: 0;
    }

    /* Chosen image: cover the whole area. */
    .jomi-image:not(.is-default-bg) {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Shared overlay box; each treatment sets its own background below. */
    &:has(.jomi-image)::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
    }

    /* Chosen image → flat tint (both breakpoints). */
    &:has(.jomi-image:not(.is-default-bg))::before {
      background: color-mix(in srgb, var(--jomi-color-surface) 45%, transparent);
    }

    @media (min-width: 981px) {

      .jomi-image.is-default-bg {
        height: auto;
        width: 50%;
      }

      /* Default → left→right surface fade (desktop only; the centred logo
         stays on solid surface while the image shows through on the right). */
      &:has(.jomi-image.is-default-bg)::before {
        background: linear-gradient(
          to right,
          var(--jomi-color-surface) 50%,
          color-mix(in srgb, var(--jomi-color-surface) 0%, transparent) 75%
        );
      }

    }
  }


  /* === MOBILE: backdrop treatment + text stacking (shared breakpoint) === */
  @media (max-width: 767.99px) {

    --banner-mobile-bg: 255, 255, 255, .6;
    --banner-mobile-blur: 5px;

    .banner-content {
      /* stack the lockup and wrap it in a frosted card (desktop is a centred row) */
      flex-direction: column;
      --pad: 5vw;
      width: calc( 100% - var(--pad) * 2 );
      padding: var(--pad);
      border-radius: var(--pad);
      background-color: rgba( var(--banner-mobile-bg) );
      backdrop-filter: blur(var(--banner-mobile-blur));
      text-align: center; /* centred reads better in the stacked mobile card */
      /* column already stacks every block; scheme1-line2 stays a width, nothing to override. */

      /* scheme1: year+name side by side (not stacked), to save vertical space
         in the narrow card. Nested here (not a mobile-query sibling of
         .banner-content) so its selector stays as specific as the desktop
         declaration — otherwise the desktop rule would win regardless of
         the media query. */
      .scheme1-line1 {
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: 0.4em;
        width: auto; /* the desktop rule is now width, not max-width — "none" isn't a valid width value */
      }
    }

    .scroll-down {
      background-color: rgba( var(--banner-mobile-bg) );
      backdrop-filter: blur(var(--banner-mobile-blur));
      padding: 0.5rem 0.9rem;
      border-radius: 999px;
    }

  }

}