/*! PUBG — global density recalibration.
 * Goal: a denser, more premium layout at 100% browser zoom, without zoom/transform.
 * Method: shrink the ROOT font-size (scales every rem-based size proportionally —
 * fonts, spacing, card heights) + targeted fixes for the px/vh-based outliers
 * (hero, giant display headings, over-tall media panels, section paddings).
 * Loaded LAST so it overrides the compiled utilities. */

/* 1) Root rem scale — the main proportional lever (16px → 14px ≈ 0.875). */
html {
  font-size: 14px;
}

/* 2) Hero uses px/vh, so it ignores the root scale — compress it directly. */
/* Capped at the design-system limit: 600px desktop / 500px mobile
   (06_DESIGN_SYSTEM.md §5.3, TSK-0501). The hero must never push the primary
   navigation and search below the fold. */
/* Full-viewport hero and lead sections.
 *
 * Requested explicitly by the project owner, overriding the 600px hero cap and the
 * 4500px page budget from 06_DESIGN_SYSTEM.md §5 / TSK-0604. The homepage is now a
 * sequence of full-screen panels again: the hero shows the whole photograph, and
 * News and the Live Match Center each get a screen of their own.
 *
 * min-height rather than height on the content sections: if a viewport is shorter
 * than the content (a 768px-tall laptop), the section grows instead of clipping.
 * svh keeps mobile stable while the browser chrome collapses on scroll — dvh would
 * resize the hero mid-scroll and jitter the layout under it. */
#home {
  height: 100vh !important;
  height: 100svh !important;
  /* Never taller than the screen, never so short the headline crowds the nav. */
  min-height: 560px !important;
}
@media (max-width: 767px) {
  #home {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 480px !important;
  }
}

/* News and Live Match Center: one screen each on desktop. Below lg the content is
   stacked and taller than a viewport anyway, so the rule would only add dead space. */
@media (min-width: 1024px) {
  #news,
  .live-match-center {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Keep the containers at their own widths. An earlier width:100% here defeated
     .live-match-center__container's min(1440px, 100% - 64px) and the section bled
     to both screen edges with no gutters. In a column flex box the item only
     stretches when its width is auto, so nothing needs to be forced. */
  #news > .news-section__inner,
  .live-match-center > .live-match-center__container {
    align-self: center;
    flex: 0 0 auto;
  }

  /* In full-screen mode the section's own vertical padding is dead weight: the
     flex centring already leaves space above and below. Dropping it is what lets
     the content fit a 900px-tall window instead of overflowing it by 15-50px. */
  #news { padding-top: 0; padding-bottom: 0; }
  .live-match-center { padding-top: 0; padding-bottom: 0; }
}

/* Short desktops (1366x768, 1280x800 laptops).
 *
 * At 1080p and 900p the sections land exactly on the viewport. Below that the
 * content is genuinely taller than the screen, so instead of letting it spill —
 * or clipping it — the cards themselves get compact: smaller media, tighter
 * padding. Nothing is hidden, it just stops wasting vertical space. */
@media (min-width: 1024px) and (max-height: 900px) {
  /* The news block sizes itself from four custom properties, so compacting it
     is a matter of smaller media and a shorter featured floor — no restating of
     the layout, and no risk of squeezing a card below its own text. */
  #news {
    --news-media-h: 340px;
    --news-card-min: 570px;
    --news-side-media-h: 132px;
  }
  #news .news-head { margin-bottom: 1.25rem; }
  #news .news-all { margin-top: 1.25rem; }

  /* Same custom-property lever as the news block above. */
  .live-match-center { --lmc-feat-min: 520px; --lmc-crest: 96px; }
  .live-match-center .lmc__head { margin-bottom: 1.25rem; }
  .live-match-center .lmc-feat__teams { padding: 16px 0; }
  .live-match-center .lmc-fact { min-height: 72px; }
  .live-match-center .lmc-row { min-height: 0; }
}

/* 1366x768 and similar: one more notch of compression to land on the viewport. */
@media (min-width: 1280px) and (max-height: 800px) {
  #news {
    --news-media-h: 290px;
    --news-card-min: 510px;
    --news-side-media-h: 112px;
  }
  #news .news-head { margin-bottom: 0.9rem; }
  #news .news-all { margin-top: 0.9rem; }
  #news .news-card__body { padding: 20px 24px 22px; }
  #news .news-card__title { margin-top: 12px; }
  #news .news-btn { margin-top: 16px; }
  /* On a 768px-tall laptop the side pair, not the featured floor, sets the row
     height — so this is where the last 25px has to come from. */
  #news .news-card--side .news-card__body { padding: 15px 18px; }
  #news .news-card--side .news-card__title { margin-top: 10px; }
  #news .news-card--side .news-more { padding-top: 12px; }

  .live-match-center { --lmc-feat-min: 470px; --lmc-crest: 86px; }
  .live-match-center .lmc__heading h2 { font-size: clamp(40px, 4.4vw, 62px); }
  .live-match-center .lmc__head { margin-bottom: 0.9rem; }
  .live-match-center .lmc-feat { padding: 18px 20px 20px; }
  .live-match-center .lmc-feat__teams { padding: 12px 0; }
  .live-match-center .lmc-fact { min-height: 64px; padding: 11px 14px; }
  .live-match-center .lmc-btn { height: 50px; }
}
/* Hero headline uses literal px sizes (text-[42px]/[104px]) — cap responsively. */
#home h1 {
  font-size: clamp(2.1rem, 5.6vw, 4.6rem) !important;
  line-height: 0.95;
  margin-bottom: 1rem !important;
}
#home p {
  font-size: 1rem !important;
  margin-bottom: 1.25rem !important;
}

/* 3) Tighter vertical section rhythm site-wide (the main whitespace offenders). */
.py-24 { padding-top: 2.9rem; padding-bottom: 2.9rem; }
.py-20 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16 { padding-top: 2.1rem; padding-bottom: 2.1rem; }
.py-14 { padding-top: 1.9rem; padding-bottom: 1.9rem; }
.py-12 { padding-top: 1.7rem; padding-bottom: 1.7rem; }
@media (min-width: 768px) {
  .md\:py-40 { padding-top: 4.25rem; padding-bottom: 4.25rem; }
  .md\:py-24 { padding-top: 3.1rem; padding-bottom: 3.1rem; }
  .md\:py-20 { padding-top: 2.7rem; padding-bottom: 2.7rem; }
  .md\:py-16 { padding-top: 2.3rem; padding-bottom: 2.3rem; }
}

/* 4) Rein in the tallest media panels (news lead + large hero images/cards). */
@media (min-width: 1024px) {
  .lg\:h-80 { height: 16rem; }
  .lg\:h-96 { height: 18rem; }
}
@media (min-width: 768px) {
  .md\:h-72 { height: 13rem; }
  .md\:h-80 { height: 14rem; }
  .md\:h-96 { height: 16rem; }
}

/* 5) Trim the biggest section gaps a little. */
.gap-10 { gap: 2rem; }
.mb-12 { margin-bottom: 2.25rem; }
.mt-16 { margin-top: 2.25rem; }

/* 6) Cap the largest heading sizes a notch (denser, less shouty) — hero h1 keeps
      its own clamp above, so these only affect section/card headings. */
.text-5xl { font-size: 2.15rem; }
.text-6xl { font-size: 2.5rem; }
.text-7xl { font-size: 2.9rem; }
.text-8xl { font-size: 3.3rem; }
@media (min-width: 768px) {
  .md\:text-4xl { font-size: 1.95rem; }
  .md\:text-5xl { font-size: 2.3rem; }
  .md\:text-6xl { font-size: 2.6rem; }
  .md\:text-7xl { font-size: 3rem; }
  .md\:text-8xl { font-size: 3.4rem; }
}
@media (min-width: 1024px) {
  .lg\:text-4xl { font-size: 2rem; }
  .lg\:text-5xl { font-size: 2.35rem; }
  .lg\:text-6xl { font-size: 2.65rem; }
  .lg\:text-7xl { font-size: 3.05rem; }
  .lg\:text-8xl { font-size: 3.6rem; }
}