/* assets/css/components/page-events.css
 * @layer components — Events archive + single page
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     EVENT CARD — archive grid card
     ─────────────────────────────────────────────────────────────────────
     Anatomy: white card · top media with floating date badge · body with
     type tag, title, location, excerpt, status-driven CTA.

     Subgrid: parent grid defines six rows (media · tag · title · location ·
     excerpt-spacer · cta). Each .card-event subscribes via subgrid so all
     cards in a row share the same y-baselines regardless of content length.

     Spacing rhythm is INTENTIONALLY non-uniform — every transition between
     zones uses a different scale step so the eye groups by proximity, not
     by metronome:
       type-tag → title       : --space-3xs   (label bond)
       title    → location    : --space-2xs   (single unit)
       location → excerpt     : --space-s     (new content zone)
       excerpt  → cta         : auto via 1fr  (footer pushed to baseline)
     ════════════════════════════════════════════════════════════════════ */

  /* Parent grid wires the named rows. Cards inherit them via subgrid. */
  .event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--grid-gap);
  }

  /* ════════════════════════════════════════════════════════════════════
     EVENT CARD — container-query-driven horizontal/vertical layout
     ─────────────────────────────────────────────────────────────────────
     Container registers inline-size so the card self-adapts based on
     its slot width — works in 3-col grid, 2-col grid, sidebar, and
     full-width list without any viewport breakpoints on the card itself.

     < 420px  (default / mobile-first):
       Vertical stack — teal date bar top, blush strip, content below.

     ≥ 420px  (horizontal):
       Date column fixed-width left | content fills remaining right.

     Secondary colour 10% rule:
       • Desktop: 6px blush accent strip pinned to bottom of date column
       • Mobile:  5px blush separator strip between date bar and content
     ════════════════════════════════════════════════════════════════════ */

  /* Self-contained shell (team-member pattern) so children sit flush
     against each other. No inherited --card-gap — the card's layers
     (date bar, blush strip, image, body, footer) are structural, not
     rhythmic, and must touch at their edges. Specificity .card.card-event
     beats the .card base's gap declaration cleanly.

     Pure white --card-bg matches the rest of the unified card family
     (see card-family.css shell) for a clean consistent look against
     the tinted Insights Hub section background. */
  .card.card-event {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    --card-bg: var(--white);
    background: var(--card-bg);
  }

  /* ── Date zone ────────────────────────────────────────────────────── */

  /* Mobile default: full-width teal bar.
     Fixed 64px height so it matches the identity bars on the unified
     card family (resource/blog/case-study/job) for consistent rhythm
     when these cards sit next to each other in the homepage Insights
     Hub Row 2. The archive layout overrides this in the desktop media
     query below where the date becomes a left column. */
  .card-event__id-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-xs) var(--space-m);
    background: var(--primary-dark);
    block-size: var(--space-3xl);        /* 64px — matches card-family */
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    overflow: hidden;
  }

  /* Mobile: day + weekday/month stack on the left */
  .card-event__date-inner {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .card-event__date-day {
    font-family: var(--font-heading);
    /* Mobile default: fits within the 64px fixed bar height. Desktop
       archive layout bumps this up to --heading-m in the @media block
       below where the date becomes a tall vertical column. */
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--white);
  }

  /* Weekday + month stacked vertically next to the day number */
  .card-event__date-inner {
    flex-direction: row;
    align-items: center;
  }

  .card-event__date-weekday,
  .card-event__date-month {
    display: block;
  }

  .card-event__date-weekday {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: color-mix(in oklch, var(--white) 60%, transparent);
    letter-spacing: var(--tracking-caps);
    line-height: var(--leading-tight);
  }

  .card-event__date-month {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: color-mix(in oklch, var(--white) 75%, transparent);
    letter-spacing: var(--tracking-caps);
    line-height: var(--leading-tight);
  }

  /* Weekday + month stacked vertically beside the big day number */
  .card-event__date-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Mobile right slot: badge + logo side by side */
  .card-event__date-meta {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-shrink: 0;
  }

  /* Badge — teal pill, same on both breakpoints */
  .card-event__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-s);
    background: color-mix(in oklch, var(--primary-ultra-light) 100%, transparent);
    color: var(--primary-dark);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  /* On dark date bar (mobile) invert badge to frosted white */
  .card-event__id-bar .card-event__badge {
    background: color-mix(in oklch, var(--white) 18%, transparent);
    color: var(--white);
  }

  /* Logo slot — landscape proportion for wordmarks / SVGs */
  .card-event__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .card-event__logo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* Mobile bar logo: frosted treatment on dark bg */
  .card-event__logo--bar {
    inline-size: 4rem;
    block-size: 1.625rem;
    border-radius: var(--radius-s);
    background: color-mix(in oklch, var(--white) 15%, transparent);
    border: 1px solid color-mix(in oklch, var(--white) 25%, transparent);
    padding: var(--space-3xs) var(--space-2xs);
  }

  /* Desktop content logo: neutral bg */
  .card-event__logo--top {
    inline-size: 4.5rem;
    block-size: 1.75rem;
    border-radius: var(--radius-s);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    padding: var(--space-3xs) var(--space-2xs);
  }

  .card-event__logo--empty {
    color: var(--text-subtle);
  }

  .card-event__logo--empty svg {
    flex-shrink: 0;
  }

  /* Secondary blush accent strip — mobile: full-width separator.
     Uses --secondary-semi-dark (unchanged across the v2 token refresh) so
     the warm peach accent reads visibly on white cards. The lighter
     --secondary became near-white in v2 and the strip disappeared. */
  .card-event__accent-strip {
    block-size: 5px;
    background: var(--secondary-semi-dark);
    /* Hide in date column on mobile — positioned as separator outside */
    display: none;
  }

  /* Live badge */
  .card-event__live-badge {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 3px var(--space-xs);
    background: color-mix(in oklch, var(--white) 18%, transparent);
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    border-radius: var(--radius-full);
  }

  .card-event__live-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-full);
    background: var(--feedback-error);
    animation: ev-live-pulse 1.6s var(--ease-default) infinite;
  }

  @keyframes ev-live-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.3); opacity: 0.7; }
  }

  /* ── Secondary strip — mobile (between date bar and content) ──
     Pseudo-element pinned ABSOLUTELY to the top edge of the card body
     so it sits flush against the teal date bar above WITHOUT being
     caught in the body's flex gap rhythm. The body needs position:
     relative for this to work, which is declared below. */
  .card-event__id-bar + .card__body {
    position: relative;
  }

  .card-event__id-bar + .card__body::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;                    /* edge-to-edge, ignores body padding */
    block-size: 5px;
    background: var(--secondary-semi-dark);
    z-index: 1;
  }

  /* Reserve space at the top of the body so the absolutely-positioned
     pink strip doesn't cover content. This replaces the natural flow
     space the pseudo-element used to occupy. */
  .card-event__id-bar + .card__body {
    padding-block-start: calc(var(--card-padding) + 5px);
  }

  /* ── Content body ─────────────────────────────────────────────── */

  .card-event__body {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    flex: 1;
  }

  /* Desktop top row: badge left, logo right — hidden on mobile */
  .card-event__top {
    display: none; /* shown at ≥ 420px via container query */
  }

  .card-event__title {
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    margin: 0;
    color: var(--text-main);
  }

  .card-event__location {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
  }

  .card-event__location svg {
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .card-event__excerpt {
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0;
    flex: 1;
  }

  /* ── Footer ───────────────────────────────────────────────────── */

  .card-event__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--border-subtle);
    margin-block-start: auto;
  }

  /* ── Representatives ──────────────────────────────────────────── */

  .card-event__reps {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .card-event__rep {
    position: relative;
    isolation: isolate;
  }

  .card-event__rep + .card-event__rep { translate: calc(var(--space-xs) * -1) 0; }
  .card-event__rep + .card-event__rep + .card-event__rep { translate: calc(var(--space-m) * -1) 0; }

  .card-event__rep:nth-child(1) { z-index: 6; }
  .card-event__rep:nth-child(2) { z-index: 5; }
  .card-event__rep:nth-child(3) { z-index: 4; }

  .card-event__rep:hover,
  .card-event__rep:focus-within { z-index: 10; }

  .card-event__avatar {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--primary-ultra-light);
    border: 2px solid var(--white);
    color: var(--primary-dark);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition:
      transform var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  .card-event__avatar:hover,
  .card-event__avatar:focus-visible {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--primary-dark) 20%, transparent);
  }

  .card-event__avatar:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .card-event__avatar-img {
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  .card-event__avatar-initials {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    color: var(--primary-dark);
    line-height: 1;
    letter-spacing: var(--tracking-snug);
  }

  .card-event__avatar--overflow {
    background: var(--primary);
    color: var(--white);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    cursor: default;
  }

  /* Avatar popover tooltip — DISABLED.
     The popover used `position: absolute` with negative block-end to
     float above the avatar, but the parent `.card` has `overflow: hidden`
     (from card.css base) which clips the tooltip. Fixing that properly
     would require either removing overflow:hidden from every card
     (regression risk elsewhere) or a JS-positioned fixed tooltip
     (scope creep). Rep info stays accessible via the button's
     aria-label — hover feedback is the only thing lost. */
  .card-event__avatar-popover {
    /* Visually hidden but keep in DOM for screen-reader accessibility
       via aria-describedby on the button. */
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .card-event__avatar-popover-name {
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .card-event__avatar-popover-role {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
    margin: 0;
    line-height: var(--leading-tight);
  }

  .card-event__avatar-popover-bio {
    font-size: var(--text-xs);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    margin: 0;
    padding-block-start: var(--space-2xs);
  }

  /* ── CTA button ───────────────────────────────────────────────── */

  /* btn--primary handles most styles — only whitespace override needed */
  .card-event__cta {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Status modifiers ─────────────────────────────────────────── */

  .card-event--completed .card-event__badge {
    background: var(--surface-raised);
    color: var(--text-muted);
  }

  .card-event--completed .card-event__id-bar {
    filter: saturate(0.5);
  }

  .card-event--cancelled {
    filter: saturate(0.4);
    opacity: var(--opacity-strong);
    pointer-events: none;
  }

  /* ── Featured variant: image slot (hidden mobile, block in CQ) ── */

  /* Image slot — hidden on mobile, shown in horizontal layout via CQ */
  .card-event__image {
    display: none;
  }

  /* Image placeholder (no image_id) */
  .card-event__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    background: var(--surface-tinted);
    color: var(--text-subtle);
  }

  .card-event__image img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ── Desktop viewport ≥ 60em → horizontal layout on archives only ──
     The event archive page (and related-event listings) render cards
     at ~420px+ wide per grid cell on desktop. This block flips the
     card to horizontal with a left date column, matching the archive
     design. The Insights Hub homepage uses a separate --featured
     horizontal variant (see card-family.css) so this block doesn't
     overlap with that context.

     Scoped to archive/listing contexts via the parent selector so the
     Insights Hub cards stay in their default vertical shape (which is
     the correct pattern for the uniform-grid homepage design). */
  @media (min-width: 60em) {
    .event-grid .card-event,
    .event-archive .card-event {
      flex-direction: row;
    }

    .event-grid .card-event .card-event__id-bar,
    .event-archive .card-event .card-event__id-bar {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      inline-size: 5.5rem;
      align-self: stretch;
      flex-shrink: 0;
      border-radius: var(--card-radius) 0 0 var(--card-radius);
      padding: var(--space-l) var(--space-s) var(--space-2xs);
      gap: var(--space-2xs);
    }

    .event-grid .card-event .card-event__date-inner,
    .event-archive .card-event .card-event__date-inner {
      flex-direction: column;
      align-items: center;
      gap: var(--space-3xs);
    }

    .event-grid .card-event .card-event__date-stack,
    .event-archive .card-event .card-event__date-stack {
      align-items: center;
    }

    .event-grid .card-event .card-event__date-day,
    .event-archive .card-event .card-event__date-day {
      font-size: var(--heading-m);
    }

    .event-grid .card-event .card-event__date-weekday,
    .event-grid .card-event .card-event__date-month,
    .event-archive .card-event .card-event__date-weekday,
    .event-archive .card-event .card-event__date-month {
      text-align: center;
    }

    /* Blush strip pinned to bottom of the vertical date column */
    .event-grid .card-event .card-event__accent-strip,
    .event-archive .card-event .card-event__accent-strip {
      display: block;
      inline-size: 100%;
      block-size: 6px;
      background: var(--secondary-semi-dark);
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
    }

    /* Hide mobile-only date-meta (badge+logo in date bar) */
    .event-grid .card-event .card-event__date-meta,
    .event-archive .card-event .card-event__date-meta {
      display: none;
    }

    /* Remove mobile separator pseudo-element */
    .event-grid .card-event .card-event__id-bar + .card__body::before,
    .event-archive .card-event .card-event__id-bar + .card__body::before {
      display: none;
    }

    /* Content body fills remaining width */
    .event-grid .card-event .card-event__body,
    .event-archive .card-event .card-event__body {
      border-radius: 0 var(--card-radius) var(--card-radius) 0;
      overflow: hidden;
    }

    /* Desktop top row: badge left, logo right */
    .event-grid .card-event .card-event__top,
    .event-archive .card-event .card-event__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-m);
    }

    .event-grid .card-event .card-event__top .card-event__badge,
    .event-archive .card-event .card-event__top .card-event__badge {
      background: var(--primary-ultra-light);
      color: var(--primary-dark);
    }

    .event-grid .card-event .card-event__title,
    .event-archive .card-event .card-event__title {
      font-size: var(--text-l);
    }
  }

  /* ── Reduced motion ───────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .card-event__live-dot { animation: none; }
    .card-event__avatar,
    .card-event__avatar:hover,
    .card-event__avatar:focus-visible { transform: none; }
    .card-event__avatar-popover,
    .card-event__rep:hover .card-event__avatar-popover,
    .card-event__rep:focus-within .card-event__avatar-popover {
      translate: -50% 0;
      transition: opacity var(--duration-fast) var(--ease-default), visibility 0s;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     EVENT SINGLE — detail card
     ════════════════════════════════════════════════════════════════════ */

  .card-event-detail {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
  }

  /* ── Card header: date badge + event name/date range ── */
  .card-event-detail__header {
    display: flex;
    align-items: flex-start;
    gap: var(--card-gap);
    padding: var(--card-padding-compact);
    border-block-end: 1px solid var(--border-subtle);
  }

  /* Numeric date badge — prominent day number */
  .card-event-detail__badge {
    display: grid;
    justify-items: center;
    row-gap: var(--space-3xs);
    flex-shrink: 0;
    min-inline-size: 3.25rem;
    padding-block: var(--space-xs) var(--space-2xs);
    padding-inline: var(--space-s);
    background: var(--surface-tinted);
    border-radius: var(--radius-m);
    line-height: var(--leading-none);
  }

  .card-event-detail__badge-day {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: 1;
  }

  .card-event-detail__badge-month {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-snug);
    white-space: nowrap;
  }

  .card-event-detail__header-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0; /* allow text to wrap */
  }

  .card-event-detail__event-name {
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
    line-height: var(--leading-snug);
  }

  .card-event-detail__date-range {
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--leading-snug);
  }

  /* ── Detail rows: icon + label/value ── */
  .card-event-detail__row {
    display: flex;
    align-items: flex-start;
    gap: var(--card-gap);
    padding-inline: var(--card-padding-compact);
    padding-block-end: var(--stack-gap);
    border-block-end: 1px solid var(--border-subtle);
  }

  .card-event-detail__row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
  }

  /* First row after the header needs top padding to breathe */
  .card-event-detail__header + .card-event-detail__row {
    padding-block-start: var(--card-padding-compact);
  }

  .card-event-detail__row .icon-meta {
    flex-shrink: 0;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 0.15em;
    color: var(--text-accent);
  }

  .card-event-detail__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    margin-block-end: var(--space-3xs);
  }

  .card-event-detail__value {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    margin: 0;
    line-height: var(--leading-snug);
  }

  /* ── Contact persons repeater ── */
  .card-event-detail__row--contacts {
    align-items: flex-start;
  }

  .card-event-detail__contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .card-event-detail__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .card-event-detail__contact-phone {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .card-event-detail__contact-phone:hover,
  .card-event-detail__contact-phone:focus-visible {
    color: var(--primary);
  }

  .card-event-detail__contact-name {
    font-size: var(--text-s);
    color: var(--text-muted);
  }

  /* ── Register CTA — sits below all rows, full-width ── */
  .card-event-detail__register {
    margin: 0 var(--card-padding-compact) var(--card-padding-compact);
  }

  /* ── Status lines ── */
  .card-event-detail__status {
    font-size: var(--text-s);
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    padding: var(--card-padding-compact);
    border-block-start: 1px solid var(--border-subtle);
  }

  .card-event-detail__status--cancelled {
    color: var(--feedback-error);
  }


  /* ════════════════════════════════════════════════════════════════════
     RESPONSIVE
     ════════════════════════════════════════════════════════════════════ */

  @media (max-width: 48em) {
    .event-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 30em) {
    .event-grid {
      grid-template-columns: 1fr;
    }
  }

}