/* ==========================================================================
   TOP NEWS
   ========================================================================== */
.top-news { margin-top: 2rem; }
.top-news:has(.next-games-football) .news-feed { grid-row: 2 / 3; }
.top-news .news-feed { grid-column: -2 / -1; grid-row: 2 / 3; }
.top-news .next-games-football, .top-news .covericon { grid-column: -2 / -1; grid-row: 1 / 2; }

.top-news-grid > div:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.top-news-grid > div:nth-child(2) { grid-column: 1 / 2; grid-row: 3 / 4; }
.top-news-grid > div:nth-child(3) { grid-column: 2 / 3; grid-row: 3 / 4; }
.top-news-grid > div:nth-child(4) { grid-column: 3 / 4; grid-row: 3 / 4; }

.top-news-grid > div:nth-child(1),
.top-news-grid > div:nth-child(2),
.top-news-grid > div:nth-child(3) { min-height: 350px; }

.top-news-grid > div:nth-child(1) .card-title { font-size: 3rem; }

.top-news .next-games-football { background-color: #000; color: #fff; border-radius: 20px; padding: 1rem; text-align: center; position: relative; }

.covericon.mobile-feed, .top-news .covericon {
  background-color: var(--colorDarkGold); color: #fff;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: 500; padding: 1rem 2rem; border-radius: 10px; text-align: center;
}

.top-news .next-games-btns { position: absolute; left: 5%; top: 60%; width: 90%; justify-content: space-between; align-items: center; }
.top-news .next-games-btns > * { width: 1rem; height: 1rem; border-bottom: 1px solid var(--colorGold); border-left: 1px solid var(--colorGold); transform-origin: center; cursor: pointer; }
.top-news .next-games-btns .prev { transform: rotate(45deg); }
.top-news .next-games-btns .next { transform: rotate(-135deg); }

.next-games-football h3 { color: var(--colorGold); font-size: 20px; padding-bottom: 0.5rem; }
.next-game-ft { width: 100%; flex-shrink: 0; scroll-snap-align: start; }
.next-game-ft .teams { justify-content: center; gap: 2px; font-size: 20px; }
.next-game-ft .event-competition { margin-bottom: 0.5rem; }
.next-game-ft .event-details { justify-content: center; gap: 8px; font-size: 14px; }

@media screen and (max-width: 920px) {
  .top-news-grid > div:nth-child(1) { grid-column: 1 / -1; grid-row: 1 / 3; min-height: 600px; }
  .top-news:has(.covericon) .news-feed, .top-news:has(.next-games-football) .news-feed { grid-row: 4 / 6; }
  .top-news .covericon { grid-row: 3 / 4; }
  .top-news .news-feed { grid-row: 3 / 6; }
  .top-news-grid > div:nth-child(2), .top-news-grid > div:nth-child(3), .top-news-grid > div:nth-child(4) { grid-column: 1 / 4; min-height: 300px; }
  .top-news-grid > div:nth-child(2) { grid-row: 3 / 5; }
  .top-news-grid > div:nth-child(3) { grid-row: 5 / 6; }
  .top-news-grid > div:nth-child(4) { grid-row: 6 / 7; }
  .top-news .box.rect { grid-row: 6 / 7; }
  .top-news-grid > div:nth-child(1) .card-title { font-size: 2.5rem; }
  .top-news .next-games-football { grid-row: 3/4; padding-block: 0.5rem; }
  .next-games-football h3 { font-size: 16px; }
}

@media screen and (max-width: 650px) {
  .top-news-grid { grid-gap: var(--gridGap) 0; }
  .top-news .next-games-football { grid-row: 1/2; margin-top: 0.5rem; border-radius: 10px; display: none; }
  .top-news { margin-top: 1rem; }
  .top-news-grid > div:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; min-height: unset; width: calc(100% + 2 * var(--padding)); margin-left: calc(-1 * var(--padding)); }
  .top-news-grid > div:nth-child(1) .card { border-radius: 0; padding: 0 0 0.75rem; color: #000; }
  .top-news-grid > div:nth-child(1) .card::before { display: none; }
  .top-news-grid > div:nth-child(1) .card-image { margin-bottom: 1rem; position: relative; height: auto; }
  .top-news-grid > div:nth-child(1) :is(.card-title, .card-details) { padding-inline: 12px; }
  
  .top-news .news-feed { display: none; position: fixed; left: 0; bottom: 0; background-color: #fff; z-index: 100; }
  .top-news .news-feed.on { display: block; z-index: 1010; }
  .top-news-grid > div:nth-child(2), .top-news-grid > div:nth-child(3), .top-news-grid > div:nth-child(4) { grid-column: 1 / -1; min-height: 350px; }
  .top-news-grid > div:nth-child(2) { grid-row: 3 / 4; }
  .top-news-grid > div:nth-child(3) { grid-row: 5 / 6; }
  .top-news-grid > div:nth-child(4) { grid-row: 6 / 7; }
  .top-news .box.rect { grid-row: 4 / 5; grid-column: 1 / -1; margin-inline: auto; }
  .top-news .covericon { grid-row: auto; }
}

@media screen and (max-width: 580px) { .top-news-grid > * { grid-column: 1 / 2; } }
@media screen and (max-width: 520px) { .top-news-grid > div:nth-child(1) .card-title { font-size: 1.75rem; } .top-news { margin-bottom: 0; } }
@media screen and (max-width: 360px) { .top-news-grid > div:nth-child(1) .card-title { font-size: 1.5rem; } }

/* ==========================================================================
   LATEST GAMES
   ========================================================================== */
.latest-game { position: relative; padding-block: 4rem; }
.latest-game::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); }
.latest-game .bg-img { filter: grayscale(1); transform: translateZ(0); will-change: filter; background-image: var(--bg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.latest-game--wrapper { justify-content: center; align-items: center; gap: clamp(3rem, 7vw, 140px); height: 100%; }
.latest-game-info { color: #fff; position: relative; }
.latest-game-info h2 { font-size: 20px; margin-bottom: 0.5rem; padding-left: 1rem; }
.latest-game-info h3 { font-size: 14px; margin-bottom: 1rem; padding-left: 1rem; }
.latest-game-teams { background-color: rgba(255, 255, 255, 0.75); padding: 1rem; border-radius: 10px; font-size: 2rem; display: grid; grid-template-columns: 1fr 5ch; gap: 0 2rem; color: #000; text-transform: uppercase; }
.latest-game-teams :is(.home, .away) { grid-column: 1 / 2; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 500; }
.latest-game-teams .score { padding: 0.5rem; border-radius: 5px; font-size: 42px; letter-spacing: 0.4px; grid-row: 1 / 3; grid-column: 2 / 3; align-self: center; height: 100%; display: flex; justify-content: center; align-items: center; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 700; }
.latest-video { height: 300px; width: 500px; }
.latest-sponsor { position: absolute; bottom: 2rem; }
.latest-game:has(.latest-sponsor) { padding-bottom: calc(100px + 4rem); }

@media screen and (max-width: 1080px) { .latest-game--wrapper { gap: 2rem; } }
@media screen and (max-width: 920px) { .latest-game .half, .latest-game--wrapper { flex-direction: column; } .latest-game-info :is(h2, h3) { text-align: center; padding-left: 0; } .latest-game:has(.latest-sponsor) { padding-block: 2rem; } .latest-sponsor { position: relative; bottom: unset; margin-block: 2rem; } }
@media screen and (max-width: 620px) { .latest-game--wrapper { width: 100%; } .latest-video { max-width: 500px; width: 100%; flex-grow: 1; } .latest-game-info h2 { font-size: 18px; } .latest-game-teams { font-size: 1.5rem; } .latest-game-teams .score { font-size: 32px; } }

/* ==========================================================================
   HOME BLOGGERS (Container Queries)
   ========================================================================== */
.home-blogs { padding-top: 4rem; }
.home-bloggers-grid { margin-bottom: 4rem; }
.bloggers-container > div { container-name: blog-card; container-type: inline-size; min-height: 160px; height: fit-content; }
.home-blogs .card-wrapper.off { display: none; }

@container blog-card (width < 480px) { .card.blog { min-height: 120px; } .card.blog .card-title { font-size: 1.25rem; margin-block: 0.5rem; } .card.blog .card-image { width: 100px; height: 100px; } .card.blog .card-info { padding-left: 130px; } }
@container blog-card (width < 380px) { .card.blog { min-height: 80px; } .card.blog .card-author { font-size: 14px; } .card.blog .card-title { font-size: 1.125rem; } .card.blog .card-image { width: 80px; height: 80px; } .card.blog .card-info { padding-left: 110px; padding-block: 1rem; } }
@container blog-card (width < 350px) { .card.blog { flex-direction: column; align-items: center; } .card.blog .card-image { position: relative; top: unset; transform: none; left: unset; } .card.blog .card-info { padding-left: 1rem; text-align: center; width: 100%; } .card.blog .card-author { font-size: 12px; } .card.blog .card-title { font-size: 1rem; } }

@media screen and (max-width: 1120px) { .bloggers-container.grid { grid-gap: 2rem var(--gridGap); } }
@media screen and (max-width: 880px)  { .bloggers-container.grid { grid-gap: 1.5rem var(--gridGap); } }
@media screen and (max-width: 720px)  { .bloggers-container.grid { grid-gap: var(--gridGap); } }
@media screen and (max-width: 620px)  { .bloggers-container.grid { --gridGap: 1.5rem; } .bloggers-container > div { min-height: unset; } }
@media screen and (max-width: 520px)  { .bloggers-container.grid { --gridGap: 1rem; } }

/* ==========================================================================
   HOME SOCIAL VIDEOS & SHORTS
   ========================================================================== */
.home-mobVideos { color: #fff; padding-block: 4rem; margin-bottom: 0; }
.home-social-videos-wrapper { gap: 2rem; --leftSpace: calc((100vw - var(--wrapperWidth) + 2 * var(--padding)) / 2); padding-inline: var(--leftSpace) 2rem; }
.social-video { border-radius: 20px; width: 345px; flex-shrink: 0; overflow: hidden; aspect-ratio: 0.6; position: relative; cursor: pointer; }
.social-video .vid-icon { position: absolute; left: 1rem; bottom: 1rem; }
.social-video iframe { width: 100%; height: 100%; }

.social-follow { align-items: center; margin-top: 3rem; justify-content: flex-end; }
.social-follow h3 { font-size: 2rem; margin-right: 2rem; font-weight: 600; }
.social-follow li { background-color: #fff; width: 4rem; height: 4rem; background-size: 50%; }

@media screen and (max-width: 1430px) { .home-social-videos-wrapper { padding-inline: var(--padding); } }
@media screen and (max-width: 1020px) { .social-follow li { width: 3rem; height: 3rem; } }
@media screen and (max-width: 820px)  { .social-follow h3 { font-size: 1.75rem; margin-right: 1.5rem; } }
@media screen and (max-width: 620px)  { .social-follow h3 { font-size: 1.5rem; } .social-follow ul li { margin-right: 1rem; } }
@media screen and (max-width: 520px)  { .social-video { width: clamp(300px, 80vw, 350px); } }
@media screen and (max-width: 420px)  { .social-follow { margin-top: 2em; flex-direction: column; gap: 1rem; } .social-follow h3 { margin-right: 0; } }

/* ==========================================================================
   HOME QUIZ
   ========================================================================== */
.quiz-banner { background-color: #000; color: #fff; border-radius: 30px; padding: 3rem 4rem; text-align: center; margin-top: 4rem; font-size: 22px; position: relative; }
.quiz-banner h2 { font-size: 4rem; color: var(--colorGold); margin-bottom: 1rem; }
@media screen and (max-width: 920px) { .quiz-banner { border-radius: 20px; padding: 2rem; margin-top: 3rem; font-size: 18px; } .quiz-banner h2 { font-size: 3rem; } }
@media screen and (max-width: 420px) { .quiz-banner { padding: 1rem; margin-top: 2rem; font-size: 16px; } .quiz-banner h2 { font-size: 2rem; margin-bottom: 0.5rem; } }

/* SHORTS PANEL */
.shorts-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 50; opacity: 0; pointer-events: none; display: none; transition: opacity 0.3s ease; will-change: opacity; }
.shorts-panel.show { display: block; }
.shorts-panel.on { opacity: 1; pointer-events: all; }
.shorts-wrapper { width: 100%; height: 100%; justify-content: center; align-items: center; }
.short-outer { background-color: #fff; padding: 2rem; }
.close-shorts { background-color: #fff; border-radius: 50%; padding: 0.5rem; width: 2rem; height: 2rem; position: absolute; right: 2rem; top: 2rem; cursor: pointer; }
.close-shorts .line { width: 60%; border-top: 2px solid #000; position: absolute; left: 20%; top: calc(50% - 1px); transform-origin: center; transform: rotate(45deg); }
.close-shorts .line:last-of-type { transform: rotate(-45deg); }

/* ==========================================================================
   VARIOUS SECTIONS (Videos, Transfers, Analysis, etc)
   ========================================================================== */
.openents-news { margin-top: 4rem; }
.home-videos { padding-top: 2rem; }
.home-video-grid .card { height: 350px; }
.home-videos .section-banner { position: relative; overflow: hidden; margin-top: 2rem; background-color: #000; }
.home-videos .box.wide { margin: 2rem auto 0; }

@media screen and (max-width: 1420px) { .home-videos .section-banner { height: 250px; } }
@media screen and (max-width: 1020px) { .home-videos .section-banner { height: 200px; } }
@media screen and (max-width: 760px)  { .home-videos .section-banner { height: 150px; } }
@media screen and (max-width: 620px)  { .home-video-grid .card { min-height: unset; height: calc((100vw - 2 * var(--padding)) * 9 / 16); } }
@media screen and (max-width: 580px)  { .home-videos .section-banner { height: 120px; } }
@media screen and (max-width: 460px)  { .home-videos .section-banner { height: 100px; } }
@media screen and (max-width: 380px)  { .home-videos .section-banner { height: 80px; } }

.home-highlights { padding-block: 4rem; margin-bottom: 0; }
.home-highlights aside { margin: 4rem auto 0; }
.home-highlights .box { margin-inline: auto; }
.home-retro { padding-block: 4rem; }
.home-retro .vid-icon { background-color: var(--colorGold); }
.home-retro .card { border-color: var(--colorGold); }
.travel .card { height: 300px; }
.home-transfers, .home-analysis { padding-block: 4rem; margin-bottom: 0; }
@media screen and (max-width: 620px) { .home-analysis .card { min-height: unset; height: calc((100vw - 2 * var(--padding)) * 9 / 16); } }

/* CLICKS / COVERS */
.clicks { position: relative; margin-top: 4rem; }
.clicks .wrapper { padding-block: 4rem; }
.clicks h2 { text-align: center; }
.cover-wrapper { justify-content: space-between; align-items: center; gap: 3rem; }
.cover-wrapper .left-col { flex: 0 0 300px; }
.cover-wrapper .covers-btn { width: fit-content; border: 1px solid var(--colorGold); border-radius: 10px; padding: 1rem 2rem; margin-top: 3rem; display: block; }
.clicks-image { margin-left: auto; width: fit-content; flex-basis: 60%; max-width: 700px; }
.clicks-image img { width: inherit; height: inherit; object-position: center; object-fit: contain; }

@media screen and (max-width: 720px) {
  .clicks .wrapper { padding-block: 2rem; }
  .cover-wrapper { flex-direction: column-reverse; justify-content: space-between; align-items: center; gap: 2rem; }
  .cover-wrapper .left-col a { margin: 2rem auto 0; }
}

/* ==========================================================================
   NEXT MATCH
   ========================================================================== */
.next-match { position: relative; }
.next-match::before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); position: absolute; }
.next-match .bg-img { filter: grayscale(0.8); transform: translateZ(0); will-change: filter; background-image: var(--bg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.next-match-info { color: #fff; position: relative; text-align: center; }
.next-match-info h3 { font-weight: 600; font-size: 20px; }
.next-match-info h4 { font-size: 18px; margin-top: 3rem; }
.next-match-info .date-info { margin-block: 2rem 1rem; font-size: 16px; }
.next-match-info .date-info span { display: block; }

.next-match-teams { font-size: 72px; line-height: 90%; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 800; justify-content: center; gap: 1rem; display: grid; grid-template-columns: 1fr 2ch 1fr; }
.next-match-teams .vs { font-size: 60px; color: var(--colorGold); align-self: center; font-weight: 600; }
.next-match-teams .home { text-align: right; justify-content: end; }
.next-match-teams .away { text-align: left; }
.next-match-teams .home, .next-match-teams .away { align-items: center; gap: 1rem; font-weight: 600; letter-spacing: -0.25px; text-transform: uppercase; }
.next-match-teams .team-logo { width: 120px; height: 120px; object-fit: contain; }
.next-match-teams .away .team-logo { order: -1; }

.match-center-btn { background-color: #000; padding: 1rem 3rem; border-radius: 30px; width: fit-content; margin: 4rem auto 0; }

@media screen and (max-width: 1220px) { .next-match-teams { font-size: 60px; } .next-match-teams .vs { font-size: 45px; } .next-match-teams .team-logo { width: 100px; height: 100px; } }
@media screen and (max-width: 980px)  { .next-match-teams { font-size: 50px; } .next-match-teams .vs { font-size: 40px; } }
@media screen and (max-width: 880px)  { .next-match-teams .team-name { display: none; } .next-match-teams .vs { font-size: 30px; } }
@media screen and (max-width: 520px)  { .next-match-info .date-info { margin-bottom: 3rem; } .match-center-btn { padding: 0.5rem 2rem; font-size: 14px; } .next-match-teams .team-logo { width: 80px; height: 80px; } }
@media screen and (max-width: 440px)  { .next-match-info h3 { font-size: 18px; } .next-match-info h4 { font-size: 16px; } .next-match-info .date-info { font-size: 14px; } }

/* ==========================================================================
   CATEGORY PAGES
   ========================================================================== */
.category-wrapper { margin-top: 3rem; }
.category-grid { margin-bottom: 3rem; }
.category-grid .card-wrapper { min-height: 300px; }
.list { max-width: 800px; margin-inline: auto; display: grid; grid-template-columns: subgrid; grid-auto-flow: dense; grid-column: 1 / 4; gap: 2rem; }
.list .card .card-lead { display: none; }
.list > .box.wide { grid-column: 1 / -1; margin-inline: auto; }
.pagination { margin-block: 2rem; display: flex; gap: 1rem; justify-content: center; }

@media screen and (max-width: 1120px) { .category-list.grid { grid-template-columns: repeat(2, 1fr) 300px !important; } .list { grid-column: 1 /3; } .category-wrapper { margin-top: 2rem; } }
@media screen and (max-width: 920px)  { .category-list.grid { grid-template-columns: repeat(2, 1fr) !important; } .list { grid-column: 1 / 3; } .category-list > aside:has(> .box.rect) { grid-column: 1 / -1; margin-inline: auto; } .category-grid { margin-bottom: 2rem; } }
@media screen and (max-width: 740px)  { .category-grid.grid > div:first-of-type { grid-column: 1 / -1 !important; } .category-grid.grid > div:nth-of-type(2) { grid-column: 1 / 2 !important; } .category-grid.grid > aside { grid-column: 1 / -1 !important; grid-row: 2 /3; margin-inline: auto; } .list { gap: 1rem; } }
@media screen and (max-width: 560px)  { .category-list.grid { display: block; } }
@media screen and (max-width: 520px)  { .list { gap: 1rem 0.5rem; margin-bottom: 1rem; } .category-wrapper { margin-top: 1.5rem; } }

.category-wrapper.bloggers-category { margin-bottom: 4rem; }
.category-bloggers { gap: 3rem 2rem; }
.category-bloggers .card-wrapper > a { position: relative; }
.category-bloggers > .box.wide { grid-column: 1 / -1; margin-inline: auto; }

@media screen and (max-width: 1060px) { .category-bloggers { gap: 2rem; } }
@media screen and (max-width: 920px)  { .category-bloggers { gap: 1rem; } }
@media screen and (max-width: 720px)  { .category-bloggers.grid { grid-template-columns: 1fr; gap: 2rem; } }
@media screen and (max-width: 520px)  { .category-bloggers.grid { gap: 1rem; } }

/* ==========================================================================
   SINGLE ARTICLE
   ========================================================================== */
.article article { margin-block: 2rem; --width: 1100px; }
.article-header { position: relative; margin-bottom: 8rem; }
.article-img { max-width: var(--width); margin-inline: auto; position: relative; border-radius: 20px; overflow: hidden; margin-top: 3rem; width: 100%; }
.article-img::before { content: ""; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); position: absolute; left: 0; top: 0; pointer-events: none; }

.article-title { font-size: 42px; line-height: 110%; width: 100%; margin-block: 1rem; max-width: 900px; padding-inline: 2rem; bottom: 2rem; left: 50%; transform: translateX(-50%); color: #fff; z-index: 2; text-wrap: balance; text-align: center; }
.article-category { font-weight: 800; order: -1; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-size: 2rem; }
.article-category::before { content: ""; position: absolute; left: 20%; top: -0.25rem; width: 60%; border-top: 4px solid; }
.article-header > *:not(.article-img) { position: absolute; }

.article-details { top: calc(100% + 1rem); width: 100%; max-width: var(--width); left: 50%; transform: translateX(-50%); justify-content: space-between; flex-wrap: wrap; padding: 1rem 2rem; background-color: #444; border-radius: 20px; color: #fff; }
.article-logo { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); width: 100px; filter: brightness(0) invert(1); }
.article-logo::before { content: ""; width: 4ch; position: absolute; left: 50%; transform: translateX(-50%); top: -5px; border-top: 2px solid #fff; }
.article-author, .article-date { font-size: 14px; }
.article-share { width: 100%; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--colorGold); }
.article-share ul { justify-content: end; filter: var(--filterGold); }
.article-top-banner { margin-bottom: 2rem; }

.article-body-wrapper { max-width: var(--width); margin-inline: auto; gap: 2rem; justify-content: space-between; flex-wrap: wrap; }
.article-body-wrapper[data-article="news"] .article-body { display: none; }
.article-body-wrapper[data-article="report"] .article-news { display: none; }
.article-body-wrapper .aside-top { width: 100%; }
.article-body-wrapper .aside-top > div { margin-inline: auto; }
.article-body-buttons { width: 100%; gap: 1rem; }
.article-btn { border-radius: 5px; padding: 1rem 2rem; border: 1px solid #000; cursor: pointer; }
.article-btn.active { background-color: #000; color: var(--colorGold); }

.article-body { padding: 2rem; background-color: #fff; border-radius: 20px; display: flex; flex-direction: column; }
.article-body > * { max-width: 650px; font-size: 18px; line-height: 150%; }
.article-body > *:not(:last-child) { margin-bottom: 1rem; }
.article-body-wrapper aside > * { position: sticky; top: 0; }
.article-col { width: calc(100% - 300px - 2rem); }
.article-news { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.article-news .match-article { height: 350px; }

.article-body > :is(h1, h2, h3, h4, h5, h6), .article-body :is(p, li, h1, h2, h3, h4, h5, h6) > a { color: var(--colorDarkGold); font-weight: 700; }
.article-body > p:empty { display: none; }
.wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16/9; }
.article-body > ins { max-width: 100%; margin-inline: auto; width: 100%; }
.article-body > .game-center-link { color: var(--colorGold); font-weight: 600; }
.article-body .article-tags { gap: 1ch; }
.article-body .article-tags li { font-size: 12px; }

.article-footer { padding: 2rem; background-color: #f0f0f0; border-radius: 20px; margin: 2rem auto 0; max-width: var(--width); }
.article-footer-header { font-weight: 700; font-size: 20px; margin-bottom: 1rem; }
.tags { flex-wrap: wrap; gap: 1rem; }
.tag { padding: 0.5rem 1rem; border-radius: 5px; background-color: #000; color: #fff; font-size: 14px; }
.related-articles { padding-block: 3rem; }
.related-grid .card { height: 350px; }

.blogger-footer { max-width: var(--width); margin-inline: auto; background-color: #fff; border-radius: 20px; display: grid; grid-template-columns: 200px 1fr; padding: 1rem 2rem; gap: 0 2rem; margin-top: 2rem; place-items: center; }
.blogger-footer-img { grid-row: 1 / 3; grid-column: 1 / 2; aspect-ratio: 1; border-radius: 20px; overflow: hidden; }
.blogger-footer-name { font-size: 2rem; }
.blogger-footer--info { grid-column: 2 / -1; grid-row: 1 / 2; padding: 1rem 2rem; border-radius: 10px; background-color: #000; color: #fff; align-items: center; justify-content: space-between; width: 100%; }
.blogger-footer .social li { width: 1.5rem; height: 1.5rem; }
.blogger-footer-more { justify-content: space-between; align-items: center; font-size: 18px; width: 100%; }
.blogger-footer-more .blogger-more { margin-left: 2rem; color: var(--colorGold); font-weight: 600; }
.blogger-footer-more .blogger-all { background-color: var(--colorGold); padding: 1rem 2rem; border-radius: 5px; }

/* INTERVIEW PAGES */
.interview.article article { margin-top: 0; }
.interview .article-img { max-width: unset; border-radius: 0; height: 100dvh; margin-top: 0; }
.interview-category { position: absolute; top: 2rem; left: var(--padding); font-size: 2rem; color: #fff; text-shadow: 2px 2px 5px #000; border-bottom: 3px solid var(--colorGold); z-index: 2; }
.interview .article-body-wrapper { flex-direction: column; }
.interview .article-body figure { max-width: unset; margin-block: 2rem; }
.interview .article-body > * { margin-inline: auto; width: 100%; }
.interview figure.wp-block-video { max-width: 400px !important; }
.today-yt-banner { order: unset !important; width: fit-content; margin-inline: auto; }

@media screen and (max-width: 1164px) { .interview .article-details { width: calc(100% - 2 * var(--padding)); margin-inline: auto; } }
@media screen and (max-width: 1120px) { .article-news { gap: 1rem; } }
@media screen and (max-width: 1080px) { .article-title { font-size: 36px; } .blogger-footer-more .blogger-more { margin-left: 0; } .article-category { font-size: 26px; } }
@media screen and (max-width: 980px)  { .article-title { margin-block: 0; } .blogger-footer { gap: 1rem; } }
@media screen and (max-width: 940px)  { .blogger-footer-more { flex-direction: column; align-items: flex-end; gap: 2rem; } .article-top-banner { display: none; } }
@media screen and (max-width: 900px)  { .article-news { grid-template-columns: 1fr; grid-gap: 1rem; } .interview .article-body figure { width: calc(100% + 4rem); margin-left: -2rem; } }
@media screen and (max-width: 820px)  { 
  .article article { margin-block: 1rem; } .article-title { font-size: 32px; } .article-body-wrapper { flex-direction: column; } 
  .article-body-wrapper aside { margin-inline: auto; } .blogger-footer { padding-inline: 1rem; } .article-col { width: 100%; }
  .article-news { grid-template-columns: 1fr 1fr; } .article-news .match-article { height: 300px; } .article-img { margin-top: 2rem; }
}
@media screen and (max-width: 760px)  { 
  .blogger-footer-img { grid-row: 1 / 2; } .blogger-footer--info { grid-column: 1 / -1; grid-row: 2 / 3; } .blogger-footer-more { align-self: end; }
  .article-header { gap: 1rem; } .match .article-header > *:not(.article-img) { position: relative; } .match .article-img { order: -1; }
  .interview .article-img { height: 80dvh; } .interview-category { font-size: 1.75rem; }
}
@media screen and (max-width: 680px)  { 
  .article-body > * { max-width: calc(100vw - 2 * var(--padding) - 4rem); } .article-title { font-size: 26px; padding-inline: 1.5rem; }
  .article-img { height: 350px; } .blogger-footer { grid-template-columns: 150px 1fr; gap: 0.5rem; } .blogger-footer--info { padding: 1rem; }
  .blogger-footer-name { font-size: 1.5rem; } .blogger-footer-more { gap: 1rem; font-size: 16px; } .blogger-footer-more .blogger-all { padding: 0.5rem 1rem; }
}
@media screen and (max-width: 620px)  { 
  .article-body > * { font-size: 16px; } .article-footer { padding: 1rem; border-radius: 10px; } 
  .article-body, .article-details, .article-img { border-radius: 10px; } .article-category { font-size: 20px; } 
  .article-details { top: calc(100% + 0.5rem); } .article-title { bottom: 1.5rem; } .article-logo { width: 60px; } .article-logo::before { width: 3ch; top: -3px; border-top: 1px solid #fff; }
}
@media screen and (max-width: 580px)  { .article-news { grid-template-columns: 1fr; } .interview-category { font-size: 1.5rem; top: 1rem; } .interview .article-img { height: 65dvh; } }
@media screen and (max-width: 520px)  { 
  .article-title { font-size: 22px; padding-inline: 1rem; } .tags { gap: 1rem 0.5rem; } .tag { padding: 0.5rem 0.75rem; font-size: 12px; }
  .blogger-footer { gap: 0; padding-inline: 0.5rem; } .blogger-footer-img { grid-column: 1 / -1; width: 150px; margin-inline: auto; }
  .blogger-footer-more { grid-column: 1 / -1; align-items: center; margin-top: 1rem; } .article-btn { padding: 0.5rem 1rem; font-size: 14px; }
  .article-body { padding: 1rem 1rem 0; } .article-body > * { max-width: calc(100vw - 2 * var(--padding) - 2rem); } .article-details { padding: 0.5rem 1rem; }
  .interview .article-body figure { width: calc(100% + 2rem); margin-left: -1rem; } .article-header { margin-bottom: 6rem; } .article-body > .card-wrapper { width: calc(100% + 2rem); margin-left: -1rem; max-width: unset; }
}
@media screen and (max-width: 420px)  { .blogger-footer-more { font-size: 14px; } .blogger-footer-name { font-size: 1.25rem; } .blogger-footer .social li { width: 1.25rem; height: 1.25rem; } .interview-category { font-size: 1.25rem; } }

/* ==========================================================================
   MATCH REPORT 
   ========================================================================== */
.match .article-img { margin-top: 0; }
.match-report { --space: 2rem; width: 100%; bottom: 0; background-color: rgba(0, 0, 0, 0.5); max-width: var(--width); transform: translateX(-50%); left: 50%; z-index: 5; border-radius: 20px; color: #fff; padding: 1rem var(--space); }
.match-score, .match-title { display: grid; grid-template-columns: 1fr 1rem 1fr; grid-gap: 1rem; font-size: 1.75rem; max-width: 550px; margin-inline: auto; text-align: center; }
.match-score .home, .match-title .home { text-align: right; } .match-score .away, .match-title .away { text-align: left; }
.match-score .home { padding-right: 1rem; } .match-score .away { padding-left: 1rem; }
.match-info { font-size: 12px; gap: 1ch; flex-wrap: wrap; justify-content: center; margin-bottom: 0.5rem; }
.match-venue { width: 100%; text-align: center; }
.match-report-options { gap: 0.5ch; margin: 1rem auto 0; width: fit-content; font-size: 14px; border-top: 1px solid var(--colorGold); padding-top: 0.5rem; position: relative; z-index: 2; }
.match-report-btn { cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 5px; } .match-report-btn.on { background-color: rgba(255, 255, 255, 0.25); }
.match-report-lists { display: none; font-size: 12px; position: absolute; top: 1rem; left: var(--space); width: calc(100% - 2 * var(--space)); height: calc(100% - 2rem); justify-content: space-between; align-items: center; }
.away li { text-align: right; justify-content: end; }
.match-report.lineups .match-report-lineups, .match-report.goals .match-report-goals, .match-report.cards .match-report-cards, .match-report.subs .match-report-subs { display: flex; }
.match-report-lists li { display: flex; align-items: center; position: relative; } .match-report-lists li .min { color: var(--colorGold); margin-right: 5px; }
.match-report-subs .arrow { display: inline-block; width: 1rem; height: 1rem; background-image: url("../assets/icons/arrow.svg"); background-size: contain; }
.match-report-subs .arrow.in { filter: invert(97%) sepia(47%) saturate(4436%) hue-rotate(73deg) brightness(95%) contrast(83%); transform: rotate(180deg); }
.match-report-subs .arrow.out { filter: invert(18%) sepia(42%) saturate(6499%) hue-rotate(331deg) brightness(104%) contrast(86%); }
.away li .min { order: 5; margin-inline: 5px 0; }
.match-report-goals .home li { padding-left: 1rem; } .match-report-goals .away li { padding-right: 1rem; }
.match-report-goals li::after { content: ""; width: 0.75rem; height: 0.75rem; background-image: url("../assets/icons/goal.svg"); background-size: contain; filter: var(--filterGold); position: absolute; }
.match-report-goals .home li::after { left: 0; } .match-report-goals .away li::after { right: 0; }

.match-report-cards .refCard { width: 0.75rem; height: 0.75rem; background-size: contain; }
.match-report-cards .home .refCard { order: -1; margin-right: 5px; } .match-report-cards .away .refCard { order: 10; margin-left: 5px; }
.match-report-cards .refCard.yellow { background-image: url("../assets/icons/yellow.svg"); } .match-report-cards .refCard.red { background-image: url("../assets/icons/red.svg"); }
.match-report-cards .refCard.yelred { background-image: url("../assets/icons/red.svg"), url("../assets/icons/yellow.svg"); background-position: center, center; background-size: 0.5rem, contain; background-repeat: no-repeat, no-repeat; }

.article.match .article-header { margin-bottom: 120px; }
.article.match:has(.paoktoday-match) .article-header { margin-bottom: calc(260px + 4rem); }
.article.match .article-details { top: calc(100% + 1rem); }
.article.match:has(.paoktoday-match) .article-details { top: calc(100% + 170px + 2rem); }
.paoktoday-match { top: calc(100% + 1rem); left: 50%; transform: translateX(-50%); background-color: var(--colorFt); width: 100%; max-width: var(--width); padding: 1rem 2rem; border-radius: 20px; }
.paoktoday-match .logo { max-width: 225px; margin-inline: auto; }
.paoktoday-match h3 { text-align: center; font-size: 32px; text-shadow: 1px 1px 5px #fff; }
.paoktoday-matchvideos { gap: 2rem; justify-content: center; margin-top: 1rem; }
.paoktoday-match .link { padding: 0.75rem 1.5rem; border-radius: 10px; background-color: #000; color: #fff; font-size: 14px; }
.article.match .short { display: none; }

@media screen and (max-width: 1020px) { .match-report { --space: 1rem; } .match-score, .match-title { display: grid; grid-template-columns: 1fr 0.5rem 1fr; grid-gap: 0.25rem; font-size: 1.5rem; max-width: 500px; } }
@media screen and (max-width: 880px)  { .match-report { --space: 0.5rem; } .paoktoday-match { padding: 1rem; } .paoktoday-matchvideos { gap: 1rem; } }
@media screen and (max-width: 760px)  { 
  .article.match .article-header { margin-bottom: 2rem !important; }
  .match-report { background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 200%); display: flex; flex-direction: column; margin-top: -12.5rem; }
  .match-info { order: 1; } .match-title { order: 2; } .match-score { order: 3; } .match-report-options { order: 4; } .match-report-lists { position: relative; order: 5; padding-bottom: 2rem; }
}
@media screen and (max-width: 680px)  { 
  .match-report { margin-top: -11rem; } .match-score, .match-title { font-size: 1.25rem; } .match-report-options { font-size: 12px; margin-top: 0.5rem; padding-top: 0.25rem; }
  .match-report-lists { padding-bottom: 1rem; } .article.match .short { display: block; } .article.match .full { display: none; } .paoktoday-match h3 { font-size: 24px; } .paoktoday-match .logo { max-width: 170px; }
}
@media screen and (max-width: 520px)  { 
  .paoktoday-match .link { font-size: 12px; border-radius: 5px; padding: 0.5rem 1rem; } .paoktoday-matchvideos { gap: 0.5rem; margin-top: 0.5rem; }
  .match-report-subs li { display: grid; grid-template-columns: max-content repeat(3, auto); gap: 3px; } .match-report-subs li:not(:last-of-type) { margin-bottom: 5px; }
  .match-report-subs li .min { margin: 0; } .subs-home li .arrow { text-align: left; } .match-report-subs li .arrow { grid-column: 2/3; }
  .subs-away li .min { grid-column: 3/4; grid-row: 1/2; } .subs-away li .player.sub-in { grid-column: 1/2; grid-row: 1/2; } .subs-away li .player.sub-out { grid-column: 1/2; grid-row: 2/3; }
}

/* ==========================================================================
   BLOG HEADER & DETAILS
   ========================================================================== */
.article-header.blog-header > * { position: relative; }
.blogger-category { order: -2; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.4px; text-align: center; margin-bottom: 2rem; color: var(--colorGold); }
.blogger { order: -1; align-items: center; gap: 2rem; max-width: var(--width); margin-inline: auto; margin-bottom: 1rem; }
.blogger-img { width: 150px; height: 150px; order: -1; border-radius: 20px; overflow: hidden; }
.blogger-name { font-size: 2.5rem; padding-right: 1ch; }

.blog-header { margin-bottom: 2rem; }
.blog-header .article-title { background-color: #000; text-align: center; max-width: var(--width); font-size: 3rem; padding: 2rem 3rem 4rem; bottom: unset; left: unset; transform: translateX(0); margin: 0 auto; border-radius: 20px 20px 0 0; }
.blog .article-img { margin-top: -2rem; z-index: 2; }
.blog .article-details { margin-top: 1rem; justify-content: space-between; }
.blog .article-share { width: fit-content; border: none; margin-top: 0; padding-top: 0; }
.article-share.cover-share { width: fit-content; margin: 2rem auto; padding: 1rem 2rem; border: 1px solid var(--colorGold); border-radius: 30px; }

@media screen and (max-width: 1080px) { .blog-header .article-title { font-size: 2.5rem; } .blogger-img { width: 180px; } .article-share.cover-share ul li { width: 2rem; height: 2rem; } }
@media screen and (max-width: 820px)  { .blogger-name { font-size: 2rem; } .blog-header .article-title { font-size: 2rem; padding-inline: 2rem; } }
@media screen and (max-width: 680px)  { .blogger-name { font-size: 1.75rem; } .blogger-img { width: 150px; } }
@media screen and (max-width: 620px)  { .blog-header .article-title { font-size: 1.75rem; padding-inline: 1.5rem; } }
@media screen and (max-width: 480px)  { 
  .blog-header .article-title { font-size: 1.5rem; padding-inline: 1rem; } .blogger-img { width: 120px; } .blogger-name { font-size: 1.5rem; }
  .article-share.cover-share { padding: 0.5rem 1rem; border-radius: 20px; } .article-share.cover-share ul li { width: 1.5rem; height: 1.5rem; }
}

/* ==========================================================================
   MATCH CENTER
   ========================================================================== */
.home-match-center { padding-block: 5rem; }
@media screen and (max-width: 620px) { .home-match-center .section-header { margin-bottom: 2rem; } }

.match-center-header { padding-block: 3rem; }
.match-center-header h2 { font-size: 3rem; text-align: center; font-weight: 700; }
.match-categories { background-color: #333; color: #fff; padding-block: 2rem; }
.match-categories-list { gap: 1rem; justify-content: center; flex-wrap: wrap; }
.match-category { padding: 0.5rem 1rem; background-color: #777; border-radius: 5px; font-size: 14px; cursor: pointer; }
.match-category.on { background-color: #000; color: var(--colorGold); }

.match-list { container-name: match-list; container-type: inline-size; }
.match-list-type { margin-top: 2rem; gap: 1rem; }
.match-list-type-option { padding: 0.5rem 1rem; border: 1px solid #000; border-radius: 5px; font-size: 14px; cursor: pointer; }
.match-list-type-option.on { background-color: #000; color: var(--colorGold); }
.match-list-wrapper { margin-top: 2rem; gap: 3rem; }
.match-list-container { flex-grow: 1; }

.month-header { font-weight: 600; font-size: 22px; margin-bottom: 1rem; font-family: "Fira Sans Extra Condensed", sans-serif; text-transform: uppercase; }
.month-btns { font-family: "Fira Sans Extra Condensed", sans-serif; text-transform: uppercase; font-weight: 500; font-size: 18px; justify-content: space-between; margin-top: 2rem; }

.match-item { margin-bottom: 1rem; display: grid; grid-template-columns: 5rem 1fr; gap: 0 1rem; }
.match-icon { grid-row: 1 / 3; background-color: #000; padding: 1.25rem; border-radius: 10px; aspect-ratio: 1; }
.match-icon img { filter: brightness(0) invert(1); }
.match-item .top { background-color: #ddd; padding: 0.5rem; align-items: center; border-radius: 5px; }
.match-item .sport { font-size: 14px; font-weight: 600; text-transform: uppercase; }
.match-item .competition { font-size: 12px; }
.match-item .date { margin-left: auto; font-size: 12px; font-weight: 600; }
.match-item .time { margin-left: 1ch; padding-left: 1ch; border-left: 1px solid #000; font-size: 12px; }
.results .match-item .time { display: none; }

.match-item-info { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 600; font-size: 26px; padding-block: 0.5rem; display: grid; grid-template-columns: 1fr 1ch 1fr; grid-gap: 1ch; padding-inline: 0.5rem; align-items: center; }
.match-item-info .dash { text-align: center; }
.match-center.results .match-item-info { grid-template-columns: 1fr auto 1fr; }

.match-item .score { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 600; font-size: 22px; padding-block: 0.5rem; display: grid; grid-template-columns: auto 1ch auto; padding-inline: 1rem; margin: 0.5rem auto; grid-gap: 1ch; width: fit-content; background: #000; color: #fff; border-radius: 5px; position: relative; }
.match-item-info .home, .match-item-info .away { display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; }
.match-item .score a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.match-item .score .home, .match-item-info .home { text-align: right; }
.match-item .home { justify-content: flex-end; }
.match-item .team-logo { width: 45px; height: 45px; object-fit: contain; mix-blend-mode: darken; }
.match-item .away .team-logo { order: -1; }
.match-item-info:has(+ .score) { padding-bottom: 0; }
.match-center.results .match-item-info > .dash { display: none; }

.match-item .bottom { font-size: 14px; padding: 0.25rem 0.5rem; background-color: var(--colorGold); width: fit-content; margin-inline: auto; border-radius: 5px; }
.match-item .bottom:empty { display: none; }
.match-list-container .tables-list > div:not(:last-child) { margin-bottom: 4rem; }
.match-list-container .tables-list h2 { margin-bottom: 1rem; font-weight: 500; font-size: 24px; }

@container match-list (width < 620px) { .match-item { grid-template-columns: 4rem 1fr; gap: 0 0.75rem; } .match-icon { padding: 1rem; } .match-item .team-logo { width: 40px; height: 40px; } }
@container match-list (width < 480px) { 
  .match-item { gap: 0.5rem; grid-template-columns: 3rem 1fr; } .match-icon { grid-row: 2 / 3; padding: 0.75rem; } 
  .match-item .top { grid-column: 1 / -1; } .match-item-info { padding-top: 0; } .match-item .team-logo { width: 40px; height: 40px; } .match-item .score { padding-inline: 0.5rem; grid-gap: 5px; } 
}
@container match-list (width < 450px) { .match-icon { padding: 0.625rem; border-radius: 5px; grid-row: 1 / 2; } .match-item-info { gap: 0 1ch; grid-column: 1 / -1; } .match-item .top { grid-column: 2 / 3; } }
@container match-list (width < 375px) {
  .match-item .sport { font-size: 12px; } .match-item .competition, .match-item .time { margin-left: 0.5ch; padding-left: 0.5ch; } .match-item { grid-template-columns: 2.5rem 1fr; }
  .match-icon { padding: 0.5rem; } .match-item .team-logo { width: 2rem; height: 2rem; } .match-center.results .match-item .team-logo { width: 25px; }
  .match-center.results .match-item-info { font-size: 16px; } .match-center.results .match-item .score { font-size: 14px; }
  .match-center.results :is(.match-item-info .home, .match-item-info .away) { gap: 0.25rem; } .match-center.results .match-item-info { gap: 0 5px; }
}
@container match-list (width < 350px) { .match-item .sport { font-size: 12px; } .match-item .competition { font-size: 10px; } }

@media screen and (max-width: 940px) { .match-list-wrapper { gap: 2rem; } .match-item-info { font-size: 24px; } .match-center-header h2 { font-size: 2.5rem; } }
@media screen and (max-width: 820px) { .match-list-wrapper { gap: 1rem; flex-direction: column; } .match-item-info { font-size: 22px; } .match-item .score { font-size: 20px; grid-gap: 0.5ch; } }
@media screen and (max-width: 770px) { .match-categories-list { max-width: 500px; margin-inline: auto; } .match-list-type { justify-content: center; } }
@media screen and (max-width: 520px) { .match-center-header { padding-block: 2.5rem; } .match-center-header h2 { font-size: 2rem; } .match-list-type { gap: 0.5rem; margin-top: 1rem; } .match-categories { padding-block: 1rem; } .match-item-info { font-size: 20px; } .match-item .score { font-size: 18px; grid-gap: 0.25ch; padding-block: 0.25rem; } }
@media screen and (max-width: 480px) { .match-categories-list { gap: 0.5rem; } .match-category { padding-inline: 0.75rem; font-size: 12px; } }
@media screen and (max-width: 420px) { .match-item-info { font-size: 18px; } .match-item .score { font-size: 16px; } }

/* ==========================================================================
   YOUTUBE & 404
   ========================================================================== */
.latest-yt-video { background-color: var(--colorFt); padding-block: 2rem; color: #000; max-width: var(--width); margin: 2rem auto 0; border-radius: 20px; width: 100%; }
.latest-yt-header { font-size: 26px; letter-spacing: 0.28px; text-align: center; margin-bottom: 1rem; text-decoration: underline; }
.latest-yt-video .logo { max-width: 260px; margin-inline: auto; margin-top: 1rem; }
.yt-video { margin-inline: auto; justify-content: center; }
.yt-video iframe { max-width: 832px; width: 100%; padding-inline: 1rem; aspect-ratio: 16/9; height: auto; }

.not-found-text { text-align: center; font-size: 22px; padding-block: 4rem; }
.not-found-text p:has(> a) { width: fit-content; margin: 2rem auto 0; padding: 0.5rem 2rem; background-color: var(--colorGold); border-radius: 10px; }
@media screen and (max-width: 920px) { .not-found-text { font-size: 20px; } }
@media screen and (max-width: 520px) { .not-found-text { font-size: 18px; padding-block: 3rem; } }

/* ==========================================================================
   COVER PAGE / ALL NEWS / GLOMEX
   ========================================================================== */
.coverpage article { background-color: #000; color: #fff; }
.coverpage-header { text-align: center; padding: 2rem var(--padding); }
.coverpage-title { font-size: 2.5rem; }
.coverpage-wrapper { padding-inline: var(--padding); }
.coverpage-img { max-width: 1200px; margin-inline: auto; }
.covers-all { background-color: var(--colorGold); color: #fff; font-size: 14px; font-weight: 600; padding: 1rem 2rem; width: fit-content; margin: 2rem auto 0; border-radius: 10px; }
.coverpage .latest-yt-video { max-width: 1200px; }
.coverpage > article > footer { padding: 2rem; }
@media screen and (max-width: 1020px) { .coverpage-title { font-size: 2rem; } }
@media screen and (max-width: 520px) { .coverpage-title { font-size: 1.75rem; } }

.all-news .pagination { grid-column: 1 / -1; }

figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex { --outerPadding: 2rem; width: calc(100% + 2 * var(--outerPadding)); max-width: unset; margin-left: calc(-1 * var(--outerPadding)); }
@media screen and (max-width: 520px) { figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex { --outerPadding: 1rem; } }

/* ==========================================================================
   100 ΧΡΟΝΙΑ ΠΑΟΚ (Century Section)
   ========================================================================== */
.home-century { max-width: 100dvw; overflow: hidden; height: 100dvh; position: relative; background-color: var(--colorDarkGold); }
.home-century-wrapper { position: relative; padding-block: 4rem; color: #fff; height: 100%; }
.home-century-wrapper .wrapper { height: 100%; }

.century-header { z-index: 2; }
.century-header h2 { font-size: 45px; font-weight: 100; color: #000; }
.century-header h3 { font-size: 60px; letter-spacing: 5px; font-weight: 700; order: -1; width: fit-content; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

.century-articles { margin-top: auto; }
.century-articles .card { position: static; height: auto; background-color: transparent; border: none; }
.century-articles .card:hover { box-shadow: none; }

/* GPU Acceleration */
.century-articles .card-image {
  width: 55%; height: 100dvh; position: absolute; right: 0; top: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  will-change: opacity;
}
.century-articles .card-image::after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(90deg, rgba(113, 82, 27, 1), rgb(171, 136, 74, 0)); }
.century-articles .card.on .card-image { opacity: 1; }

.century-articles .card-title { font-weight: 300; max-width: 800px; text-wrap: pretty; font-size: 50px; color: #000; z-index: 2; }
.century-articles .card.on .card-title { color: #fff; }
.home-century-wrapper .box { margin-top: 50px; }

@media screen and (max-width: 1580px) { .century-articles .card-title { font-size: 45px; margin-bottom: 1.5rem; } .century-articles .card-image { width: 60%; } }
@media screen and (max-width: 1220px) { .century-articles .card-title { font-size: 40px; margin-bottom: 1rem; } .century-articles .card-image { width: 80%; } .century-header h2 { font-size: 35px; } .century-header h3 { font-size: 45px; letter-spacing: 5px; } }
@media screen and (max-width: 920px) { .home-century-wrapper { padding-block: 2rem; } .century-articles .card-title { font-size: 36px; margin-bottom: 0; } .century-articles > div:not(:first-of-type) { display: none; } }

.century-wrapper { width: calc(100% + 2 * var(--padding)); margin-left: calc(-1 * var(--padding)); padding: 1rem var(--padding); background-color: var(--colorDarkGold); border-radius: 20px; }
.century-wrapper > h2 { font-size: 24px; font-weight: 300; color: #fff; text-align: center; margin-block: 1rem; letter-spacing: 4px; }
.century-wrapper .card-category { display: none; }
.century-wrapper .card.cover { height: calc(100vw / 1.2); }
.century-wrapper .card.cover .card-image { aspect-ratio: 1.2; }
.century-wrapper .card-details .details-time { border-right: none; }
.century-wrapper > h2:last-of-type { z-index: 15; position: relative; }

.century-single { background-color: var(--colorDarkGold); }
.century-single .article-category { color: #fff; text-align: center; width: 300px; }
.century-single .article-category p:first-of-type { font-size: 40px; letter-spacing: 5px; font-weight: 600; border-bottom: 1px solid #fff; }
.century-single .article-category p:last-of-type { font-size: 25px; letter-spacing: 2px; margin-top: 5px; font-weight: 100; }
.century-single .article-category::before { display: none; }
.century-single .article-details { background-color: #000; }
.century-single .article-body { width: 100%; }
.century-single .article-body > * { max-width: unset; }
.century-single .article-body > iframe { max-width: 100%; }
.century-single .article-img { margin-top: 6.5rem; aspect-ratio: 1.2; }
.century-single .article-body figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex { max-width: 800px; margin-inline: auto; width: 100%; }
@media screen and (max-width: 680px) { .century-single .article-img { height: auto; } }

.centuryicon { border-radius: 10px; background-color: var(--colorDarkGold); color: #fff; font-family: "Fira Sans Extra Condensed", sans-serif; padding: 1rem 2rem; border-radius: 10px; text-align: center; margin-bottom: 10px; }
.centuryicon h2 { letter-spacing: 3px; font-weight: 600; font-size: 30px; }
.centuryicon h3 { letter-spacing: 1px; font-weight: 100; font-size: 22px; }
.centuryicon p { letter-spacing: 1px; font-weight: 300; font-size: 16px; margin-top: 4px; width: fit-content; margin-inline: auto; background-color: #000; padding: 4px 1rem; border-radius: 5px; }

/* LIVE SINGLE */
.live-single .article-body { width: 100%; }
.live-single .article-body > * { max-width: unset; }

/* ==========================================================================
   AUTHOR PAGE SPECIFIC STYLES
   ========================================================================== */
.author-page-header { margin-bottom: 30px; text-align: center; }
.author-page-image { margin: 0 auto 15px auto; }
.author-page-image img { max-width: 120px; height: auto; border-radius: 16px; box-shadow: 0 2px 8px -7px #000; }
.author-page-title { justify-content: center; margin-bottom: 15px; }
.author-page-bio { max-width: 800px; margin: 0 auto 20px auto; line-height: 1.6; color: var(--text-color, #333); }
.author-page-socials { justify-content: center; margin-top: 10px; }
.author .pagination { margin-top: 30px; }
/* ==========================================================================
   QUIZ PAGE STYLES
   ========================================================================== */
.quiz-header { font-size: 3rem; margin-top: 1rem; text-align: center; }
.question { font-size: 1.25em; text-align: center; background: #000; padding: 1rem; color: #fff; border-radius: 20px; margin-top: 1rem; }
.list-item { list-style-type: none; padding: 10px; margin: 5px 0; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 5px; text-align: center; cursor: default; transition: background-color 0.3s; }
.list-item.revealed { background-color: #000; color: white; }
.list-item.checked { background-color: #969696; color: white; }
.input-container { margin-bottom: 20px; margin-inline: auto; display: flex; justify-content: center; }
#user-input { font-size: 1rem; padding: .75rem 1rem; max-width: 360px; border-radius: 10px; text-align: center; width: 100%; border: 1px solid #000; }
.lives { margin-top: 20px; font-weight: bold; color: #000; text-align: center; justify-content: center; }
.lives h3 { margin-right: 1rem; }
#answers-list { padding: 1rem; }
#answers-list.error { background-color: #871919; transition: background-color 0.5s; }
.heart { width: 2rem; height: 2rem; filter: brightness(0); background-size: contain; background-image: url('../assets/icons/heart_empty.svg'); }
.heart.full { background-image: url('../assets/icons/heart_full.svg'); }

.quiz-wrapper { position: relative; }
.quiz-results, .quiz-info { background: #000; padding: 2rem; border-radius: 20px; color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 2; opacity: 1; pointer-events: all; transition: all .3s; }
.quiz-results.off, .quiz-info.off { opacity: 0; pointer-events: none; }
.quiz-info h2 { background: #fff; color: #000; padding: 1rem; border-radius: 10px; margin-bottom: 2rem; }
.quiz-info h3 { padding-inline: 2rem; margin-bottom: 1rem; }
.quiz-start { background-color: var(--colorGold); padding: .5rem 2rem; color: #000; margin: 2rem auto; cursor: pointer; border-radius: 10px; width: fit-content; }
.quiz-results { font-size: 22px; }
.result-msg { margin-block: 2rem; }
.show-results { margin-top: 1rem; font-size: 16px; color: var(--colorGold); cursor: pointer; }

@media screen and (max-width: 920px) { .quiz-header { font-size: 2rem; } }
@media screen and (max-width: 620px) {
  .question { font-size: 1rem; padding: 1rem; border-radius: 10px; }
  .quiz-info { padding: 1rem .5rem; }
  .quiz-info h2 { font-size: 1.25rem; padding: .25rem .5rem; }
  .quiz-info h3 { font-size: 1rem; padding-inline: 1rem; }
}