/* portal-events.css — owned by P5/W-cards (event grids, the event card at
 * its four sizes, the video strip, partner tiles). Method (design-port fix
 * round 3, 2026-09-20, copy-first): each rule is the source product's own
 * utility string for the same element (internal/ui/event_templates/portal.tmpl
 * event_portal_card, portal_node_card_list, home_intro_hero; classes resolved
 * against the compiled prod stylesheet with design-port/tools/twdict.py),
 * renamed to the semantic portal-* class of portal_bricks_event_cards.tmpl.
 * Colour vars map to --portal-* tokens (PLAN.md §3: --border → --portal-border,
 * --bg-level-2 → --portal-surface-alt, --highlight → --portal-accent);
 * `text-text-low`/`text-text-med` are no-ops on prod (inherit). The card is
 * literally `bg-black` with white overlays at every size on prod and has no
 * light-host counterpart to apply RULES.md #6's token clause against, so
 * those literals stay (P5's evidence, hs-p5-eventcard-* reports). The
 * compiled font-black/font-bold utilities are both weight 700; rounded-md /
 * -lg / -xl / -2xl are 13px-2 / 13px / 13px+4 / 13px+8. Every <p> and <h4>
 * here also zeroes its margin: prod's preflight zeroes all of them, while
 * portal.css only resets h1-h3, so an unzeroed card paragraph added 28px
 * (1em top + 1em bottom) to every event card's body (fix round 6, W-cards:
 * the card/body/tail measured 406/224/119 against prod's 378/196/91). */

/* Grids. Upcoming list: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6;
   the archive and a landing filter list (archive-sized cards) use the same
   columns at gap-8; TOP: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8; a
   search result: grid-cols-2 gap-3 md:gap-6, lg 4 (list) / 3 (TOP) columns. */
.portal-event-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
[data-portal-variant="portal_event_grid"] .portal-event-grid:has(> [data-card="archive"]),
[data-portal-variant="portal_top"] .portal-event-grid { gap: 2rem; }
/* A search grid keeps its own two columns and its narrow gap in every
   section, the TOP grid included (prod's search-grid-compact is
   grid-cols-2 gap-3 md:gap-6 whichever list it replaces), so the rule
   carries the class twice: one class alone loses to the variant rules
   above, which would leave a phone-width TOP search grid at gap-8. */
.portal-event-grid.portal-event-grid--search { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (width >= 40rem) {
  [data-portal-variant="portal_event_grid"] .portal-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 48rem) {
  [data-portal-variant="portal_top"] .portal-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-event-grid.portal-event-grid--search { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (width >= 64rem) {
  [data-portal-variant="portal_event_grid"] .portal-event-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-portal-variant="portal_top"] .portal-event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The card: article.bg-black.rounded-[13px].shadow-lg.active:scale-[0.98]
   .border.border-border.overflow-hidden.w-full.flex.flex-col.h-full
   .hover:border-highlight/50.transition-all.cursor-pointer (search_compact:
   rounded-[10px]) > a.flex.min-h-0.flex-1.flex-col. */
.portal-event-card { background-color: #000; border-radius: 13px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); border: 1px solid var(--portal-border); overflow: hidden; width: 100%; display: flex; flex-direction: column; height: 100%; transition: all .15s cubic-bezier(.4, 0, .2, 1); cursor: pointer; }
.portal-event-card:active { scale: .98; }
.portal-event-card:hover { border-color: color-mix(in srgb, var(--portal-accent) 50%, transparent); }
.portal-event-card[data-card="search_compact"] { border-radius: 10px; }
.portal-event-card-link { display: flex; min-height: 0; flex: 1; flex-direction: column; }

/* Media: div.aspect-[16/10].relative.overflow-hidden.bg-bg-level-2 (large:
   .w-full.h-auto; search_compact: aspect-[4/3]) > img.w-full.h-full
   .object-cover.object-top.group-hover:scale-[1.02].transition-transform
   .duration-300. */
.portal-event-card-media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background-color: var(--portal-surface-alt); }
.portal-event-card[data-card="large"] .portal-event-card-media { width: 100%; height: auto; }
.portal-event-card[data-card="search_compact"] .portal-event-card-media { aspect-ratio: 4 / 3; }
.portal-event-card-image { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s cubic-bezier(.4, 0, .2, 1), translate .3s cubic-bezier(.4, 0, .2, 1), scale .3s cubic-bezier(.4, 0, .2, 1), rotate .3s cubic-bezier(.4, 0, .2, 1); }
.portal-event-card:hover .portal-event-card-image { scale: 1.02; }

/* Flag: div.absolute.top-3.right-3.z-20 (search_compact: top-2.right-2) >
   span.inline-flex.min-h-10.min-w-10.rounded-md.px-2.text-xl.items-center
   .justify-center.border.border-white/10.bg-black/80.leading-none.shadow-xl
   .backdrop-blur-md (large: min-h-14.min-w-14.rounded-lg.px-3.text-2xl;
   search_compact: min-h-8.min-w-8.px-1.5.text-base) > svg.inline-block
   .shadow-sm.ring-1.ring-white/20.align-middle[1.5em x 1em]. */
.portal-event-card .portal-card-flag { position: absolute; top: .75rem; right: .75rem; z-index: 20; }
.portal-event-card[data-card="search_compact"] .portal-card-flag { top: .5rem; right: .5rem; }
.portal-event-card-flag-badge { display: inline-flex; min-height: 2.5rem; min-width: 2.5rem; border-radius: 11px; padding-inline: .5rem; font-size: 1.25rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .1); background-color: rgba(0, 0, 0, .8); line-height: 1; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.portal-event-card[data-card="large"] .portal-event-card-flag-badge { min-height: 3.5rem; min-width: 3.5rem; border-radius: 13px; padding-inline: .75rem; font-size: 1.5rem; }
.portal-event-card[data-card="search_compact"] .portal-event-card-flag-badge { min-height: 2rem; min-width: 2rem; padding-inline: .375rem; font-size: 1rem; }
.portal-country-flag { display: inline-block; width: 1.5em; height: 1em; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); }

/* "More" band: div.absolute.bottom-3.left-3.right-3 (search_compact: 2) >
   div.w-full.py-2.bg-black/80.group-hover:bg-highlight.group-hover:text-black
   .backdrop-blur-md.rounded-xl.text-[10px].font-black.flex.items-center
   .justify-center.gap-2.border.border-white/10.uppercase.tracking-tighter
   .transition-all.text-white (large: py-2.5; search_compact: py-1.5
   .rounded-lg.text-[9px]) > svg.w-4.h-4 (search_compact: w-3.h-3). */
.portal-event-card-more-wrap { position: absolute; bottom: .75rem; left: .75rem; right: .75rem; }
.portal-event-card[data-card="search_compact"] .portal-event-card-more-wrap { bottom: .5rem; left: .5rem; right: .5rem; }
.portal-event-card-more { width: 100%; padding-block: .5rem; background-color: rgba(0, 0, 0, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 17px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid rgba(255, 255, 255, .1); text-transform: uppercase; letter-spacing: -.05em; transition: all .15s cubic-bezier(.4, 0, .2, 1); color: #fff; }
.portal-event-card:hover .portal-event-card-more { background-color: var(--portal-accent); color: var(--portal-accent-ink); }
.portal-event-card[data-card="large"] .portal-event-card-more { padding-block: .625rem; }
.portal-event-card[data-card="search_compact"] .portal-event-card-more { padding-block: .375rem; border-radius: 13px; font-size: 9px; }
.portal-event-card-more-icon { width: 1rem; height: 1rem; }
.portal-event-card[data-card="search_compact"] .portal-event-card-more-icon { width: .75rem; height: .75rem; }

/* Archive year badge: div.absolute.top-4.left-4.z-20 (search_compact:
   top-2.left-2) > span.text-[10px].px-3.py-1.5.tracking-[0.2em].font-black
   .uppercase.text-highlight.bg-black/80.backdrop-blur-md.rounded-full.border
   .border-highlight/30 (search_compact: text-[9px].px-2.py-1
   .tracking-[0.14em]). */
.portal-event-card-year-wrap { position: absolute; top: 1rem; left: 1rem; z-index: 20; }
.portal-event-card[data-card="search_compact"] .portal-event-card-year-wrap { top: .5rem; left: .5rem; }
.portal-event-card-year { font-size: 10px; padding: .375rem .75rem; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; color: var(--portal-accent); background-color: rgba(0, 0, 0, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--portal-accent) 30%, transparent); }
.portal-event-card[data-card="search_compact"] .portal-event-card-year { font-size: 9px; padding: .25rem .5rem; letter-spacing: .14em; }
/* The waiting-for-approval chip of an own event (/my/events): the same badge
   in the source product's amber instead of the accent, because the chip says
   the event is not public yet and must not read as the site's own accent
   marker (myevents-inventory.md 2.5 label row: border-amber-300/50
   bg-amber-500/15 text-amber-100). */
.portal-event-card-year--review { color: #fef3c7; background-color: rgba(245, 158, 11, .15); border-color: rgba(252, 211, 77, .5); }

/* Body: div.p-6.flex-1.flex.flex-col (large: p-8; search_compact: p-3) >
   h3.text-lg.mb-3.min-h-[2.8rem].text-white/90.leading-tight.font-black
   .line-clamp-2.group-hover:text-highlight (large: text-xl.mb-3.uppercase
   .min-h-[3.1rem].break-words.text-white; search_compact: text-[13px].mb-2
   .min-h-[2.1rem]) + div.mt-auto.flex.flex-col.gap-3 (search_compact:
   gap-2) > p.text-sm.leading-5.line-clamp-2.uppercase (large: min-h-10) +
   div.flex.flex-col.gap-1.5.min-w-0 (search_compact: gap-1) > rows. */
.portal-event-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.portal-event-card[data-card="large"] .portal-event-card-body { padding: 2rem; }
.portal-event-card[data-card="search_compact"] .portal-event-card-body { padding: .75rem; }
.portal-event-card-title { font-size: 1.125rem; margin-bottom: .75rem; min-height: 2.8rem; color: rgba(255, 255, 255, .9); line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.portal-event-card:hover .portal-event-card-title { color: var(--portal-accent); }
.portal-event-card[data-card="large"] .portal-event-card-title { font-size: 1.25rem; text-transform: uppercase; min-height: 3.1rem; overflow-wrap: break-word; color: #fff; }
.portal-event-card[data-card="search_compact"] .portal-event-card-title { font-size: 13px; margin-bottom: .5rem; min-height: 2.1rem; }
.portal-event-card-tail { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; }
.portal-event-card[data-card="search_compact"] .portal-event-card-tail { gap: .5rem; }
.portal-event-card-text { margin: 0; font-size: .875rem; line-height: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: uppercase; }
.portal-event-card[data-card="large"] .portal-event-card-text { min-height: 2.5rem; }
.portal-event-card-meta { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.portal-event-card[data-card="search_compact"] .portal-event-card-meta { gap: .25rem; }
/* Rows: div.flex.items-center.gap-1.5.min-w-0.text-[11px].text-white/50
   .font-bold (large: text-[14px].text-white/70; search_compact: text-[10px]
   .text-white/55) > svg.w-3.5.h-3.5.text-highlight.flex-none (search_compact:
   w-3.h-3) + text | span.min-w-0.flex-1.truncate. */
.portal-event-card-meta-row { display: flex; align-items: center; gap: .375rem; min-width: 0; font-size: 11px; color: rgba(255, 255, 255, .5); font-weight: 700; }
.portal-event-card[data-card="large"] .portal-event-card-meta-row { font-size: 14px; color: rgba(255, 255, 255, .7); }
.portal-event-card[data-card="search_compact"] .portal-event-card-meta-row { font-size: 10px; color: rgba(255, 255, 255, .55); }
.portal-event-card-meta-icon { width: .875rem; height: .875rem; color: var(--portal-accent); flex: none; }
.portal-event-card[data-card="search_compact"] .portal-event-card-meta-icon { width: .75rem; height: .75rem; }
.portal-event-card-meta-place { min-width: 0; flex: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* Video strip (home_intro_hero). section.relative > button.absolute.left-1
   .top-[calc(50%-16px)].-translate-y-1/2.z-10.w-10.h-10.rounded-full
   .bg-bg-level-2/80.backdrop-blur-sm.border.border-border.hover:bg-bg-level-3
   .hover:border-highlight/40.opacity-0.group-hover/carousel:opacity-100
   .shadow-lg; div.video-strip.flex.gap-5.overflow-x-auto.pb-4.select-none
   [scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
   scroll-behavior:smooth] with index.css's edge fade mask; a.flex-none.flex
   .flex-col.gap-3[width:300px; scroll-snap-align:start] > div.relative
   .w-full.aspect-video.bg-[#050505].rounded-lg.overflow-hidden.border
   .border-white/5.shadow-lg.group-hover:border-highlight/40 (img.w-full
   .h-full.object-cover; div.absolute.inset-0.flex.items-center
   .justify-center.opacity-0.group-hover:opacity-100.bg-black/30 > div.w-14
   .h-14.bg-highlight.rounded-2xl.shadow-2xl > svg.w-6.h-6.ml-1[fill black])
   + p.text-[12px].font-bold.leading-snug.line-clamp-2.px-1.uppercase
   .tracking-wide. */
.portal-video-rail { position: relative; padding-top: 1rem; }
.portal-video-nav { position: absolute; top: calc(50% - 16px); translate: 0 -50%; z-index: 10; width: 2.5rem; height: 2.5rem; border-radius: 999px; background-color: color-mix(in srgb, var(--portal-surface-alt) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--portal-border); color: inherit; transition: all .3s cubic-bezier(.4, 0, .2, 1); display: flex; align-items: center; justify-content: center; opacity: 0; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); cursor: pointer; padding: 0; }
.portal-video-nav--prev { left: .25rem; }
.portal-video-nav--next { right: .25rem; }
.portal-video-rail:hover .portal-video-nav { opacity: 1; }
.portal-video-nav:hover { background-color: var(--portal-surface-alt); border-color: color-mix(in srgb, var(--portal-accent) 40%, transparent); }
.portal-video-strip { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; user-select: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; scroll-behavior: smooth; mask-image: linear-gradient(90deg, transparent 0%, #000 48px, #000 calc(100% - 48px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.portal-video-strip::-webkit-scrollbar { display: none; }
.portal-video-item { flex: none; display: flex; flex-direction: column; gap: .75rem; width: 300px; scroll-snap-align: start; }
.portal-video-item-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #050505; border-radius: 13px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1); }
.portal-video-item:hover .portal-video-item-media { border-color: color-mix(in srgb, var(--portal-accent) 40%, transparent); box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--portal-accent) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--portal-accent) 10%, transparent); }
.portal-video-item-image { width: 100%; height: 100%; object-fit: cover; }
.portal-video-item-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s cubic-bezier(.4, 0, .2, 1); background-color: rgba(0, 0, 0, .3); }
.portal-video-item:hover .portal-video-item-overlay { opacity: 1; }
.portal-video-item-play { width: 3.5rem; height: 3.5rem; background-color: var(--portal-accent); border-radius: 21px; display: flex; align-items: center; justify-content: center; box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--portal-accent) 30%, transparent); }
.portal-video-item-play-icon { width: 1.5rem; height: 1.5rem; margin-left: .25rem; fill: var(--portal-accent-ink); }
.portal-video-item-title { margin: 0; font-size: 12px; font-weight: 700; transition: color .15s cubic-bezier(.4, 0, .2, 1); line-height: 1.375; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-inline: .25rem; text-transform: uppercase; letter-spacing: .025em; }

/* Partner tiles (home_intro_partners). section.uppercase > div.flex
   .items-center.justify-between.mb-8 (h3.text-lg.font-black.tracking-[0.2em]
   .uppercase + div.h-[2px].flex-1.mx-8.bg-gradient-to-r.from-border
   .to-transparent) + div.grid.grid-cols-1.md:grid-cols-2.gap-6 > a.block
   .w-full.aspect-[5/2].md:aspect-[4/1].bg-black.rounded-[13px]
   .overflow-hidden.transition-all.relative.border.border-white/10
   .hover:border-white/25 > div.flex.items-center.w-full.h-full.relative >
   div.flex-shrink-0.w-[116px].md:w-[136px].lg:w-[160px].h-full.flex
   .items-center.justify-center.px-4.md:px-6 (img.max-w-full.max-h-[62%]
   .h-auto.object-contain.group-hover:scale-105) + div.w-px.h-2/3.bg-white/15
   + div.flex-1.flex.flex-col.justify-center.px-4.md:px-8.overflow-hidden
   .h-full.py-2 > h4.text-[10px].md:text-xs.font-black.tracking-widest.mb-1
   .text-highlight.uppercase.leading-tight.line-clamp-2.break-words +
   p.text-[11px].md:text-sm.text-white/80.font-medium.line-clamp-4
   .md:line-clamp-3.leading-snug. Black tile with white overlays: prod
   literals, as for the event card. */
[data-portal-variant="portal_partners"] { text-transform: uppercase; }
.portal-partners-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.portal-partners-heading h3 { font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.portal-partners-heading-line { height: 2px; flex: 1; margin-inline: 2rem; background-image: linear-gradient(to right, var(--portal-border), transparent); }
.portal-partners-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
.portal-partner-tile { display: block; width: 100%; aspect-ratio: 5 / 2; background-color: #000; border-radius: 13px; overflow: hidden; transition: all .15s cubic-bezier(.4, 0, .2, 1); position: relative; border: 1px solid rgba(255, 255, 255, .1); }
.portal-partner-tile:hover { border-color: rgba(255, 255, 255, .25); }
.portal-partner-tile-inner { display: flex; align-items: center; width: 100%; height: 100%; position: relative; }
.portal-partner-tile-logo { flex-shrink: 0; width: 116px; height: 100%; display: flex; align-items: center; justify-content: center; padding-inline: 1rem; }
.portal-partner-tile-image { max-width: 100%; max-height: 62%; height: auto; object-fit: contain; transition: scale .5s cubic-bezier(.4, 0, .2, 1); }
.portal-partner-tile-disc { height: 5rem; width: 5rem; overflow: hidden; border-radius: 9999px; background-color: #fff; }
.portal-partner-tile-disc .portal-partner-tile-image { height: 100%; width: 100%; max-height: none; }
.portal-partner-tile:hover .portal-partner-tile-image { scale: 1.05; }
.portal-partner-tile-divider { width: 1px; height: 66.6667%; background-color: rgba(255, 255, 255, .15); flex-shrink: 0; }
.portal-partner-tile-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: .5rem 1rem; overflow: hidden; height: 100%; }
.portal-partner-tile-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; margin: 0 0 .25rem; color: var(--portal-accent); text-transform: uppercase; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.portal-partner-tile-body { margin: 0; font-size: 11px; color: rgba(255, 255, 255, .8); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.375; }
@media (width >= 48rem) {
  .portal-partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-partner-tile { aspect-ratio: 4 / 1; }
  .portal-partner-tile-logo { width: 136px; padding-inline: 1.5rem; }
  .portal-partner-tile-disc { height: 6rem; width: 6rem; }
  .portal-partner-tile-text { padding-inline: 2rem; }
  .portal-partner-tile-title { font-size: .75rem; }
  .portal-partner-tile-body { font-size: .875rem; -webkit-line-clamp: 3; }
}
@media (width >= 64rem) {
  .portal-partner-tile-logo { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-event-card, .portal-event-card-image, .portal-video-item-media, .portal-video-item-overlay, .portal-partner-tile-image { transition: none; }
}