@charset "UTF-8";
/*
*
* LOCATION: [pages]
* FOLDER: [scss]
* FILE NAME: [fixture.scss]
* FOLDER: [/pages/]
* DESCRIPTION: Fixture detail page css file
*
*/
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [variables.scss]
*
*/
/*******************************************************
VARIABLES
*******************************************************/
/*******************************************************
COLORS
*******************************************************/
/* BASICS */
/* SPECIFIC BRAND */
/****** TITLES & TEXTS ******/
/****** MESSAGES & ALERTS ******/
/****** HEADER & FOOTER ******/
/****** POPUP ******/
/*******************************************************
Z-INDEX
*******************************************************/
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [variables-admin.scss]
* DESCRIPTION: Standalone admin CMS variables — no website dependencies
*
*/
/*******************************************************
ADMIN VARIABLES
*******************************************************/
/*******************************************************
BASIC COLORS
*******************************************************/
/*******************************************************
ADMIN COLORS
*******************************************************/
/****** BRAND COLORS (used in admin UI accents) ******/
/****** TEXTS ******/
/****** MESSAGES & ALERTS ******/
/****** Z-INDEX ******/
/****** POPUPS ******/
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [mixins.scss]
* DESCRIPTION: css properties reused
*
*/
/*******************************************************
MIXINS -
*******************************************************/
/* DARK AND DEFAULT MODE */
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [media-queries.scss]
* DESCRIPTION: media queries
*
*/
/************************************************************
MEDIA QUERIES
************************************************************/
/** Target points **/
/* MOBILE - Targeting iPhone 5s only */
/* TABLET - mobile & up */
/* TABLET - 480px & up */
/* TABLET - 520px & up */
/* TABLET - 520px & up */
/* TABLET - 620px & up */
/* MOBILE - Only Mobile */
/* TABLET - Tablet & up */
/* TABLET - Targeting only tablet */
/* TABLET - Targeting Mobile & Tablet */
/* DESKTOP - Desktop & Up */
/* DESKTOP - Custom targeting point */
/* DESKTOP -  13 inch Macbook Pro screen */
/*
*
* LOCATION: [modules]
* FOLDER: [assets/scss]
* FILE NAME: [_font-tools.scss]
* DESCRIPTION: Font mixins ONLY — no CSS output.
*              Use this in page-level SCSS files to access
*              font-family and font-style mixins without
*              duplicating the global font/heading/paragraph rules.
*
*/
/*******************************************************
Mixins - Font Families
*******************************************************/
/*
*
* LOCATION: [pages]
* FOLDER: [scss]
* FILE NAME: [fixture.scss]
* FOLDER: [/pages/]
* DESCRIPTION: Fixture detail page css file
*
*/
/*
*
* LOCATION: [pages]
* FOLDER: [scss]
* FILE NAME: [Global-components.scss]
* FOLDER: [/contents/]
* DESCRIPTION: Global components css file
*
*/
/*******************************************************
Pagination
*******************************************************/
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.pagination .pagination-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.pagination .pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 1.5rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1em;
  color: #363b41;
  border-radius: 0.5rem;
  background-color: #f2f2f2;
  transition: all 0.3s ease;
}
.pagination .pagination-item.active {
  background-color: #6153CC;
  color: white;
}
.pagination .pagination-item.disabled {
  pointer-events: none;
  opacity: 0.3;
}
.pagination .pagination-item:hover {
  cursor: pointer;
  background-color: #E2DEFF;
  color: #9689F7;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.section-header > * {
  margin: 0;
}

/*******************************************************
Competition slider — .comp-slider
Mirrors the .next-match-slider pattern
*******************************************************/
.comp-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.comp-slider.has-before::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 100%;
  background: linear-gradient(270deg, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 0.95) 90%);
  z-index: 1;
  pointer-events: none;
}
.comp-slider.has-after::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 100%;
  background: linear-gradient(90deg, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 0.95) 90%);
  z-index: 1;
  pointer-events: none;
}
.comp-slider__track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 0.5rem;
}
.comp-slider__track::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .comp-slider__track {
    gap: 1.5rem;
  }
}
@container website-body (width > 800px) {
  .comp-slider__track {
    justify-content: center;
  }
}

.competition-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  padding: 0.25rem;
  background-color: white;
  border-radius: 2rem;
  transition: all 0.2s ease-in-out;
}
.header-competition-fixtures .competition-logo {
  pointer-events: none;
}
.competition-logo:hover {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.competition-logo.btn-filter {
  border: 2px solid #d3d3d3;
  opacity: 0.5;
}
.competition-logo.btn-filter:hover {
  opacity: 1;
  border-color: #6153CC;
}
.competition-logo.btn-filter.is-active {
  opacity: 1;
  border-color: #6153CC;
}
.competition-logo.small {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
}
.competition-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*******************************************************
Stats Global style
*******************************************************/
.w-stats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 0.25rem;
  min-width: 4rem;
}
@media (min-width: 768px) {
  .stats-item {
    min-width: 5rem;
  }
}
.stats-item.box {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: #f2f2f2;
}
.stats-item .stats-value {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1em;
  color: #363b41;
}
@media (min-width: 768px) {
  .stats-item .stats-value {
    font-size: 2.5rem;
  }
}
@media (min-width: 768px) {
  .stats-item .stats-value {
    font-size: 3rem;
  }
}
.stats-item .stats-label {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1.2em;
  color: #84888f;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
}
@media (min-width: 768px) {
  .stats-item .stats-label {
    font-size: 0.75rem;
  }
}

/*
*
* LOCATION: [pages]
* FOLDER: [scss]
* FILE NAME: [fixture.scss]
* FOLDER: [/pages/]
* DESCRIPTION: Fixture detail page css file
*
*/
/*
*
* LOCATION: [pages]
* FOLDER: [scss]
* FILE NAME: [fixtures.scss]
* FOLDER: [/contents/]
* DESCRIPTION: Fixture wrapper & filter styles (card styles in _fixture-card.scss)
*
*/
.fixture-filters {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

[class*=filter-by] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: start;
}
[class*=filter-by] .filter-title {
  flex: 1 0 100%;
}
[class*=filter-by] .filter-list {
  width: 100%;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
}

/*******************************************************
Fixture section CSS — wrappers & containers
*******************************************************/
.w-fixture-content {
  width: 100%;
  overflow: hidden;
}

.fixture-content {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
  justify-content: center;
}
.fixture-content.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@container website-body (width < 600px) {
  .fixture-content.wrapper {
    grid-template-columns: 1fr;
  }
}
.fixture-content.list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.fixture-content.slider {
  gap: 2rem;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fixture-content.slider::-webkit-scrollbar {
  display: none;
}

a.link-over-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/*******************************************************
Grouped fixtures — multi-column grid for group-stage rounds
(used on competition overview + competition fixtures pages)
*******************************************************/
.round-fixtures .fixture-content.list {
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .round-fixtures .fixture-content.list {
    gap: 3rem;
  }
}
.round-fixtures--grouped {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .round-fixtures--grouped {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1140px) {
  .round-fixtures--grouped {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.fixture-group-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fixture-group-column__title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #84888f;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #d3d3d3;
}
.fixture-group-column .fixture-content.list {
  gap: 0.75rem;
}

/*******************************************************
Club fixture form (used in club.twig)
*******************************************************/
.form-strip {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.w-fixture-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 1140px) {
  .w-fixture-form {
    padding: 1rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
  }
  .w-fixture-form:hover {
    background-color: white;
  }
}
.w-fixture-form .form-score {
  padding: 0.375rem 0.75rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}
@media (min-width: 1140px) {
  .w-fixture-form .form-score {
    font-size: 1rem;
  }
}
.w-fixture-form .form-score.lose {
  background-color: #ff1540;
  color: white;
}
.w-fixture-form .form-score.draw {
  background-color: #d3d3d3;
  color: #363b41;
}
.w-fixture-form .form-score.win {
  background-color: #00E676;
  color: white;
}
.w-fixture-form .team-logo {
  width: 2rem;
  height: 2rem;
}
.w-fixture-form .team-logo picture {
  width: 100%;
  height: 100%;
}
.w-fixture-form .team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/*
*
* LOCATION: [pages]
* FOLDER: [scss]
* FILE NAME: [fixture.scss]
* FOLDER: [/pages/]
* DESCRIPTION: Fixture detail page css file
*
*/
/*
*
* FILE NAME: [_fixture-card.scss]
* FOLDER: [/contents/]
* DESCRIPTION: Unified fixture card component — 4 variants: simple, mini, expanded, compact
* BEM block: .fc
*
*/
/*******************************************************
Shared base — .fc
*******************************************************/
.fc {
  position: relative;
  overflow: hidden;
}

.fc__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/*******************************************************
Competition badge — coloured panel (shared by mini + expanded)
*******************************************************/
.fc__comp-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background-color: #84888f;
}
.fc__comp-badge img {
  object-fit: contain;
}

/*******************************************************
Team logo — shared
*******************************************************/
.fc__team-logo {
  flex-shrink: 0;
}
.fc__team-logo picture {
  width: 100%;
  height: 100%;
}
.fc__team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/*******************************************************
═══════════════════════════════════════════════════════
MINI — horizontal row, logos only, optional comp badge
Layout: [ comp-badge? | home-logo | info | away-logo ]
═══════════════════════════════════════════════════════
*******************************************************/
.fc--mini {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.125rem;
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid #d3d3d3;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}
.fc--mini:hover {
  cursor: pointer;
  border-color: #103731;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.fc--mini .fc__comp-badge {
  width: 2.5rem;
  height: 100%;
}
@media (min-width: 768px) {
  .fc--mini .fc__comp-badge {
    width: 2.75rem;
  }
}
.fc--mini .fc__comp-badge .fc__comp-logo {
  width: 1.5rem;
  height: 1.5rem;
}
.fc--mini .fc__comp-badge .fc__comp-logo picture {
  width: 100%;
  height: 100%;
}
.fc--mini .fc__comp-badge .fc__comp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 768px) {
  .fc--mini .fc__comp-badge .fc__comp-logo {
    width: 2rem;
    height: 2rem;
  }
}
.fc--mini .fc__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-block: 0.75rem;
  padding-inline: 0.5rem;
}
@media (min-width: 768px) {
  .fc--mini .fc__content {
    padding-block: 1.25rem;
    padding-inline: 1rem;
  }
}
@media screen and (max-height: 900px) {
  .fc--mini .fc__content {
    padding-block: 0.75rem;
  }
}
.fc--mini .fc__gamebox {
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: center;
  column-gap: 1.5rem;
  height: 100%;
}
@media (min-width: 768px) {
  .fc--mini .fc__gamebox {
    column-gap: 1rem;
  }
}
.fc--mini .fc__team-logo {
  width: 2rem;
  height: 2rem;
}
@media (min-width: 768px) {
  .fc--mini .fc__team-logo {
    width: 3.5rem;
    height: 3.5rem;
  }
}
@media screen and (max-height: 900px) {
  .fc--mini .fc__team-logo {
    width: 2rem;
    height: 2rem;
  }
}
.fc--mini .fc__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.fc--mini .fc__comp-name {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1em;
  color: #6153CC;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}
.fc--mini .fc__date {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1em;
  color: #15171a;
  text-align: center;
}
@media (min-width: 768px) {
  .fc--mini .fc__date {
    font-size: 1.25rem;
  }
}
@media screen and (max-height: 900px) {
  .fc--mini .fc__date {
    font-size: 0.75rem;
  }
}
.fc--mini .fc__kickoff {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1em;
  color: #15171a;
  text-align: center;
}
@media (min-width: 768px) {
  .fc--mini .fc__kickoff {
    font-size: 1rem;
  }
}
@media screen and (max-height: 900px) {
  .fc--mini .fc__kickoff {
    font-size: 0.75rem;
  }
}
.fc--mini .fc__score {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1em;
  color: #15171a;
  text-align: center;
}
@media (min-width: 768px) {
  .fc--mini .fc__score {
    font-size: 1.25rem;
  }
}

.fc--mini.fc--next {
  border-color: #6153CC;
  border-width: 2px;
  background-color: rgba(97, 83, 204, 0.03);
}

/*******************************************************
═══════════════════════════════════════════════════════
EXPANDED — full-width 2-row card with team names
Row 1 (header): [ comp-badge | date | comp-name + round ]
Row 2 (body):   [ home-name | home-logo | score/status | away-logo | away-name ]
═══════════════════════════════════════════════════════
*******************************************************/
.fc--expanded {
  display: flex;
  background-color: white;
  border-radius: 0;
  gap: 1rem;
  padding: 0.125rem;
}
.fc--expanded:hover {
  cursor: pointer;
  background-color: #f2f2f2;
}
.fc--expanded .fc__comp-badge {
  width: 2.5rem;
  border-radius: 0.625rem;
}
@media (min-width: 768px) {
  .fc--expanded .fc__comp-badge {
    width: 2.75rem;
  }
}
.fc--expanded .fc__comp-badge .fc__comp-logo {
  width: 1.5rem;
  height: 1.5rem;
}
.fc--expanded .fc__comp-badge .fc__comp-logo picture {
  width: 100%;
  height: 100%;
}
.fc--expanded .fc__comp-badge .fc__comp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 768px) {
  .fc--expanded .fc__comp-badge .fc__comp-logo {
    width: 2rem;
    height: 2rem;
  }
}
.fc--expanded .fc__main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.fc--expanded .fc__header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
}
.fc--expanded .fc__header-info {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.fc--expanded .fc__date,
.fc--expanded .fc__kickoff {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1em;
  color: #363b41;
}
.fc--expanded .fc__comp-name {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1em;
  color: #84888f;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  max-height: 1em;
}
.fc--expanded .fc__body {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.fc--expanded .fc__team-name {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2em;
  color: #15171a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  max-height: 1.2em;
}
@media (min-width: 768px) {
  .fc--expanded .fc__team-name {
    font-size: 0.875rem;
  }
}
.fc--expanded .fc__team-name--home {
  text-align: left;
}
.fc--expanded .fc__team-name--away {
  text-align: right;
}
.fc--expanded .fc__team-logo {
  width: 2rem;
  height: 2rem;
}
@media (min-width: 768px) {
  .fc--expanded .fc__team-logo {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.fc--expanded .fc__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 3.5rem;
}
.fc--expanded .fc__score {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1em;
  color: #15171a;
  text-align: center;
}
.fc--expanded .fc__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem 0.5rem;
}
.fc--expanded .fc__footer:empty {
  display: none;
}
.fc--expanded .fc__broadcaster-logo {
  height: 1.25rem;
  width: 1.25rem;
}
.fc--expanded .fc__broadcaster-logo picture {
  width: 100%;
  height: 100%;
}
.fc--expanded .fc__broadcaster-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.fc--expanded .fc__broadcaster-name {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1em;
  color: #84888f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fc--expanded.fc--live {
  background-color: #E2DEFF;
}

/*******************************************************
Status badges — used in expanded variant
*******************************************************/
.fc__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1em;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fc__status--final {
  background-color: #363b41;
}
.fc__status--live {
  background-color: #FF1541;
}
.fc__status--postponed {
  background-color: #ffbe2e;
  color: #15171a;
}

.fc__pulse {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: white;
  animation: fc-live-pulse 1.5s ease-in-out infinite;
}

@keyframes fc-live-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/*******************************************************
═══════════════════════════════════════════════════════
COMPACT — header + game row (fixture list design)
Header: [ time/status | venue | comp-logo ]
Game:   [ home-logo + name | score | away-logo + name ]
═══════════════════════════════════════════════════════
*******************************************************/
.fc--compact {
  display: flex;
  flex-direction: column;
  border: 1px solid #15171a;
  border-radius: 1rem;
  flex: 1 0 240px;
}
.fc--compact:hover {
  cursor: pointer;
  background-color: #f2f2f2;
  border-color: #103731;
  transition: all 0.3s ease;
}
.fc--compact .fc__header {
  padding: 1rem 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.fc--compact .fc__header-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fc--compact .fc__header-main {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1em;
  color: #6153CC;
  font-style: italic;
}
.fc--compact .fc__header-secondary {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1em;
  color: #84888f;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  max-height: 1em;
}
.fc--compact .fc__header-logo {
  width: 3rem;
  height: 2rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fc--compact .fc__header-logo picture {
  width: 100%;
  height: 100%;
}
.fc--compact .fc__header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.fc--compact .fc__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex-grow: 1;
}
.fc--compact .fc__team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.fc--compact .fc__team-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fc--compact .fc__team-content--home {
  flex-direction: row;
}
.fc--compact .fc__team-content--away {
  flex-direction: row;
}
.fc--compact .fc__team-logo {
  width: 2rem;
  height: 2rem;
}
.fc--compact .fc__team-name {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1em;
  color: #4f535a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  max-height: 1em;
}
.fc--compact .fc__goals {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1em;
  color: #15171a;
}

/*******************************************************
═══════════════════════════════════════════════════════
SIMPLE — minimal row: logos + score/time
Layout: [ home-logo | center (score or date+time) | away-logo ]
Used on: competition pages, club pages
═══════════════════════════════════════════════════════
*******************************************************/
.fc--simple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-color: white;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}
.fc--simple:hover {
  cursor: pointer;
  border-color: #84888f;
  background-color: #f2f2f2;
}
.fc--simple .fc__team-logo {
  width: 2rem;
  height: 2rem;
}
@media (min-width: 768px) {
  .fc--simple .fc__team-logo {
    width: 4rem;
    height: 4rem;
  }
}
.fc--simple .fc__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 3.5rem;
}
.fc--simple .fc__score {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1em;
  color: #15171a;
}
@media (min-width: 768px) {
  .fc--simple .fc__score {
    font-size: 1.75rem;
  }
}
.fc--simple .fc__date {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.625rem;
  line-height: 1em;
  color: #4f535a;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fc--simple .fc__date--large {
  font-size: 0.875rem;
}
.fc--simple .fc__kickoff {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1em;
  color: #363b41;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fc--simple .fc__label {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1em;
  color: #84888f;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.25rem 0.625rem;
}
.fc--simple .fc__label--live {
  background-color: #FF1541;
  color: white;
}
.fc--simple .fc__label--ft {
  background-color: #6153CC;
  color: white;
}

.fc--simple.fc--live {
  border-color: #FF1541;
  background-color: rgba(255, 21, 65, 0.04);
}

.fc--simple.fc--final .fc__score {
  color: #363b41;
}

/*
*
* LOCATION: [pages]
* FOLDER: [scss]
* FILE NAME: [fixture.scss]
* FOLDER: [/pages/]
* DESCRIPTION: Fixture detail page css file
*
*/
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [article-card.scss]
* DESCRIPTION: article style
*
*/
/****************************************
Global CSS
****************************************/
.article-card {
  position: relative;
  container: c-article-card/inline-size;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  align-content: start;
  gap: 1rem;
  width: 100%;
  grid-template-areas: "article-image" "article-content";
  padding: 1rem;
  border-radius: 2rem;
  border: 2px solid #15171a;
}
.article-card .overlink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.article-card .w-img {
  position: relative;
  grid-area: article-image;
  margin: 0;
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.article-card .w-img:hover {
  filter: brightness(1.1);
}
.article-card .w-content {
  position: relative;
  grid-area: article-content;
}
.article-card.horizontal {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "article-image article-content";
}
.tag-list .article-card.horizontal {
  gap: 1.5rem;
}
@media (min-width: 1140px) {
  .tag-list .article-card.horizontal {
    grid-template-columns: 320px 1fr;
  }
}
@media (min-width: 1240px) {
  .tag-list .article-card.horizontal {
    grid-template-columns: 480px 1fr;
  }
}
.article-card.horizontal .w-img {
  border-radius: 1rem 0 0 1rem;
}
.article-card.cover {
  grid-template-areas: "article-image";
  align-items: end;
  border-radius: 2rem;
  overflow: hidden;
}
.article-card.cover .w-content {
  grid-area: article-image;
  z-index: 3;
  padding: 3rem 0.75rem 1rem 0.75rem;
  background: linear-gradient(rgba(21, 23, 26, 0) 0%, rgba(21, 23, 26, 0.9) 90%);
  border-radius: 0 0 1rem 1rem;
}
.article-card.cover .article-title {
  color: white;
}
.article-card.cover .w-img {
  border-radius: 1rem;
}
.article-card .article-title {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  max-height: 4.5em;
}
@media (min-width: 1140px) {
  .article-card .article-title:hover {
    text-decoration: underline;
  }
}
@container c-article-card (width >= 600px) {
  .article-card .article-title {
    font-size: 2rem;
  }
}
@container c-article-card (width >= 540px) and (width < 600px) {
  .article-card .article-title {
    font-size: 1.75rem;
  }
}
@container c-article-card (width >= 440px) and (width < 540px) {
  .article-card .article-title {
    font-size: 1.5rem;
  }
}
@container c-article-card (width >= 340px) and (width < 440px) {
  .article-card .article-title {
    font-size: 1.25rem;
  }
}
@container c-article-card (width < 340px) {
  .article-card .article-title {
    font-size: 1.125rem;
  }
}
.article-card .date {
  font-size: 0.75rem;
  color: #229886;
}
.article-card .deck {
  font-size: 1rem;
  line-height: 1.5em;
  color: #4f535a;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  max-height: 4.5em;
}
.article-card.small {
  grid-template-columns: 100px 1fr;
  grid-template-areas: "article-image article-content";
}
@media (min-width: 768px) {
  .article-card.small {
    grid-template-columns: 1fr;
    grid-template-areas: "article-image" "article-content";
  }
}
.article-card.small .w-img {
  flex: 1 0 100px;
  border-radius: 1rem;
}
@media (min-width: 480px) {
  .article-card.small .w-img {
    border-radius: 1rem 1rem 0 0;
  }
}
@container c-article-card (width < 340px) {
  .article-card.small .article-title {
    font-size: 1rem;
  }
}

/*******************************************************
Fixture page
*******************************************************/
.fixture-group {
  width: 100%;
}

.fixture-group-date {
  flex: 1 0 100%;
}

.fixture-group-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
@container website-body (width < 600px) {
  .fixture-group-list {
    grid-template-columns: 1fr;
  }
}

.fixture-loading {
  margin-block-start: 4rem;
}

/*******************************************************
Fixture per competitions
*******************************************************/
.competition-fixtures {
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .competition-fixtures {
    gap: 4rem;
  }
}

.header-competition-fixtures {
  gap: 1rem;
}
.header-competition-fixtures h1, .header-competition-fixtures h2, .header-competition-fixtures h3 {
  margin-bottom: 0;
  text-align: center;
}
.header-competition-fixtures .competition-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}
.header-competition-fixtures .competition-logo picture {
  width: 100%;
  height: 100%;
}
.header-competition-fixtures .competition-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.header-competition-fixtures .competition-title {
  color: #15171a;
}

/*******************************************************
Fixture Details – HERO section
*******************************************************/
.fixture-hero {
  background-color: #15171a;
  container: fixture-hero/inline-size;
  padding: 2rem 1rem;
}
@media (min-width: 1140px) {
  .fixture-hero {
    padding: 3rem 1rem;
  }
}

.fixture-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.fixture-info > * {
  text-align: center;
}
.fixture-info h3 {
  color: #6FFFE9;
  margin-bottom: 0;
}
.fixture-info .fixture-venue {
  color: white;
  margin-bottom: 0;
}
.fixture-info .fixture-date {
  color: white;
  margin-bottom: 0.25rem;
}

.fd-match {
  display: flex;
  gap: 2rem;
  width: 100%;
  margin-block: 3rem;
  align-items: center;
}
@container fixture-hero (width < 1000px) {
  .fd-match {
    gap: 1rem;
    margin-block: 1rem;
  }
}
.fd-match .fd-match-team {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.fd-match .fd-match-team.home {
  align-items: end;
}
.fd-match .fd-match-team.away {
  align-items: start;
}
.fd-match .fd-team {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
}
@container fixture-hero (width < 1000px) {
  .fd-match .fd-team {
    gap: 1rem;
  }
}
.fd-match .fd-team.away {
  flex-direction: row-reverse;
}
.fd-match .fd-team .team-name {
  color: white;
  margin-bottom: 0;
  line-height: 1em;
  font-size: 1.25rem;
}
@container fixture-hero (width < 1000px) {
  .fd-match .fd-team .team-name {
    display: none;
  }
}
.fd-match .fd-team .fd-score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background-color: white;
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1em;
  color: #15171a;
}
@container fixture-hero (width < 1000px) {
  .fd-match .fd-team .fd-score {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2rem;
  }
}
.fd-match .fd-team .team-logo {
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fd-match .fd-team .team-logo picture {
  width: 100%;
  height: 100%;
}
.fd-match .fd-team .team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@container fixture-hero (width < 1000px) {
  .fd-match .fd-team .team-logo {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.fd-match .fd-match-separator h5 {
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
}

/*******************************************************
Fixture Details – Stats section
*******************************************************/
.game-tabs {
  margin-bottom: 2rem;
}
.game-tabs .w-tabs {
  margin: 0 auto;
}

.match-event-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  z-index: 1;
  padding-block: 2rem;
}
.match-event-list:before {
  width: 2px;
  height: 100%;
  background-color: #d3d3d3;
  content: "";
  display: block;
  position: absolute;
  left: 2rem;
  top: 0;
  z-index: -1;
}
@container website-body (width >= 600px) {
  .match-event-list:before {
    left: 50%;
  }
}

.match-event-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 4px;
  width: 100%;
  flex: 1 0 60px;
}
@container website-body (width >= 600px) {
  .match-event-card {
    max-width: max-content;
    place-self: center;
  }
  .match-event-card:before {
    content: "";
    width: 2rem;
    height: 2px;
    background-color: #d3d3d3;
    position: absolute;
    top: calc(50% - 2px / 2);
    z-index: -1;
  }
  .match-event-card.home {
    transform: translateX(calc((50% + 3.5rem) * -1));
    flex-direction: row-reverse;
  }
  .match-event-card.home:before {
    right: -2rem;
  }
  .match-event-card.away {
    transform: translateX(calc(50% + 3.5rem));
  }
  .match-event-card.away:before {
    left: -2rem;
  }
  .match-event-card.highlight:before {
    background-color: #6153CC;
  }
}

.match-event-time {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  flex-shrink: 0;
  padding: 0.5rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1em;
  color: #363b41;
  background-color: white;
  border: 2px solid #d3d3d3;
  border-radius: calc(3.5rem / 2);
}
.match-event-card.highlight .match-event-time {
  background-color: #6153CC;
  border: none;
  color: white;
}
@container website-body (width >= 600px) {
  .match-event-time {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
  }
  .match-event-card.home .match-event-time {
    right: calc(3.5rem * -1.5);
  }
  .match-event-card.away .match-event-time {
    left: calc(3.5rem * -1.5);
  }
}

.match-event-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
  flex: 1;
}
@container website-body (width >= 600px) {
  .match-event-details {
    padding: 0.5rem 1.25rem;
  }
  .match-event-card.home .match-event-details {
    align-items: flex-end;
    border-right: 4px solid #d3d3d3;
  }
  .match-event-card.away .match-event-details {
    border-left: 4px solid #d3d3d3;
  }
  .match-event-card.highlight .match-event-details {
    border-color: #6153CC;
  }
}
.match-event-details .match-event-desc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.match-event-details .event-desc {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1em;
  color: #15171a;
}
.match-event-details .match-event-info {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1em;
  color: #4f535a;
}
.match-event-details .match-event-team {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1em;
  color: #4f535a;
}
@container website-body (width >= 600px) {
  .match-event-details .match-event-team {
    display: none;
  }
}
.match-event-details .w-players {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.match-event-details .event-player {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1em;
  color: #15171a;
}
.match-event-details .event-player.assist {
  font-size: 0.75rem;
  color: #84888f;
}
@container website-body (width >= 600px) {
  .match-event-details .event-player.assist {
    font-size: 0.875rem;
  }
}

/*******************************************************
Tab panels
*******************************************************/
.tab-panel {
  display: none;
  width: 100%;
}
.tab-panel--active {
  display: block;
}

/*******************************************************
Lineups — .lineup
*******************************************************/
.lineup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .lineup {
    grid-template-columns: 1fr;
  }
}
.lineup__team {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.lineup__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f2f2f2;
}
.lineup__logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.lineup__name {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2em;
  color: #15171a;
  margin: 0;
}
.lineup__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lineup__section-title {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1em;
  color: #84888f;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}
.lineup__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: #f2f2f2;
  border-radius: 0.5rem;
  overflow: hidden;
}
.lineup__player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background-color: white;
}
.lineup__player--sub .lineup__player-name {
  color: #4f535a;
}
.lineup__number {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1em;
  color: #6153CC;
  min-width: 1.75rem;
  text-align: center;
}
.lineup__player-name {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2em;
  color: #15171a;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  max-height: 1.2em;
}
.lineup__position {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1em;
  color: #84888f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  background-color: #f2f2f2;
  border-radius: 0.25rem;
}

/*******************************************************
Stats comparison — .stats
*******************************************************/
.stats {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding-block: 1rem;
}
.stats__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f2f2f2;
}
.stats__team-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1em;
  color: #15171a;
}
.stats__team-label--away {
  flex-direction: row-reverse;
}
.stats__team-logo {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}
.stats__row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.stats__values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.stats__value {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1em;
  color: #4f535a;
  min-width: 3rem;
}
.stats__value--home {
  text-align: left;
}
.stats__value--away {
  text-align: right;
}
.stats__value--leading {
  color: #15171a;
  font-weight: 700;
}
.stats__label {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1em;
  color: #84888f;
  text-align: center;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stats__bar {
  display: flex;
  width: 100%;
  height: 0.375rem;
  border-radius: 0.25rem;
  overflow: hidden;
  gap: 2px;
}
.stats__bar-fill {
  height: 100%;
  border-radius: 0.25rem;
  transition: width 0.4s ease;
  background-color: #d3d3d3;
}
.stats__bar-fill--leading {
  background-color: #6153CC;
}

/*******************************************************
No data fallback
*******************************************************/
.fixture-no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 2rem;
  text-align: center;
}
.fixture-no-data p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4em;
  color: #4f535a;
  margin: 0;
}

/*******************************************************
Head-to-Head — .h2h
*******************************************************/
.h2h__record {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.h2h__record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.h2h__record-team {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1em;
  color: #363b41;
}
.h2h__record-team--away {
  flex-direction: row-reverse;
}
.h2h__record-team img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}
.h2h__record-team strong {
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1em;
  color: #15171a;
}
.h2h__record-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.h2h__record-dot--home {
  background-color: #6FFFE9;
}
.h2h__record-dot--away {
  background-color: #6153CC;
}
.h2h__record-draws {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1em;
  color: #84888f;
  text-align: center;
}
.h2h__record-bar {
  display: flex;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  gap: 2px;
}
.h2h__record-segment {
  height: 100%;
  border-radius: 0.25rem;
  transition: flex 0.4s ease;
}
.h2h__record-segment--home {
  background-color: #6FFFE9;
}
.h2h__record-segment--draw {
  background-color: #d3d3d3;
}
.h2h__record-segment--away {
  background-color: #6153CC;
}
.h2h__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: #f2f2f2;
  border-radius: 0.5rem;
  overflow: hidden;
}
.h2h__match {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: white;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.h2h__match:hover {
  background-color: #f2f2f2;
}
@container website-body (width < 600px) {
  .h2h__match {
    grid-template-columns: 1fr;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
  }
}
.h2h__date {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1em;
  color: #84888f;
  white-space: nowrap;
}
.h2h__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.h2h__team {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1em;
  color: #15171a;
  min-width: 0;
}
.h2h__team--home {
  justify-content: flex-end;
  flex: 1;
}
.h2h__team--away {
  justify-content: flex-start;
  flex: 1;
}
.h2h__team img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  flex-shrink: 0;
}
.h2h__team span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 1;
  max-height: 1.2em;
}
.h2h__score {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1em;
  color: #15171a;
  min-width: 2.5rem;
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: #f2f2f2;
  white-space: nowrap;
}
.h2h__match:hover .h2h__score {
  background-color: #d3d3d3;
}
.h2h__comp {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1em;
  color: #84888f;
  justify-content: flex-end;
}
.h2h__comp img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}
@container website-body (width < 600px) {
  .h2h__comp {
    justify-content: flex-start;
  }
}

/*******************************************************
Related Reading — article cards on fixture detail page
*******************************************************/
.related-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}
@media (min-width: 768px) {
  .related-articles {
    grid-template-columns: repeat(3, 1fr);
  }
}