/* ====================================================================
   FIFA World Cup 2026 widget — stylesheet

   Sections (top-down, follows the DOM):
     1. Design tokens               (:root variables, fonts, resets)
     2. Layout primitives           (container, top header, main content)
     3. Sponsor strip
     4. News grid
     5. Ad block
     6. Schedule (fixtures) carousel
     7. Standings (stat) table
     8. Skeleton loading            (shared shimmer + per-section skeletons)
     9. Error card                  (shared, with per-section sizing)
    10. Responsive overrides
   ==================================================================== */

/* -------------------------------------------------------------------- */
/* 1. Design tokens                                                     */
/* -------------------------------------------------------------------- */

:root {
  --primary-color: #304ffe;
  --secondary-color: #f7ecea;
  --background-color: #dfe4ff;

  /* Text */
  --text-blue-color: #304ffe;
  --text-red-color: #8a1538;
  --text-black-color: rgba(0, 0, 0, 0.87);
  --text-dark-blue-color: #001246;

  /* Type scale */
  --font-sm: 14px;
  --font-16: 16px;
  --font-md: 18px;
  --font-lg: 28px;
  --font-24: 24px;

  /* Surface */
  --shadow-md: 0 2px 2px 0 rgba(0, 0, 0, 0.25);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Spacing */
  --space-sm: 8px;
  --space-10: 10px;
  --space-md: 16px;
  --space-14: 14px;
  --space-lg: 24px;
  --space-xl: 32px;

  --font-shurjo: "shurjo", sans-serif;
  --border-1: solid 1px rgba(0, 0, 0, 0.12);
}

@font-face {
  font-family: "shurjo";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    local("Shurjo Regular"),
    url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_400_v2-f516035cb806da4a249e.woff")
      format("woff2"),
    url("./nimdaxipalo/assets/fonts/ShurjoWeb_400.ttf") format("truetype");
}

@font-face {
  font-family: "shurjo";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    local("Shurjo Bold"),
    url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_700_v2-72cba63e779d86520525.woff")
      format("woff2"),
    url("./nimdaxipalo/assets/fonts/ShurjoWeb_700.ttf") format("truetype");
}

body {
  background-color: white;
  font-family: var(--font-shurjo), sans-serif;
  color: var(--text-black-color);
  margin: 0;
  padding: 0;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  padding: 0;
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* 2. Layout primitives                                                 */
/* -------------------------------------------------------------------- */

.container {
  max-width: 1248px;
  border-radius: 16px;
  background-color: var(--background-color);
  margin: 0 auto;
}
.top-banner img {
  display: block;
  width: 100%;
  max-height: 120px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.content-container {
  max-width: 1248px;
  box-sizing: border-box;
  padding: 0px var(--space-xl) var(--space-xl);
}
.top-header {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: var(--space-10) 0;
  color: var(--text-blue-color);
  font-weight: bold;
  font-size: var(--font-24);
}

.top-header a {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}

.top-header img {
  width: 32px;
  height: 32px;
}

.main-content {
  display: flex;
  flex-direction: row;
  gap: var(--space-xl);
  padding-top: var(--space-md);
}

/* Shared affordances for every clickable card variant. */
.sponsor-card,
.news-card {
  cursor: pointer;
}

.sponsor-card:focus-visible,
.news-card:focus-visible {
  outline: 2px solid var(--text-blue-color);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* 3. Sponsor strip                                                     */
/* -------------------------------------------------------------------- */

.sponsor-container {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--space-md) 0;
}

.sponsor-card {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: white;
  flex: 0 1 calc((100% - 3 * var(--space-md)) / 4);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 14px;
}

.sponsor-card::before,
.sponsor-card::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  background-color: #91f4d8;
  border-radius: var(--radius-sm);
  backface-visibility: hidden;
  z-index: -1;
  transition:
    width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sponsor-card::before {
  top: 0;
  left: 0;
}

.sponsor-card::after {
  bottom: 0;
  right: 0;
}

.sponsor-card:hover::before,
.sponsor-card:hover::after {
  width: 100%;
  height: 100%;
}

.sponsor-card:hover .sponsor-content {
  color: var(--text-blue-color);
}

.sponsor-content {
  display: flex;
  align-items: center;
  /* gap: var(--space-14); */
  font-size: var(--font-md);
  line-height: 1.3;
  color: var(--text-red-color);
  text-align: center;
}

.sponsor-content img {
  padding-right: var(--space-14);
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  object-fit: contain;
}

.external-link-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

/* -------------------------------------------------------------------- */
/* 4. News grid                                                         */
/*                                                                      */
/* div1 spans the full left column over two rows; div2–div5 fill the    */
/* two right-hand columns. JS renders cards with these classes by index.*/
/* -------------------------------------------------------------------- */

.news-and-live {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  justify-content: start;
  flex: 1;
  min-width: 0;
}

.news {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  max-height: fit-content;
}

.div1 {
  grid-row: span 2 / span 2;
}
.div4 {
  grid-column-start: 2;
}
.div5 {
  grid-column-start: 3;
}

.news-card {
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow: hidden;
}

.news-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: top;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  transition: transform 0.2s ease;
}

.news-card:hover img {
  transform: scale(1.05);
}

.news-card p {
  padding: var(--space-md);
  font-size: var(--font-md);
  font-weight: bold;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.news-card:hover p {
  color: var(--text-blue-color);
}

.div1 p {
  font-size: var(--font-lg);
  font-weight: bold;
}

/* Fallback block shown when the API returns a story without a hero image. */
.news-card-img-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: var(--secondary-color);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------- */
/* 5. Ad block                                                          */
/* -------------------------------------------------------------------- */

.ad {
  width: 300px;
  height: 250px;
  max-height: 250px;
  border: 12px solid var(--secondary-color);
  background: #e3d2ba;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ad p {
  font-size: var(--font-lg);
  color: #ae9068;
  font-weight: bold;
  text-align: center;
  font-family: sans-serif;
}

/* -------------------------------------------------------------------- */
/* 6. Schedule (fixtures) carousel                                      */
/* -------------------------------------------------------------------- */

.schedule {
  position: relative;
}

.schedule-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  background-color: white;
  font-size: var(--font-sm);
}

.schedule-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: bold;
  background-color: var(--secondary-color);
  padding: var(--space-sm);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.schedule-card:hover .schedule-card-header {
  background-color: #ead5ca;
}

/* Header layout: day + date grouped on the left, round label on the right. */
.schedule-date {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.schedule-date p:nth-of-type(2) {
  font-weight: normal;
}
.schedule-card-header > p {
  color: var(--text-blue-color);
  font-weight: normal;
}

.schedule-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  gap: 4px;
}

.match-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.schedule-card-body .time {
  font-size: var(--font-sm);
  color: var(--text-dark-blue-color);
  font-weight: bold;
  background-color: var(--secondary-color);
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
}

/* Live-match indicator: solid dot + animated outward ring. */
.live-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e53935;
  flex: 0 0 auto;
}

.live-dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #e53935;
  opacity: 0.8;
  animation: live-pulse 1.6s ease-out infinite;
}

@keyframes live-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Teams + score: two stacked team rows */
.teams-and-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  padding: var(--space-sm) 0;
}

.team-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--font-sm);
}

.team-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
  flex: 1 1 auto;
}

.team-info p {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: normal;
  font-weight: bold;
  color: #000;
}

/* Team with fewer goals: dim both its name and score. */
.team-row.losing .team-info p,
.team-row.losing .team-score {
  color: #00000061;
}

.team-row img {
  flex: 0 0 32px;
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 24px;
  object-fit: contain;
  padding: 1px;
}

/* Subtle border so flags with white regions (Japan, Korea, etc.) read
   cleanly against the white card background. */
.schedule-card .team-row img {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.team-score {
  font-weight: bold;
  text-align: center;
  font-size: var(--font-16);
  color: var(--text-red-color);
  flex: 0 0 auto;
}

/* Owl Carousel nav arrow buttons */
.schedule-card-container.owl-carousel .owl-nav {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

.schedule-card-container.owl-carousel .owl-nav button.owl-prev,
.schedule-card-container.owl-carousel .owl-nav button.owl-next {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: #b6c1ff;
  color: var(--text-dark-blue-color);
  font-size: 12px;
  line-height: 28px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.schedule-card-container.owl-carousel .owl-nav button.owl-prev:hover,
.schedule-card-container.owl-carousel .owl-nav button.owl-next:hover {
  background-color: #98a6ff;
}

.schedule-card-container.owl-carousel .owl-nav button.owl-prev.disabled,
.schedule-card-container.owl-carousel .owl-nav button.owl-next.disabled,
.schedule-card-container.owl-carousel .owl-nav button.owl-prev.disabled:hover,
.schedule-card-container.owl-carousel .owl-nav button.owl-next.disabled:hover {
  background-color: #f7f7f7;
  color: var(--text-dark-blue-color);
  opacity: 1;
  cursor: default;
}

.schedule-card-container.owl-carousel .owl-nav span {
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.schedule-card-container.owl-carousel .owl-nav .owl-nav-icon {
  width: auto;
  height: 12px;
  fill: currentColor;
}

/* -------------------------------------------------------------------- */
/* 7. Standings (stat) table                                            */
/* -------------------------------------------------------------------- */

.stat-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-md);
}

.stat-table img {
  width: 24px;
  height: 24px;
}

/* Header: "গ্রুপ <letter>" group selector trigger button. */
.stat-table-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--border-1);
  padding-bottom: var(--space-sm);
  font-size: var(--font-24);
  font-weight: bold;
  color: var(--text-dark-blue-color);
}

.stat-table-table-header .group {
  color: var(--text-red-color) !important;
  margin-left: 8px;
}

.group-selector {
  position: relative;
}

.group-trigger {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: var(--border-1);
  padding: 0 0 var(--space-sm) 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.group-trigger img {
  transition: transform 0.2s ease;
}

.group-trigger[aria-expanded="true"] img {
  transform: rotate(180deg);
}

/* Dropdown list of groups */
.group-popdown {
  list-style: none;
  margin: 4px 0 0;
  padding: var(--space-sm) 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(0, 18, 70, 0.12);
  z-index: 10;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.group-popdown::-webkit-scrollbar {
  width: 6px;
}

.group-popdown::-webkit-scrollbar-track {
  background: transparent;
}

.group-popdown::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-full);
}

.group-popdown::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.24);
}

.group-popdown li {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-md);
  color: var(--text-red-color);
  cursor: pointer;
  border-bottom: var(--border-1);
  transition: background-color 0.15s ease;
}

.group-popdown li:last-child {
  border-bottom: none;
}

.group-popdown li:hover,
.group-popdown li:focus-visible {
  background-color: #91f4d8;
  outline: none;
}

.group-popdown li.active {
  background-color: #91f4d8;
  color: var(--text-red-color);
  font-weight: bold;
}

/* Team stat cards */
.stat-card-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stat-card {
  align-items: center;
  gap: var(--space-md);
  border-radius: var(--radius-sm);
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  font-size: var(--font-sm);
}

/* Top 2 teams in each group advance — highlight with a red outline. */
.stat-card.qualified {
  border-color: var(--text-red-color);
}

.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: bold;
  background-color: var(--secondary-color);
  padding: 4px 8px;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  border-bottom: var(--border-1);
  transition: background-color 0.2s ease;
}

.stat-card:hover .stat-card-header {
  background-color: #ead5ca;
}

.country-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-dark-blue-color);
}

.country-info img {
  width: 30px;
  height: 22.5px;
  object-fit: contain;
  padding: 1px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.points {
  color: var(--text-blue-color);
  font-weight: normal;
}

.stat-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 4px 8px;
  font-size: var(--font-sm);
}

.stat-row {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* -------------------------------------------------------------------- */
/* 8. Skeleton loading                                                  */
/*                                                                      */
/* Each section has a matching skeleton block sized to roughly match    */
/* its rendered counterpart, so the layout doesn't shift on data load.  */
/* -------------------------------------------------------------------- */

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: #e6e9ef;
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* News skeleton */
.skeleton-news {
  background-color: white;
  padding-bottom: var(--space-md);
  cursor: default;
}

.skeleton-news .skeleton-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.skeleton-news .skeleton-line {
  height: 12px;
  margin: var(--space-md) var(--space-md) 0;
  border-radius: 4px;
}

.skeleton-news .skeleton-line-1 {
  width: 90%;
}
.skeleton-news .skeleton-line-2 {
  width: 60%;
}

/* Schedule skeleton — sits BEFORE the empty owl-carousel container so
   owl init has a clean container to mount into on success. */
.schedule-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.skeleton-schedule {
  background-color: white;
  overflow: hidden;
}

.skeleton-schedule .skeleton-header {
  height: 40px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.skeleton-schedule-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
}

.skeleton-schedule .skeleton-pill {
  width: 80px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.skeleton-schedule .skeleton-row {
  display: flex;
  gap: var(--space-md);
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

.skeleton-schedule .skeleton-circle {
  width: 36px;
  height: 24px;
  border-radius: 4px;
}

/* Stat skeleton */
.skeleton-stat {
  background-color: white;
  overflow: hidden;
  cursor: default;
}

.skeleton-stat .skeleton-stat-header {
  height: 40px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.skeleton-stat-body {
  display: flex;
  justify-content: space-around;
  padding: var(--space-sm);
  gap: var(--space-sm);
}

.skeleton-stat .skeleton-cell {
  width: 28px;
  height: 24px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------- */
/* 9. Error card                                                        */
/*                                                                      */
/* Shared visual; per-section selectors below pin minimum dimensions    */
/* so the error block occupies the same space as the original content.  */
/* -------------------------------------------------------------------- */

.error-card {
  background-color: white;
  border-radius: var(--radius-md);
  border: 1px solid rgba(138, 21, 56, 0.18);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.error-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: rgba(138, 21, 56, 0.1);
  color: var(--text-red-color);
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

.error-card-message {
  color: var(--text-dark-blue-color);
  font-size: var(--font-md);
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}

.error-card-retry {
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: bold;
  color: white;
  background-color: var(--text-red-color);
  border: none;
  border-radius: var(--radius-full);
  padding: 8px 20px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}

.error-card-retry:hover {
  background-color: #6d1029;
}
.error-card-retry:active {
  transform: translateY(1px);
}
.error-card-retry:focus-visible {
  outline: 2px solid var(--text-blue-color);
  outline-offset: 2px;
}

/* News error spans the full 2-row × 3-col news grid. */
.news-error-wrap {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
}

.news-error-wrap .error-card {
  flex: 1;
}

/* Per-section min-heights so the error doesn't collapse the layout. */
.schedule .error-card {
  min-height: 220px;
}
.stat-card-container .error-card {
  min-height: 360px;
}

/* -------------------------------------------------------------------- */
/* 10. Responsive overrides                                             */
/* -------------------------------------------------------------------- */

/* Sponsor strip: 3 cards per row at/below 1024px. */
@media (max-width: 1023px) {
  .sponsor-card {
    flex: 0 1 calc((100% - 2 * var(--space-md)) / 3);
    padding: var(--space-sm);
  }
}

/* News grid collapses to 2 cols below the tablet breakpoint. div1
   stretches across the full width as a hero. */
@media (max-width: 930px) {
  .news {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .div1 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .div2,
  .div3,
  .div4,
  .div5 {
    grid-column: auto;
  }
}

/* Mobile: stack everything in this visual order via flex `order`:
   sponsor → ad → news → schedule → stat table.
   `display: contents` on wrappers lets their children participate
   directly in the parent flex order. */
@media (max-width: 767px) {
  .content-container {
    padding: 0px var(--space-md) var(--space-xl) var(--space-md);
  }

  .top-banner img {
    max-height: 160px;
  }

  .top-header {
    font-size: var(--font-md);
  }

  .top-header img {
    width: 24px;
    height: 24px;
  }

  .sponsor-container {
    gap: var(--space-sm);
  }

  .sponsor-card {
    flex: 0 1 calc((100% - var(--space-sm)) / 2);
    box-sizing: border-box;
    padding: var(--space-sm);
  }

  .sponsor-content {
    font-size: var(--font-sm);
    text-align: center;
    /* gap: var(--space-sm); */
  }

  .sponsor-content img {
    padding-right: var(--space-sm);
    width: 50px;
    height: 50px;
  }

  .main-content {
    flex-direction: column;
    gap: var(--space-md);
    padding-top: 0px;
  }

  .news-and-live,
  .ad-and-table {
    display: contents;
  }

  .ad {
    order: 1;
    /* padding: 12px; */
    border-width: 12px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    /* box-sizing: border-box; */
    height: 250px;
  }

  .news {
    order: 2;
  }
  .schedule {
    order: 3;
  }

  .news-card p {
    padding: var(--space-sm);
    font-size: var(--font-16);
  }

  .div1 p {
    font-size: var(--font-24);
  }

  .stat-table {
    order: 4;
    padding-top: 0;
  }

  .schedule-skeleton-grid {
    grid-template-columns: 1fr;
  }
  .stat-card-container {
    gap: var(--space-sm);
  }
  .stat-card-body {
    padding: 4px var(--space-sm) var(--space-sm) var(--space-sm);
  }
}

/* Honour reduced-motion preferences for both shimmer + live-dot pulse. */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
  .live-dot::before {
    animation: none;
    opacity: 0.5;
  }
}