/*
 * News. — "Sport" design style, News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: black one-row header (logo left), pitch green accent,
 * Barlow Condensed headlines (bold, italic, uppercase), Barlow text, scores bar on.
 * Big photos, bold type, angled labels.
 * Front-page top section: template-parts/home/featured-sport.php.
 */

.style-sport{
  --sp-accent: var(--red);
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 6px;
}
html:not([data-theme="dark"]) .style-sport{ --paper:#FFFFFF; --paper-2:#F3F5F4; --line:#E2E6E4; --border-bottom:#E2E6E4; --ink:#0C0F0E; }
html[data-theme="dark"] .style-sport{ --paper:#0A0C0B; --paper-2:#131716; --sp-accent:color-mix(in srgb, var(--red) 70%, #ffffff); }

/* ---- Type: bold condensed italic uppercase ---- */
.style-sport h1, .style-sport h2, .style-sport h3,
.style-sport .featured__headline, .style-sport .story-card__headline, .style-sport .article-title,
.style-sport .feature-title, .style-sport .cover-card h3, .style-sport .showbiz-card__title{
  font-family:var(--display); letter-spacing:0;
}
.style-sport .article-title, .style-sport .feature-title, .style-sport .cat-head__title{
  font-weight:800; font-style:italic; text-transform:uppercase; line-height:1; letter-spacing:-.005em;
}

/* ---- Section heads: big italic title with an angled accent block ---- */
.style-sport .section__dot{ display:none; }
.style-sport .section__head{ border-bottom:3px solid var(--ink); padding-bottom:8px; }
.style-sport .section__title,
.style-sport .shead__title{ font-family:var(--display); font-size:30px; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:0; line-height:1; }
.style-sport .section__title::before,
.style-sport .shead__title::before{ content:""; display:inline-block; width:14px; height:.72em; margin-right:10px; background:var(--sp-accent); transform:skewX(-14deg); }
.style-sport .see-all{ font-family:var(--display); font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.02em; font-size:15px; }

/* ---- Labels: angled blocks ---- */
.style-sport .tag,
.sp-tag{
  display:inline-block; padding:3px 10px; border-radius:0; background:var(--sp-accent, var(--red)) !important; color:#fff !important;
  font-family:var(--display); font-size:13px; font-weight:700; font-style:italic; letter-spacing:.03em; text-transform:uppercase;
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.sp-tag--line{ clip-path:none; padding:0; background:transparent !important; color:var(--sp-accent, var(--red)) !important; }
.style-sport .kicker{ font-family:var(--display); font-style:italic; font-weight:700; letter-spacing:.03em; color:var(--sp-accent); }

/* ---- Header ---- */
.style-sport .brand__logo{ height:var(--logo-h, 32px); }
.style-sport .nav-link{ font-family:var(--display); font-size:17px; font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.02em; }
.style-sport .nav-link::after{ height:4px; background:var(--sp-accent); }
.style-sport .nav-link.is-active, .style-sport .nav-item.is-open .nav-link{ color:var(--sp-accent); }
.style-sport .brand-bar__premium{ font-family:var(--display); font-style:italic; font-weight:700; font-size:15px; text-transform:uppercase; }
.style-sport .breaking{ background:var(--red); } /* The deep accent: white text, also in dark mode. */
.style-sport .live-tag{ background:#0C0F0E; border-radius:0; font-style:italic; }
.style-sport .breaking__track li{ font-family:var(--display); font-weight:700; font-style:italic; font-size:16px; text-transform:uppercase; letter-spacing:.01em; }

/* ---- Buttons ---- */
.style-sport .btn{ border-radius:0; font-family:var(--display); font-style:italic; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:15px; }

/* =====================================================================
   FRONT PAGE TOP (featured-sport.php)
   ===================================================================== */
.sp-top{ padding-top:clamp(18px, 2.2vw, 28px); }
.sp-hero{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:10px; }
.sp-stack{ display:grid; grid-template-rows:1fr 1fr; gap:10px; min-width:0; }

.sp-photo{ position:relative; display:flex; align-items:flex-end; min-width:0; overflow:hidden; color:#fff; background:#111; }
.sp-photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.sp-photo:hover > img{ transform:scale(1.04); }
.sp-photo__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.88)); }
.sp-photo__body{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:clamp(16px, 2vw, 28px); }
.sp-photo__title{
  margin:0; font-family:var(--display); font-weight:800; font-style:italic; text-transform:uppercase; line-height:.98; letter-spacing:-.005em; color:#fff;
  font-size:22px; text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.sp-photo:hover .sp-photo__title{ color:color-mix(in srgb, var(--sp-accent, var(--red)) 35%, #fff); }
.sp-photo .live-badge{ position:absolute; top:14px; left:14px; z-index:2; }
.sp-photo--lead{ min-height:560px; }
.sp-photo--lead .sp-photo__title{ font-size:clamp(34px, 4.2vw, 64px); max-width:18ch; }
.sp-photo--side{ min-height:0; }

.sp-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; margin-top:26px; }
.sp-card{ display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--ink); }
.sp-card__media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); margin-bottom:6px; }
.sp-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.sp-card:hover .sp-card__media img{ transform:scale(1.05); }
.sp-card__title{ margin:0; font-family:var(--display); font-size:21px; font-weight:800; font-style:italic; text-transform:uppercase; line-height:1.02; }
.sp-card:hover .sp-card__title{ color:var(--sp-accent, var(--red)); }
.sp-card__meta{ font-size:12px; color:var(--muted); }
.sp-top .ad-wrap{ margin-top:26px; }

@media (max-width:1100px){
  .sp-hero{ grid-template-columns:minmax(0,1fr); }
  .sp-stack{ grid-template-rows:none; grid-template-columns:1fr 1fr; }
  .sp-photo--side{ min-height:260px; }
  .sp-photo--lead{ min-height:480px; }
  .sp-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .sp-stack{ grid-template-columns:minmax(0,1fr); }
  .sp-photo--lead{ min-height:440px; }
  .sp-photo__title{ font-size:20px; }
  .sp-row{ gap:18px 12px; }
  .sp-card__title{ font-size:18px; }
}
@media (prefers-reduced-motion: reduce){
  .sp-photo > img, .sp-card__media img{ transition:none; }
}