/* ══ Home page styles ════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.page {
    width: 100%;
    flex: 1;
    background: var(--orange);
    min-height: 125vh;
}

/* ── Hero section ── */
.hero {
    margin: 28px 26px 0;
    position: relative;
    overflow: hidden;
    width: 90%;
    min-height: 80vh;
    left: 5%;
}

.hero img.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info card overlaid on the hero image */
.hero-card {
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: rgba(35, 62, 144, .92);
    color: white;
    width: min(460px, calc(100% - 36px));
    padding: 16px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 40%);
}

.hero-card h2 { margin: 0 0 8px; font-size: 32px; }
.hero-card p  { margin: 0 0 12px; font-size: 24px; line-height: 1.2; }

.hero-card a {
    display: inline-block;
    background: #fff;
    color: var(--blue);
    text-decoration: none;
    font-weight: 700;
    padding: 7px 20px;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
    font-size: 26px;
}

/* ── Blue stadium section ── */
.section-blue {
    margin-top: 14px;
    background: var(--blue);
    padding: 36px 26px;
    height: 60vh;
    position: relative;
}

/* Stadium image — sits outside the white card, overlaps vertically */
.stadium-image {
    position: absolute;
    left: 6vw;
    top: 5vh;
    bottom: 0;
    width: calc(50% - 26px);
    overflow: hidden;
    z-index: 2;
}

.stadium-image img {
    width: 90%;
    height: 90%;
    display: block;
}

/* White clipped card — text only, left column is behind the image */
.stadium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f3f3f3;
    clip-path: polygon(0 0, 95% 0, 100% 20%, 100% 100%, 0 100%);
    height: 35vh;
    top: 10vh;
    position: relative;
    overflow: visible;
    z-index: 1;
    width: 80vw;
    left: 14vw;
}

.stadium .text {
    grid-column: 2;
    padding: 20px;
    font-size: 20px;
    line-height: 1.35;
    right: 5vw;
    position: relative;
}

.stadium .text h3 { font-size: 44px; margin: 0 0 10px; }

/* Rules list inside the stadium text */
.stadium .rules {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.9;
    color: #333;
}

.stadium .rules li::before {
    content: '✕ ';
    color: #c0392b;
    font-weight: 700;
}

/* ── CTA (call-to-action) section ── */
.cta {
    margin: 0;
    background: var(--orange);
    padding: 30px 26px 40px;
    height: 40vh;
}

.cta-wrap {
    display: grid;
    grid-template-columns: 2fr 1.3fr;
    background: #ffffff;
    clip-path: polygon(0 0, 96% 0, 100% 22%, 100% 100%, 6% 100%, 0 76%);
    overflow: hidden;
    height: 25vh;
    top: 5vh;
    position: relative;
    width: 80vw;
    left: 5vw;
}

.cta-text             { padding: 20px; }
.cta-text h3          { margin: 0 0 10px; font-size: 50px; }
.cta-text p           { margin: 0 0 14px; font-size: 20px; }

.cta-button {
    display: inline-block;
    background: var(--blue);
    color: white;
    text-decoration: none;
    padding: 8px 24px;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 36%);
    font-size: 36px;
}

/* Mascot image — positioned absolutely to the right of the CTA card */
.cta-image {
    min-height: 280px;
    overflow: hidden;
    width: 30vw;
    position: absolute;
    left: 65vw;
    top: 158vh;
}

.cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .hero-card h2          { font-size: 28px; }
    .hero-card p           { font-size: 20px; }
    .stadium, .cta-wrap    { grid-template-columns: 1fr; }
    .cta-text h3           { font-size: 38px; }
    .cta-button            { font-size: 28px; }
}