/* Premier Padel hub — brand palette: navy #0a1020, cyan #52e1fe, amber #ffb547 */

/* Desktop: fill the rail's content column. The base .app-main uses
   `margin:0 auto`, which in the app-shell grid cell suppresses `stretch` and
   shrink-wraps the hub off-centre; drop the cap + auto-margins so the hero
   spans the column and the card grid goes multi-column. Mobile keeps the base
   .app-main rule (capped column + bottom padding that clears the floating nav). */
@media (min-width:1024px){
  /* min-width:0 is load-bearing: .app-main is a 1fr grid item, whose default
     min-width:auto lets the wide carousel rail blow the track out and scroll
     the whole page. Zeroing it keeps the column at the available width so the
     rail scrolls internally instead. */
  .premier-padel-page .app-main { max-width:none; margin:0; min-width:0; }
}

/* ── Editorial hero (Om-style) ── prominent display headline; the cinematic
   banner is a supporting side visual, not a full-bleed block. Stacks on
   mobile (banner on top, reduced height), two columns on wider screens. */
.pp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: #0a1020;
  margin: 4px 0 34px; padding: clamp(24px, 4.5vw, 52px);
  min-height: clamp(220px, 30vw, 360px);
  display: flex; flex-direction: column; justify-content: center;
}
/* Full-bleed banner, faded into the navy so the text reads on top. */
.pp-hero__visual {
  position: absolute; inset: 0; z-index: -1;
  background: var(--pp-banner) center / cover no-repeat;
  opacity: .30;
}
.pp-hero__visual::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,16,32,.86) 0%, rgba(10,16,32,.42) 62%, rgba(10,16,32,.12) 100%),
    linear-gradient(0deg, rgba(10,16,32,.5) 0%, transparent 46%);
}
.pp-hero__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }

.pp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono), monospace;
  color: #52e1fe; letter-spacing: .22em; font-size: 10px; font-weight: 700;
  text-transform: uppercase; margin: 0 0 14px;
}
.pp-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #52e1fe; box-shadow: 0 0 10px #52e1fe;
  animation: pp-blink 1.6s ease-in-out infinite;
}
@keyframes pp-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.pp-headline {
  font-family: var(--font-display), 'Manrope', sans-serif;
  font-weight: 800; font-size: clamp(30px, 5vw, 52px); line-height: 1.02;
  letter-spacing: -0.035em; color: #f3f6fb; margin: 0 0 14px;
}
.pp-headline em { font-style: normal; color: #ffb547; }
.pp-lede { font-size: 15px; line-height: 1.6; color: #9aa6bc; max-width: 54ch; margin: 0 0 20px; }

.pp-numbers {
  display: grid; grid-template-columns: repeat(3, auto); margin: 4px 0 0;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.pp-numbers > div {
  padding: 12px 20px; display: flex; flex-direction: column; gap: 4px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.pp-numbers > div:first-child { border-left: none; padding-left: 0; }
.pp-numbers dt { font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #5d6a82; order: 1; }
.pp-numbers dd { font-family: var(--font-mono), monospace; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #52e1fe; line-height: 1; margin: 0; order: 2; }
.pp-numbers > div:nth-child(2) dd { color: #f3f6fb; }
.pp-numbers > div:nth-child(3) dd { color: #ffb547; }
.pp-numbers span { font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #5d6a82; order: 3; }


.pp-band { margin: 0 0 32px; }
.pp-band__title { color: #f3f6fb; font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

/* ── Upcoming carousel ── the "Kommende" band is a horizontal scroll-snap rail
   instead of a wrapping grid, so 12 upcoming events don't flood the page.
   ‹ › arrows page through it on desktop; touch/narrow screens swipe natively. */
.pp-band__bar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.pp-band__bar .pp-band__title { margin: 0; }
.pp-rail__nav { display: flex; gap: 8px; }
.pp-rail__arrow {
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; padding-bottom: 2px;
  color: #cdd6e6; background: #0e1626; border: 1px solid rgba(255,255,255,.12);
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.pp-rail__arrow:hover:not(:disabled) { color: #52e1fe; border-color: rgba(82,225,254,.45); }
.pp-rail__arrow:disabled { opacity: .35; cursor: default; }

.pp-rail {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 2px 0 10px; min-width: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pp-rail::-webkit-scrollbar { display: none; }
/* Show exactly four cards per view — 1 live + the next 3 kommende — with the
   14px gaps accounted for; narrower viewports drop to the 200px floor and the
   rest scroll. */
.pp-rail .pp-card { flex: 0 0 calc((100% - 42px) / 4); min-width: 200px; scroll-snap-align: start; }

/* Touch / narrow viewports: hide the arrows, native swipe takes over. */
@media (hover: none), (max-width: 640px) {
  .pp-rail__nav { display: none !important; }
}

.pp-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: #0e1626; border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 16px; cursor: default;
  transition: transform .15s ease, border-color .15s ease;
}
/* Faded tournament poster as card texture — kept subtle so the card text
   stays legible; the scrim darkens toward the bottom where dates/champions sit. */
.pp-card__bg {
  position: absolute; inset: 0; z-index: -1;
  background: var(--pp-poster) center 15% / cover no-repeat;
  opacity: .16; transition: opacity .15s ease;
}
.pp-card__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,22,38,.45) 0%, rgba(14,22,38,.80) 100%);
}
.pp-card--poster { border-color: rgba(255,255,255,.12); }
.pp-card[data-pp-slug]:hover .pp-card__bg { opacity: .24; }
.pp-card[data-pp-slug] { cursor: pointer; }
.pp-card[data-pp-slug]:hover { transform: translateY(-2px); border-color: rgba(82,225,254,.4); }
/* Name is the card anchor now that the tier badge is gone: bolder, tighter,
   near-white display type. Tier still reads from the name itself ("P1"). */
.pp-card__name {
  color: #f3f6fb; font-family: var(--font-display), 'Manrope', sans-serif;
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  margin: 2px 0 6px; padding-right: 24px;
}
.pp-card__meta { display: flex; align-items: center; gap: 7px; color: #9aa6bc; font-size: 12px; margin: 0; }
.pp-card__dates { color: #9aa6bc; font-size: 12px; margin: 4px 0 0; }
.pp-card__pending { color: #5d6a82; font-size: 12px; font-style: italic; margin: 10px 0 0; }

/* Live signal = the fip-radar spinning padel ball (.rd-live, from fip-radar.css,
   already loaded on this page). With the header row gone it floats in the
   card's top-right corner. */
.pp-card--live { border-color: rgba(255,107,94,.4); }
.pp-card__live { position: absolute; top: 14px; right: 14px; z-index: 1; }

/* Postponed: the whole card fades back and a large "Udskudt" rubber-stamp is
   struck diagonally across it. Everything but the stamp is dimmed so the stamp
   is unmistakably the card's headline. */
.pp-card--postponed > :not(.pp-stamp) { opacity: .34; }
.pp-stamp {
  position: absolute; top: 50%; left: 50%; z-index: 3; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-11deg);
  font-family: var(--font-mono), monospace; font-weight: 800;
  font-size: clamp(18px, 5vw, 26px); letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; color: #ff6b5e;
  padding: 6px 18px; border-radius: 8px;
  border: 3px solid rgba(255,107,94,.6);
  box-shadow: inset 0 0 0 2px rgba(255,107,94,.18);
  background: rgba(255,107,94,.08);
  opacity: .92;
}

/* Champions — no gender labels; a quiet gold "Mestre" eyebrow lends prestige
   and the winning pairs read as the card's payoff. */
.pp-champs { margin: 13px 0 0; display: flex; flex-direction: column; gap: 5px; }
.pp-champs__label {
  font-family: var(--font-mono), monospace; font-size: 9px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: #ffb547;
  margin: 0 0 1px;
}
.pp-champ {
  display: flex; align-items: baseline; gap: 7px;
  color: #f3f6fb; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.25; margin: 0;
}
.pp-champ__ico { font-size: 12px; flex-shrink: 0; }

/* The draw option in the .lab-plm chooser is a <button> (the others are <a>);
   strip the default UA button chrome so it matches the anchor rows instead of
   rendering as a light native button. */
button.lab-plm__item {
  -webkit-appearance: none; appearance: none;
  background: none; width: 100%; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
/* fip-mark.svg is the FIP emblem cropped out of the wide wordmark (white ball).
   Show it contained on a dark badge so it reads like the Padelytics mark. */
.pp-badge-fip {
  background: #12233d; object-fit: contain; padding: 3.5px;
}

/* ── Draw viewer (/premier-padel/<slug>) ── faded per-event banner hero +
   the FIP bracket rendered below by fip-radar.js. Reuses .pp-hero__visual. */
.pp-draw-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: #0a1020; margin: 4px 0 22px;
  padding: clamp(20px, 3.4vw, 38px);
  min-height: clamp(150px, 20vw, 220px);
  display: flex; flex-direction: column; justify-content: center;
}
/* Per-event posters are portrait-ish with players' faces in the upper band;
   the wide hero crops a horizontal slice, so bias it toward the top (like the
   cards' `center 15%`) to catch faces far more often than a centred crop.
   Scoped to the draw hero so the hub's designed landscape banner stays centred. */
.pp-draw-hero .pp-hero__visual { background-position: center 28%; }
.pp-draw-hero__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.pp-draw-hero__top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin: 0 0 16px;
}
.pp-draw-back, .pp-draw-fip {
  font-family: var(--font-mono), monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: #9aa6bc; display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s ease;
}
.pp-draw-back:hover { color: #52e1fe; }
.pp-draw-fip:hover { color: #ffb547; }
.pp-draw-tier { margin: 0 0 10px; }
.pp-draw-title {
  font-family: var(--font-display), 'Manrope', sans-serif;
  font-weight: 800; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.04;
  letter-spacing: -0.03em; color: #f3f6fb; margin: 0 0 10px;
}
.pp-draw-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: #9aa6bc; margin: 0;
}
.pp-draw-meta .flag { border-radius: 2px; }
.pp-draw-dot { color: #445; }
.pp-draw-champ {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 13px; color: #cdd6e6;
}
.pp-draw-champ__lbl {
  font-family: var(--font-mono), monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: #ffb547;
}
.pp-draw-champ__pair { color: #f3f6fb; }

/* Bracket host: let the fipdraw grid scroll horizontally inside the column
   without pushing the page. fip-radar.css styles the .fipdraw-* children. */
.pp-draw { position: relative; }
.pp-draw-body { min-width: 0; }
/* The shared renderer wraps the bracket in .fipdraw-panel{overflow:hidden}
   (needed for the overlay's rounded clip). On the full-page viewer there is no
   clip to keep, and that hidden overflow would break the sticky round-jump rail
   — lift it so the rail can pin to the viewport top as the page scrolls. */
.pp-draw-body .fipdraw-panel { overflow: visible; }
.pp-draw-body[data-state="loading"] .fipdraw-loading { display: block; }

/* Premier draw — match-details modal (result block + clickable cells).
   H2H + shell reuse the .lab-ms-* classes from tournament-cards.css. */
[data-premier-draw] .fipdraw-match.is-clickable{position:relative;cursor:pointer;}
/* Hover tints the card's --fd-edge (see .fipdraw-match in fip-radar.css) instead
   of washing the whole tile amber. The card's fill is now the only thing saying
   "nothing to report about this box" — a hover that floods it competes with the
   winner-row lift inside, and made the two rows harder to tell apart exactly when
   the pointer is on them. The edge is the container's own affordance. */
[data-premier-draw] .fipdraw-match.is-clickable:hover{--fd-edge:rgba(255,181,71,0.45);}
/* Rivalry-heat badge — the number of prior meetings between the two pairs,
   colored by intensity (more meetings → hotter). Hidden at 0 (no element). */
[data-premier-draw] .fipdraw-match .fipdraw-h2h{
  position:absolute;top:6px;right:6px;z-index:2;
  min-width:16px;padding:1px 5px;border-radius:999px;text-align:center;
  font-size:10px;font-weight:800;line-height:1.5;font-variant-numeric:tabular-nums;
  opacity:.82;transition:opacity .15s ease;pointer-events:none;
  border:1px solid transparent;}
[data-premier-draw] .fipdraw-match.is-clickable:hover .fipdraw-h2h{opacity:1;}
/* tier 1 — occasional (1–2): cool slate */
[data-premier-draw] .fipdraw-h2h[data-heat="1"]{
  color:#94a3b8;border-color:rgba(148,163,184,.45);background:rgba(148,163,184,.10);}
/* tier 2 — warm (3–5): amber */
[data-premier-draw] .fipdraw-h2h[data-heat="2"]{
  color:#f59e0b;border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.13);}
/* tier 3 — hot (6–10): orange */
[data-premier-draw] .fipdraw-h2h[data-heat="3"]{
  color:#fb923c;border-color:rgba(249,115,22,.6);background:rgba(249,115,22,.16);}
/* tier 4 — marquee rivalry (11+): fiery red, filled + glow, always full opacity */
[data-premier-draw] .fipdraw-h2h[data-heat="4"]{
  color:#fff;border-color:#ef4444;background:#ef4444;opacity:1;
  box-shadow:0 0 0 3px rgba(239,68,68,.18);}

.pp-md-result{display:flex;flex-direction:column;gap:8px;}
.pp-md-team{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--border,rgba(255,255,255,0.08));border-radius:12px;}
.pp-md-team--win{border-color:var(--accent,#ffb547);
  background:var(--accent-dim,rgba(255,181,71,0.08));}
.pp-md-name{font-weight:700;color:var(--text-muted,#b9bdc7);}
.pp-md-team--win .pp-md-name{color:var(--text,#f4f5f7);}
.pp-md-sets{display:inline-flex;gap:8px;}
.pp-md-set{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:15px;
  color:var(--text-dim,#8a8f9a);min-width:14px;text-align:center;}
.pp-md-team--win .pp-md-set{color:var(--accent,#ffb547);}

/* ══ "Latest results" band (2026-07-27) ═════════════════════════════════════
   Reuses fip-radar.css's .radar-band chrome (bar / nav / arrows / rail) and its
   .rr-sig card shell — only the result-specific bits live here. The rail's own
   .radar-band__rail .rr-sig{flex:0 0 calc((100% - 42px)/4);min-width:270px}
   sizing already applies, so cards track at ~4-per-view like the signups band. */
.pp-results{margin:0 0 26px;}
.pp-res{display:flex;flex-direction:column;gap:10px;}
.pp-res__draw{margin-left:auto;font-family:var(--font-mono),monospace;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.pp-res__pairs{display:flex;flex-direction:column;gap:6px;}
/* No rail, no dot, no caret (2026-07-27 redesign) — win/loss now reads purely
   from the per-pair scoreboard: bright vs dim games alongside the existing
   bright/dim name-weight contrast. name-column + games-column, the names side
   shrinking (min-width:0, so long names keep ellipsing) and the games side
   fixed so the set columns never get squeezed. */
.pp-res__pair{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pp-res__pair.is-won .nm{color:var(--text);font-weight:600;}
.pp-res__pair:not(.is-won) .nm{color:var(--text-muted);}
.pp-res__names{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.pp-res__pl{display:flex;align-items:center;gap:5px;min-width:0;}
.pp-res__pl .nm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Games column: fixed-width cells (not just tabular-nums) so the set columns
   line up between the two pair rows even when one side's digit count differs
   (e.g. a walkover's "W/O" word sharing the slot on the winning row only —
   see .pp-res__wo below). flex-shrink:0 keeps 3 columns from ever giving way
   to the names column on the 286px card. */
.pp-res__games{display:flex;gap:4px;flex:0 0 auto;}
.pp-res__gm{display:inline-block;width:17px;flex-shrink:0;text-align:center;
  font-family:var(--font-mono),monospace;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--text-muted);}
.pp-res__pair.is-won .pp-res__gm{color:var(--text);}
/* Walkover fallback: games is [] on both sides, so the winning row shows the
   "W/O" string (r.score) in the same slot the games would occupy instead of
   leaving the card silent on what happened. */
.pp-res__wo{font-family:var(--font-mono),monospace;font-size:11px;font-weight:700;
  letter-spacing:.03em;color:var(--text);white-space:nowrap;}
/* Tiebreak superscript (7⁵) from the raw {{ g.tb }} value — same recipe as
   fip-player.css .ff-tb / score_html, mirrored here because /premier-padel
   loads fip-radar.css, not fip-player.css. line-height:0 keeps the raise from
   nudging the row's height. */
.pp-res__gm .ff-tb{font-size:.62em;vertical-align:super;line-height:0;
  margin-left:1px;font-weight:600;}