/* Event banner (components/EventBanner.astro) — the social banner as a web block — and the homepage hero slider.
   Builds on site.css tokens. Type follows the banner: caps Noto 350 title, yellow mono subtitle, 74 % white body. */

  /* ------------------------------------------------------------ banner */
  .ev-banner { --rib: 92px; position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--navy); color: var(--white); padding-bottom: var(--rib); }
  .ev-wrap { position: relative; z-index: 2; width: 100%; padding-top: 112px; padding-bottom: 40px;
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .ev-title { margin: 0; font-weight: var(--head); font-size: clamp(2.4rem, 3.9vw, 3.75rem); line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; color: var(--white); }
  .ev-sub { margin: 18px 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.5; color: var(--eu-yellow); max-width: 30ch; }
  .ev-hook { margin: 20px 0 0; font-size: 1.1875rem; line-height: 1.5; color: rgba(255, 255, 255, .74); max-width: 42ch; }
  .ev-when { margin: 16px 0 0; display: flex; flex-direction: column; font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, .74); }
  .ev-when .sep { margin: 0 .5em; }

  .ev-people { margin-top: 26px; max-width: 640px; }
  .ev-label { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-dark); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
  .ev-people ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; }
  .ev-people li { display: flex; flex-direction: column; min-width: 0; }
  .ev-people img { width: 56px; height: 56px; margin: 5px 0 12px 5px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); background: var(--rule-dark);
    box-shadow: 0 0 0 1.5px rgba(184, 200, 255, .55), 0 0 0 5px rgba(47, 92, 255, .12); }
  .ev-people .t { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); line-height: 1.4; }
  .ev-people .mod .t { color: var(--eu-yellow); }
  .ev-people b { margin-top: 4px; font-size: .9375rem; font-weight: 500; line-height: 1.25; }

  .ev-ctas { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
  .ev-cta { display: inline-flex; align-items: center; gap: 18px; color: var(--eu-yellow); text-decoration: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
  .ev-cta svg { width: 150px; height: 18px; flex: none; transition: transform .25s; }
  .ev-cta:hover svg { transform: translateX(8px); }

  /* toupee + tie: the toupee (half the tie's width-to-height scale, as on the banners) sits on the title's cap line */
  .ev-visual { --u: clamp(120px, 11vw, 190px); grid-column: 2; grid-row: 1; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .18); margin-top: clamp(8px, .8vw, 13px); pointer-events: none; }
  .ev-toupee { width: var(--u); height: auto; display: block; }
  .ev-tie { height: calc(var(--u) * 2.42); width: auto; display: block; }

  /* organizers: white ribbon with ISPRI, IDR, CSA */
  .ev-ribbon { position: absolute; left: 0; right: 0; bottom: 0; height: var(--rib); background: var(--white); z-index: 2; }
  .ev-ribbon .wrap { height: 100%; display: flex; align-items: center; gap: clamp(28px, 4.5vw, 72px); }
  .ev-ribbon img { display: block; width: auto; flex: none; }
  .r-ispri { height: 38px; }
  .r-idr { height: 33px; }
  .r-csa { height: 44px; }

  /* ------------------------------------------------------------ analysis slide (components/ArticleBanner.astro) */
  .art-slide { overflow: hidden; }
  .art-slide .ev-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .as-kicker { margin: 0 0 22px; display: flex; align-items: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eu-yellow); }
  .as-kicker .dot { margin: 0 .8em; }
  .as-title { margin: 0; font-weight: var(--head); font-size: clamp(2.2rem, 3.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--white); max-width: 22ch; }
  .art-slide .ev-sub { max-width: 36ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
  .art-slide .ev-ctas { margin-top: 34px; }
  .art-slide .btn i { font-size: 1.15em; vertical-align: -.15em; }
  .as-globe { position: absolute; z-index: 1; right: max(-220px, -12vw); bottom: calc(var(--rib) - 260px); width: min(58vw, 860px); height: auto; pointer-events: none; }

  /* ------------------------------------------------------------ homepage hero slider */
  .hero-slider { position: relative; background: var(--navy); }
  .slides { display: grid; }
  .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
  .slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; z-index: 1; }
  .ev-slide { min-height: min(100svh, 940px); display: flex; }
  .ev-slide .ev-banner { flex: 1; }

  /* controls: bottom right; on the event slide they sit on the white ribbon, so they switch to navy */
  .slider-ui { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 92px; pointer-events: none; }
  .slider-ui .wrap { height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 14px; --ui: var(--white); --ui-line: rgba(255, 255, 255, .28); --ui-fill: var(--eu-yellow); }
  .hero-slider[data-light] .slider-ui .wrap { --ui: var(--navy); --ui-line: rgba(10, 22, 51, .2); --ui-fill: var(--eu-blue-lift); }
  .slider-ui button { pointer-events: auto; background: none; border: 1px solid var(--ui-line); color: var(--ui); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 16px; transition: border-color .2s, color .3s; }
  .slider-ui button:hover { border-color: var(--ui); }
  .slider-ui .dots { display: flex; gap: 8px; pointer-events: auto; }
  .slider-ui .dot-btn { width: 44px; height: 24px; border: 0; border-radius: 0; position: relative; }
  .slider-ui .dot-btn::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--ui-line); }
  .slider-ui .dot-btn i { position: absolute; left: 0; top: 11px; height: 2px; width: 0; background: var(--ui-fill); }
  .slider-ui .dot-btn[aria-current="true"] i { width: 100%; }
  .slider-ui .dot-btn.run i { width: 0; animation: slide-progress var(--dur, 9s) linear forwards; }
  .hero-slider.is-paused .dot-btn.run i { animation-play-state: paused; }
  @keyframes slide-progress { to { width: 100%; } }
  .slider-ui .count { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; letter-spacing: .12em; color: var(--ui); min-width: 4.5em; text-align: center; transition: color .3s; }

  @media (prefers-reduced-motion: reduce) { .slide, .slide.is-active { transition: none; } }
  /* short desktop screens: drop the hook so the slide stays near one screen tall */
  @media (min-width: 761px) and (max-height: 820px) { .ev-slide .ev-hook { display: none; } .ev-slide .ev-wrap { padding-top: 100px; } }

  /* ------------------------------------------------------------ events page */
  .events-list { display: grid; gap: 40px; }
  .ev-card { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 30px 80px rgba(10, 22, 51, .18); }
  .ev-card .ev-wrap { padding-top: 64px; }
  .ev-card .ev-status { position: absolute; z-index: 3; top: 24px; right: 28px; margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eu-yellow); display: flex; align-items: center; gap: 10px; }
  .ev-card .ev-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--eu-yellow); }

  @media (max-width: 1100px) {
    .ev-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); }
    .ev-people ul { gap: 0 10px; }
  }
  @media (max-width: 760px) {
    .ev-banner { --rib: auto; padding-bottom: 0; }
    .ev-wrap { grid-template-columns: 1fr; padding-top: 96px; padding-bottom: 40px; }
    .ev-card .ev-wrap { padding-top: 56px; }
    /* small, top right, beside the title (its longest line stops short of the tie) */
    .ev-visual { --u: 58px; position: absolute; grid-column: auto; grid-row: auto; top: 96px; right: var(--gutter); margin: 0; }
    .ev-card .ev-visual { top: 56px; }
    .ev-title { font-size: 2.05rem; }
    .ev-title, .ev-sub, .ev-hook { padding-right: 62px; } /* clear of the tie */
    .ev-card .ev-title { font-size: 1.75rem; }
    .ev-hook { font-size: 1.125rem; }
    .ev-people ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
    .ev-people img { width: 52px; height: 52px; }
    .ev-people .t { display: none; }
    .ev-people b { font-size: .8125rem; }
    .ev-ribbon { position: static; height: auto; padding: 18px 0 76px; }
    .ev-card .ev-ribbon { padding-bottom: 18px; }
    .ev-ribbon .wrap { flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
    .r-ispri { height: 28px; } .r-idr { height: 24px; } .r-csa { height: 32px; }
    .ev-slide { min-height: 0; }
    /* phones: the globe sits on top, like slide 1's, instead of an empty band above the copy */
    .as-globe { position: relative; order: -1; right: auto; bottom: auto; top: auto; width: min(72vw, 340px); margin: 84px auto -8px; opacity: 1; }
    .art-slide .ev-wrap { padding-top: 8px; }
    .art-slide .ev-wrap { grid-template-columns: 1fr; } /* the desktop 7/5 grid squeezed the copy into half the phone */
    .as-title { font-size: 1.85rem; max-width: none; }
    .as-kicker { margin-bottom: 16px; font-size: .75rem; }
    .art-slide .ev-sub { max-width: none; }
    .art-slide .ev-ctas { margin-top: 26px; }
    .slider-ui { height: 64px; }
    .slider-ui .wrap { justify-content: center; }
  }

  /* ------------------------------------------------------------ fixed slider height (user, 22.10: ±500 px, no vh) */
  @media (min-width: 761px) {
    .hero-slider { --slider-h: 540px; }
    .hero-slider .slides { height: var(--slider-h); }
    .hero-slider .slide { height: var(--slider-h); min-height: 0; overflow: hidden; }
    .hero-slider .hero { min-height: 0; }
    .hero-slider .hero .wrap { padding-top: 96px; padding-bottom: 40px; }
    .hero-slider .hero .hero-lead + .hero-lead { display: none; } /* keep slide 1 inside the frame: wordmark, tagline, lead, buttons */
    /* event + analysis slides: title, subtitle, date, buttons; the hook and speakers stay on the event page and the /evenimente/ card */
    .hero-slider .ev-wrap { padding-top: 104px; padding-bottom: 24px; }
    .hero-slider .ev-hook, .hero-slider .ev-people { display: none; }
    .hero-slider .ev-title { font-size: clamp(2rem, 3.2vw, 3rem); }
    .hero-slider .as-title { font-size: clamp(1.7rem, 2.4vw, 2.25rem); max-width: 30ch; }
    .hero-slider .art-slide .ev-sub { max-width: 52ch; margin-top: 14px; }
    .hero-slider .art-slide .ev-when { margin-top: 10px; }
    .hero-slider .as-kicker { margin-bottom: 16px; }
    .hero-slider .ev-ctas, .hero-slider .art-slide .ev-ctas { margin-top: 24px; }
    .hero-slider .ev-visual { --u: 96px; margin-top: 4px; }
    .hero-slider .as-globe { width: 520px; right: -60px; bottom: auto; top: 70px; }
  }