/* portal-news.css — owned by P2/W-cards (news home: lead card, compact list,
 * side rail, rail logo, inline promo, site hero).
 *
 * Method (design-port fix round 3, 2026-09-20, copy-first): every rule is
 * the source product's own declaration set for the same element — its
 * Tailwind utility strings resolved against the compiled prod stylesheet
 * (design-port/tools/twdict.py), its hand-written classes copied from
 * frontend/src/index.css — renamed to the semantic portal-* class of
 * portal_bricks_cards.tmpl. Only colours are re-pointed at --portal-*
 * tokens (design-port/PLAN.md §3): a white/10 hairline becomes
 * --portal-border exactly where the source product's light theme repaints
 * it with var(--border) (index.css `.news-theme-light` list: the lead and
 * compact card links, the rail item, the pager), and stays literal
 * everywhere else, because the light host paints the literal there too.
 * `text-text-low`/`text-text-med` were never compiled into the prod
 * stylesheet (0 occurrences), so those elements inherit the text colour.
 * The compiled font-semibold/font-bold utilities are both weight 700. */

/* News lead. a.group.block.border-b.border-white/10.pb-6.hover:text-highlight
   .transition-colors > img.w-full.rounded-[13px].object-cover.bg-black/20
   .aspect-[16/9] + div.pt-4 > div.mb-3.flex.flex-wrap.gap-x-3.gap-y-1
   .text-[11px].font-medium.uppercase.tracking-[0.18em] + h3.text-2xl
   .md:text-[2rem].font-bold.tracking-tight.leading-none + p.mt-4.text-base
   [.line-clamp-3]. The image placeholder is var(--bg-level-1) on the light
   theme (index.css:390), --portal-surface here. */
.portal-news-lead-link { display: block; border-bottom: 1px solid var(--portal-border); padding-bottom: 1.5rem; transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.portal-news-lead-link:hover { color: var(--portal-accent); }
.portal-news-lead-image { width: 100%; border-radius: 13px; object-fit: cover; background-color: var(--portal-surface); aspect-ratio: 16 / 9; }
.portal-news-lead-body { padding-top: 1rem; }
.portal-news-meta { margin-bottom: .75rem; display: flex; flex-wrap: wrap; column-gap: .75rem; row-gap: .25rem; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; }
.portal-news-lead-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.portal-news-lead-text { margin-top: 1rem; font-size: 1rem; line-height: 1.5; }
.portal-news-lead-text--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (width >= 48rem) {
  .portal-news-lead-title { font-size: 2rem; }
}

/* News list. section.space-y-5 > article > a.group.block.border-b
   .border-white/10.pb-5 > div.news-card-compact__inner (index.css:456-467)
   > img.w-full.rounded-[13px].object-cover.bg-black/20.aspect-[16/9]
   .sm:h-32.sm:aspect-auto | div.hidden.sm:block, div.min-w-0 > meta row +
   h3.text-base.font-semibold.leading-tight + p.mt-2.text-sm[.line-clamp-2]. */
[data-portal-variant="portal_news_list"] > .portal-news-compact:not(:last-child) { margin-block-end: 1.25rem; }
.portal-news-compact-link { display: block; border-bottom: 1px solid var(--portal-border); padding-bottom: 1.25rem; transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.portal-news-compact-link:hover { color: var(--portal-accent); }
.portal-news-compact-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.portal-news-compact-image { width: 100%; border-radius: 13px; object-fit: cover; background-color: var(--portal-surface); aspect-ratio: 16 / 9; }
.portal-news-compact-spacer { display: none; }
.portal-news-compact-text { min-width: 0; }
.portal-news-compact-title { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.portal-news-compact-body { margin-top: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); }
.portal-news-compact-body--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (width >= 40rem) {
  .portal-news-compact-inner { grid-template-columns: 168px minmax(0, 1fr); }
  .portal-news-compact-image { height: 8rem; aspect-ratio: auto; }
  .portal-news-compact-spacer { display: block; }
}

/* Side rail list. section[data-news-brick="media-list"] > h3.mb-4.text-sm
   .font-semibold.uppercase.tracking-[0.22em] + div.space-y-4 > article
   .border-b.border-white/10.pb-4.last:border-b-0.last:pb-0 > a.group.block
   .hover:text-highlight > div.mb-3.overflow-hidden.rounded-[13px].border
   .border-white/10.bg-black/20 (this box's hairline is NOT in the light
   theme's override list, so it stays literal) > img.block.w-full.h-auto
   .transition-transform.duration-300.group-hover:scale-[1.02]; div.mb-2
   .text-[11px].font-medium.uppercase.tracking-[0.15em]; h4.text-sm
   .font-semibold.leading-tight.line-clamp-2. */
.portal-rail-heading { margin-bottom: 1rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; }
.portal-rail-items > .portal-rail-item:not(:last-child) { margin-block-end: 1rem; }
.portal-rail-item { border-bottom: 1px solid var(--portal-border); padding-bottom: 1rem; }
.portal-rail-item:last-child { border-bottom-width: 0; padding-bottom: 0; }
.portal-rail-item-link { display: block; transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.portal-rail-item-link:hover { color: var(--portal-accent); }
.portal-rail-item-media { margin-bottom: .75rem; overflow: hidden; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .1); background-color: var(--portal-surface); }
.portal-rail-item-image { display: block; width: 100%; height: auto; transition: scale .3s cubic-bezier(.4, 0, .2, 1); }
.portal-rail-item-link:hover .portal-rail-item-image { scale: 1.02; }
.portal-rail-item-date { margin-bottom: .5rem; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; }
.portal-rail-item-title { font-size: .875rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Right-rail logo unit: a.block.rounded-[13px].border.border-white/10
   .bg-white.p-4.shadow-[0_18px_60px_rgba(0,0,0,0.2)].transition-colors
   .hover:border-highlight/50 > img.block.h-auto.w-full.object-contain. The
   white plate, its shadow and the white/10 hairline are literal: the light
   theme's override list does not include this unit, so prod paints the same
   literals on both hosts. */
.portal-rail-logo { display: block; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .1); background-color: #fff; padding: 1rem; box-shadow: 0 18px 60px rgba(0, 0, 0, .2); transition: border-color .15s cubic-bezier(.4, 0, .2, 1); }
.portal-rail-logo:hover { border-color: color-mix(in srgb, var(--portal-accent) 50%, transparent); }
.portal-rail-logo-image { display: block; height: auto; width: 100%; object-fit: contain; }

/* Inline promo banner. section.border-b.border-white/10.pb-5 (not in the
   light theme's override list: literal) > a.news-inline-promo.<modifier>
   carrying the cover image in a custom property; rules copied from
   index.css:469-600 and its @media(min-width:768px) block. The brand skins
   are the banner's own colours, identical on the light and the dark host,
   so PLAN.md §3's "stays literal" clause applies. The skins are keyed by
   the card's data-card, the source product's own variant names
   (inline_promo_video / inline_promo_sport = the seeded banner key). */
[data-portal-variant="portal_promo"] { display: block; border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: 1.25rem; }
.portal-promo { display: block; overflow: hidden; border-radius: 13px; color: #fff; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; position: relative; isolation: isolate; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #0f141c; background-image: linear-gradient(135deg, rgba(8, 12, 19, .86) 0%, rgba(14, 20, 31, .58) 48%, rgba(18, 24, 36, .88) 100%), var(--portal-promo-image, none); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 52px rgba(5, 10, 18, .32); }
.portal-promo:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .26); }
.portal-promo-inner { position: relative; z-index: 1; display: flex; min-height: 10.5rem; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.25rem; }
.portal-promo-copy { display: flex; flex-direction: column; gap: .75rem; max-width: 27rem; }
.portal-promo-eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: .5rem; border-radius: 999px; padding: .25rem .75rem; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: rgba(245, 247, 250, .84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.portal-promo-title { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
.portal-promo-body { margin-top: .75rem; max-width: 36ch; font-size: .875rem; font-weight: 400; line-height: 1.7; }
.portal-promo-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: .75rem; border-radius: 999px; padding: .5rem 1rem; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.portal-promo-icon { display: flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 999px; background: #fff; color: #111827; }
@media (min-width: 768px) {
  .portal-promo-inner { min-height: 9.2rem; flex-direction: row; align-items: end; padding-inline: 1.5rem; }
  .portal-promo-cta { align-self: end; }
}
/* video promo (source modifier .news-inline-promo--zasahtv) */
.portal-promo[data-card="inline_promo_video"] { border-color: rgba(127, 255, 0, .3); background-color: #091018; background-image: var(--portal-promo-image, none); box-shadow: 0 18px 52px rgba(9, 17, 28, .38); }
.portal-promo[data-card="inline_promo_video"]:hover { border-color: rgba(169, 255, 63, .55); }
.portal-promo[data-card="inline_promo_video"] .portal-promo-eyebrow { border-color: rgba(127, 255, 0, .35); background: rgba(7, 11, 19, .52); color: #eaffb7; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.portal-promo[data-card="inline_promo_video"] .portal-promo-title { color: #f7ffd5; text-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.portal-promo[data-card="inline_promo_video"] .portal-promo-body { color: rgba(244, 249, 255, .88); text-shadow: 0 3px 14px rgba(0, 0, 0, .3); }
.portal-promo[data-card="inline_promo_video"] .portal-promo-cta { border: 1px solid rgba(127, 255, 0, .28); background: rgba(7, 11, 19, .62); color: #efffcf; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.portal-promo[data-card="inline_promo_video"] .portal-promo-icon { background: #7fff00; color: #000; }
/* sport promo (source modifier .news-inline-promo--hasicskysport) */
.portal-promo[data-card="inline_promo_sport"] { border-color: rgba(255, 255, 255, .12); background-color: #040404; background-image: linear-gradient(145deg, rgba(4, 4, 4, .54) 0%, rgba(9, 9, 9, .2) 54%, rgba(20, 20, 20, .62) 100%), var(--portal-promo-image, none); background-position: center 38%; box-shadow: 0 18px 52px rgba(0, 0, 0, .34); }
.portal-promo[data-card="inline_promo_sport"]:hover { border-color: rgba(255, 255, 255, .28); }
.portal-promo[data-card="inline_promo_sport"] .portal-promo-eyebrow { border-color: rgba(255, 255, 255, .12); background: rgba(8, 10, 13, .34); color: rgba(255, 255, 255, .82); }
.portal-promo[data-card="inline_promo_sport"] .portal-promo-title { color: #fff; text-shadow: 0 8px 24px rgba(0, 0, 0, .34); }
.portal-promo[data-card="inline_promo_sport"] .portal-promo-body { color: rgba(255, 255, 255, .86); text-shadow: 0 3px 14px rgba(0, 0, 0, .28); }
.portal-promo[data-card="inline_promo_sport"] .portal-promo-cta { border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 10, 13, .42); color: rgba(255, 255, 255, .94); }
.portal-promo[data-card="inline_promo_sport"] .portal-promo-icon { background: #fff; color: #000; }

/* Site hero — the promo banner above the feed. Source: the same unit with
   .news-inline-promo--site-hero.news-top-promo (index.css:598-680): one
   link painting the cover image under a left-to-right gradient, 18/5 from
   1024px up. Literal colours for the same reason as the promo skins. */
.portal-hero { display: block; overflow: hidden; position: relative; isolation: isolate; border-radius: 13px; color: #fff; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; border: 1px solid rgba(255, 255, 255, .14); background-color: #101720; background-image: linear-gradient(90deg, rgba(4, 8, 13, .9) 0%, rgba(11, 20, 29, .72) 44%, rgba(11, 20, 29, .24) 100%), var(--portal-hero-image, none); background-size: cover; background-position: center; min-height: clamp(13rem, 28vw, 23rem); box-shadow: 0 22px 70px rgba(9, 17, 28, .32); }
.portal-hero:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .32); }
.portal-hero-inner { position: relative; z-index: 1; display: flex; min-height: inherit; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); }
.portal-hero-copy { display: flex; flex-direction: column; gap: .75rem; max-width: 32rem; }
.portal-hero-kicker { display: inline-flex; width: fit-content; align-items: center; gap: .5rem; border-radius: 999px; padding: .25rem .75rem; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .2); background: rgba(7, 11, 19, .48); color: #f2f7ff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.portal-hero-title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; text-transform: uppercase; color: #fff; text-shadow: 0 8px 22px rgba(0, 0, 0, .42); }
.portal-hero-text { margin-top: .75rem; max-width: 38rem; font-size: .875rem; font-weight: 400; line-height: 1.7; color: rgba(245, 248, 252, .9); text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
/* Stretched-link overlay: the source product wraps the whole banner in one
   <a>; here <article> stays the landmark and this overlay carries the link. */
.portal-hero-link { position: absolute; inset: 0; z-index: 2; }
@media (min-width: 1024px) {
  .portal-hero { aspect-ratio: 18 / 5; min-height: 0; }
  .portal-hero-inner { height: 100%; min-height: 0; }
}

/* Header search clear button, added by js/search.js next to #search-input.
   Kept as a plain flex sibling (no position:absolute over the input) so it
   needs no change to portal.css's (P1-owned) .portal-search-label layout. */
.portal-search-clear { border: 0; background: none; padding: 0 .5rem; margin-left: -2rem; font-size: 1.1rem; line-height: 1; color: var(--portal-subtle); cursor: pointer; }
.portal-search-clear:hover { color: var(--portal-text); }

@media (prefers-reduced-motion: reduce) {
  .portal-rail-item-image, .portal-promo, .portal-hero { transition: none; }
}