/* Refresh (October 2026): bolder, photo-led look inspired by sports-club sites.
   Loaded last on every page, so it overrides the older stylesheets.
   Colours still come from the theme (css/themes/), so every theme keeps working. */

:root {
    --r-display: clamp(40px, 7.2vw, 104px);   /* hero headline */
    --r-h2: clamp(32px, 4.6vw, 60px);         /* section headings */
    --r-glass: rgba(255, 255, 255, 0.14);
    --r-glass-line: rgba(255, 255, 255, 0.28);
    --r-dark: rgba(12, 10, 8, 0.82);
}

/* ---------- Home hero ---------- */

#hero {
    padding-top: 230px;   /* room for the crest below the header */
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding-bottom: clamp(48px, 9vh, 110px);
    padding-left: max(6vw, 20px);
    padding-right: max(6vw, 20px);
    box-sizing: border-box;
}

/* Darken the photos instead of washing them out, so white text reads on any slide */
#hero .hero-slideshow::after {
    background:
        linear-gradient(90deg, var(--r-dark) 0%, rgba(12, 10, 8, 0.55) 45%, rgba(12, 10, 8, 0.12) 100%),
        linear-gradient(0deg, rgba(12, 10, 8, 0.65) 0%, transparent 45%);
}

#hero .hero-container {
    align-items: flex-start;
    max-width: 1100px;
    margin-top: 0;
}

#hero .hero-title {
    color: #ffffff;
    font-size: var(--r-display);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.03em;
    margin: 0;
    max-width: 11ch;
    text-wrap: balance;
}

#hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: none;
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 22px 0 30px;
}

#hero .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Gold main button: the black one disappears on the dark photo */
#hero .button-register {
    background: var(--t-btn2) !important;
    color: var(--t-btn2-text) !important;
}

#hero .button-register:hover { background: var(--t-btn2-hover) !important; }

.button-ghost {
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    border-radius: 999px;
    border: 1px solid var(--r-glass-line);
    background: var(--r-glass);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.button-ghost:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-2px);
}

/* Frosted "next event" card */
.hero-next-event {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 10px 18px 10px 10px;
    border-radius: 18px;
    border: 1px solid var(--r-glass-line);
    background: var(--r-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero-next-event:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.22);
}

.hero-next-event img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    object-position: center 40%;
    border-radius: 12px;
}

.hero-next-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-gold, #f1c232);
}

.hero-next-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.hero-next-date {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* The tahr's speech bubble stays readable on the darker photo */
#hero .mascot-bubble { color: var(--t-heading); }

/* ---------- Section headings ---------- */

#activities h1,
#events-header h1,
#gallery h1,
#members-intro h1,
.mascot-beside h1,
#membership h1,
#volunteer-info h1 {
    font-size: var(--r-h2);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* ---------- Event cards ---------- */

.event-card-container {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 22px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.event-card-container:hover { transform: translateY(-6px); }

.event-card-image {
    height: 230px !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.event-card-container:hover .event-card-image { transform: scale(1.04); }

.card-txt-container,
.card-time-hour-container {
    padding-left: 22px;
    padding-right: 22px;
}

.card-txt-container { padding-top: 18px; }

.card-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.card-button {
    width: auto !important;
    margin: 6px 22px 22px;
    background: var(--t-cta) !important;
    color: var(--t-cta-text) !important;
}

.card-button:hover { background: var(--t-cta-hover) !important; }

/* Date badge on the photo */
.card-date {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--t-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.card-date b {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---------- Phones ---------- */

@media (max-width: 800px) {
    #hero {
        padding-bottom: 150px;   /* room for the tahr under the text */
    }

    #hero .hero-slideshow::after {
        background: linear-gradient(0deg, var(--r-dark) 0%, rgba(12, 10, 8, 0.6) 55%, rgba(12, 10, 8, 0.35) 100%);
    }

    #hero .hero-title { max-width: none; }

}

@media (prefers-reduced-motion: reduce) {
    .event-card-container,
    .event-card-container:hover,
    .hero-next-event:hover,
    .button-ghost:hover { transform: none; }
}

/* ---------- Header logo: a link back to the home page ---------- */

header #logo .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

/* ---------- Home: the club crest above the headline ---------- */

.hero-crest-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 22px;
}

.hero-crest {
    display: block;
    width: clamp(110px, 10vw, 160px);
    height: auto;
    filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}

/* Short laptop screens: a smaller crest keeps the next-event card on the first screen */
@media (min-width: 801px) and (max-height: 800px) {
    #hero { padding-top: 205px; }
    .hero-crest { width: 92px; }
    .hero-crest-wrap { margin-bottom: 12px; }
}

/* ---------- Home intro (js/hero-intro.js) ----------
   The crest starts big in the middle of the screen and glides to its place.
   Until it lands, the rest of the hero is hidden; then it rises in. */

.hero-intro .hero-crest,
.hero-intro #hero .hero-title,
.hero-intro #hero .hero-subtitle,
.hero-intro #hero .hero-buttons,
.hero-intro #hero .hero-next-event,
.hero-intro #hero .hero-mascot { opacity: 0; }

/* The big crest floats above the header while it is in the middle */
.hero-intro #hero .hero-container { z-index: 1001; }

.hero-intro-done #hero .hero-title,
.hero-intro-done #hero .hero-subtitle,
.hero-intro-done #hero .hero-buttons,
.hero-intro-done #hero .hero-next-event,
.hero-intro-done #hero .hero-mascot {
    animation: hero-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.hero-intro-done #hero .hero-subtitle { animation-delay: 0.12s; }
.hero-intro-done #hero .hero-buttons { animation-delay: 0.24s; }
.hero-intro-done #hero .hero-next-event { animation-delay: 0.36s; }
.hero-intro-done #hero .hero-mascot { animation-delay: 0.5s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
}

/* A gold ring pulses out once as the crest lands */
.hero-crest-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--t-gold, #f1c232);
    opacity: 0;
    pointer-events: none;
}

.hero-crest-wrap.landed::after { animation: crest-ring 1.1s ease-out; }

@keyframes crest-ring {
    0%   { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- About: sponsors ---------- */

.sponsors-card { text-align: center; }

.sponsors-card .sponsors-thanks { display: none; }
.sponsors-card.has-sponsors .sponsors-thanks { display: block; }

.sponsor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 24px 0 8px;
}

.sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 100px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--t-card, #fff);
    border: 1px solid var(--t-line);
    color: var(--t-heading);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.sponsor:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-shadow-hover);
}

.sponsor img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sponsor-cta {
    max-width: 620px;
    margin: 0 auto;
}

.sponsors-card.has-sponsors .sponsor-cta {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--t-line);
}

.sponsors-card.has-sponsors .sponsor-cta-title { font-size: 1.1rem; }

.sponsor-cta .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 13px 28px;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 800px) {
    .hero-crest { width: 84px; }
    .hero-crest-wrap { margin-bottom: 14px; }

    /* The next-event card sits beside the tahr */
    #hero { padding-bottom: 162px; }

    /* a narrower, two-line bubble so it fits between the buttons and the card */
    #hero .mascot-bubble {
        white-space: normal;
        width: 120px;
        box-sizing: border-box;
    }

    .sponsor { width: calc(50% - 9px); }
}

@media (max-width: 380px) {
    #hero .mascot-bubble { width: 96px; }
}