/* 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: var(--portal-event-card-bg, #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; }
/* A card without a picture keeps a slim transparent row for its year and flag
   (never an empty grey band); with neither it has no media row at all. */
.portal-event-card-media:not(:has(img)) { aspect-ratio: auto; min-height: 0; display: flex; align-items: center; gap: .5rem; padding: .75rem .75rem 0; background-color: transparent; }
.portal-event-card-media:not(:has(img)) :is(.portal-card-flag, .portal-event-card-year-wrap) { position: static; }
.portal-event-card-media:not(:has(img)) .portal-card-flag { margin-left: auto; }
.portal-event-card-media:not(:has(img)) .portal-event-card-more-wrap { display: none; }
.portal-event-card-media:not(:has(img, .portal-card-flag, .portal-event-card-year-wrap)) { display: none; }
.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: var(--portal-event-card-badge, 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: var(--portal-event-card-badge, 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: color-mix(in srgb, var(--portal-event-card-text, #fff) 90%, transparent); line-height: 1.25; overflow-wrap: anywhere; 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: var(--portal-event-card-text, #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: color-mix(in srgb, var(--portal-event-card-text, #fff) 50%, transparent); font-weight: 700; }
.portal-event-card[data-card="large"] .portal-event-card-meta-row { font-size: 14px; color: color-mix(in srgb, var(--portal-event-card-text, #fff) 70%, transparent); }
.portal-event-card[data-card="search_compact"] .portal-event-card-meta-row { font-size: 10px; color: color-mix(in srgb, var(--portal-event-card-text, #fff) 55%, transparent); }
/* The date row takes the event_card_date token (a light store's brand red);
   unset, it keeps its size's meta-row colour. */
.portal-event-card .portal-event-card-meta-row--date { color: var(--portal-event-card-date, color-mix(in srgb, var(--portal-event-card-text, #fff) 50%, transparent)); }
.portal-event-card[data-card="large"] .portal-event-card-meta-row--date { color: var(--portal-event-card-date, color-mix(in srgb, var(--portal-event-card-text, #fff) 70%, transparent)); }
.portal-event-card[data-card="search_compact"] .portal-event-card-meta-row--date { color: var(--portal-event-card-date, color-mix(in srgb, var(--portal-event-card-text, #fff) 55%, transparent)); }
.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; }

/* Image credit (Item.ImageCredit): a small "©" on the picture, its text in a
   tooltip on hover/focus; the detail page carries the full linked credit. */
.portal-event-card-credit { position: absolute; left: .5rem; bottom: .5rem; z-index: 20; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; line-height: 1; color: #fff; background-color: rgba(0, 0, 0, .55); cursor: help; }
.portal-event-card-credit-tip { position: absolute; left: 0; bottom: calc(100% + .375rem); width: max-content; max-width: 16rem; padding: .375rem .5rem; border-radius: 8px; font-size: .6875rem; font-weight: 500; line-height: 1.35; color: #fff; background-color: rgba(0, 0, 0, .85); opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.portal-event-card-credit:hover .portal-event-card-credit-tip, .portal-event-card-credit:focus .portal-event-card-credit-tip { opacity: 1; visibility: visible; }

/* Batched reveal (Site.List.Reveal, portal_event_card_list's script): the
   cards past the shown batch stay out of layout until revealed. */
.portal-event-grid[data-portal-reveal="on"] > .portal-event-card:not([data-revealed]) { display: none; }
.portal-event-reveal { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-top: 2rem; }
.portal-event-reveal[hidden] { display: none; }
.portal-event-reveal-button { padding: .75rem 1.5rem; border: 1px solid var(--portal-accent); border-radius: var(--portal-radius, 13px); background-color: var(--portal-accent); color: var(--portal-accent-ink); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.portal-event-reveal-button:hover, .portal-event-reveal-button:focus-visible { filter: brightness(.92); outline: none; }
.portal-event-reveal-count { margin: 0; font-size: .75rem; font-weight: 600; color: var(--portal-muted); }

/* 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; }
}
/* The empty state of an upcoming-event list (cmsruntime.PortalSource.Empty):
   one full-width note in the grid, styled like the account area's empty
   list. */
.portal-event-grid > .portal-empty-state { grid-column: 1 / -1; padding: 1.5rem 0; }
.portal-empty-state-title { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; color: var(--portal-muted); }
.portal-empty-state-summary { margin: 0; font-weight: 500; color: var(--portal-subtle); }
/* Ride timetables (Item.Timetables) under the event body: a light card per
 * train, station | arr | dep with brand-accent times; fixed layout keeps the
 * <details> continuation table aligned with the first twelve rows. */
.portal-timetable { padding: 1rem 1.25rem; border-radius: var(--portal-radius); background: var(--portal-surface-alt); border: 1px solid var(--portal-border); }
/* Headed body chapters (compose_detail_chapters.go): one block per chapter
 * at the body's own gap, the heading on the timetable title scale. */
.portal-body-chapter + .portal-body-chapter, .portal-body-chapter + p { margin-top: 1.5rem; }
.portal-body-chapter > p + p { margin-top: .75rem; }
.portal-body-chapter-title { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.333; overflow-wrap: anywhere; }
.portal-timetables-title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.portal-timetable-title { margin: 0; font-size: 1rem; font-weight: 700; }
.portal-timetable-subtitle { margin: .25rem 0 0; font-size: .85rem; color: var(--portal-muted, inherit); }
.portal-timetable-table { width: 100%; margin-top: .75rem; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
.portal-timetable-table th, .portal-timetable-table td { padding: .3rem .25rem; text-align: left; border-top: 1px solid var(--portal-border); overflow-wrap: anywhere; }
.portal-timetable-table thead th { border-top: 0; font-size: .75rem; font-weight: 600; color: var(--portal-muted, inherit); }
.portal-timetable-table :is(th, td):not(:first-child) { width: 4.5rem; text-align: right; }
.portal-timetable-table tbody th { font-weight: 500; }
.portal-timetable-table td { color: var(--portal-accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-timetable-table a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.portal-timetable-more { margin-top: .25rem; }
.portal-timetable-more summary { cursor: pointer; padding: .4rem 0; font-size: .85rem; font-weight: 600; color: var(--portal-accent); }
.portal-timetable-more .portal-timetable-table { margin-top: 0; }

/* Rail facts box additions (compose_rail_facts.go): the cancelled/removed
 * organizer page alert (alert colour plus icon), linked organizer value,
 * source page list with the aggregator mark, and side-box stop times in the
 * brand accent like the timetables. */
.portal-rail-alert { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem .75rem; border-radius: calc(var(--portal-radius) / 2); font-weight: 700; color: var(--portal-alert, #b91c1c); background: color-mix(in srgb, var(--portal-alert, #b91c1c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--portal-alert, #b91c1c) 35%, transparent); }
.portal-rail-alert--removed { font-weight: 600; }
.portal-rail-alert-icon { flex: none; }
.portal-rail-list dd a, .portal-rail-sources a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.portal-rail-sources { margin: 0; padding-left: 1.25rem; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.portal-rail-sources:empty { display: none; }
.portal-rail-source-mark { font-size: .8rem; color: var(--portal-muted, inherit); }
.portal-rail-stop-time { color: var(--portal-accent); font-weight: 700; }