/* Homepage hero + schedule-first layout. Loaded only by index.php — none of
   these selectors are used by any other page, so this is fully isolated
   from the rest of the site. Loaded after styles.css/others.css so these
   rules win. */

.home-section--hero {
    /* .home-section is width:100% + horizontal padding under content-box
       sizing, which pushes it ~40px wider than the viewport — that's what
       was clipping the Instagram badge's right edge off-screen. */
    box-sizing: border-box;
    background-image: url('images/hero_home_desktop.jpg');
}

@media (max-width: 1024px) {
    /* images/hero_home_mobile.png is already a phone-shaped portrait crop
       (AI-extended from the same photo), so a plain cover works with no
       extra layering. */
    .home-section--hero {
        background-image: url('images/hero_home_mobile.png');
    }
}

/* Logo already reads "Salsa Verde Football Club" — the separate title text
   was just duplicating it while covering part of the logo. */
.home-section--hero #main-title {
    display: none;
}

/* #main-logo is display:flex with no align-items set, which defaults to
   stretch — its box is 30% wide x 25% of the (full-height) hero tall, a
   much taller/wider box than the logo's own shape, so the image was being
   stretched to fill that height while width stayed capped at max-width,
   squishing it. align-items:center keeps the logo at its own natural
   aspect ratio instead of stretching to fill the box. */
#main-logo {
    align-items: center;
}

#main-logo img {
    max-width: 140px;
    height: auto;
}

/* Small Instagram badge, visible immediately on landing (top-right of hero) */
.ig-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    text-decoration: none;
    color: #1a5d1a;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ig-badge img {
    width: 18px;
    height: 18px;
}

@media (max-width: 1024px) {
    /* Mobile nav becomes a fixed 65px top bar with the hamburger toggle in
       this same top-right corner — sit below it instead of behind it. */
    .ig-badge {
        top: 75px;
    }
}

@media (max-width: 600px) {
    .ig-badge span {
        display: none;
    }

    .ig-badge {
        padding: 8px;
    }
}

/* "Up next": date/time/field is what matters, opponent is secondary. This
   sits *inside* the hero as an overlay near the bottom of the photo — not a
   separate section with its own background — so nothing but the card
   itself (white + green border) shows; everywhere else in that space is
   still the hero photo, same as around the logo/title. */
.home-opponent-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 2;
    pointer-events: auto;
    padding: 0 20px;
}

.home-opponent-overlay .match-insights--home {
    max-width: 640px;
    margin: 0 auto;
}

/* "Full statistics" sits outside the card box, directly on the photo — give
   it the same white-pill treatment as the Instagram badge so it stays
   readable against a busy background. */
.home-opponent-overlay .insight-card__footer {
    text-align: center;
    margin-top: 0.6rem;
}

.home-opponent-overlay .insight-card__footer a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Keep the card itself (white background + green border, from the base
   .insight-card styles) — only the outer full-width bar behind it is gone. */
.home-opponent-overlay .insight-card--next {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 14px rgba(0, 100, 0, 0.14);
}

.home-opponent-overlay .insight-card__title {
    order: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0d4d0d;
    margin: 0 0 0.5rem;
}

/* This is the "Date, Time, Field" line — the headline; opponent is secondary */
.home-opponent-overlay .insight-card__meta {
    order: 1;
    font-size: 2rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.5rem;
}

.home-opponent-overlay .insight-card__opponent {
    order: 2;
    font-size: 1rem;
    font-weight: 400;
    color: #555;
    margin: 0 0 0.4rem;
}

.home-opponent-overlay .insight-card__opponent strong {
    font-weight: 600;
    color: #333;
}

.home-opponent-overlay .insight-card__body {
    order: 3;
    font-size: 0.8rem;
    color: #888;
}

#schedule {
    padding: 30px 0 10px;
}

/* .section-header normally gets margin-top:65px on mobile to clear the fixed
   nav bar when it's the first thing on a page (styles.css ~2411) — here
   Schedule isn't first, so that would just leave a big unexplained gap
   above the green header. */
@media (max-width: 1024px) {
    #schedule .section-header {
        margin-top: 0;
    }
}

/* Compact About: roughly half the height of the original two full-height
   panels. A little breathing room below the header — the fixed-height boxes
   below used to butt right up against it, and any content overflow (see
   below) had nowhere to go but up into the header. */
.about--compact .about-container {
    margin-top: 12px;
}

/* The old fixed height + align-items:center meant that whenever text needed
   more room than the box had, the overflow spilled out *symmetrically*
   above and below (that's how flex centering handles overflow) — pushing
   the small logo up behind the header on narrow widths, and pushing
   paragraph text past the green background.
   Fix: align-items:stretch so the *text* box (a plain flex item) fills the
   full row height — its green background always reaches exactly as far as
   the photo does, no matter which one is naturally taller. The photo opts
   out of stretch (align-self:flex-start) and sizes itself via aspect-ratio
   instead, since stretching a <img> to an arbitrary height would
   distort/mismatch its own aspect ratio. */
.about--compact .about-item {
    align-items: stretch;
}

/* Direct-child selector on purpose: ".about-item img" (a descendant
   selector) also matches the small logo/sunflower <img> nested inside <p>,
   which would push it to align-self:flex-start (left-aligned) instead of
   staying centered — this scopes to only the big photo. */
.about--compact .about-item > img {
    align-self: flex-start;
    height: auto;
    aspect-ratio: 4 / 3;
}

.about--compact .about-item p {
    height: auto;
    min-height: 360px;
    font-size: 1.15rem;
    padding: 15px 30px 25px 45px;
    box-sizing: border-box;
}

.about--compact .about-item p .small-img {
    width: 110px;
    height: 110px;
    margin-bottom: 20px;
    margin-top: 0;
}

/* Keep the site's original scroll-linked animation-timeline: view() — same
   zoom-out (photo: slide + fade) and fade-in (logo: grow) keyframes as
   everywhere else, so this still scrubs back and forth as you scroll up and
   down, not a one-time reveal. The only change: animation-range-end was
   "contain", which requires the element to fully finish *exiting* the
   viewport to reach 100% — for whichever item ends up last on a shorter
   page, there's no scroll room left for that to happen, so it got stuck
   partway. "entry" only requires the element to finish *entering*, which
   always resolves regardless of what's below it. */
.about--compact .about-item > img,
.about--compact .about-item p .small-img {
    animation-range: entry;
}

@media (max-width: 1024px) {
    .home-opponent-overlay {
        bottom: 8px;
    }

    .about--compact .about-item p {
        height: auto;
        min-height: 260px;
        font-size: 1rem;
        padding: 12px 20px 20px 20px;
    }

    .about--compact .about-item p .small-img {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
        margin-top: 0;
    }

    /* Card sits on the grass below the play, sized to use the remaining
       space there without creeping back up into the players. */
    .home-opponent-overlay .insight-card--next {
        padding: 1.2rem 1.5rem;
    }

    .home-opponent-overlay .insight-card__title {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }

    .home-opponent-overlay .insight-card__meta {
        font-size: 1.3rem;
        margin-bottom: 0.35rem;
    }

    .home-opponent-overlay .insight-card__opponent {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }

    .home-opponent-overlay .insight-card__body {
        font-size: 0.78rem;
    }
}

/* Small separation between the last section and the footer. This has to be
   padding on #about (an opaque, in-flow element) rather than margin on
   footer — margin is transparent space, and since the hero is
   position:fixed behind everything on desktop, a transparent gap let it
   show through as you scroll. Padding extends #about's own solid
   background instead. */
#about {
    background-color: #fff;
    padding-bottom: 20px;
}

footer {
    border-top: 6px solid #228B22;
}