/* =========================================================
   HN FOOTBALL SCORE V18
   Scope: #analysis + #news ONLY
   Do not edit live score / popup / hero / calculator / footer
========================================================= */

/* ---------- ANALYSIS: larger Match Day cards ---------- */
#analysis .analysis-list{
  max-height:none;
  overflow:visible;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding:16px;
}

#analysis .analysis-item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,38%) minmax(0,1fr);
  gap:18px;
  min-height:210px;
  padding:14px;
  margin:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(16,24,36,.98),rgba(6,10,17,.98));
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

#analysis .analysis-item:hover,
#analysis .analysis-item:focus-within{
  transform:translateY(-2px);
  border-color:rgba(239,27,45,.48);
  box-shadow:0 18px 42px rgba(0,0,0,.3);
}

#analysis .analysis-thumb{
  width:100%;
  height:100%;
  min-height:182px;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:13px;
  background:
    radial-gradient(circle at 50% 35%,rgba(239,27,45,.14),transparent 45%),
    #080d14;
}

#analysis .analysis-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}

#analysis .analysis-item:hover .analysis-thumb img{
  transform:scale(1.025);
}

#analysis .analysis-content{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

#analysis .analysis-content .section-kicker{
  margin-bottom:7px;
}

#analysis .analysis-content h3{
  margin:0;
  display:-webkit-box;
  overflow:hidden;
  font-size:17px;
  line-height:1.45;
  font-weight:900;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

#analysis .analysis-content p{
  margin:7px 0 0;
  color:#9ca8b7;
  font-size:12px;
  line-height:1.6;
}

#analysis .analysis-content p:last-of-type{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

#analysis .analysis-button{
  margin-top:13px;
  min-height:38px;
  padding:0 15px;
  border:1px solid rgba(239,27,45,.45);
  border-radius:999px;
  color:#fff;
  background:rgba(239,27,45,.12);
  font-size:12px;
  font-weight:900;
}

#analysis .analysis-button:hover{
  background:#ef1b2d;
}

/* ---------- NEWS: cleaner and easier to read ---------- */
#news .news-list{
  max-height:none;
  overflow:visible;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:16px;
}

#news .news-item{
  position:relative;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:15px;
  min-height:150px;
  margin:0;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(14,21,32,.96),rgba(6,10,17,.96));
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease;
}

#news .news-item:hover,
#news .news-item:focus-within{
  transform:translateY(-2px);
  border-color:rgba(239,27,45,.4);
}

#news .news-image{
  width:100%;
  height:100%;
  min-height:126px;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:12px;
  background:#080d14;
}

#news .news-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit;
  transition:transform .3s ease;
}

#news .news-item:hover .news-image img{
  transform:scale(1.025);
}

#news .news-content{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

#news .news-category{
  display:inline-flex;
  align-items:center;
  min-height:23px;
  margin:0 0 6px;
  padding:0 8px;
  border-radius:999px;
  color:#ff7b86;
  background:rgba(239,27,45,.1);
  font-size:9px;
  font-weight:1000;
}

#news .news-content h3{
  margin:0;
  display:-webkit-box;
  overflow:hidden;
  font-size:16px;
  line-height:1.5;
  font-weight:900;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

#news .news-content p{
  margin:7px 0 0;
  display:-webkit-box;
  overflow:hidden;
  color:#9ca8b7;
  font-size:11px;
  line-height:1.6;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

#news .analysis-button{
  margin-top:11px;
  color:#ff5362;
  font-size:11px;
  font-weight:900;
}

/* Semantic/clickable card enhancement */
#analysis .analysis-item.hn-content-card,
#news .news-item.hn-content-card{
  outline:none;
}

#analysis .analysis-item.hn-content-card:focus-visible,
#news .news-item.hn-content-card:focus-visible{
  box-shadow:0 0 0 3px rgba(239,27,45,.22),0 18px 42px rgba(0,0,0,.3);
}

/* ---------- Tablet ---------- */
@media (max-width:1050px){
  #analysis .analysis-list,
  #news .news-list{
    grid-template-columns:1fr;
  }

  #analysis .analysis-item{
    grid-template-columns:minmax(210px,34%) minmax(0,1fr);
  }
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  #analysis .analysis-list,
  #news .news-list{
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
    padding:12px;
  }

  #analysis .analysis-item,
  #news .news-item{
    display:block;
    min-height:0;
    padding:10px;
  }

  #analysis .analysis-thumb,
  #news .news-image{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    margin-bottom:12px;
  }

  #analysis .analysis-content,
  #news .news-content{
    display:block;
  }

  #analysis .analysis-content h3{
    font-size:16px;
    -webkit-line-clamp:3;
  }

  #news .news-content h3{
    font-size:15px;
    -webkit-line-clamp:3;
  }

  #analysis .analysis-content p,
  #news .news-content p{
    font-size:11px;
  }

  #analysis .analysis-button{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:460px){
  #analysis .analysis-list,
  #news .news-list{
    padding:10px;
  }

  #analysis .analysis-item,
  #news .news-item{
    border-radius:13px;
  }
}

/* News and Knowledge cards match the existing Analysis card dimensions. */
#news .news-list,
#knowledge .news-list{
  gap:16px;
  padding:16px;
}

#news .news-item,
#knowledge .news-item{
  grid-template-columns:minmax(220px,38%) minmax(0,1fr);
  gap:18px;
  min-height:210px;
  padding:14px;
  border-radius:16px;
}

#news .news-image,
#knowledge .news-image{
  width:100%;
  height:100%;
  min-height:182px;
  aspect-ratio:16/10;
  border-radius:13px;
}

#news .news-content,
#knowledge .news-content{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

#news .news-content h3,
#knowledge .news-content h3{
  font-size:17px;
  line-height:1.45;
}

#news .news-content p,
#knowledge .news-content p{
  font-size:12px;
  line-height:1.6;
}

#knowledge .analysis-button{
  margin-top:13px;
  color:#fff;
  background:rgba(239,27,45,.12);
  border:1px solid rgba(239,27,45,.45);
  border-radius:999px;
  min-height:38px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}

@media (max-width:1050px){
  #knowledge .news-list{
    grid-template-columns:1fr;
  }

  #news .news-item,
  #knowledge .news-item{
    grid-template-columns:minmax(210px,34%) minmax(0,1fr);
  }
}

@media (max-width:760px){
  #knowledge .news-list{
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
    padding:12px;
  }

  #news .news-item,
  #knowledge .news-item{
    display:block;
    min-height:0;
    padding:10px;
  }

  #knowledge .news-image{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    margin-bottom:12px;
  }

  #knowledge .news-content{
    display:block;
  }

  #news .news-content h3,
  #knowledge .news-content h3{
    font-size:16px;
  }

  #knowledge .analysis-button{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:460px){
  #knowledge .news-list{
    padding:10px;
  }

  #knowledge .news-item{
    border-radius:13px;
  }
}

/* Knowledge only: show all 8 cards as 4 columns x 2 rows. */
#knowledge .news-list{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:row;
  grid-auto-rows:auto;
  height:auto;
  max-height:none;
  overflow:visible;
}

@media (max-width:760px){
  #knowledge .news-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    padding:8px;
    height:auto;
    max-height:none;
    overflow:visible;
  }
  #knowledge .news-item{
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:6px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:linear-gradient(145deg,#101824,#070b12);
    overflow:hidden;
  }
  #knowledge .news-image{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    margin:0 0 7px;
    border-radius:8px;
    overflow:hidden;
  }
  #knowledge .news-image img{width:100%;height:100%;object-fit:cover}
  #knowledge .news-content{display:flex;flex:1;flex-direction:column;align-items:stretch}
  #knowledge .news-category{align-self:flex-start;font-size:clamp(8px,2vw,10px);min-height:18px;color:#ff5364}
  #knowledge .news-content h3{min-height:3.9em;margin:5px 0;font-size:clamp(9px,2.25vw,11px);line-height:1.3;-webkit-line-clamp:3}
  #knowledge .news-content h3 a{color:#fff;text-decoration:none}
  #knowledge .news-content p{display:none}
  #knowledge .analysis-button{width:100%;min-height:28px;margin-top:auto;padding:0 5px;justify-content:center;border-radius:999px;font-size:clamp(8px,2vw,10px)}
}