/* ==========================================================================
   Club Italia Soccer Club — coming-soon landing page
   --------------------------------------------------------------------------
   The page locks to exactly one screen. Two things make that work:

   1. .page is a 100dvh flex column; .page__main is `flex:1` with `min-height:0`.
      Without min-height:0 a flex item refuses to shrink below its content size
      and silently pushes the footer off-screen.

   2. Every type scale is clamp(floor, min(<vw>, <vh>), ceiling). The vh term is
      what keeps a wide-but-short window (a laptop with devtools open) from
      overflowing — width alone is not enough information to size this page.

   3. The vw coefficients are far larger than the source design's. That design was
      authored at desktop width, where 7.2vw already yields the 104px ceiling; on a
      390px phone the same coefficient collapses to 28px and the headline sits at
      its floor with dead space beneath it. The width terms below are sized so the
      headline fills the column on a phone, and the ceiling (not the coefficient)
      is what binds on desktop.

   Below 500px tall the type would have to drop under its readable floor, so the
   page is allowed to scroll instead. That escape hatch lives at the bottom.
   ========================================================================== */

:root {
    --ink: #f4f1ea;
    --ground: #0c0f0c;

    --gold-100: #fef9c3;
    --gold-200: #fde047;
    --gold-500: #f59e0b;
    --gold-600: #d97706;

    --italy-green: #3a7a4f;
    --italy-white: #f4f1ea;
    --italy-red: #a8272f;

    --gutter: clamp(24px, 6vw, 96px);
    --edge-y: clamp(14px, 2.8vh, 28px);

    --font-body: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'Anton', 'Barlow Condensed', 'Helvetica Neue', Helvetica, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--ink);
    text-decoration: none;
}

img {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.page {
    position: relative;
    height: 100vh;
    /* Dynamic viewport units: a mobile URL bar collapsing must not create scroll. */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ground);
}

.page__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 55% 60%;
    filter: saturate(0.78) contrast(1.03) brightness(0.72);
}

.page__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(8, 12, 9, 0.94) 0%,
            rgba(8, 12, 9, 0.86) 38%,
            rgba(8, 12, 9, 0.45) 68%,
            rgba(8, 12, 9, 0.30) 100%);
}

.page__scrim--bottom {
    background: linear-gradient(to top,
            rgba(6, 9, 7, 0.85) 0%,
            rgba(6, 9, 7, 0) 45%);
}

.page__header,
.page__main,
.page__footer {
    position: relative;
    z-index: 2;
    padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}

.page__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: var(--edge-y);
}

.page__main {
    flex: 1 1 auto;
    /* Required: lets the centred block shrink instead of pushing the footer out. */
    min-height: 0;
    display: flex;
    align-items: center;
    padding-top: clamp(18px, 3.5vh, 88px);
    padding-bottom: clamp(18px, 3.5vh, 88px);
}

.page__footer {
    flex: 0 0 auto;
    padding-bottom: calc(var(--edge-y) + env(safe-area-inset-bottom, 0px));
    /* Tracked uppercase is wide: at a fixed 13px/0.2em this line wraps awkwardly
       on a phone, so both size and tracking ease off with the viewport. */
    font-size: clamp(10px, 2.6vw, 13px);
    line-height: 1.4;
    letter-spacing: clamp(0.1em, 0.5vw, 0.2em);
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.4);
}


/* --------------------------------------------------------------------------
   Header wordmark (the design's "CI" tile is intentionally omitted)
   -------------------------------------------------------------------------- */

.wordmark {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wordmark__name {
    font-size: 15px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.72);
}

.wordmark__sub {
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.45);
}

.flagbar {
    display: flex;
    height: 3px;
    width: 46px;
    flex: 0 0 auto;
    align-self: center;
}

.flagbar span {
    flex: 1;
}

.flagbar__green {
    background: var(--italy-green);
}

.flagbar__white {
    background: var(--italy-white);
}

.flagbar__red {
    background: var(--italy-red);
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    max-width: 760px;
    width: 100%;
}

.badge {
    margin: 0 0 clamp(20px, 3vh, 30px);
    display: inline-flex;
    align-items: center;
    padding: 9px 18px 8px;
    background: linear-gradient(100deg, var(--gold-200) 0%, var(--gold-500) 100%);
    color: #101208;
    font-weight: 700;
    font-size: clamp(12px, min(3.1vw, 1.9vh), 15px);
    line-height: 1.2;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    transform: skewX(-8deg);
}

.badge__text {
    display: inline-block;
    transform: skewX(8deg);
}

.headline {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(38px, min(15vw, 12vh), 104px);
    line-height: 0.9;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    text-wrap: balance;
    transform: skewX(-6deg);
    transform-origin: left bottom;
    color: var(--gold-200);
    background: linear-gradient(168deg,
            var(--gold-100) 0%,
            var(--gold-200) 34%,
            var(--gold-500) 78%,
            var(--gold-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}

/* Without background-clip:text the transparent fill would hide the headline
   entirely, so fall back to the solid mid-tone of the gradient. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .headline {
        background: none;
        -webkit-text-fill-color: var(--gold-200);
        color: var(--gold-200);
    }
}

.rule {
    display: flex;
    gap: 6px;
    height: 8px;
    width: 190px;
    max-width: 60%;
    margin: clamp(14px, 2.2vh, 30px) 0;
    transform: skewX(-20deg);
}

.rule__green {
    flex: 1;
    background: var(--italy-green);
}

.rule__white {
    flex: 1;
    background: var(--italy-white);
}

.rule__red {
    flex: 1;
    background: var(--italy-red);
}

.rule__gold {
    flex: 2;
    background: linear-gradient(90deg, var(--gold-200), var(--gold-500));
}

.address {
    display: block;
    font-style: normal;
    font-size: clamp(17px, min(5.2vw, 3.6vh), 27px);
    line-height: 1.45;
    letter-spacing: 0.04em;
    color: rgba(244, 241, 234, 0.92);
}

.cta {
    margin-top: clamp(20px, 3vh, 50px);
    padding-top: clamp(16px, 2vh, 28px);
    border-top: 1px solid rgba(244, 241, 234, 0.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 520px;
}

.cta__label {
    margin: 0;
    font-size: clamp(13px, min(3.4vw, 2.2vh), 17px);
    line-height: 1.2;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.6);
}

.cta__link {
    align-self: flex-start;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(18px, min(6.2vw, 4.4vh), 32px);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--gold-200);
    border-bottom: 2px solid rgba(245, 158, 11, 0.6);
    padding-bottom: 4px;
    overflow-wrap: anywhere;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.cta__link:hover,
.cta__link:focus-visible {
    color: #ffffff;
    border-bottom-color: var(--gold-200);
}

.cta__link:focus-visible {
    outline: 2px solid var(--gold-200);
    outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   Short viewports (landscape phones): stop shrinking, allow scrolling
   -------------------------------------------------------------------------- */

@media (max-height: 500px) {

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    /* Height is no longer the binding constraint, so let width drive the scale
       again — otherwise the headline would sit at its 38px floor on a wide
       landscape phone. */
    .headline {
        font-size: clamp(38px, 12vw, 72px);
    }

    .address {
        font-size: clamp(17px, 4vw, 24px);
    }

    .cta__link {
        font-size: clamp(18px, 4.6vw, 28px);
    }

    .page__main {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .cta__link {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.error-body {
    overflow: auto;
}

.error-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--edge-y) var(--gutter);
}

.error-page__code {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(56px, 12vw, 120px);
    line-height: 1;
    color: var(--gold-200);
}

.error-page__title {
    margin: 12px 0 0;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.error-page__text {
    margin: 8px 0 0;
    font-size: 18px;
    color: rgba(244, 241, 234, 0.7);
}

.error-page__link {
    margin-top: 24px;
    align-self: flex-start;
    font-size: 18px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-200);
    border-bottom: 2px solid rgba(245, 158, 11, 0.6);
    padding-bottom: 4px;
}

.error-page__link:hover,
.error-page__link:focus-visible {
    color: #ffffff;
    border-bottom-color: var(--gold-200);
}