/* =========================================================
   KAMGO MEDIA
   THE VOICE OF EAST AFRICAN FOOTBALL
   CSS — PART 1
   FOUNDATION + HEADER + NAVIGATION
   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ========================================================= */

:root{

  /* Brand */
  --navy:#071A2B;
  --navy-dark:#06141F;
  --navy-light:#0D2940;

  --gold:#D4A017;
  --gold-light:#E8C34A;

  --green:#008C45;
  --green-dark:#006B35;

  /* Backgrounds */
  --white:#FFFFFF;
  --soft:#F8FAFC;
  --gray-50:#F1F5F9;
  --gray-100:#E2E8F0;
  --gray-200:#CBD5E1;
  --gray-500:#64748B;
  --gray-700:#334155;
  --gray-900:#0F172A;

  /* Typography */
  --font-main:"Inter",sans-serif;
  --font-heading:"Oswald",sans-serif;

  /* Layout */
  --container:1240px;

  /* Radius */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;

  /* Shadows */
  --shadow-sm:0 2px 8px rgba(7,26,43,.06);
  --shadow-md:0 10px 30px rgba(7,26,43,.10);
  --shadow-lg:0 20px 50px rgba(7,26,43,.16);

  /* Transition */
  --transition:.25s ease;

}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after{

  margin:0;
  padding:0;
  box-sizing:border-box;

}


html{

  scroll-behavior:smooth;
  font-size:16px;

}


body{

  font-family:var(--font-main);
  color:var(--gray-900);
  background:var(--white);

  line-height:1.6;

  overflow-x:hidden;

}


img{

  max-width:100%;
  display:block;

}


a{

  color:inherit;
  text-decoration:none;

}


button,
input{

  font:inherit;

}


button{

  border:0;
  cursor:pointer;

}


ul,
ol{

  list-style:none;

}


/* =========================================================
   3. GLOBAL CONTAINER
   ========================================================= */

.container{

  width:min(
    calc(100% - 40px),
    var(--container)
  );

  margin-inline:auto;

}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{

  font-family:var(--font-heading);

  line-height:1.15;

  font-weight:700;

  letter-spacing:-.01em;

}


p{

  color:var(--gray-700);

}


.section-kicker{

  display:inline-block;

  margin-bottom:8px;

  color:var(--gold);

  font-family:var(--font-main);

  font-size:.72rem;

  font-weight:800;

  letter-spacing:.16em;

  text-transform:uppercase;

}


/* =========================================================
   5. BUTTONS
   ========================================================= */

.btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:48px;

  padding:0 24px;

  border-radius:var(--radius-sm);

  font-size:.9rem;

  font-weight:800;

  transition:
    transform var(--transition),
    background var(--transition),
    color var(--transition),
    border-color var(--transition);

}


.btn:hover{

  transform:translateY(-2px);

}


.btn-primary{

  color:var(--white);

  background:var(--gold);

}


.btn-primary:hover{

  background:var(--gold-light);

}


.btn-outline{

  color:var(--white);

  border:1px solid rgba(255,255,255,.65);

  background:rgba(255,255,255,.06);

}


.btn-outline:hover{

  background:var(--white);

  color:var(--navy);

}


/* =========================================================
   6. SITE HEADER
   ========================================================= */

.site-header{

  position:sticky;

  top:0;

  z-index:1000;

  background:var(--navy);

  border-bottom:1px solid rgba(255,255,255,.08);

}


.header-inner{

  min-height:78px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

}


/* =========================================================
   7. BRAND
   ========================================================= */

.brand{

  display:inline-flex;

  align-items:center;

  gap:10px;

  flex-shrink:0;

}


.brand-mark{

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:var(--gold);

  color:var(--navy);

  font-family:var(--font-heading);

  font-size:1.6rem;

  font-weight:700;

}


.brand-text{

  display:flex;

  flex-direction:column;

  line-height:1;

}


.brand-text strong{

  color:var(--white);

  font-family:var(--font-heading);

  font-size:1.35rem;

  letter-spacing:.04em;

}


.brand-text small{

  margin-top:4px;

  color:var(--gold);

  font-size:.55rem;

  font-weight:800;

  letter-spacing:.32em;

}


/* =========================================================
   8. DESKTOP NAVIGATION
   ========================================================= */

.main-nav{

  display:flex;

  align-items:center;

  gap:4px;

}


.main-nav a{

  position:relative;

  padding:29px 13px;

  color:rgba(255,255,255,.78);

  font-size:.82rem;

  font-weight:700;

  transition:
    color var(--transition);

}


.main-nav a::after{

  content:"";

  position:absolute;

  left:13px;
  right:13px;

  bottom:18px;

  height:2px;

  background:var(--gold);

  transform:scaleX(0);

  transform-origin:center;

  transition:transform var(--transition);

}


.main-nav a:hover,
.main-nav a.active{

  color:var(--white);

}


.main-nav a:hover::after,
.main-nav a.active::after{

  transform:scaleX(1);

}


/* =========================================================
   9. HEADER ACTIONS
   ========================================================= */

.header-actions{

  display:flex;

  align-items:center;

  gap:10px;

}


.search-btn{

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:var(--white);

  background:rgba(255,255,255,.08);

  transition:
    background var(--transition),
    transform var(--transition);

}


.search-btn:hover{

  background:rgba(255,255,255,.16);

  transform:translateY(-1px);

}


.search-btn span{

  font-size:1.6rem;

  line-height:1;

}


/* =========================================================
   10. MOBILE MENU BUTTON
   ========================================================= */

.menu-btn{

  width:42px;
  height:42px;

  display:none;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:5px;

  border-radius:8px;

  background:rgba(255,255,255,.08);

}


.menu-btn span{

  width:20px;
  height:2px;

  background:var(--white);

  border-radius:2px;

  transition:
    transform var(--transition),
    opacity var(--transition);

}


/* =========================================================
   11. MOBILE NAVIGATION
   ========================================================= */

.mobile-nav{

  display:none;

  padding:8px 20px 20px;

  background:var(--navy-dark);

  border-top:1px solid rgba(255,255,255,.06);

}


.mobile-nav a{

  display:block;

  padding:13px 0;

  color:rgba(255,255,255,.8);

  border-bottom:1px solid rgba(255,255,255,.06);

  font-size:.9rem;

  font-weight:700;

}


.mobile-nav a:last-child{

  border-bottom:0;

}


.mobile-nav a:hover{

  color:var(--gold);

}


/* =========================================================
   12. BREAKING NEWS BAR
   ========================================================= */

.breaking-bar{

  background:var(--green);

  color:var(--white);

  overflow:hidden;

}


.breaking-inner{

  min-height:42px;

  display:flex;

  align-items:center;

}


.breaking-label{

  position:relative;

  z-index:2;

  flex-shrink:0;

  min-height:42px;

  display:flex;

  align-items:center;

  padding:0 18px;

  margin-left:-1px;

  background:var(--gold);

  color:var(--navy);

  font-size:.7rem;

  font-weight:900;

  letter-spacing:.1em;

}


.breaking-content{

  min-width:0;

  padding-left:18px;

  white-space:nowrap;

  overflow:hidden;

}


#breakingNews{

  overflow:hidden;

  text-overflow:ellipsis;

  font-size:.78rem;

  font-weight:600;

}


/* =========================================================
   13. SECTION HEADINGS
   ========================================================= */

.section-heading{

  margin-bottom:30px;

}


.section-heading h2{

  color:var(--navy);

  font-size:clamp(
    1.8rem,
    3vw,
    2.5rem
  );

}


.section-heading-row{

  display:flex;

  align-items:end;

  justify-content:space-between;

  gap:20px;

}


.view-all{

  color:var(--green);

  font-size:.8rem;

  font-weight:800;

  white-space:nowrap;

}


.view-all:hover{

  color:var(--gold);

}


/* =========================================================
   14. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width:1050px){

  .main-nav{

    gap:0;

  }


  .main-nav a{

    padding-inline:8px;

    font-size:.75rem;

  }


  .main-nav a::after{

    left:8px;
    right:8px;

  }

}


/* =========================================================
   15. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width:800px){

  .container{

    width:min(
      calc(100% - 28px),
      var(--container)
    );

  }


  .header-inner{

    min-height:68px;

  }


  .main-nav{

    display:none;

  }


  .menu-btn{

    display:flex;

  }


  .mobile-nav.open{

    display:block;

  }


  .brand-mark{

    width:38px;
    height:38px;

    font-size:1.4rem;

  }


  .brand-text strong{

    font-size:1.15rem;

  }


  .breaking-label{

    padding-inline:12px;

  }


  .section-heading-row{

    align-items:flex-start;

    flex-direction:column;

  }

}


/* =========================================================
   16. SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

  .container{

    width:calc(100% - 24px);

  }


  .header-actions{

    gap:6px;

  }


  .search-btn,
  .menu-btn{

    width:38px;
    height:38px;

  }


  .brand{

    gap:7px;

  }


  .brand-mark{

    width:35px;
    height:35px;

    font-size:1.25rem;

  }


  .brand-text strong{

    font-size:1rem;

  }


  .brand-text small{

    font-size:.48rem;

  }


  .breaking-inner{

    min-height:38px;

  }


  .breaking-label{

    min-height:38px;

    font-size:.62rem;

  }


  #breakingNews{

    font-size:.7rem;

  }

}
/* =========================================================
   KAMGO MEDIA
   CSS — PART 2/8
   HERO SECTION
   ========================================================= */


/* =========================================================
   17. HERO
   ========================================================= */

.hero{

  position:relative;

  min-height:calc(100vh - 120px);

  display:flex;

  align-items:center;

  overflow:hidden;

  background:

    linear-gradient(
      90deg,
      rgba(6,20,31,.94) 0%,
      rgba(6,20,31,.78) 42%,
      rgba(6,20,31,.42) 75%,
      rgba(6,20,31,.58) 100%
    ),

    url("../assets/images/hero/stadium.webp")
    center center /
    cover no-repeat;

}


/* =========================================================
   18. HERO OVERLAY
   ========================================================= */

.hero-overlay{

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(
      180deg,
      rgba(7,26,43,.15) 0%,
      rgba(7,26,43,.08) 45%,
      rgba(6,20,31,.70) 100%
    );

}


/* =========================================================
   19. HERO CONTENT
   ========================================================= */

.hero-content{

  position:relative;

  z-index:2;

  padding-top:90px;
  padding-bottom:100px;

  max-width:900px;

}


.hero-content .category-badge{

  display:inline-flex;

  align-items:center;

  min-height:32px;

  margin-bottom:20px;

  padding:0 13px;

  border-left:3px solid var(--gold);

  background:rgba(7,26,43,.72);

  color:var(--gold-light);

  font-size:.68rem;

  font-weight:900;

  letter-spacing:.14em;

  text-transform:uppercase;

  backdrop-filter:blur(6px);

}


/* =========================================================
   20. HERO TITLE
   ========================================================= */

.hero h1{

  max-width:850px;

  color:var(--white);

  font-size:clamp(
    3.2rem,
    7vw,
    6.8rem
  );

  font-weight:700;

  line-height:.96;

  letter-spacing:-.035em;

  text-transform:uppercase;

  text-shadow:
    0 5px 25px rgba(0,0,0,.28);

}


.hero h1::first-line{

  color:var(--white);

}


/* =========================================================
   21. HERO DESCRIPTION
   ========================================================= */

.hero p{

  max-width:650px;

  margin-top:25px;

  color:rgba(255,255,255,.78);

  font-size:clamp(
    .95rem,
    1.5vw,
    1.12rem
  );

  line-height:1.75;

}


/* =========================================================
   22. HERO ACTIONS
   ========================================================= */

.hero-actions{

  display:flex;

  align-items:center;

  gap:12px;

  margin-top:34px;

}


/* =========================================================
   23. HERO VISUAL DEPTH
   ========================================================= */

.hero::after{

  content:"";

  position:absolute;

  right:-15%;

  bottom:-40%;

  width:55vw;

  height:55vw;

  border-radius:50%;

  border:1px solid rgba(212,160,23,.18);

  box-shadow:
    0 0 0 80px rgba(212,160,23,.025),
    0 0 0 160px rgba(212,160,23,.018);

  pointer-events:none;

}


/* =========================================================
   24. HERO RESPONSIVE — TABLET
   ========================================================= */

@media (max-width:900px){

  .hero{

    min-height:720px;

    background-position:center center;

  }


  .hero-content{

    padding-top:80px;

    padding-bottom:90px;

  }


  .hero h1{

    font-size:clamp(
      3rem,
      9vw,
      5.2rem
    );

  }

}


/* =========================================================
   25. HERO RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width:600px){

  .hero{

    min-height:650px;

    align-items:flex-end;

    background-position:
      58% center;

    background:

      linear-gradient(
        180deg,
        rgba(6,20,31,.28) 0%,
        rgba(6,20,31,.55) 45%,
        rgba(6,20,31,.96) 100%
      ),

      url("../assets/images/hero/stadium.webp")
      58% center /
      cover no-repeat;

  }


  .hero-content{

    padding-top:100px;

    padding-bottom:60px;

  }


  .hero-content .category-badge{

    margin-bottom:15px;

    font-size:.6rem;

  }


  .hero h1{

    font-size:clamp(
      2.7rem,
      14vw,
      4rem
    );

    line-height:.95;

  }


  .hero p{

    margin-top:20px;

    font-size:.9rem;

    line-height:1.65;

  }


  .hero-actions{

    width:100%;

    margin-top:27px;

  }


  .hero-actions .btn{

    flex:1;

    min-height:46px;

    padding-inline:14px;

    font-size:.78rem;

  }


  .hero::after{

    display:none;

  }

}


/* =========================================================
   26. EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width:380px){

  .hero{

    min-height:610px;

  }


  .hero h1{

    font-size:2.55rem;

  }


  .hero-actions{

    flex-direction:column;

    align-items:stretch;

  }


  .hero-actions .btn{

    width:100%;

  }

}
/* =========================================================
   KAMGO MEDIA
   CSS — PART 3/8
   TRENDING + FEATURED STORIES
   ========================================================= */


/* =========================================================
   27. TRENDING SECTION
   ========================================================= */

.trending-section{

  padding:70px 0;

  background:var(--soft);

  border-bottom:1px solid var(--gray-100);

}


.trending-section .section-heading{

  margin-bottom:24px;

}


/* =========================================================
   28. TRENDING GRID
   ========================================================= */

.trending-grid{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;

}


/* =========================================================
   29. TRENDING CARD
   ========================================================= */

.trending-card{

  position:relative;

  min-height:170px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  overflow:hidden;

  border-radius:var(--radius-md);

  background:var(--navy);

  box-shadow:var(--shadow-sm);

  isolation:isolate;

}


.trending-card img{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .5s ease;

}


.trending-card::after{

  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  background:

    linear-gradient(
      180deg,
      rgba(7,26,43,.05) 20%,
      rgba(7,26,43,.90) 100%
    );

}


.trending-card:hover img{

  transform:scale(1.07);

}


.trending-content{

  position:relative;

  z-index:2;

  padding:20px;

}


.trending-number{

  position:absolute;

  top:16px;
  left:16px;

  z-index:3;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:var(--gold);

  color:var(--navy);

  font-family:var(--font-heading);

  font-size:1rem;

  font-weight:700;

}


.trending-category{

  display:block;

  margin-bottom:7px;

  color:var(--gold-light);

  font-size:.62rem;

  font-weight:800;

  letter-spacing:.1em;

  text-transform:uppercase;

}


.trending-title{

  color:var(--white);

  font-family:var(--font-heading);

  font-size:1.05rem;

  line-height:1.18;

}


/* =========================================================
   30. FEATURED SECTION
   ========================================================= */

.featured-section{

  padding:90px 0;

  background:var(--white);

}


/* =========================================================
   31. FEATURED GRID
   ========================================================= */

.featured-grid{

  display:grid;

  grid-template-columns:
    1.55fr
    1fr
    1fr;

  gap:20px;

}


/* =========================================================
   32. FEATURED CARD
   ========================================================= */

.featured-card{

  position:relative;

  min-height:390px;

  overflow:hidden;

  border-radius:var(--radius-lg);

  background:var(--navy);

  box-shadow:var(--shadow-md);

  isolation:isolate;

}


.featured-card img{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .6s ease;

}


.featured-card::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  background:

    linear-gradient(
      180deg,
      rgba(7,26,43,.02) 15%,
      rgba(7,26,43,.20) 45%,
      rgba(7,26,43,.95) 100%
    );

}


.featured-card:hover img{

  transform:scale(1.06);

}


/* =========================================================
   33. FEATURED CONTENT
   ========================================================= */

.featured-content{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:2;

  padding:28px;

}


.featured-category{

  display:inline-flex;

  align-items:center;

  min-height:25px;

  padding:0 9px;

  margin-bottom:12px;

  background:var(--gold);

  color:var(--navy);

  border-radius:3px;

  font-size:.58rem;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;

}


.featured-title{

  max-width:700px;

  color:var(--white);

  font-family:var(--font-heading);

  font-size:clamp(
    1.45rem,
    2.4vw,
    2.35rem
  );

  line-height:1.08;

}


.featured-meta{

  display:flex;

  align-items:center;

  gap:10px;

  margin-top:14px;

  color:rgba(255,255,255,.68);

  font-size:.7rem;

}


.featured-meta span{

  display:flex;

  align-items:center;

}


.featured-meta span + span::before{

  content:"";

  width:4px;
  height:4px;

  margin-right:10px;

  border-radius:50%;

  background:var(--gold);

}


/* =========================================================
   34. FEATURED SECONDARY CARDS
   ========================================================= */

.featured-card.secondary{

  min-height:390px;

}


.featured-card.secondary .featured-content{

  padding:22px;

}


.featured-card.secondary .featured-title{

  font-size:1.45rem;

}


/* =========================================================
   35. EMPTY CONTENT STATE
   ========================================================= */

.featured-grid:empty::after{

  content:"Featured stories will appear here.";

  grid-column:1 / -1;

  min-height:180px;

  display:grid;

  place-items:center;

  border:1px dashed var(--gray-200);

  border-radius:var(--radius-md);

  color:var(--gray-500);

  font-size:.9rem;

}


/* =========================================================
   36. TRENDING EMPTY STATE
   ========================================================= */

.trending-grid:empty::after{

  content:"Trending stories will appear here.";

  grid-column:1 / -1;

  min-height:130px;

  display:grid;

  place-items:center;

  border:1px dashed var(--gray-200);

  border-radius:var(--radius-md);

  color:var(--gray-500);

  background:var(--white);

  font-size:.85rem;

}


/* =========================================================
   37. TABLET
   ========================================================= */

@media (max-width:950px){

  .trending-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .featured-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .featured-card:first-child{

    grid-column:1 / -1;

  }


  .featured-card:first-child .featured-title{

    font-size:2rem;

  }

}


/* =========================================================
   38. MOBILE
   ========================================================= */

@media (max-width:600px){

  .trending-section{

    padding:55px 0;

  }


  .featured-section{

    padding:65px 0;

  }


  .trending-grid{

    grid-template-columns:1fr;

    gap:14px;

  }


  .trending-card{

    min-height:145px;

  }


  .featured-grid{

    grid-template-columns:1fr;

    gap:15px;

  }


  .featured-card,
  .featured-card.secondary{

    min-height:330px;

  }


  .featured-card:first-child{

    grid-column:auto;

  }


  .featured-card:first-child .featured-title{

    font-size:1.7rem;

  }


  .featured-content{

    padding:21px;

  }


  .featured-card.secondary .featured-content{

    padding:20px;

  }


  .featured-card.secondary .featured-title{

    font-size:1.3rem;

  }

}


/* =========================================================
   39. SMALL MOBILE
   ========================================================= */

@media (max-width:380px){

  .trending-card{

    min-height:135px;

  }


  .trending-content{

    padding:17px;

  }


  .trending-title{

    font-size:.98rem;

  }


  .featured-card,
  .featured-card.secondary{

    min-height:300px;

  }

}
/* =========================================================
   KAMGO MEDIA
   CSS — PART 4/8
   LATEST NEWS + SIDEBAR + FOOTBALL FOCUS
   ========================================================= */


/* =========================================================
   40. LATEST NEWS SECTION
   ========================================================= */

.latest-section{

  padding:90px 0;

  background:var(--soft);

}


/* =========================================================
   41. LATEST NEWS LAYOUT
   ========================================================= */

.latest-layout{

  display:grid;

  grid-template-columns:
    minmax(0, 1fr)
    340px;

  gap:35px;

  align-items:start;

}


/* =========================================================
   42. NEWS LIST
   ========================================================= */

.news-list{

  display:flex;

  flex-direction:column;

  gap:18px;

}


/* =========================================================
   43. NEWS ITEM
   ========================================================= */

.news-item{

  display:grid;

  grid-template-columns:
    240px
    minmax(0, 1fr);

  gap:22px;

  padding-bottom:18px;

  border-bottom:1px solid var(--gray-200);

}


.news-item:last-child{

  border-bottom:0;

}


/* =========================================================
   44. NEWS IMAGE
   ========================================================= */

.news-image{

  position:relative;

  min-height:160px;

  overflow:hidden;

  border-radius:var(--radius-md);

  background:var(--gray-100);

}


.news-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .5s ease;

}


.news-item:hover .news-image img{

  transform:scale(1.05);

}


/* =========================================================
   45. NEWS CATEGORY
   ========================================================= */

.news-category{

  display:inline-block;

  margin-bottom:8px;

  color:var(--green);

  font-size:.64rem;

  font-weight:900;

  letter-spacing:.1em;

  text-transform:uppercase;

}


/* =========================================================
   46. NEWS TITLE
   ========================================================= */

.news-title{

  color:var(--navy);

  font-family:var(--font-heading);

  font-size:1.45rem;

  line-height:1.15;

  transition:
    color var(--transition);

}


.news-item:hover .news-title{

  color:var(--green);

}


/* =========================================================
   47. NEWS EXCERPT
   ========================================================= */

.news-excerpt{

  margin-top:9px;

  color:var(--gray-500);

  font-size:.82rem;

  line-height:1.65;

}


.news-meta{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;

  margin-top:13px;

  color:var(--gray-500);

  font-size:.68rem;

}


.news-meta span + span::before{

  content:"•";

  margin-right:8px;

  color:var(--gold);

}


/* =========================================================
   48. NEWS SIDEBAR
   ========================================================= */

.news-sidebar{

  position:sticky;

  top:100px;

}


.sidebar-card{

  padding:26px;

  border-radius:var(--radius-lg);

  background:var(--navy);

  box-shadow:var(--shadow-md);

}


.sidebar-card .section-kicker{

  color:var(--gold-light);

}


.sidebar-card h3{

  margin-top:4px;

  margin-bottom:22px;

  color:var(--white);

  font-size:1.7rem;

}


/* =========================================================
   49. MOST READ ITEM
   ========================================================= */

.most-read-item{

  display:grid;

  grid-template-columns:
    34px
    1fr;

  gap:12px;

  padding:15px 0;

  border-top:1px solid rgba(255,255,255,.10);

}


.most-read-number{

  color:var(--gold);

  font-family:var(--font-heading);

  font-size:1.5rem;

  font-weight:700;

}


.most-read-title{

  color:rgba(255,255,255,.9);

  font-family:var(--font-heading);

  font-size:1rem;

  line-height:1.2;

  transition:
    color var(--transition);

}


.most-read-item:hover .most-read-title{

  color:var(--gold-light);

}


/* =========================================================
   50. FOOTBALL FOCUS
   ========================================================= */

.football-focus{

  position:relative;

  overflow:hidden;

  padding:95px 0;

  background:

    linear-gradient(
      110deg,
      var(--navy-dark),
      var(--navy)
    );

}


.football-focus::before{

  content:"";

  position:absolute;

  width:600px;
  height:600px;

  right:-250px;
  top:-250px;

  border-radius:50%;

  border:1px solid rgba(212,160,23,.15);

  box-shadow:

    0 0 0 80px rgba(212,160,23,.025),
    0 0 0 160px rgba(212,160,23,.015);

}


.football-focus::after{

  content:"";

  position:absolute;

  width:350px;
  height:350px;

  left:-180px;
  bottom:-220px;

  border-radius:50%;

  background:

    radial-gradient(
      circle,
      rgba(0,140,69,.20),
      transparent 70%
    );

}


/* =========================================================
   51. FOCUS GRID
   ========================================================= */

.focus-grid{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    1.25fr
    1fr;

  gap:70px;

  align-items:center;

}


/* =========================================================
   52. FOCUS CONTENT
   ========================================================= */

.focus-content{

  max-width:650px;

}


.focus-content .section-kicker{

  color:var(--gold);

}


.focus-content h2{

  margin-top:5px;

  color:var(--white);

  font-size:clamp(
    2.2rem,
    4vw,
    4rem
  );

  line-height:1.02;

}


.focus-content p{

  max-width:590px;

  margin-top:22px;

  color:rgba(255,255,255,.68);

  font-size:.98rem;

  line-height:1.8;

}


.focus-content .btn{

  margin-top:30px;

}


/* =========================================================
   53. FOCUS STATS
   ========================================================= */

.focus-stats{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:12px;

}


.stat-card{

  min-height:155px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  padding:20px;

  border:1px solid rgba(255,255,255,.10);

  border-radius:var(--radius-lg);

  background:rgba(255,255,255,.045);

  backdrop-filter:blur(8px);

  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);

}


.stat-card:hover{

  transform:translateY(-5px);

  border-color:rgba(212,160,23,.45);

  background:rgba(255,255,255,.07);

}


.stat-card strong{

  color:var(--gold);

  font-family:var(--font-heading);

  font-size:2rem;

  line-height:1;

}


.stat-card span{

  margin-top:8px;

  color:rgba(255,255,255,.65);

  font-size:.67rem;

  font-weight:700;

  letter-spacing:.04em;

  text-transform:uppercase;

}


/* =========================================================
   54. NEWS EMPTY STATE
   ========================================================= */

.news-list:empty::after{

  content:"Latest news will appear here.";

  min-height:180px;

  display:grid;

  place-items:center;

  border:1px dashed var(--gray-200);

  border-radius:var(--radius-md);

  color:var(--gray-500);

  background:var(--white);

  font-size:.85rem;

}


#mostRead:empty::after{

  content:"Popular stories will appear here.";

  display:block;

  padding:20px 0;

  color:rgba(255,255,255,.55);

  font-size:.78rem;

}


/* =========================================================
   55. TABLET
   ========================================================= */

@media (max-width:1000px){

  .latest-layout{

    grid-template-columns:
      minmax(0, 1fr)
      290px;

    gap:25px;

  }


  .news-item{

    grid-template-columns:
      190px
      minmax(0,1fr);

    gap:17px;

  }


  .news-title{

    font-size:1.25rem;

  }


  .focus-grid{

    grid-template-columns:1fr;

    gap:45px;

  }


  .focus-content{

    max-width:760px;

  }

}


/* =========================================================
   56. MOBILE
   ========================================================= */

@media (max-width:700px){

  .latest-section{

    padding:65px 0;

  }


  .latest-layout{

    grid-template-columns:1fr;

  }


  .news-sidebar{

    position:static;

  }


  .news-item{

    grid-template-columns:
      135px
      minmax(0,1fr);

    gap:15px;

  }


  .news-image{

    min-height:125px;

  }


  .news-title{

    font-size:1.12rem;

  }


  .news-excerpt{

    display:none;

  }


  .news-meta{

    margin-top:9px;

    font-size:.62rem;

  }


  .sidebar-card{

    padding:22px;

  }


  .football-focus{

    padding:70px 0;

  }


  .focus-grid{

    gap:35px;

  }


  .focus-content h2{

    font-size:2.5rem;

  }


  .focus-content p{

    font-size:.88rem;

  }


  .focus-stats{

    grid-template-columns:
      repeat(3,1fr);

    gap:8px;

  }


  .stat-card{

    min-height:120px;

    padding:12px 7px;

  }


  .stat-card strong{

    font-size:1.5rem;

  }


  .stat-card span{

    font-size:.55rem;

  }

}


/* =========================================================
   57. SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

  .news-item{

    grid-template-columns:
      110px
      minmax(0,1fr);

    gap:12px;

  }


  .news-image{

    min-height:105px;

  }


  .news-title{

    font-size:1rem;

  }


  .news-category{

    font-size:.56rem;

  }


  .focus-content h2{

    font-size:2.15rem;

  }


  .focus-stats{

    grid-template-columns:1fr;

  }


  .stat-card{

    min-height:85px;

  }

}
/* =========================================================
   KAMGO MEDIA
   CSS — PART 5/8
   VIDEOS + NEWSLETTER + FOOTER
   ========================================================= */


/* =========================================================
   58. VIDEOS SECTION
   ========================================================= */

.videos-section{

  padding:90px 0;

  background:var(--white);

}


/* =========================================================
   59. VIDEOS GRID
   ========================================================= */

.videos-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:20px;

}


/* =========================================================
   60. VIDEO CARD
   ========================================================= */

.video-card{

  position:relative;

  overflow:hidden;

  border-radius:var(--radius-lg);

  background:var(--navy);

  box-shadow:var(--shadow-sm);

}


.video-thumbnail{

  position:relative;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:var(--gray-100);

}


.video-thumbnail img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .5s ease;

}


.video-card:hover .video-thumbnail img{

  transform:scale(1.06);

}


/* =========================================================
   61. VIDEO OVERLAY
   ========================================================= */

.video-thumbnail::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(7,26,43,.65) 100%
    );

}


.video-play{

  position:absolute;

  left:50%;
  top:50%;

  z-index:3;

  width:54px;
  height:54px;

  display:grid;

  place-items:center;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:var(--gold);

  color:var(--navy);

  box-shadow:
    0 8px 25px rgba(0,0,0,.25);

  transition:
    transform var(--transition),
    background var(--transition);

}


.video-play::before{

  content:"";

  margin-left:4px;

  width:0;
  height:0;

  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid var(--navy);

}


.video-card:hover .video-play{

  transform:
    translate(-50%,-50%)
    scale(1.08);

  background:var(--gold-light);

}


/* =========================================================
   62. VIDEO CONTENT
   ========================================================= */

.video-content{

  padding:19px 20px 21px;

}


.video-category{

  display:block;

  margin-bottom:7px;

  color:var(--gold-light);

  font-size:.6rem;

  font-weight:900;

  letter-spacing:.1em;

  text-transform:uppercase;

}


.video-title{

  color:var(--white);

  font-family:var(--font-heading);

  font-size:1.2rem;

  line-height:1.15;

}


.video-meta{

  margin-top:10px;

  color:rgba(255,255,255,.55);

  font-size:.65rem;

}


/* =========================================================
   63. VIDEO EMPTY STATE
   ========================================================= */

.videos-grid:empty::after{

  content:"Latest videos will appear here.";

  grid-column:1 / -1;

  min-height:190px;

  display:grid;

  place-items:center;

  border:1px dashed var(--gray-200);

  border-radius:var(--radius-md);

  color:var(--gray-500);

  background:var(--soft);

  font-size:.85rem;

}


/* =========================================================
   64. NEWSLETTER SECTION
   ========================================================= */

.newsletter-section{

  padding:70px 0;

  background:var(--soft);

}


/* =========================================================
   65. NEWSLETTER BOX
   ========================================================= */

.newsletter-box{

  position:relative;

  overflow:hidden;

  display:grid;

  grid-template-columns:
    1fr
    minmax(300px,460px);

  gap:50px;

  align-items:center;

  padding:55px 60px;

  border-radius:var(--radius-xl);

  background:

    linear-gradient(
      120deg,
      var(--navy-dark),
      var(--navy)
    );

  box-shadow:var(--shadow-lg);

}


/* Decorative element */

.newsletter-box::after{

  content:"";

  position:absolute;

  width:320px;
  height:320px;

  right:-130px;
  top:-180px;

  border-radius:50%;

  border:1px solid rgba(212,160,23,.22);

  box-shadow:
    0 0 0 45px rgba(212,160,23,.025),
    0 0 0 90px rgba(212,160,23,.018);

}


.newsletter-box .section-kicker{

  color:var(--gold);

}


.newsletter-box h2{

  position:relative;

  z-index:2;

  margin-top:5px;

  color:var(--white);

  font-size:clamp(
    2rem,
    4vw,
    3.2rem
  );

}


.newsletter-box p{

  position:relative;

  z-index:2;

  max-width:600px;

  margin-top:12px;

  color:rgba(255,255,255,.65);

  font-size:.88rem;

}


/* =========================================================
   66. NEWSLETTER FORM
   ========================================================= */

.newsletter-form{

  position:relative;

  z-index:3;

  display:flex;

  gap:8px;

}


.newsletter-form input{

  flex:1;

  min-width:0;

  height:50px;

  padding:0 16px;

  border:1px solid rgba(255,255,255,.15);

  border-radius:var(--radius-sm);

  outline:none;

  background:rgba(255,255,255,.08);

  color:var(--white);

  font-size:.82rem;

}


.newsletter-form input::placeholder{

  color:rgba(255,255,255,.45);

}


.newsletter-form input:focus{

  border-color:var(--gold);

  background:rgba(255,255,255,.11);

}


.newsletter-form .btn{

  min-height:50px;

  flex-shrink:0;

}


/* =========================================================
   67. SITE FOOTER
   ========================================================= */

.site-footer{

  background:var(--navy-dark);

  color:var(--white);

}


/* =========================================================
   68. FOOTER GRID
   ========================================================= */

.footer-grid{

  display:grid;

  grid-template-columns:
    1.6fr
    1fr
    1fr
    1.1fr;

  gap:55px;

  padding-top:70px;

  padding-bottom:60px;

}


/* =========================================================
   69. FOOTER BRAND
   ========================================================= */

.footer-brand{

  max-width:370px;

}


.footer-brand .brand{

  margin-bottom:20px;

}


.footer-brand p{

  color:rgba(255,255,255,.55);

  font-size:.8rem;

  line-height:1.8;

}


/* =========================================================
   70. FOOTER COLUMNS
   ========================================================= */

.footer-column{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

}


.footer-column h3{

  margin-bottom:18px;

  color:var(--white);

  font-family:var(--font-main);

  font-size:.78rem;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;

}


.footer-column a,
.footer-column span{

  margin-bottom:10px;

  color:rgba(255,255,255,.55);

  font-size:.76rem;

  transition:
    color var(--transition);

}


.footer-column a:hover{

  color:var(--gold);

}


/* =========================================================
   71. FOOTER BOTTOM
   ========================================================= */

.footer-bottom{

  min-height:70px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  border-top:1px solid rgba(255,255,255,.08);

}


.footer-bottom p{

  color:rgba(255,255,255,.42);

  font-size:.68rem;

}


.footer-legal{

  display:flex;

  align-items:center;

  gap:20px;

}


.footer-legal a{

  color:rgba(255,255,255,.45);

  font-size:.68rem;

}


.footer-legal a:hover{

  color:var(--gold);

}


/* =========================================================
   72. TABLET
   ========================================================= */

@media (max-width:950px){

  .videos-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .newsletter-box{

    grid-template-columns:1fr;

    gap:25px;

    padding:45px;

  }


  .footer-grid{

    grid-template-columns:
      repeat(2,1fr);

    gap:40px;

  }


  .footer-brand{

    max-width:100%;

  }

}


/* =========================================================
   73. MOBILE
   ========================================================= */

@media (max-width:650px){

  .videos-section{

    padding:65px 0;

  }


  .videos-grid{

    grid-template-columns:1fr;

    gap:15px;

  }


  .video-title{

    font-size:1.1rem;

  }


  .newsletter-section{

    padding:55px 0;

  }


  .newsletter-box{

    padding:35px 24px;

    border-radius:var(--radius-lg);

  }


  .newsletter-form{

    flex-direction:column;

  }


  .newsletter-form input{

    width:100%;

  }


  .newsletter-form .btn{

    width:100%;

  }


  .footer-grid{

    grid-template-columns:
      1fr 1fr;

    gap:35px 25px;

    padding-top:55px;

    padding-bottom:45px;

  }


  .footer-brand{

    grid-column:1 / -1;

  }


  .footer-bottom{

    min-height:auto;

    padding-top:20px;

    padding-bottom:20px;

    align-items:flex-start;

    flex-direction:column;

  }

}


/* =========================================================
   74. SMALL MOBILE
   ========================================================= */

@media (max-width:400px){

  .footer-grid{

    grid-template-columns:1fr;

  }


  .footer-brand{

    grid-column:auto;

  }


  .footer-bottom{

    gap:12px;

  }


  .footer-legal{

    gap:15px;

  }

}
/* =========================================================
   KAMGO MEDIA
   CSS — PART 6/8
   SEARCH + ANIMATIONS + LOADING + ACCESSIBILITY
   ========================================================= */


/* =========================================================
   75. SEARCH OVERLAY
   ========================================================= */

.search-overlay{

  position:fixed;

  inset:0;

  z-index:2000;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:25px;

  background:rgba(3,12,20,.92);

  backdrop-filter:blur(12px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .3s ease,
    visibility .3s ease;

}


.search-overlay.open{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

}


/* =========================================================
   76. SEARCH BOX
   ========================================================= */

.search-box{

  position:relative;

  width:min(760px,100%);

  padding:50px;

  border:1px solid rgba(255,255,255,.12);

  border-radius:var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      #0B2539,
      #071A2B
    );

  box-shadow:
    0 30px 100px rgba(0,0,0,.45);

  transform:translateY(20px) scale(.98);

  transition:
    transform .3s ease;

}


.search-overlay.open .search-box{

  transform:translateY(0) scale(1);

}


.search-box .section-kicker{

  color:var(--gold);

}


.search-box h2{

  margin-top:7px;

  color:var(--white);

  font-size:clamp(
    2rem,
    5vw,
    3.3rem
  );

}


/* =========================================================
   77. SEARCH CLOSE
   ========================================================= */

.search-close{

  position:absolute;

  top:20px;
  right:20px;

  width:40px;
  height:40px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:rgba(255,255,255,.08);

  color:var(--white);

  font-size:1.5rem;

  line-height:1;

  transition:
    background var(--transition),
    transform var(--transition);

}


.search-close:hover{

  background:rgba(255,255,255,.16);

  transform:rotate(90deg);

}


/* =========================================================
   78. SEARCH FORM
   ========================================================= */

#searchForm{

  display:flex;

  gap:9px;

  margin-top:30px;

}


#searchInput{

  flex:1;

  min-width:0;

  height:54px;

  padding:0 18px;

  border:1px solid rgba(255,255,255,.14);

  border-radius:var(--radius-sm);

  outline:none;

  background:rgba(255,255,255,.07);

  color:var(--white);

  font-size:.88rem;

}


#searchInput::placeholder{

  color:rgba(255,255,255,.42);

}


#searchInput:focus{

  border-color:var(--gold);

  background:rgba(255,255,255,.10);

}


#searchForm .btn{

  min-height:54px;

}


/* =========================================================
   79. BODY LOCK WHEN SEARCH IS OPEN
   ========================================================= */

body.search-open{

  overflow:hidden;

}


/* =========================================================
   80. IMAGE LOADING
   ========================================================= */

img{

  background:var(--gray-100);

}


img[data-loaded="false"]{

  opacity:0;

}


img[data-loaded="true"]{

  opacity:1;

  transition:
    opacity .35s ease;

}


/* =========================================================
   81. CONTENT CARD HOVER
   ========================================================= */

.featured-card,
.trending-card,
.video-card,
.news-item{

  transition:
    transform .25s ease;

}


.featured-card:hover,
.trending-card:hover,
.video-card:hover{

  transform:translateY(-3px);

}


/* =========================================================
   82. ACCESSIBILITY — FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible{

  outline:3px solid var(--gold);

  outline-offset:3px;

}


/* =========================================================
   83. SELECTION
   ========================================================= */

::selection{

  background:var(--gold);

  color:var(--navy);

}


/* =========================================================
   84. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{

  width:9px;

}


::-webkit-scrollbar-track{

  background:var(--navy-dark);

}


::-webkit-scrollbar-thumb{

  background:var(--gray-500);

  border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

  background:var(--gold);

}


/* =========================================================
   85. SIMPLE REVEAL ANIMATION
   ========================================================= */

.reveal{

  opacity:0;

  transform:translateY(25px);

  transition:
    opacity .65s ease,
    transform .65s ease;

}


.reveal.visible{

  opacity:1;

  transform:translateY(0);

}


/* =========================================================
   86. STAGGERED CARDS
   ========================================================= */

.trending-card:nth-child(2),
.featured-card:nth-child(2),
.video-card:nth-child(2){

  transition-delay:.05s;

}


.trending-card:nth-child(3),
.featured-card:nth-child(3),
.video-card:nth-child(3){

  transition-delay:.10s;

}


.trending-card:nth-child(4){

  transition-delay:.15s;

}


/* =========================================================
   87. SKELETON LOADING
   ========================================================= */

.loading-skeleton{

  position:relative;

  overflow:hidden;

  background:var(--gray-100);

}


.loading-skeleton::after{

  content:"";

  position:absolute;

  inset:0;

  transform:translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );

  animation:
    skeleton-loading 1.4s infinite;

}


@keyframes skeleton-loading{

  100%{

    transform:translateX(100%);

  }

}


/* =========================================================
   88. SPINNER
   ========================================================= */

.loading-spinner{

  width:34px;
  height:34px;

  border:3px solid var(--gray-200);

  border-top-color:var(--gold);

  border-radius:50%;

  animation:
    spin .8s linear infinite;

}


@keyframes spin{

  to{

    transform:rotate(360deg);

  }

}


/* =========================================================
   89. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  html{

    scroll-behavior:auto;

  }


  *,
  *::before,
  *::after{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;

  }

}


/* =========================================================
   90. SEARCH MOBILE
   ========================================================= */

@media (max-width:600px){

  .search-overlay{

    padding:15px;

  }


  .search-box{

    padding:38px 22px 25px;

    border-radius:var(--radius-lg);

  }


  .search-box h2{

    font-size:2rem;

  }


  #searchForm{

    flex-direction:column;

  }


  #searchInput,
  #searchForm .btn{

    width:100%;

  }

}


/* =========================================================
   91. PRINT
   ========================================================= */

@media print{

  .site-header,
  .breaking-bar,
  .search-overlay,
  .newsletter-section{

    display:none !important;

  }


  body{

    background:#fff;

    color:#000;

  }


  a{

    text-decoration:underline;

  }

}
/* =========================================================
   KAMGO MEDIA
   CSS — PART 7/8
   RESPONSIVE POLISH + STATES + CONTENT UTILITIES
   ========================================================= */


/* =========================================================
   92. GENERAL CONTENT UTILITIES
   ========================================================= */

.text-gold{

  color:var(--gold) !important;

}


.text-green{

  color:var(--green) !important;

}


.text-white{

  color:var(--white) !important;

}


.bg-navy{

  background:var(--navy) !important;

}


.bg-soft{

  background:var(--soft) !important;

}


/* =========================================================
   93. ARTICLE IMAGE UTILITIES
   ========================================================= */

.object-cover{

  width:100%;

  height:100%;

  object-fit:cover;

}


.aspect-video{

  aspect-ratio:16 / 9;

}


.aspect-square{

  aspect-ratio:1 / 1;

}


/* =========================================================
   94. CONTENT ERROR STATE
   ========================================================= */

.content-error{

  padding:35px 20px;

  border:1px solid rgba(220,38,38,.15);

  border-radius:var(--radius-md);

  background:#FEF2F2;

  color:#991B1B;

  text-align:center;

  font-size:.85rem;

}


/* =========================================================
   95. CONTENT NOTICE
   ========================================================= */

.content-notice{

  padding:20px;

  border-left:4px solid var(--gold);

  border-radius:var(--radius-sm);

  background:var(--gray-50);

  color:var(--gray-700);

  font-size:.82rem;

}


/* =========================================================
   96. CATEGORY TAG
   ========================================================= */

.category-tag{

  display:inline-flex;

  align-items:center;

  min-height:26px;

  padding:0 10px;

  border-radius:3px;

  background:var(--green);

  color:var(--white);

  font-size:.58rem;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;

}


/* =========================================================
   97. DATE / TIME
   ========================================================= */

.timestamp{

  color:var(--gray-500);

  font-size:.68rem;

}


.timestamp-live{

  display:inline-flex;

  align-items:center;

  gap:6px;

  color:var(--green);

  font-weight:800;

}


.timestamp-live::before{

  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--green);

  animation:
    live-pulse 1.5s infinite;

}


@keyframes live-pulse{

  0%,
  100%{

    opacity:1;

    transform:scale(1);

  }

  50%{

    opacity:.35;

    transform:scale(.75);

  }

}


/* =========================================================
   98. AUTHOR
   ========================================================= */

.author-info{

  display:flex;

  align-items:center;

  gap:9px;

}


.author-avatar{

  width:34px;
  height:34px;

  overflow:hidden;

  border-radius:50%;

  background:var(--gray-100);

}


.author-avatar img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.author-name{

  color:var(--navy);

  font-size:.72rem;

  font-weight:800;

}


.author-role{

  color:var(--gray-500);

  font-size:.62rem;

}


/* =========================================================
   99. SOCIAL BUTTONS
   ========================================================= */

.social-links{

  display:flex;

  align-items:center;

  gap:8px;

}


.social-link{

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.12);

  border-radius:50%;

  background:rgba(255,255,255,.05);

  color:var(--white);

  font-size:.75rem;

  font-weight:800;

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);

}


.social-link:hover{

  transform:translateY(-2px);

  border-color:var(--gold);

  background:var(--gold);

  color:var(--navy);

}


/* =========================================================
   100. CONTENT PAGINATION
   ========================================================= */

.pagination{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:7px;

  margin-top:45px;

}


.pagination a,
.pagination button{

  min-width:40px;
  height:40px;

  display:grid;

  place-items:center;

  border:1px solid var(--gray-200);

  border-radius:var(--radius-sm);

  background:var(--white);

  color:var(--gray-700);

  font-size:.75rem;

  font-weight:800;

  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);

}


.pagination a:hover,
.pagination button:hover,
.pagination .active{

  border-color:var(--navy);

  background:var(--navy);

  color:var(--white);

}


/* =========================================================
   101. MOBILE TOUCH IMPROVEMENTS
   ========================================================= */

@media (max-width:800px){

  button,
  a{

    -webkit-tap-highlight-color:transparent;

  }


  .btn{

    min-height:46px;

  }


  .pagination{

    gap:5px;

  }


  .pagination a,
  .pagination button{

    min-width:38px;

    height:38px;

  }

}


/* =========================================================
   102. TABLET LAYOUT POLISH
   ========================================================= */

@media (min-width:701px) and (max-width:1100px){

  .featured-grid{

    gap:15px;

  }


  .featured-card{

    min-height:350px;

  }


  .featured-card.secondary{

    min-height:350px;

  }


  .videos-grid{

    gap:16px;

  }


  .video-content{

    padding:17px;

  }


  .newsletter-box{

    gap:30px;

  }

}


/* =========================================================
   103. MOBILE SPACING POLISH
   ========================================================= */

@media (max-width:600px){

  .section-heading{

    margin-bottom:22px;

  }


  .section-heading h2{

    font-size:1.9rem;

  }


  .view-all{

    font-size:.72rem;

  }


  .category-tag{

    min-height:24px;

    font-size:.55rem;

  }


  .content-notice{

    padding:16px;

  }

}


/* =========================================================
   104. VERY SMALL SCREENS
   ========================================================= */

@media (max-width:360px){

  .container{

    width:calc(100% - 20px);

  }


  .hero-content{

    padding-bottom:45px;

  }


  .hero h1{

    font-size:2.35rem;

  }


  .section-heading h2{

    font-size:1.7rem;

  }


  .newsletter-box{

    padding:30px 18px;

  }


  .search-box{

    padding-inline:18px;

  }

}/* =========================================================
   KAMGO MEDIA
   CSS — PART 8/8
   FINAL POLISH + FALLBACKS + UTILITY
   ========================================================= */


/* =========================================================
   105. NO JAVASCRIPT FALLBACK
   ========================================================= */

.no-js-message{

  display:none;

}


.no-js .no-js-message{

  display:block;

  padding:15px 20px;

  background:var(--gold);

  color:var(--navy);

  text-align:center;

  font-size:.8rem;

  font-weight:700;

}


/* =========================================================
   106. HIDDEN UTILITY
   ========================================================= */

.hidden{

  display:none !important;

}


[hidden]{

  display:none !important;

}


/* =========================================================
   107. VISUALLY HIDDEN
   ========================================================= */

.visually-hidden{

  position:absolute !important;

  width:1px !important;
  height:1px !important;

  padding:0 !important;
  margin:-1px !important;

  overflow:hidden !important;

  clip:rect(0,0,0,0) !important;

  white-space:nowrap !important;

  border:0 !important;

}


/* =========================================================
   108. IMAGE FALLBACK
   ========================================================= */

.image-fallback{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:180px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-light)
    );

  color:rgba(255,255,255,.55);

}


.image-fallback::before{

  content:"K";

  position:absolute;

  font-family:var(--font-heading);

  font-size:7rem;

  font-weight:700;

  color:rgba(255,255,255,.035);

}


/* =========================================================
   109. LINK UNDERLINE EFFECT
   ========================================================= */

.animated-link{

  position:relative;

}


.animated-link::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-3px;

  width:100%;
  height:1px;

  background:currentColor;

  transform:scaleX(0);

  transform-origin:right;

  transition:
    transform .25s ease;

}


.animated-link:hover::after{

  transform:scaleX(1);

  transform-origin:left;

}


/* =========================================================
   110. DIVIDER
   ========================================================= */

.divider{

  width:100%;

  height:1px;

  background:var(--gray-200);

}


.divider-dark{

  background:rgba(255,255,255,.10);

}


/* =========================================================
   111. CONTENT WIDTH
   ========================================================= */

.content-narrow{

  width:min(
    100%,
    760px
  );

}


.content-medium{

  width:min(
    100%,
    920px
  );

}


/* =========================================================
   112. TEXT ALIGNMENT
   ========================================================= */

.text-center{

  text-align:center;

}


.text-left{

  text-align:left;

}


.text-right{

  text-align:right;

}


/* =========================================================
   113. DISPLAY UTILITIES
   ========================================================= */

.flex{

  display:flex;

}


.flex-column{

  flex-direction:column;

}


.items-center{

  align-items:center;

}


.justify-center{

  justify-content:center;

}


.justify-between{

  justify-content:space-between;

}


.gap-sm{

  gap:8px;

}


.gap-md{

  gap:16px;

}


.gap-lg{

  gap:30px;

}


/* =========================================================
   114. VISUAL DIVIDER BETWEEN SECTIONS
   ========================================================= */

.section-border{

  border-top:1px solid var(--gray-100);

}


/* =========================================================
   115. BODY OVERFLOW SAFETY
   ========================================================= */

body{

  max-width:100%;

}


/* =========================================================
   116. BUTTON DISABLED
   ========================================================= */

button:disabled,
.btn.disabled{

  opacity:.55;

  cursor:not-allowed;

  pointer-events:none;

}


/* =========================================================
   117. FORM VALIDATION
   ========================================================= */

input:user-invalid{

  border-color:#DC2626;

}


input:user-valid{

  border-color:var(--green);

}


/* =========================================================
   118. EMPTY SEARCH RESULT
   ========================================================= */

.search-empty{

  padding:35px 20px;

  text-align:center;

  color:var(--gray-500);

}


.search-empty strong{

  display:block;

  margin-bottom:5px;

  color:var(--navy);

  font-family:var(--font-heading);

  font-size:1.4rem;

}


/* =========================================================
   119. NOTIFICATION DOT
   ========================================================= */

.notification-dot{

  position:absolute;

  top:-2px;
  right:-2px;

  width:8px;
  height:8px;

  border:2px solid var(--navy);

  border-radius:50%;

  background:var(--green);

}


/* =========================================================
   120. FINAL MOBILE POLISH
   ========================================================= */

@media (max-width:600px){

  .content-narrow,
  .content-medium{

    width:100%;

  }


  .text-center-mobile{

    text-align:center;

  }


  .flex-mobile-column{

    flex-direction:column;

  }


  .hide-mobile{

    display:none !important;

  }

}


/* =========================================================
   121. FINAL DESKTOP UTILITIES
   ========================================================= */

@media (min-width:801px){

  .hide-desktop{

    display:none !important;

  }

}


/* =========================================================
   122. HIGH CONTRAST MODE
   ========================================================= */

@media (prefers-contrast:more){

  .main-nav a,
  .footer-column a,
  .view-all{

    text-decoration:underline;

    text-underline-offset:3px;

  }


  .btn-outline{

    border-width:2px;

  }


  .news-item{

    border-bottom-color:var(--gray-500);

  }

}


/* =========================================================
   123. FINAL FOCUS VISIBILITY
   ========================================================= */

:focus:not(:focus-visible){

  outline:none;

}


/* =========================================================
   124. FINAL IMAGE SAFETY
   ========================================================= */

img{

  height:auto;

}


.featured-card img,
.trending-card img,
.video-thumbnail img,
.news-image img,
.author-avatar img{

  height:100%;

}


/* =========================================================
   125. END OF KAMGO MEDIA CSS
   =========================================================

   CSS PART 1 — FOUNDATION
   CSS PART 2 — HERO
   CSS PART 3 — TRENDING + FEATURED
   CSS PART 4 — LATEST NEWS + FOCUS
   CSS PART 5 — VIDEOS + FOOTER
   CSS PART 6 — SEARCH + ANIMATIONS
   CSS PART 7 — RESPONSIVE POLISH
   CSS PART 8 — FINAL POLISH

   ========================================================= */

/* =========================================================
   KAMGO MEDIA — STEP 1 FINAL OVERRIDES
   These rules complete the existing foundation without
   deleting the original design system.
   ========================================================= */

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.no-js-message{
  display:none;
  padding:12px 20px;
  background:#B91C1C;
  color:#FFFFFF;
  text-align:center;
  font-size:.82rem;
  font-weight:700;
}

.hero-container{
  position:relative;
  width:100%;
  min-height:inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

.hero-content{
  max-width:760px;
}

.hero-content h1{
  margin-bottom:24px;
  color:var(--white);
  font-size:clamp(3rem,7vw,6.5rem);
  line-height:.98;
  letter-spacing:-.035em;
}

.hero-content h1 span{
  display:block;
  color:var(--gold);
}

.hero-content p{
  max-width:650px;
  margin-bottom:32px;
  color:rgba(255,255,255,.82);
  font-size:clamp(.95rem,1.5vw,1.15rem);
  line-height:1.8;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero-badge{
  position:relative;
  z-index:2;
  width:210px;
  height:210px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(7,26,43,.48);
  backdrop-filter:blur(10px);
  box-shadow:0 25px 60px rgba(0,0,0,.28);
  color:var(--white);
  text-align:center;
}

.hero-badge::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(212,160,23,.55);
  border-radius:50%;
}

.hero-badge span{
  position:relative;
  z-index:1;
  color:var(--gold);
  font-family:var(--font-heading);
  font-size:2.3rem;
  font-weight:700;
  letter-spacing:.06em;
}

.hero-badge strong{
  position:relative;
  z-index:1;
  margin-top:-5px;
  font-family:var(--font-heading);
  font-size:1.65rem;
  letter-spacing:.12em;
}

.hero-badge small{
  position:relative;
  z-index:1;
  margin-top:8px;
  color:rgba(255,255,255,.7);
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.18em;
}

.trending-section,
.featured-section,
.latest-section,
.videos-section{
  padding:90px 0;
}

.trending-section{background:var(--soft);}
.featured-section{background:var(--white);}
.latest-section{background:var(--soft);}
.videos-section{background:var(--white);}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:34px;
}

.section-heading > div{min-width:0;}

.trending-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.featured-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.latest-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:32px;
}

.news-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.news-sidebar{min-width:0;}

.sidebar-card{
  padding:26px;
  border:1px solid var(--gray-100);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:var(--shadow-sm);
}

.sidebar-card h3{
  margin-bottom:20px;
  color:var(--navy);
  font-size:1.55rem;
}

.football-focus{
  position:relative;
  overflow:hidden;
  padding:100px 0;
  background:linear-gradient(120deg,var(--navy-dark),var(--navy));
}

.football-focus::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-180px;
  border:1px solid rgba(212,160,23,.18);
  border-radius:50%;
}

.focus-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  align-items:center;
  gap:80px;
}

.focus-content h2{
  max-width:700px;
  margin-bottom:22px;
  color:var(--white);
  font-size:clamp(2.2rem,4vw,4rem);
}

.focus-content p{
  max-width:680px;
  margin-bottom:30px;
  color:rgba(255,255,255,.72);
  line-height:1.85;
}

.focus-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.stat-card{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05);
  text-align:center;
}

.stat-card strong{
  color:var(--gold);
  font-family:var(--font-heading);
  font-size:2rem;
}

.stat-card span{
  margin-top:5px;
  color:rgba(255,255,255,.65);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.videos-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.newsletter-section{
  padding:80px 0;
  background:var(--gray-50);
}

.newsletter-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:50px;
  border-radius:var(--radius-xl);
  background:var(--navy);
  box-shadow:var(--shadow-lg);
}

.newsletter-box h2{
  margin-bottom:10px;
  color:var(--white);
  font-size:clamp(2rem,4vw,3.2rem);
}

.newsletter-box p{
  max-width:620px;
  color:rgba(255,255,255,.68);
}

.newsletter-form{
  width:min(100%,460px);
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.newsletter-form input{
  min-width:0;
  flex:1;
  height:50px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);
  outline:none;
  background:rgba(255,255,255,.08);
  color:var(--white);
}

.newsletter-form input::placeholder{
  color:rgba(255,255,255,.5);
}

.newsletter-form input:focus{
  border-color:var(--gold);
}

.site-footer{
  background:var(--navy-dark);
  color:var(--white);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:50px;
  padding:75px 0 55px;
}

.footer-brand p{
  max-width:380px;
  margin-top:18px;
  color:rgba(255,255,255,.58);
  font-size:.86rem;
  line-height:1.8;
}

.footer-column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-column h3{
  margin-bottom:18px;
  color:var(--gold);
  font-family:var(--font-main);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.footer-column a,
.footer-column span{
  margin-bottom:10px;
  color:rgba(255,255,255,.62);
  font-size:.84rem;
  transition:color var(--transition);
}

.footer-column a:hover{color:var(--gold);}

.social-links{
  display:flex;
  gap:8px;
  margin-top:22px;
}

.social-link{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:var(--white);
  font-size:.72rem;
  font-weight:800;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.social-link:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
  transform:translateY(-2px);
}

.footer-bottom{
  min-height:75px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-bottom p{
  color:rgba(255,255,255,.45);
  font-size:.72rem;
}

.footer-legal{
  display:flex;
  gap:20px;
}

.footer-legal a{
  color:rgba(255,255,255,.45);
  font-size:.72rem;
}

.footer-legal a:hover{color:var(--gold);}

.search-overlay{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(6,20,31,.88);
  backdrop-filter:blur(10px);
}

.search-overlay.open{display:flex;}

.search-box{
  position:relative;
  width:min(700px,100%);
  padding:50px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-xl);
  background:var(--navy);
  box-shadow:var(--shadow-lg);
}

.search-box h2{
  margin-bottom:25px;
  color:var(--white);
  font-size:clamp(2rem,5vw,3rem);
}

.search-box form{
  display:flex;
  gap:8px;
}

.search-box input{
  min-width:0;
  flex:1;
  height:52px;
  padding:0 17px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
  outline:none;
  background:rgba(255,255,255,.08);
  color:var(--white);
}

.search-box input:focus{border-color:var(--gold);}

.search-box input::placeholder{
  color:rgba(255,255,255,.45);
}

.search-close{
  position:absolute;
  top:15px;
  right:15px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--white);
  font-size:1.5rem;
}

.search-close:hover{
  background:var(--gold);
  color:var(--navy);
}

.search-btn{
  display:grid;
  place-items:center;
}

.search-btn span:first-child{
  font-size:1.45rem;
  line-height:1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:3px solid rgba(212,160,23,.55);
  outline-offset:3px;
}

@media (max-width:1050px){
  .hero-badge{
    width:170px;
    height:170px;
  }

  .hero-badge span{font-size:1.9rem;}
  .hero-badge strong{font-size:1.35rem;}

  .trending-grid,
  .videos-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .focus-grid{gap:45px;}

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:800px){
  .hero{
    min-height:calc(100svh - 110px);
  }

  .hero-container{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:35px;
  }

  .hero-content{
    padding-top:55px;
    padding-bottom:20px;
  }

  .hero-content h1{
    font-size:clamp(2.8rem,12vw,4.8rem);
  }

  .hero-badge{
    width:125px;
    height:125px;
    align-self:flex-end;
    margin-bottom:35px;
  }

  .hero-badge span{font-size:1.4rem;}
  .hero-badge strong{font-size:1rem;}
  .hero-badge small{font-size:.35rem;}

  .trending-section,
  .featured-section,
  .latest-section,
  .videos-section{
    padding:65px 0;
  }

  .section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    margin-bottom:24px;
  }

  .trending-grid,
  .featured-grid,
  .videos-grid{
    grid-template-columns:1fr;
  }

  .latest-layout{
    grid-template-columns:1fr;
  }

  .news-sidebar{margin-top:10px;}

  .focus-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .focus-stats{
    grid-template-columns:repeat(3,1fr);
  }

  .newsletter-box{
    flex-direction:column;
    align-items:flex-start;
    padding:32px 24px;
  }

  .newsletter-form{width:100%;}

  .footer-grid{
    grid-template-columns:1fr;
    gap:35px;
    padding:55px 0 40px;
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    padding:22px 0;
  }
}

@media (max-width:480px){
  .hero-content{padding-top:40px;}

  .hero-content h1{
    font-size:clamp(2.5rem,14vw,3.8rem);
  }

  .hero-content p{font-size:.9rem;}

  .hero-actions{
    width:100%;
    flex-direction:column;
  }

  .hero-actions .btn{width:100%;}

  .hero-badge{
    width:105px;
    height:105px;
  }

  .hero-badge span{font-size:1.15rem;}
  .hero-badge strong{font-size:.85rem;}

  .focus-stats{gap:7px;}

  .stat-card{
    min-height:115px;
    padding:10px 5px;
  }

  .stat-card strong{font-size:1.45rem;}
  .stat-card span{font-size:.55rem;}

  .newsletter-form{flex-direction:column;}

  .newsletter-form input,
  .newsletter-form .btn{
    width:100%;
  }

  .search-box{
    padding:38px 20px 25px;
  }

  .search-box form{flex-direction:column;}

  .search-box input,
  .search-box .btn{
    width:100%;
  }

  .footer-legal{
    flex-wrap:wrap;
    gap:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* Production accessibility/performance refinements */
:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}
button:disabled{opacity:.55;cursor:not-allowed}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.social-link img{width:18px;height:18px}
@media (max-width: 700px){
  .hero{background-image:linear-gradient(180deg,rgba(6,20,31,.84) 0%,rgba(6,20,31,.68) 55%,rgba(6,20,31,.9) 100%),url("../assets/images/hero/stadium-mobile.webp");background-position:center top}
}