/* Landing page (pages/home.php) */

/* Title image across the full width, the header lies on it (style.css). */
.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(80vh, 760px);
    padding: 120px 16px 64px;
    overflow: hidden;
    background: var(--color-primary-dark);
    color: var(--color-surface);
    text-align: center;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkens the photo so logo and slogan stay readable. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 45%), rgb(0 0 0 / 20%) 40%, rgb(0 0 0 / 55%));
}

.hero-without-image {
    background: radial-gradient(circle at 50% 40%, var(--color-primary), var(--color-primary-dark) 70%);
}

.hero-without-image::after {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h1 {
    margin: 0;
}

.hero h1 img {
    width: min(420px, 80vw);
    height: auto;
    filter: drop-shadow(0 4px 16px rgb(0 0 0 / 35%));
}

.hero-slogan {
    margin: 16px 0 0;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: clamp(2rem, 6vw, 3.5rem);
    letter-spacing: 0.04em;
    text-shadow: 0 2px 12px rgb(0 0 0 / 40%);
}

.home-layout {
    padding-block: 16px 48px;
}

.home-section {
    padding-top: 48px;
    scroll-margin-top: 16px;
}

/* About us */
.about-text {
    max-width: 75ch;
}

.about-slogan {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* History: the first events, fading out towards the link to the history page */
.timeline-preview {
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}