/* Page-specific rules for about.html */

/* .format-card: number sits to the left, title + text stacked to its
   right — overrides .operator-card-static's own column stack. */
.format-card { flex-direction:row; align-items:center; gap:24px; }
/* Bigger than the home/fancies pages' .fancy-card-odds-big (this is the
   only text in the card's left column, so it can carry more weight), same
   Black Ops One treatment, no photo background behind the card. */
.format-card-number { font-family:'Black Ops One',sans-serif;font-size:56px;line-height:1;color:#A53232;flex-shrink:0; }
.format-card-body { display:flex;flex-direction:column;gap:8px; }

/* "Four ways we cover football" — same smoke-white wash-over-photo trick as
   .fancies-split-text/.page-hero-landing-bg, instead of this section's
   plain flat .section-cream fill. */
.format-section-bg { background-image:linear-gradient(rgba(232,230,227,0.85),rgba(232,230,227,0.85)),url('../assets/images/tft-bets-old-trafford-1.jpg'); background-size:cover; background-position:center 60%; background-repeat:no-repeat; }

/* "Catch us everywhere" — same photo as the homepage's own landing hero
   (.hero), with a near-black wash over it instead of the homepage's
   tri-colour stripe glow. */
/* The live-events section above ends in .section-narrow's own 88px bottom
   padding, on its plain white background — normally unremarkable next to
   another white/cream section, but landing right against this section's
   solid black photo wash turns that 88px into a stark, seemingly-broken
   blank band. .platform-content's own 96px top padding already gives
   "Where to watch" plenty of room on the dark side, so there's nothing lost
   by collapsing the white side's padding to 0 here. */
.platform-section { position:relative;overflow:hidden;background-color:#0C0C0C;background-image:url('../assets/images/home-hero-bg-custom.jpeg');background-size:cover;background-position:center 38%;color:#fff; }
.platform-glow { position:absolute;inset:0;background:rgba(12,12,12,0.85);pointer-events:none; }
.platform-content { position:relative; }
.platform-section .eyebrow-alt { color:#C25050; }
.platform-section .section-subtitle-hero { color:rgba(255,255,255,0.65); }
/* .page-hero-title defaults to white, but components.css's
   `.section .page-hero-title { color:#262220 }` rule matches here too (this
   wrapper reuses the plain .section sizing class) — this three-class
   selector outranks that two-class one so the heading stays white. */
.platform-section .platform-content .page-hero-title { color:#fff; }
.platform-row { display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px; }
.platform-item { display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:28px 18px;background:rgba(255,255,255,0.15);border-radius:6px;color:#fff;transition:background-color 220ms ease; }
.platform-item:hover { background:rgba(255,255,255,0.2); }
.platform-item:hover .platform-label { color: white; }
.platform-icon svg { width:24px;height:24px; }
.platform-label { font-family:Inter,sans-serif;font-weight:700;font-size:15px; }
.platform-platform { font-size:13px;color:rgba(255,255,255,0.55); }

/* "Off the sofa, into BOXPARK" live-event stats — same light-card fill as
   the format cards above, with a big Inter numeral instead of Black Ops One
   since these are precise reported figures, not odds-style round numbers. */
.live-stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0 36px; }
.live-stat { background:#F7F6F4;border-radius:6px;padding:20px 18px; }
.live-stat-value { font-family:Inter,sans-serif;font-weight:800;font-size:28px;color:#A53232;letter-spacing:-0.02em; }
.live-stat-label { font-size:13px;line-height:1.4;color:rgba(38,34,32,0.6);margin-top:6px; }

/* Event cards — same photo + inset-shadow wash trick as the homepage's
   .fancies-split .fancy-card:nth-child(2) (stadium shot, near-black wash,
   shadow deepens on hover instead of a lift/translate). */
.event-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px; }
.event-card { position:relative;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:6px;padding:26px 24px;background-color:#E8E6E3;background-size:cover;background-position:center 30%;box-shadow:inset 0 0 0 999px rgba(232,230,227,0.85);transition:box-shadow 260ms ease; }
.event-card:hover { box-shadow:inset 0 0 0 999px rgba(232,230,227,0.96); }
.event-card:nth-child(1) { background-image:url('../assets/images/world-cup-2026.webp'); }
.event-card:nth-child(2) { background-image:url('../assets/images/tft-man-united-game.avif'); }
.event-card:nth-child(3) { background-image:url('../assets/images/tft-bets-old-trafford-2.webp'); }
.event-card-title { font-family:Inter,sans-serif;font-weight:700;font-size:18px;color:#262220;margin-bottom:6px; }
.event-card-text { font-size:13.5px;font-weight:700;color:#A53232; }

@media (max-width: 768px) {
    .header-cta, .header-cta-primary { display: none; }
    .mobile-menu-cta { display: flex; }
  }

@media (max-width: 1240px) {
    .header-nav { display: none; }
    .hamburger-button { display: flex; }
  }

.about-record { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 72px; align-items: center; }

/* Laptop and up: the hero's .about-record row tops out at 600px (the
   shared .hero-media height) — same fixed height the homepage hero uses
   inside its own min-height:100vh box. Mirror the homepage's own fix for
   this (.hero-content's clamped top padding) so the whole hero — text,
   stats and logo — fits inside one normal-height laptop window instead of
   needing a scroll, and trim the landing-bg's old 150px bottom pad (sized
   for a since-removed bottom element) down to match. */
@media (min-width: 1024px) {
    .about-hero-body { padding-top: clamp(24px, calc(100vh - 740px), 120px); }
    .about-hero-landing-bg .about-hero-body { padding-bottom: 64px; }
  }

@media (max-width: 960px) {
    .about-record { grid-template-columns: 1fr; gap: 44px; }
    .about-record .hero-media { max-width: 360px; width: 100%; height: 360px; margin: 0 auto; }
    /* .hero-media-frame's left:22px/right:-10px insets are tuned for the
       desktop two-column row — once .about-record stacks to one column
       above, that asymmetry reads as the logo sitting visibly off-centre
       to the right (same fix as the homepage hero, see index.css). */
    .about-record .hero-media-frame { left: 0; right: 0; }
    .newsletter-card { grid-template-columns: 1fr; gap: 28px; }
    .newsletter-card .cta-banner-actions { justify-content: center; }
    .career-grid { grid-template-columns: 1fr; gap: 32px; }
    .platform-row { grid-template-columns: repeat(2, 1fr); }
    .live-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .event-cards { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
  }

@media (max-width: 680px) {
    header > div { padding: 0 20px; gap: 16px; }
    section.section { padding-left: 20px; padding-right: 20px; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-value { font-size: 26px; }
    .footer-cols { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 28px; }
    .footer-legal { padding: 48px 20px 28px; }
    section .section-narrow { padding: 88px 20px; }
    .about-hero-body { padding-top: 50px; }
    .cta-banner-actions { flex-direction: column; width: 100%; }
    .cta-banner-actions a { width: auto; justify-content: center; text-align: center; }
    .about-promo { padding: 32px 24px; flex-direction: column; align-items: center; text-align: center; }
    .game-promo-actions { flex-direction: column; align-items: center; width: 100%; }
    .platform-section { padding-left: 0; padding-right: 0; }
    .platform-content { padding-left: 20px; padding-right: 20px; }
    .platform-row { grid-template-columns: 1fr; }
  }