/* Page-owned styles for Events und Jahreszeiten */
.events-page {
    width: 100%;
}

.events-page .section {
    padding-block: var(--space-3xl);
}

/* Hero */
.events-hero {
    position: relative;
    background-color: var(--color-architectural-white);
}

.events-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(30, 58, 95, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 58, 95, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.events-hero__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.events-hero__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: start;
}

.events-hero__label {
    color: var(--color-concrete-grey);
}

.events-hero__lead {
    color: var(--color-deep-navy);
}

/* Seasonal */
.events-seasonal__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
}

.events-seasonal__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: start;
}

.events-seasonal__figure {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: start;
}

.events-seasonal__figure img {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-concrete-grey);
    border-radius: var(--radius-none);
}

.events-seasonal__figure figcaption {
    font-family: var(--font-heading);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line-height);
    letter-spacing: var(--text-caption-letter-spacing);
    font-weight: var(--text-caption-weight);
    color: var(--color-concrete-grey);
    text-align: start;
}

/* Event types */
.events-types__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.events-types__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: start;
}

.events-types__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
}

.events-types__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    min-width: 0;
}

.events-types__item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.events-types__item p {
    margin-block-end: 0;
}

.events-types__marker {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    margin-block-start: 0.35rem;
    background-color: currentColor;
}

.events-types__item--green .events-types__marker {
    background-color: var(--color-park-green);
}

.events-types__item--yellow .events-types__marker {
    background-color: var(--color-restrained-yellow);
}

.events-types__item--red .events-types__marker {
    background-color: var(--color-alert-red);
}

.events-types__item--blue .events-types__marker {
    background-color: var(--color-blueprint-blue);
}

/* Day/Night */
.events-daynight {
    position: relative;
    background-color: var(--color-architectural-white);
}

.events-daynight::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(30, 58, 95, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 58, 95, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.events-daynight__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.events-daynight__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: start;
}

/* Disasters */
.events-disasters__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.events-disasters__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: start;
}

.events-disasters__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
}

.events-disasters__list li {
    position: relative;
    padding-inline-start: 1.5rem;
    color: var(--color-deep-navy);
}

.events-disasters__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--color-restrained-yellow);
}

/* Tips */
.events-tips__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.events-tips__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: start;
}

.events-tips__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    counter-reset: tips;
}

.events-tips__list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    counter-increment: tips;
    padding-inline-start: 2rem;
    position: relative;
    min-width: 0;
}

.events-tips__list li::before {
    content: counter(tips);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-blueprint-blue);
    font-size: 1.25rem;
    line-height: 1.4;
}

.events-tips__list li p {
    margin-block-end: 0;
}

/* Editorial */
.events-editorial__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.events-editorial__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: start;
}

.events-editorial__note {
    background-color: var(--color-soft-concrete);
    border: 1px solid var(--color-concrete-grey);
    border-radius: var(--radius-card);
    padding: var(--space-lg);
    width: 100%;
}

.events-editorial__note p {
    margin-block-end: 0;
}

/* CTA */
.events-cta {
    background-color: var(--color-architectural-white);
}

.events-cta__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.events-cta__textblock {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
    margin-inline: auto;
}

.events-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background-color: var(--color-restrained-yellow);
    color: var(--color-deep-navy);
    border: 1px solid var(--color-blueprint-blue);
    border-radius: var(--radius-button);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-lg);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
    line-height: 1.4;
}

.events-cta__button:hover {
    background-color: #c29435;
    color: var(--color-deep-navy);
    text-decoration: none;
}

.events-cta__button:focus-visible {
    outline: 2px solid var(--color-blueprint-blue);
    outline-offset: 2px;
}

.events-cta__button .button-arrow {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.events-cta__button:hover .button-arrow {
    transform: translateX(2px);
}

/* Responsive */
@media (min-width: 768px) {
    .events-page .section {
        padding-block: var(--space-3xl);
    }

    .events-hero__container,
    .events-seasonal__container,
    .events-types__container,
    .events-daynight__container,
    .events-disasters__container,
    .events-tips__container,
    .events-editorial__container,
    .events-cta__container {
        gap: var(--space-xl);
    }

    .events-types__list,
    .events-disasters__list,
    .events-tips__list {
        gap: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .events-page .section {
        padding-block: var(--space-4xl);
    }

    .events-hero__container,
    .events-seasonal__container,
    .events-types__container,
    .events-daynight__container,
    .events-disasters__container,
    .events-tips__container,
    .events-editorial__container,
    .events-cta__container {
        gap: var(--space-2xl);
    }
}

@media (max-width: 767px) {
    .events-page .section {
        padding-block: var(--space-2xl);
    }

    .events-hero__container,
    .events-seasonal__container,
    .events-types__container,
    .events-daynight__container,
    .events-disasters__container,
    .events-tips__container,
    .events-editorial__container,
    .events-cta__container {
        gap: var(--space-lg);
    }

    .events-cta__button {
        width: 100%;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .events-cta__button,
    .events-cta__button .button-arrow {
        transition-duration: 0.01ms;
    }
}