/* ============================================================
   TTSFFL — assets/css/layout.css
   Page layout, cards, grid, responsive breakpoints.
   ============================================================ */

/* ── Cards ───────────────────────────────────────────────────
   ---------------------------------------------------------- */
.card {
    background:    var(--color-bg-card);
    border:        1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-card);
    overflow:      hidden;
}

.card__header {
    background:  var(--color-primary);
    color:       var(--color-text-on-dark);
    padding:     var(--space-4) var(--space-5);
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.card__header h2,
.card__header h3 {
    color:         var(--color-text-on-dark);
    margin-bottom: 0;
    font-size:     var(--fs-lg);
}

.card__header--gold {
    background: var(--color-accent);
    color:      #1A1A1A;
}

.card__header--gold h2,
.card__header--gold h3 {
    color: #1A1A1A;
}

.card__body {
    padding: var(--space-5);
}

.card__footer {
    padding:     var(--space-3) var(--space-5);
    border-top:  1px solid var(--color-border);
    background:  var(--color-bg-row-alt);
    font-size:   var(--fs-sm);
    color:       var(--color-text-secondary);
}

/* ── Grid layouts ────────────────────────────────────────────
   ---------------------------------------------------------- */
.grid {
    display: grid;
    gap:     var(--space-4);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit responsive grid */
.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ── Flex utilities ──────────────────────────────────────────
   ---------------------------------------------------------- */
.flex         { display: flex; }
.flex--center { display: flex; align-items: center; justify-content: center; }
.flex--between{ display: flex; align-items: center; justify-content: space-between; }
.flex--gap-2  { gap: var(--space-2); }
.flex--gap-3  { gap: var(--space-3); }
.flex--gap-4  { gap: var(--space-4); }

/* ── Section headers ─────────────────────────────────────────
   Used for division headers in standings, section titles, etc.
   ---------------------------------------------------------- */
.section-header {
    background:    var(--color-primary);
    color:         var(--color-text-on-dark);
    padding:       var(--space-3) var(--space-5);
    font-weight:   var(--fw-bold);
    font-size:     var(--fs-md);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
}

.section-header--gold {
    background: var(--color-accent);
    color:      #1A1A1A;
}

/* ── Champion banners ────────────────────────────────────────
   ---------------------------------------------------------- */
.banner {
    display:         flex;
    align-items:     center;
    gap:             var(--space-4);
    padding:         var(--space-4) var(--space-6);
    border-radius:   var(--radius-md);
    margin-bottom:   var(--space-4);
    box-shadow:      var(--shadow-card);
}

.banner--champion {
    background:  linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border-left: 5px solid var(--color-accent);
    color:       var(--color-text-on-dark);
}

.banner--season {
    background:  linear-gradient(135deg, #3A3A3A, #555555);
    border-left: 5px solid var(--color-accent);
    color:       var(--color-text-on-dark);
}

.banner__icon  { font-size: 2rem; flex-shrink: 0; }
.banner__title { font-size: var(--fs-sm); opacity: 0.8; }
.banner__name  { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* ── Stat widgets (dashboard) ────────────────────────────────
   ---------------------------------------------------------- */
.stat-widget {
    background:    var(--color-bg-card);
    border:        1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    padding:       var(--space-4) var(--space-5);
    text-align:    center;
    box-shadow:    var(--shadow-sm);
}

.stat-widget__value {
    font-size:   var(--fs-2xl);
    font-weight: var(--fw-bold);
    color:       var(--color-primary);
    line-height: 1.1;
}

.stat-widget__label {
    font-size:  var(--fs-sm);
    color:      var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* ── Responsive breakpoints ──────────────────────────────────
   Mobile-first. Breakpoints:
   sm:  480px  (large phones)
   md:  768px  (tablets)
   lg:  1024px (small laptops)
   xl:  1200px (desktop)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .page-wrapper {
        padding: var(--space-4) var(--space-3);
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}

@media (max-width: 1023px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TTSFFL — Footer styles (append to layout.css or keep here)
   ============================================================ */
 
.site-footer {
    background:    var(--color-primary-dark);
    color:         var(--color-text-on-dark);
    margin-top:    var(--space-12);
    padding:       var(--space-5) var(--space-6);
}
 
.site-footer__inner {
    max-width:       1200px;
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-3);
}
 
.site-footer__logo {
    width:         28px;
    height:        28px;
    border-radius: var(--radius-full);
    object-fit:    cover;
    border:        1px solid var(--color-accent);
    opacity:       0.85;
}
 
.site-footer__text {
    font-size: var(--fs-sm);
    opacity:   0.75;
}