/* portal-cards.css — owned by P2/W-cards: the cross-cutting card-family
 * primitives (section headers, the generic .portal-cards grid anatomy, the
 * pager). Since design-port fix round 3 (2026-09-20) every portal card kind
 * (news lead/compact/rail, promo, rail logo, event card, video item, partner
 * tile) carries its own copied markup and its own rules in portal-news.css /
 * portal-events.css; the generic anatomy below therefore applies only inside
 * a .portal-cards grid (the variant-less content_list and pkg/eventapp/account
 * card.go, which builds that grid itself), never to a variant card, so no
 * variant has to undo a shared rule. */

/* Section headers. The section-size heading is prod's home_main_toolbar
   heading row (prod-html/desk_hasicskysport_sk_.html and
   calendar/desk_hasicskysport_sk_view_calendar.html):
   div.flex.items-center.justify-between.gap-4 > h3.shrink-0.whitespace-nowrap
   .text-lg.font-black.tracking-[0.2em].text-text-low.uppercase +
   div.h-[2px].flex-1.bg-gradient-to-r.from-border.to-transparent. The hairline
   is a real sibling element on prod, not a ::after on the heading. On prod
   `font-black` resolves to 700 (--font-weight-black:700) and `text-text-low`
   has no rule at all (a no-op, RULES.md #4), so the heading inherits the page
   text colour - which is why it carries no colour of its own here. */
.portal-section-header { display: flex; flex-direction: column; gap: .5rem; }
.portal-section-header h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.portal-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-section-header h2 {
  flex-shrink: 0; white-space: nowrap; font-size: 1.125rem; line-height: calc(1.75 / 1.125);
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.portal-section-header-rule { height: 2px; flex: 1; background-image: linear-gradient(to right, var(--portal-border), transparent); }
/* The TOP block's heading row is the source product's tighter shape
   (portal.tmpl "home_top_events_header": no gap-4 on the row, "mx-8" on the
   hairline), where the toolbar heading keeps gap-4 and a full-width rule.
   Prod's row also carries mb-10 (2.5rem); here the stack gap between the
   header brick and the grid below it already is that space (portal.css
   "stack" gap clamp(1.5rem, 3vw, 2.5rem)), so a margin-bottom would double
   it. */
[data-portal-variant="portal_section_header_inset"] .portal-section-header-row { gap: 0; }
[data-portal-variant="portal_section_header_inset"] .portal-section-header-rule { margin-inline: 2rem; }
/* The variant-less generic list keeps its own heading row (title + "more"
   link), so its hairline stays a ::after between the two. */
.portal-list-title {
  display: flex; align-items: center; gap: 1.25rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125);
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--portal-muted);
}
.portal-list-title::after { content: ""; flex: 1; height: 2px; background-image: linear-gradient(to right, var(--portal-border), transparent); }
.portal-section-header p { margin: 0; color: var(--portal-muted); max-width: 60ch; }
.portal-list-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.portal-list-header .portal-list-title { flex: 1; }
.portal-list-more { font-weight: 700; color: var(--portal-accent); }

/* Filter links (portal_filters section header; the source product's
   seo_landing_links nav, event_templates/portal.tmpl): div.flex.flex-wrap
   .gap-3.rounded-2xl.border.border-white/10.bg-bg-level-1/70.p-3 holding
   a.rounded-xl.border.border-white/10.bg-black/25.px-4.py-3.text-xs
   .font-black.uppercase.tracking-[0.16em] links (text-text-med is a no-op on
   prod: the link inherits the page text colour; rounded-2xl/-xl compile to
   the literal 21px/17px). The hairlines and the
   black/25 fill are prod literals on the one host that renders this brick
   (no light counterpart exists to apply RULES.md #6's token clause to). */
[data-portal-variant="portal_filters"] .portal-section-header-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding: .75rem; border-radius: 21px; border: 1px solid rgba(255, 255, 255, .1); background: color-mix(in srgb, var(--portal-surface) 70%, transparent); }
[data-portal-variant="portal_filters"] .portal-section-header-action { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: 17px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .25); font-size: .75rem; line-height: calc(1 / .75); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: inherit; transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; }
[data-portal-variant="portal_filters"] .portal-section-header-action:hover { border-color: var(--portal-accent); color: var(--portal-accent); }
[data-portal-variant="portal_filters"] .portal-section-header-action:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--portal-accent); }
/* A country filter leads with its flag (1rem tall, the card badge's glyph);
   below the sm breakpoint the tray shows the flag alone and the label stays
   the link's accessible name. */
[data-portal-variant="portal_filters"] .portal-section-header-action-flag { display: inline-flex; font-size: 1rem; line-height: 1; }
@media (width < 40rem) {
  [data-portal-variant="portal_filters"] .portal-section-header-action-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* Generic card anatomy (.portal-cards grids only, see the header note) */
.portal-cards { display: grid; gap: var(--portal-gap); }
.portal-cards .portal-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--portal-card-bg); border: 1px solid var(--portal-border); border-radius: var(--portal-radius); overflow: hidden; }
.portal-cards .portal-card-media { display: block; aspect-ratio: 16 / 10; background: var(--portal-surface-alt); overflow: hidden; }
.portal-cards .portal-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.portal-cards .portal-card:hover .portal-card-media img { transform: scale(1.03); }
.portal-cards .portal-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.portal-cards .portal-card-eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--portal-accent); }
.portal-cards .portal-card-meta { margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; column-gap: .75rem; row-gap: .25rem; font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--portal-muted); }
.portal-cards .portal-card-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-cards .portal-card-title { font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.portal-cards .portal-card-summary { margin: 0; font-size: .86rem; color: var(--portal-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.portal-cards .portal-card-action { margin-top: auto; align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--portal-accent); }
.portal-cards .portal-card-action::after { content: " →"; }

/* Pager (cross-cutting, every list page). Ported from the source product's
   #news-home-pagination anchor (`inline-flex border border-white/15 px-5
   py-3 text-sm font-semibold uppercase tracking-[0.16em]
   hover:border-highlight hover:text-highlight transition-colors`) inside its
   `div.pt-3` wrapper. The hairline is the literal white/15, not a token: the
   light theme's override (`.news-theme-light #news-home-pagination
   {border-color:var(--border)}`) names the WRAPPER div, whose border carries
   no width - the anchor inside it keeps `border-white/15` on both hosts, and
   that is what the light host measures (style-diff zo-p2-pagination, prod
   rgba(255,255,255,.15) against this file's token, 2026-09-20).
   `transition-colors` is ONE duration for the whole property list, not one
   per property, so the transition is written long-hand to serialize as
   prod's does. */
.portal-pager { display: block; padding-top: .75rem; }
.portal-pager a, .portal-pager span { display: inline-flex; padding: .75rem 1.25rem; border-radius: 0; border: 1px solid rgba(255, 255, 255, .15); font-size: .875rem; font-weight: 700; line-height: 1.25rem; letter-spacing: .16em; text-transform: uppercase; transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; }
.portal-pager a:hover, .portal-pager a:focus-visible { border-color: var(--portal-accent); color: var(--portal-accent); }

@media (prefers-reduced-motion: reduce) {
  .portal-cards .portal-card-media img { transition: none; }
}