/* --- HOME PAGE / TOURNAMENT LISTING --- */

/* Shared layout */
.section-container,
.home-hero,
.listing-hero,
.ad-banner,
.ranking-notice {
  width: 90%;
  max-width: 1400px;
  margin: 20px auto;
  box-sizing: border-box;
}

.section-container {
  margin-block: 20px;
}

/* --- AD BANNER --- */
.ad-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(180px, 30vh, 320px);
  padding: 40px;
  text-align: center;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.ad-title {
  margin: 0;
  color: #00d4ff;
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ad-subtitle {
  margin-top: 10px;
  color: #8b949e;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- HERO --- */
.home-hero,
.listing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 20px;
  align-items: stretch;
}

.home-hero .hero-copy,
.listing-hero {
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(22, 27, 34, 0.96)),
    #161b22;
  border: 1px solid #30363d;
  border-radius: 18px;
  padding: clamp(24px, 4vw, 46px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.listing-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-hero h2,
.listing-hero h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.home-hero p,
.listing-hero p,
.promo-card p,
.announcement-card p,
.sponsor-message,
.section-header p:not(.eyebrow) {
  color: #8b949e;
  line-height: 1.55;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.btn-main.secondary {
  background: #21262d;
  color: var(--primary);
  border: 1px solid #30363d;
}

.btn-main.secondary:hover {
  border-color: var(--primary);
}

/* --- SECTION HEADERS --- */
.section-heading-row,
.section-header,
.featured-community-tournaments .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 12px;
}

.upcoming-label,
.section-header h2,
.section-heading.compact h3 {
  margin: 0;
  color: #ffffff;
}

.section-heading-row .eyebrow,
.section-header .eyebrow {
  margin-bottom: 0;
}

.upcoming-label,
.section-header h2 {
  font-size: 1.2rem;
}

.section-header p:not(.eyebrow) {
  margin: 0;
}

.text-link,
.status-msg a,
.dynamic-ad-card .promo-link {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}

.text-link:hover,
.status-msg a:hover,
.dynamic-ad-card .promo-link:hover {
  text-decoration: underline;
}

/* --- PROMOS / ADS / ANNOUNCEMENTS --- */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.community-ads-grid {
  align-items: stretch;
}

.community-ads-grid .promo-card {
  min-height: 100%;
}

/*
  66.2 — Community Ads mobile fit restore.
  The 16:5 fixed ad ratio belongs only to uploaded image ads.
  Default text cards must keep natural height, otherwise their descriptions
  are clipped on mobile single-column layout.
*/
.community-ads-grid > .promo-card:not(.image-only-ad) {
  height: auto;
  min-height: 132px;
  aspect-ratio: auto;
  overflow: visible;
}

.community-ads-grid > .promo-card.image-only-ad {
  min-height: 0;
  aspect-ratio: 16 / 5;
  overflow: hidden;
}

.promo-card,
.announcement-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
}

.hero-promo {
  min-height: 100%;
}

.promo-card h3,
.promo-card h4,
.announcement-card h4 {
  margin: 10px 0 8px;
  color: #ffffff;
}

.promo-tag {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.12);
  color: var(--primary);
  border: 1px solid rgba(0, 212, 255, 0.35);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.announcement-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.section-heading.compact {
  margin-bottom: 14px;
}

.dynamic-ad-card {
  border-style: dashed;
}

.dynamic-ad-card .promo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  font-weight: 900;
}

/* --- BANNERS --- */
.ersi-intro-banner,
.organizer-subscription-banner,
.major-sponsor-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 26px;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
}

.ersi-intro-banner {
  background:
    linear-gradient(135deg, rgba(242, 204, 96, 0.12), rgba(22, 27, 34, 0.96)),
    #161b22;
  border: 1px solid rgba(242, 204, 96, 0.35);
}

.organizer-subscription-banner,
.major-sponsor-banner {
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(22, 27, 34, 0.96)),
    #161b22;
  border: 1px solid rgba(0, 212, 255, 0.45);
}

.major-sponsor-banner {
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(22, 27, 34, 0.96)),
    #161b22;
  border-color: rgba(0, 212, 255, 0.35);
}

.ersi-intro-banner h3,
.organizer-subscription-banner h3,
.major-sponsor-banner h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  text-transform: uppercase;
}

.ersi-intro-banner p,
.organizer-subscription-banner p,
.major-sponsor-banner p {
  max-width: 850px;
  margin: 0;
  color: #c9d1d9;
  line-height: 1.55;
}

.ersi-intro-banner .btn-main,
.organizer-subscription-banner .btn-main,
.major-sponsor-banner .btn-main,
.featured-community-tournaments .section-header .btn-main {
  flex-shrink: 0;
}

#organizerSubscriptionBanner {
  display: none;
}

#organizerSubscriptionBanner.is-visible {
  display: flex;
}

/* --- FEATURED ORGANIZER TOURNAMENTS --- */
.featured-community-tournaments {
  margin-top: 34px;
}

.featured-community-tournaments .section-header {
  gap: 22px;
  margin-bottom: 18px;
}

.featured-community-tournaments .section-header > div {
  max-width: 760px;
}

.featured-community-tournaments h2 {
  margin: 4px 0 6px;
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1.2;
}

.featured-community-tournaments .section-header p:not(.eyebrow) {
  max-width: 720px;
}



/* =========================================================
   PATCH 64.1.3 — HOMEPAGE FEATURED LABEL LEFT ALIGNMENT
   =========================================================
   Keeps the Featured Organizer Tournaments blue eyebrow label
   aligned with the other homepage section labels on mobile/tablet.
   This is intentionally scoped to the homepage featured organizer
   section and does not modify the shared layout framework.
   ========================================================= */
.featured-community-tournaments .section-header > div {
  min-width: 0;
}

.featured-community-tournaments .section-header .eyebrow {
  text-align: left;
}

@media (max-width: 900px) {
  .featured-community-tournaments .section-header {
    align-items: flex-start !important;
    text-align: left;
  }

  .featured-community-tournaments .section-header > div {
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .featured-community-tournaments .section-header .eyebrow {
    width: 100%;
    text-align: left !important;
  }
}

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

.featured-community-tournaments .status-msg {
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(22, 27, 34, 0.96)),
    var(--panel);
  border-color: rgba(0, 212, 255, 0.18);
}

.featured-community-card {
  position: relative;
  padding: 20px;
  background: var(--panel);
  border: 1px solid rgba(0, 212, 255, 0.38);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.featured-community-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
}

.featured-community-card .card-header {
  margin-bottom: 14px;
}

.featured-community-card .card-title {
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.25;
}

.featured-community-card .card-meta {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.featured-community-card .meta-row,
.featured-community-card .card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.featured-community-card .meta-item,
.featured-community-card .stat-box {
  padding: 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
  color: #c9d1d9;
  font-size: 0.85rem;
}

.featured-community-card .card-stats {
  margin-top: 14px;
}

.featured-community-card .stat-label {
  display: block;
  margin-bottom: 4px;
  color: #8b949e;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.featured-community-card .stat-value {
  color: #ffffff;
  font-weight: 700;
}

.featured-community-card .btn-main,
.featured-community-card .join-btn {
  width: 100%;
  margin-top: 16px;
  box-sizing: border-box;
}

/* =========================================================
   PATCH 63.23 — FEATURED TOURNAMENT CARD CLEANUP
   =========================================================
   Keeps the featured tournament card compact by removing duplicate
   metadata in markup and ensuring the shorter payment button label
   remains inside the button on laptop/desktop views.
   ========================================================= */
.featured-community-card .join-btn,
.featured-community-card .featured-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.2;
  max-width: 100%;
}


.featured-tournament-tag,
.featured-community-card .featured-tournament-tag {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(35, 134, 54, 0.28);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.65);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

/* --- TOURNAMENT GRID AND CARDS --- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 20px auto;
}

.tournament-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: transform 0.2s, border-color 0.2s;
}

.tournament-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
}

.card-header,
.featured-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card-title {
  margin: 5px 0;
  color: var(--primary);
  font-size: 1.4rem;
  font-weight: 800;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.meta-row .meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-item a,
.location-box a {
  color: #00d4ff;
  font-weight: 600;
  text-decoration: none;
}

.meta-item a:hover,
.location-box a:hover {
  text-decoration: underline;
}

.location-box {
  padding: 6px 10px;
  border: 1px solid #30363d;
  border-radius: 8px;
  white-space: nowrap;
}

.card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: #8b949e;
  font-size: 0.85rem;
}

.stat-label {
  color: #ffffff;
  font-weight: 600;
}

.stat-value {
  color: #8b949e;
}

.join-btn {
  width: 100%;
  margin-top: 10px;
}

.join-btn.joined {
  background: #238636;
  color: #ffffff;
  cursor: not-allowed;
  opacity: 1;
}

/* Confirm payment button - shared for tournament page and homepage */
.join-btn.confirm-payment,
.featured-join-btn.confirm-payment,
.featured-community-card .join-btn.confirm-payment,
.featured-community-card .featured-join-btn.confirm-payment {
  background: #f97316 !important;
  color: #ffffff !important;
  border: 1px solid #fb923c !important;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.35) !important;
}

.join-btn.confirm-payment:hover,
.featured-join-btn.confirm-payment:hover,
.featured-community-card .join-btn.confirm-payment:hover,
.featured-community-card .featured-join-btn.confirm-payment:hover {
  background: #ea580c !important;
  border-color: #fdba74 !important;
  transform: translateY(-1px);
}

/* --- TOURNAMENT STATUS / SPONSORSHIP --- */
.tournament-status-badge {
  padding: 5px 9px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.tournament-status-badge.open {
  background: rgba(35, 134, 54, 0.25);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.45);
}

.tournament-status-badge.closed {
  background: rgba(255, 193, 7, 0.15);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.45);
}

.tournament-status-badge.completed {
  background: rgba(0, 212, 255, 0.12);
  color: var(--primary);
  border: 1px solid rgba(0, 212, 255, 0.45);
}

.tournament-status-badge.full {
  background: rgba(255, 77, 77, 0.15);
  color: #ff7b72;
  border: 1px solid rgba(255, 123, 114, 0.45);
}

.sponsored-card {
  position: relative;
  border-color: rgba(0, 212, 255, 0.6);
}

.sponsor-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 10px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sponsor-strip strong {
  color: #ffffff;
  font-size: 0.78rem;
}

.sponsor-message {
  margin: 0;
  font-size: 0.84rem;
}

.sponsored-notice,
.status-msg {
  grid-column: 1 / -1;
  border-radius: 12px;
  color: #c9d1d9;
}

.sponsored-notice {
  padding: 14px 16px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.35);
}

.sponsored-notice strong {
  color: var(--primary);
}

.status-msg {
  padding: 18px;
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
}

/* --- FILTERS --- */
.listing-filters,
.ranking-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing-filters {
  justify-content: flex-end;
}

.filter-btn,
.ranking-filter-btn {
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
}

.filter-btn {
  padding: 8px 13px;
  font-size: 0.76rem;
}

.ranking-filter-btn {
  padding: 9px 14px;
}

.filter-btn.active,
.filter-btn:hover,
.ranking-filter-btn.active,
.ranking-filter-btn:hover {
  background: rgba(0, 212, 255, 0.14);
  color: var(--primary);
  border-color: var(--primary);
}

/* --- ERSI / RANKING --- */
.ersi-section .ersi-card {
  border-color: rgba(0, 212, 255, 0.28);
}

.ersi-section .promo-tag {
  color: #f2cc60;
}

.ranking-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  margin-top: 18px;
  background: rgba(242, 204, 96, 0.08);
  border: 1px solid #f2cc60;
  border-radius: 14px;
  color: #ffffff;
}

.ranking-notice strong {
  color: #f2cc60;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.ranking-notice p {
  margin: 6px 0 0;
  color: #c9d1d9;
  font-size: 0.88rem;
  line-height: 1.45;
}

.ranking-hero {
  height: auto;
  min-height: 180px;
}

.rankings-panel {
  padding: 20px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 16px;
  box-sizing: border-box;
}

.ranking-filter-bar {
  margin-bottom: 16px;
}

.ranking-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ranking-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.ranking-table th,
.ranking-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #30363d;
  text-align: left;
}

.ranking-table th {
  color: #00d4ff;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ranking-table td {
  color: #ffffff;
  font-size: 0.92rem;
}

.featured-title-row {
  width: 100%;
}

.featured-title-row .card-title {
  margin: 0;
}

.featured-title-row .tournament-status-badge {
  flex-shrink: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
  .grid,
  .featured-community-tournaments .tournament-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-hero,
  .listing-hero {
    grid-template-columns: 1fr;
  }

  .listing-hero,
  .section-heading-row,
  .section-header {
    align-items: flex-start;
  }

  .promo-grid {
    grid-template-columns: 1fr;
  }

  .section-heading-row,
  .section-header,
  .ersi-intro-banner,
  .organizer-subscription-banner,
  .major-sponsor-banner,
  .ranking-notice {
    flex-direction: column;
  }

  .listing-filters {
    justify-content: flex-start;
  }

  .ersi-intro-banner .btn-main,
  .organizer-subscription-banner .btn-main,
  .major-sponsor-banner .btn-main,
  .featured-community-tournaments .section-header .btn-main,
  .ranking-notice .btn-main {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .community-ads-grid > .promo-card:not(.image-only-ad) {
    min-height: 128px;
    padding: 18px 20px;
  }
}


/* =========================================================
   PATCH 66.6 — FEATURED TOURNAMENTS MOBILE CTA RESTORE
   =========================================================
   The global mobile button rule makes homepage section-header CTAs
   full-width. The Featured Organizer Tournaments CTA should remain
   a normal compact button so it does not look like a stretched bar on
   mobile. Scoped only to this homepage section.
   ========================================================= */
@media (max-width: 900px) {
  .featured-community-tournaments .section-header {
    gap: 14px;
  }

  .featured-community-tournaments .section-header .btn-main {
    width: auto !important;
    min-width: 190px;
    max-width: 100%;
    align-self: flex-start;
    padding: 10px 18px;
    box-sizing: border-box;
  }
}

@media (max-width: 700px) {
  .grid,
  .featured-community-tournaments .tournament-grid,
  .featured-community-card .meta-row,
  .featured-community-card .card-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .home-hero,
  .listing-hero,
  .section-container,
  .ad-banner,
  .ranking-notice {
    width: 94%;
  }
}

/* --- HOME PAGE CENTERING FIX --- */
/* home.css is loaded only on the homepage, so this safely overrides the global
   sidebar margin behavior without affecting Registration or other pages. */
.main-content,
.main-content.expanded {
  width: min(94vw, 1400px) !important;
  max-width: 1400px !important;
  margin: calc(var(--banner-height) + 20px) auto 44px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.section-container,
.home-hero,
.listing-hero,
.ad-banner,
.ranking-notice {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.grid {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .main-content,
  .main-content.expanded {
    width: 100% !important;
    max-width: 100% !important;
    margin: calc(var(--banner-height) + 16px) auto 34px auto !important;
    padding: 0 14px !important;
  }

  .section-container,
  .home-hero,
  .listing-hero,
  .ad-banner,
  .ranking-notice {
    width: 100%;
  }
}


/* --- MAJOR SPONSORED ADS --- */
.major-sponsored-ads-section {
  display: block;
}

.major-sponsored-ads-section .section-heading-row p:not(.eyebrow) {
  margin: 6px 0 0;
  color: #c9d1d9;
  line-height: 1.45;
}

.major-sponsored-ads-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}

.major-sponsored-ad-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(22, 27, 34, 0.98)),
    #161b22;
  border: 1px solid rgba(0, 212, 255, 0.45);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
}

.major-sponsored-ad-image {
  width: 100%;
  min-height: 180px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0d1117;
}

.major-sponsored-ad-copy h4 {
  margin: 10px 0 8px;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.major-sponsored-ad-copy p {
  color: #c9d1d9;
  line-height: 1.55;
  margin: 0 0 14px;
}

.homepage-ad-image {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 800px) {
  .major-sponsored-ad-card {
    grid-template-columns: 1fr;
  }
}

/* --- TOP HOMEPAGE BANNERS: 3 EQUAL CARDS --- */
.homepage-banner-row {
  width: 100%;
  max-width: 1400px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  box-sizing: border-box;
}

.homepage-banner-row > .section-container {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Keep ERSI in the center */
#organizerSubscriptionBanner {
  order: 1;
}

#ersiIntroBanner {
  order: 2;
}

#majorSponsorBanner {
  order: 3;
}

/* Equal card layout */
.homepage-banner-row .organizer-subscription-banner,
.homepage-banner-row .ersi-intro-banner,
.homepage-banner-row .major-sponsor-banner {
  min-height: 230px;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

/* Controlled text sizing */
.homepage-banner-row h3 {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  line-height: 1.05;
}

.homepage-banner-row p:not(.eyebrow) {
  max-width: none;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Make all three buttons identical */
.homepage-banner-row .btn-main,
.homepage-banner-row .btn-main.secondary {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: var(--primary) !important;
  color: #000000 !important;
  border: 1px solid var(--primary) !important;
  border-radius: 8px;
  font-weight: 900;
  text-align: center;
  box-shadow: none !important;
}

.homepage-banner-row .btn-main:hover,
.homepage-banner-row .btn-main.secondary:hover {
  background: #5cecff !important;
  color: #000000 !important;
  border-color: #5cecff !important;
  transform: translateY(-1px);
}

/* Preserve admin visibility toggle for Organizer Plans */
#organizerSubscriptionBanner {
  display: none;
}

#organizerSubscriptionBanner.is-visible {
  display: flex;
}

/* Responsive */
@media (max-width: 1100px) {
  .homepage-banner-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #ersiIntroBanner {
    order: 2;
  }
}

@media (max-width: 760px) {
  .homepage-banner-row {
    grid-template-columns: 1fr;
  }

  .homepage-banner-row .organizer-subscription-banner,
  .homepage-banner-row .ersi-intro-banner,
  .homepage-banner-row .major-sponsor-banner {
    min-height: auto;
  }
}

/* --- Make top banner buttons smaller --- */
.homepage-banner-row .btn-main,
.homepage-banner-row .btn-main.secondary {
  width: auto;
  min-width: 190px;
  min-height: 34px;
  height: 34px;
  padding: 7px 14px;
  align-self: flex-start;
  font-size: 0.72rem;
  border-radius: 6px;
}

/* Optional: keep them aligned at the bottom of each card */
.homepage-banner-row .organizer-subscription-banner,
.homepage-banner-row .ersi-intro-banner,
.homepage-banner-row .major-sponsor-banner {
  justify-content: space-between;
}

/* Slightly increase font size for the 3 top banner buttons */
.homepage-banner-row .btn-main,
.homepage-banner-row .btn-main.secondary {
  font-size: 0.95rem;
}


/* --- FEATURED SPONSOR STRIP --- */
.featured-sponsor-strip-section {
  margin-top: 28px;
}

.featured-sponsor-strip-grid {
  display: grid;
  gap: 14px;
}

.featured-sponsor-strip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(22, 27, 34, 0.98)),
    #161b22;
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
}

.featured-sponsor-strip-copy h4 {
  margin: 10px 0 6px;
  color: #ffffff;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  text-transform: uppercase;
}

.featured-sponsor-strip-copy p {
  margin: 0;
  color: #c9d1d9;
  line-height: 1.5;
}

.featured-sponsor-strip-link {
  min-width: 140px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .featured-sponsor-strip-card {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .featured-sponsor-strip-link {
    width: 100%;
  }
}


/* --- SITE LEGAL FOOTER --- */
.site-legal-footer {
  width: 90%;
  max-width: 1400px;
  margin: 10px auto 42px;
  box-sizing: border-box;
}

.site-legal-footer-inner {
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  padding: 18px 20px;
}

.site-legal-footer strong {
  color: #ffffff;
}

.site-legal-footer p {
  margin: 8px 0 12px;
  color: #8b949e;
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.site-legal-footer a {
  color: var(--primary, #00d4ff);
  font-weight: 800;
  text-decoration: none;
}

.site-legal-footer a:hover {
  text-decoration: underline;
}

/* --- DESKTOP ADAPTIVE WIDTH UPGRADE --- */
/* Keeps the laptop layout stable, but lets large desktop monitors use more horizontal space. */
:root {
  --home-content-max: 1400px;
}

.main-content,
.main-content.expanded {
  width: min(94vw, var(--home-content-max)) !important;
  max-width: var(--home-content-max) !important;
}

.section-container,
.home-hero,
.listing-hero,
.ad-banner,
.ranking-notice,
.homepage-banner-row,
.grid {
  max-width: var(--home-content-max) !important;
}

@media (min-width: 1500px) {
  :root {
    --home-content-max: 1640px;
  }

  .main-content,
  .main-content.expanded {
    width: min(92vw, var(--home-content-max)) !important;
  }

  .home-hero,
  .listing-hero {
    grid-template-columns: minmax(0, 1.75fr) minmax(330px, 0.75fr);
  }

  .featured-community-tournaments .tournament-grid,
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1900px) {
  :root {
    --home-content-max: 1840px;
  }

  .main-content,
  .main-content.expanded {
    width: min(90vw, var(--home-content-max)) !important;
  }

  .home-hero,
  .listing-hero {
    grid-template-columns: minmax(0, 1.9fr) minmax(360px, 0.8fr);
  }

  .home-hero .hero-copy,
  .listing-hero {
    padding: clamp(32px, 3.2vw, 58px);
  }
}

@media (min-width: 2300px) {
  :root {
    --home-content-max: 2040px;
  }
}

@media (max-width: 1100px) {
  :root {
    --home-content-max: 1400px;
  }
}

/* =========================================================
   PATCH 63.29 — SPONSOR ADS AS RESPONSIVE HTML UNITS
   =========================================================
   The sponsor image ads must scale with the page like normal
   responsive HTML blocks. Do not hard-cap the live display to
   native artwork pixel widths. The upload dimensions remain the
   artwork guide, while the live slot follows the page/grid width.
   ========================================================= */
.image-only-ad {
  --gbn-ad-aspect-ratio: 16 / 5;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--gbn-ad-aspect-ratio);
  padding: 0 !important;
  overflow: hidden;
  background: #0d1117;
  box-sizing: border-box;
}

.sponsor-image-ad-media,
.sponsor-image-ad-link {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
}

.sponsor-image-ad-image {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0d1117;
  object-fit: contain;
  object-position: center center;
  box-sizing: border-box;
}

/* Hero Sponsor Slot — artwork guide 380 × 300.
   Live display follows the right-side hero grid cell. */
.hero-promo.premium-top-right-placement {
  --gbn-ad-aspect-ratio: 380 / 300;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  border-color: rgba(0, 212, 255, 0.55);
}

.hero-promo.premium-top-right-placement .premium-top-right-placement-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

/* Premium Homepage Banner — artwork guide 1200 × 300.
   Live display follows the full homepage content width. */
.major-sponsored-ad-card.image-only-ad {
  --gbn-ad-aspect-ratio: 1200 / 300;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  border-radius: 18px;
}

.major-sponsored-ad-card.image-only-ad .sponsor-image-ad-media,
.major-sponsored-ad-card.image-only-ad .sponsor-image-ad-link,
.major-sponsored-ad-card.image-only-ad .major-sponsored-ad-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.major-sponsored-ad-card.image-only-ad .major-sponsored-ad-image {
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Featured Strip — artwork guide 1280 × 180.
   Live display follows the section width. */
.featured-sponsor-strip-card.image-only-ad {
  --gbn-ad-aspect-ratio: 1280 / 180;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  border-radius: 18px;
}

.featured-sponsor-strip-card.image-only-ad .featured-sponsor-strip-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

/* Community Ads — artwork guide 800 × 250.
   Live display follows each community-ad card cell. */
.dynamic-ad-card.image-only-ad,
.community-ads-grid .dynamic-ad-card.image-only-ad {
  --gbn-ad-aspect-ratio: 800 / 250;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  border-radius: 18px;
}

.community-ads-grid .dynamic-ad-card.image-only-ad,
.community-ads-grid .dynamic-ad-card.image-only-ad .sponsor-image-ad-media,
.community-ads-grid .dynamic-ad-card.image-only-ad .sponsor-image-ad-link {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.dynamic-ad-card.image-only-ad .homepage-ad-image,
.community-ads-grid .dynamic-ad-card.image-only-ad .homepage-ad-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.sponsor-image-ad-link:hover .sponsor-image-ad-image,
.sponsor-image-ad-link:focus .sponsor-image-ad-image {
  filter: brightness(1.08);
}

@media (max-width: 760px) {
  .image-only-ad,
  .hero-promo.premium-top-right-placement,
  .major-sponsored-ad-card.image-only-ad,
  .featured-sponsor-strip-card.image-only-ad,
  .dynamic-ad-card.image-only-ad,
  .community-ads-grid .dynamic-ad-card.image-only-ad {
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }
}

/* =========================================================
   PATCH 69.4.2 — HOMEPAGE AD SLOT RATIO CONTRACT
   =========================================================
   Purpose:
   - Make each homepage sponsor slot control its own geometry.
   - Prevent uploaded artwork dimensions from enlarging, shrinking, or
     stretching the homepage layout.
   - Keep Hero Slot and Community Ads stable first, while also defining
     controlled ratios for Premium Homepage Banner and Featured Strip.

   Slot-first rule:
   The container defines the slot. The artwork fills the slot.
   Future artwork should be designed to the slot ratios below.
   ========================================================= */

:root {
  --gbn-hero-slot-mobile-ratio: 16 / 9;
  --gbn-premium-banner-ratio: 4 / 1;
  --gbn-featured-strip-ratio: 20 / 3;
  --gbn-community-ad-ratio: 380 / 250;
  --gbn-community-ad-max-width: 380px;
}

/* Base image-ad reset: image content must never define layout height. */
.image-only-ad {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #0d1117;
  box-sizing: border-box;
}

.image-only-ad .sponsor-image-ad-media,
.image-only-ad .sponsor-image-ad-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
}

.image-only-ad .sponsor-image-ad-image,
.image-only-ad .homepage-ad-image,
.image-only-ad .premium-top-right-placement-image,
.image-only-ad .major-sponsored-ad-image,
.image-only-ad .featured-sponsor-strip-image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0d1117;
  object-fit: cover;
  object-position: center center;
  box-sizing: border-box;
}

/* HERO SLOT
   Desktop/laptop: the left hero text block controls the row height.
   The right image ad stretches to that same row height, so the row does
   not become bigger or smaller when an image is active. */
.home-hero {
  align-items: stretch;
}

.home-hero .hero-copy,
.home-hero .hero-promo {
  align-self: stretch;
}

.hero-promo.premium-top-right-placement {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-color: rgba(0, 212, 255, 0.55);
  border-radius: 18px;
}

/* PREMIUM HOMEPAGE BANNER
   Full-width controlled banner. Artwork target: same ratio as this slot. */
.major-sponsored-ad-card.image-only-ad {
  width: 100%;
  aspect-ratio: var(--gbn-premium-banner-ratio);
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 18px;
}

/* FEATURED STRIP
   Slim strip controlled by the slot, not by uploaded image dimensions. */
.featured-sponsor-strip-card.image-only-ad {
  width: 100%;
  aspect-ratio: var(--gbn-featured-strip-ratio);
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 18px;
}

/* COMMUNITY ADS
   Community Ads remain compact, low-cost placements. They do not stretch
   to fill a very wide desktop column and they do not force neighboring
   default text cards to become taller. */
.community-ads-grid {
  align-items: start;
  justify-items: stretch;
}

.community-ads-grid .promo-card {
  min-height: 0;
}

.community-ads-grid > .promo-card:not(.image-only-ad) {
  height: auto;
  min-height: 132px;
  aspect-ratio: auto;
  overflow: visible;
}

.dynamic-ad-card.image-only-ad,
.community-ads-grid .dynamic-ad-card.image-only-ad {
  width: min(100%, var(--gbn-community-ad-max-width));
  max-width: var(--gbn-community-ad-max-width);
  aspect-ratio: var(--gbn-community-ad-ratio);
  height: auto;
  min-height: 0;
  justify-self: center;
  border-radius: 18px;
}

/* Mobile/tablet behavior. Hero becomes a normal responsive image slot once
   the two-column hero layout collapses into one column. */
@media (max-width: 900px) {
  .hero-promo.premium-top-right-placement {
    height: auto;
    aspect-ratio: var(--gbn-hero-slot-mobile-ratio);
  }

  .community-ads-grid > .promo-card:not(.image-only-ad) {
    min-height: 128px;
  }
}

@media (max-width: 760px) {
  .major-sponsored-ad-card.image-only-ad {
    aspect-ratio: 16 / 9;
  }

  .featured-sponsor-strip-card.image-only-ad {
    aspect-ratio: 16 / 5;
  }

  .dynamic-ad-card.image-only-ad,
  .community-ads-grid .dynamic-ad-card.image-only-ad {
    width: 100%;
    max-width: var(--gbn-community-ad-max-width);
  }
}

@media (max-width: 420px) {
  .dynamic-ad-card.image-only-ad,
  .community-ads-grid .dynamic-ad-card.image-only-ad {
    max-width: 100%;
  }
}


/* =========================================================
   PATCH 69.4.3 — COMMUNITY ADS DEFAULT CARD SIZE RESTORE
   =========================================================
   Purpose:
   - Keep Community Ads image slots the same visual footprint as the
     no-ad/default Community Ad cards.
   - Remove the small 380px desktop cap introduced during ratio testing.
   - Keep the existing three-slot Community Ads business rule unchanged.
   - Prevent image artwork dimensions from changing the grid size.

   Slot rule:
   The Community Ads grid cell defines the ad size. Uploaded artwork fills
   that cell and may crop if it does not match the slot ratio.
   ========================================================= */

:root {
  --gbn-community-card-default-height: 132px;
  --gbn-community-card-mobile-height: 132px;
}

.community-ads-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-items: stretch;
}

.community-ads-grid > .promo-card:not(.image-only-ad) {
  width: 100%;
  min-height: var(--gbn-community-card-default-height);
  height: auto;
  aspect-ratio: auto;
  justify-self: stretch;
}

.dynamic-ad-card.image-only-ad,
.community-ads-grid .dynamic-ad-card.image-only-ad {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: var(--gbn-community-card-default-height);
  min-height: var(--gbn-community-card-default-height);
  max-height: var(--gbn-community-card-default-height);
  aspect-ratio: auto;
  justify-self: stretch;
  border-radius: 16px;
}

.community-ads-grid .dynamic-ad-card.image-only-ad .sponsor-image-ad-media,
.community-ads-grid .dynamic-ad-card.image-only-ad .sponsor-image-ad-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.community-ads-grid .dynamic-ad-card.image-only-ad .homepage-ad-image,
.community-ads-grid .dynamic-ad-card.image-only-ad .sponsor-image-ad-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 900px) {
  .community-ads-grid > .promo-card:not(.image-only-ad),
  .dynamic-ad-card.image-only-ad,
  .community-ads-grid .dynamic-ad-card.image-only-ad {
    min-height: var(--gbn-community-card-mobile-height);
    height: var(--gbn-community-card-mobile-height);
    max-height: var(--gbn-community-card-mobile-height);
  }
}

@media (max-width: 420px) {
  .dynamic-ad-card.image-only-ad,
  .community-ads-grid .dynamic-ad-card.image-only-ad {
    max-width: none;
  }
}

/* =========================================================
   PATCH 69.4.5 — COMMUNITY ADS MOBILE STACK RESTORE
   =========================================================
   Purpose:
   - Restore one-column Community Ads stacking on mobile/tablet.
   - Fix the later Community Ads desktop grid rule overriding the earlier
     global mobile .promo-grid responsive rule.
   - Reduce mobile cropping risk by fitting Community Ad artwork inside the
     mobile card while keeping desktop equal-height behavior unchanged.

   Scope:
   - Community Ads only.
   - No backend, Firestore, Functions, Storage, or admin form changes.
   ========================================================= */

@media (max-width: 900px) {
  .community-ads-grid {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    justify-items: stretch;
    gap: 14px;
  }

  .community-ads-grid > .promo-card {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .community-ads-grid > .promo-card:not(.image-only-ad) {
    min-height: var(--gbn-community-card-mobile-height);
    height: auto;
    max-height: none;
  }

  .dynamic-ad-card.image-only-ad,
  .community-ads-grid .dynamic-ad-card.image-only-ad {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: var(--gbn-community-card-mobile-height);
    min-height: var(--gbn-community-card-mobile-height);
    max-height: var(--gbn-community-card-mobile-height);
    aspect-ratio: auto;
    justify-self: stretch;
  }

  .community-ads-grid .dynamic-ad-card.image-only-ad .homepage-ad-image,
  .community-ads-grid .dynamic-ad-card.image-only-ad .sponsor-image-ad-image {
    object-fit: contain;
    object-position: center center;
  }
}

@media (max-width: 420px) {
  .community-ads-grid {
    grid-template-columns: 1fr !important;
  }
}