/* IPN TV 1.14 (R6) · The page hero — app/views/partials/pagehead.php.
   One reusable band at the top of every page that does not open with a full-bleed slider:
   breadcrumb + URL chip · kicker · title · description · a per-page tint · page-related icons drifting behind the text.
   Tokens come from themes/classic/css/base.css. --ph-a / --ph-b are the page's own two accent colours (set inline).
   Motion: 300–500 ms eases for interaction, slow 12–20 s drifts for the background; everything stops under reduced motion.
   The text column always sits above .ph__veil, which is opaque at the start edge — the drifting icons can never cut its contrast. */

.ph {
  --ph-a: #E11D2E; --ph-b: #2F6BFF;
  --ph-ink: color-mix(in srgb, var(--ph-a) 62%, #FFFFFF);
  --ph-soft: color-mix(in srgb, var(--ph-a) 14%, transparent);
  --ph-line: color-mix(in srgb, var(--ph-a) 34%, transparent);
  --ph-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; isolation: isolate; overflow: clip;
  margin-bottom: 26px;
  padding: clamp(26px, 4vw, 54px) 0 clamp(22px, 3.2vw, 38px);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--line);
}
html[data-mode="light"] .ph { --ph-ink: color-mix(in srgb, var(--ph-a) 86%, #000000); --ph-soft: color-mix(in srgb, var(--ph-a) 11%, transparent); }
.ph--slim { padding: clamp(22px, 3vw, 38px) 0 clamp(18px, 2.4vw, 28px); }
/* the compact strip for pages that open with a player or a picture hero (show, channel, watch, live):
   same tint and the same drifting icons, but the title and the description live in the media block below */
.ph--bar { margin-bottom: 0; padding: 14px 0 13px; }
.ph--bar .ph__glow { filter: blur(56px); opacity: .42; }
.ph--bar .ph__glow--a { width: 340px; height: 340px; top: -190px; }
.ph--bar .ph__glow--b { width: 260px; height: 260px; bottom: -150px; }
.ph--bar .ph__float { width: min(48%, 520px); }
.ph--bar .ph__float i { width: 34px; height: 34px; border-radius: 11px; }
.ph--bar .ph__float i .ic { width: 16px; height: 16px; }
.ph--bar .ph__float i:nth-child(1) { inset-inline-end: 4%;  top: 12%; }
.ph--bar .ph__float i:nth-child(2) { inset-inline-end: 24%; top: 34%; }
.ph--bar .ph__float i:nth-child(3) { inset-inline-end: 44%; top: 4%; }
.ph--bar .ph__float i:nth-child(4) { inset-inline-end: 64%; top: 40%; }
.ph--bar .ph__float i:nth-child(n + 5) { display: none; }
.ph--bar .ph__in { align-items: center; }
/* the contact page pulled its cards up over its old tall hero — the shared hero sits above them instead */
.ph + .ct-grid { margin-top: 24px; }

/* ---- background: two soft accent glows + a faint grid ------------------------------------------------------- */
.ph__glow { position: absolute; display: block; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .5; }
.ph__glow--a { width: 520px; height: 520px; inset-inline-end: -140px; top: -230px; background: radial-gradient(circle, color-mix(in srgb, var(--ph-a) 60%, transparent), transparent 66%); animation: ph-drift 16s ease-in-out infinite alternate; }
.ph__glow--b { width: 380px; height: 380px; inset-inline-start: -130px; bottom: -200px; background: radial-gradient(circle, color-mix(in srgb, var(--ph-b) 50%, transparent), transparent 66%); animation: ph-drift 21s ease-in-out infinite alternate-reverse; }
html[data-mode="light"] .ph__glow { opacity: .3; }
.ph__grid { position: absolute; display: block; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 0%, #000 18%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 0%, #000 18%, transparent 100%); }
@keyframes ph-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-36px, 26px, 0) scale(1.07); } }

/* ---- the drifting page icons (always on the far side of the text) ------------------------------------------- */
.ph__float { position: absolute; display: block; inset-block: 0; inset-inline-end: 0; width: min(54%, 680px); pointer-events: none; }
.ph__float i { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; font-style: normal;
  background: color-mix(in srgb, var(--surface) 74%, transparent); border: 1px solid var(--line); color: var(--ph-ink);
  opacity: 0; animation: ph-float 11s ease-in-out infinite alternate, ph-in .9s var(--ph-ease) forwards;
  animation-delay: calc(var(--i) * -1.45s), calc(var(--i) * .07s); }
.ph__float i .ic { width: 23px; height: 23px; }
.ph__float i:nth-child(2n) { color: color-mix(in srgb, var(--ph-b) 62%, var(--text)); }
.ph__float i:nth-child(3n) { color: var(--ph-ink); }
.ph__float i:nth-child(1) { inset-inline-end: 6%;  top: 9%; }
.ph__float i:nth-child(2) { inset-inline-end: 27%; top: 30%; width: 44px; height: 44px; border-radius: 14px; }
.ph__float i:nth-child(3) { inset-inline-end: 44%; top: 6%;  width: 46px; height: 46px; border-radius: 15px; }
.ph__float i:nth-child(4) { inset-inline-end: 15%; top: 55%; width: 48px; height: 48px; border-radius: 15px; }
.ph__float i:nth-child(5) { inset-inline-end: 62%; top: 38%; width: 38px; height: 38px; border-radius: 12px; }
.ph__float i:nth-child(6) { inset-inline-end: 36%; top: 68%; width: 40px; height: 40px; border-radius: 13px; }
.ph__float i:nth-child(5) .ic, .ph__float i:nth-child(6) .ic { width: 19px; height: 19px; }
@keyframes ph-float { from { translate: 0 0; rotate: -4deg; } to { translate: 0 -16px; rotate: 5deg; } }
@keyframes ph-in { to { opacity: .92; } }

/* the scrim that guarantees the text contrast: solid at the start edge, clear where the icons drift */
.ph__veil { position: absolute; display: block; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 72%, transparent) 36%, transparent 62%); }
html[dir="rtl"] .ph__veil { background: linear-gradient(to left, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 72%, transparent) 36%, transparent 62%); }

/* ---- the copy ----------------------------------------------------------------------------------------------- */
.ph__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: end; }
.ph__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; max-width: 760px; }

.ph__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ph__crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ph__crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.ph__crumbs li + li::before { content: "/"; margin: 0 7px; color: var(--muted); opacity: .55; }
.ph__crumbs a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); text-decoration: none; transition: color .25s var(--ph-ease); }
/* the var() fallbacks matter: the breadcrumb line is reused outside .ph (the events hero), where --ph-* is not declared */
.ph__crumbs a:hover { color: var(--ph-ink, var(--accent, #E11D2E)); }
.ph__crumbs a:focus-visible { outline: 2px solid var(--ph-a, var(--accent, #E11D2E)); outline-offset: 3px; border-radius: 5px; }
.ph__crumbs a .ic { width: 14px; height: 14px; }
.ph__crumbs [aria-current] { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.ph__url { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 10px; border-radius: 999px; color: var(--text-2);
  background: var(--ph-soft, color-mix(in srgb, var(--accent, #E11D2E) 13%, transparent));
  border: 1px solid var(--ph-line, color-mix(in srgb, var(--accent, #E11D2E) 32%, transparent)); }
.ph__url .ic { flex: none; width: 13px; height: 13px; color: var(--ph-ink, var(--accent, #E11D2E)); }
.ph__url code { font: 600 11.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the same line over a picture (the event hero) */
.ph__crumbs--onimage { color: #fff; }
.ph__crumbs--onimage ol { color: rgba(255,255,255,.72); }
.ph__crumbs--onimage li + li::before { color: rgba(255,255,255,.55); }
.ph__crumbs--onimage a { color: rgba(255,255,255,.88); }
.ph__crumbs--onimage a:hover { color: #fff; }
.ph__crumbs--onimage [aria-current] { color: #fff; }
.ph__crumbs--onimage .ph__url { background: rgba(8,11,22,.6); border-color: rgba(255,255,255,.2); color: #fff; }
.ph__crumbs--onimage .ph__url .ic { color: #fff; }

.ph__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--ph-soft); border: 1px solid var(--ph-line); color: var(--text); font: 700 12.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
html[dir="rtl"] .ph__kicker { letter-spacing: 0; font-size: 13px; }
.ph__kicker .ic { width: 15px; height: 15px; color: var(--ph-ink); }
.ph__title { margin: 0; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 62%, var(--ph-a))); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[dir="rtl"] .ph__title { font-size: clamp(27px, 3.4vw, 44px); line-height: 1.32; letter-spacing: 0; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .ph__title { color: var(--text); } }
.ph__lead { margin: 0; max-width: 62ch; color: var(--text-2); font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.65; }
.ph__extra { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }

/* small stat chips any page can drop into the right-hand slot */
.ph-stat { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: transform .35s var(--ph-ease), border-color .3s; }
.ph-stat:hover { transform: translateY(-2px); border-color: var(--line-2); }
.ph-stat .ic { width: 17px; height: 17px; color: var(--ph-ink); }
.ph-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ph-stat small { color: var(--muted); font-weight: 600; }

/* ---- responsive --------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ph__in { grid-template-columns: 1fr; align-items: start; }
  .ph__extra { justify-content: flex-start; }
  .ph__float { width: min(60%, 420px); }
  .ph__float i { width: 46px; height: 46px; border-radius: 14px; }
  .ph__float i .ic { width: 20px; height: 20px; }
}
@media (max-width: 760px) {
  .ph { margin-bottom: 20px; }
  .ph__float { width: 56%; opacity: .62; }
  .ph__float i:nth-child(n + 5) { display: none; }
  .ph__float i { width: 40px; height: 40px; border-radius: 12px; }
  .ph__float i .ic { width: 18px; height: 18px; }
  .ph__veil { background: linear-gradient(to right, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 80%, transparent) 52%, color-mix(in srgb, var(--bg-2) 40%, transparent) 100%); }
  html[dir="rtl"] .ph__veil { background: linear-gradient(to left, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 80%, transparent) 52%, color-mix(in srgb, var(--bg-2) 40%, transparent) 100%); }
  .ph__crumbs { gap: 6px 8px; }
  .ph__crumbs ol { font-size: 12px; }
  .ph__crumbs [aria-current] { max-width: 56vw; }
  .ph__url { height: 24px; padding: 0 9px; }
  .ph__url code { font-size: 10.5px; }
  .ph__lead { font-size: 14px; }
  .ph-stat { height: 38px; padding: 0 12px; font-size: 12.5px; }
}
@media (max-width: 400px) {
  .ph__float { width: 50%; opacity: .5; }
  .ph__float i:nth-child(n + 4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ph__glow, .ph__float i { animation: none !important; }
  .ph__float i { opacity: .8; }
  .ph__crumbs a, .ph-stat { transition: none; }
}