/**
 * Events listing page — card grid with date badges.
 */

/* Breathing room between blue banner and "Aktuelle events" heading */
body.page-events main > .hero.has-bg-gradient + .heading {
    padding-top: var(--spacing-2xl);
}

/* Arkiv-sektion efter "Seneste afholdte" — intro (ikke ekstra h2 ovenpå seneste) */
body.page-events .tekst--events-archive-intro {
    padding-top: var(--spacing-2xl);
}

/* Extra top spacing before h2 headings on the events page */
body.page-events main > .heading h2 {
    padding-top: 3rem;
}

/* Ældre events (opdagelse-arkiv): skjulte kort indtil "Indlæs flere" — ikke aktuelle/seneste */
body.page-events section.feed--aeldre-events-arkiv .feed-item--aeldre-events-skjult {
    display: none !important;
}

body.page-events section.feed--aeldre-events-arkiv .events-archive-flere-wrap {
    display: flex;
    justify-content: center;
    margin: 3rem 0 3rem;
}

body.page-events section.feed--aeldre-events-arkiv .events-archive-flere-btn {
    cursor: pointer;
    opacity: 1;
}

body.page-events .tekst--events-archive-intro .events-archive-lead {
    margin: 0 auto var(--spacing-xl);
    max-width: 42rem;
    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-heading);
    text-align: center;
}

/* Grid for event feed */
.feed-inner--events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Event card */
.event-card {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-default), box-shadow var(--transition-default);
    border: 1px solid var(--color-border-card);
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* Date badge on left side */
.event-card-dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 1rem 0.75rem;
    background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    color: var(--color-white);
    text-align: center;
    flex-shrink: 0;
}

.event-card-dag {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.event-card-maaned {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
    opacity: 0.9;
}

/* Card content */
.event-card-content {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.event-card-titel {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-heading);
}

.event-card-sted {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.event-card-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.event-card-pris {
    font-weight: 600;
    color: var(--color-logb-blue);
}

/* Past event — muted appearance */
.event-card--afholdt {
    opacity: 0.65;
}

.event-card--afholdt .event-card-dato {
    background: var(--color-gray-600);
}

.event-card--afholdt:hover {
    opacity: 0.85;
}

/* Image-based event cards (events with banner images) */
.event-card--image {
    padding: 0;
    overflow: hidden;
}

.event-card-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
}

.event-card-image--default {
    background-size: 60% auto;
    background-repeat: no-repeat;
    background-color: #f5f5f5;
}

.event-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.event-card-overlay .event-card-titel {
    color: #fff;
    margin: 0;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.event-card-overlay-pris {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

.event-card--image:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* ==========================================================
   Event detail page — logb.dk layout
   Hero: full-width gradient bar, left-aligned title.
   Sidebar: overlaps hero, contains info card + tilmeld + map.
   ========================================================== */

/* Hero variant: full-width gradient background.
   Qualified with .hero so the detail padding beats the shorter block padding
   that .hero.has-bg-gradient sets in _hero.css. */
.hero.event-hero {
    max-width: none;
    text-align: left;
    padding: var(--detail-hero-pad-block) var(--v3-side-padding);
    min-height: var(--detail-hero-min-height);
    position: relative;
    z-index: 0;
}

.event-hero h1 {
    max-width: var(--v3-content-max-width);
    margin: 0 auto;
    padding: 0 var(--v3-side-padding);
    text-align: left;
}

/* Event banner image below hero in left column */
.event-banner {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
}

/* Agenda items (nested kolonner) — compact bold rows like logb.dk */
.kolonner--event-detail > .kolonner-inner > .kolonne > .kolonner {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

.kolonner--event-detail > .kolonner-inner > .kolonne > .kolonner .kolonner-inner {
    gap: 0.25rem;
    align-items: start !important;
}

.kolonner--event-detail > .kolonner-inner > .kolonne > .kolonner .tekst {
    font-weight: 700;
}

.kolonner--event-detail > .kolonner-inner > .kolonne > .kolonner + .heading {
    margin-top: 2rem;
}

/* Extra space before each talk (indlæg) on event detail page */
.kolonner--event-detail .kolonne .heading h3 {
    margin-top: 1.5cm;
}

.kolonner--event-detail > .kolonner-inner > .kolonne > .kolonner .tekst p {
    margin: 0.15rem 0;
}

/* Two-column section pulled up so sidebar overlaps hero */
.kolonner--event-detail {
    margin-top: calc(-1 * var(--detail-hero-pull-up));
    position: relative;
    z-index: 1;
}

.kolonner--event-detail > .kolonner-inner > .kolonne:first-child {
    padding-top: var(--detail-hero-pull-up);
}

/* Sidebar wrapper */
.event-sidebar {
    position: sticky;
    top: 1.5rem;
}

/* Info card */
.event-info-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
}

.event-info-table {
    width: 100%;
    border-collapse: collapse;
}

.event-info-table tr + tr td {
    padding-top: 0.85rem;
}

.event-info-icon {
    width: 24px;
    text-align: center;
    vertical-align: top;
    padding-right: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.event-info-label {
    white-space: nowrap;
    vertical-align: top;
    padding-right: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.event-info-value {
    vertical-align: top;
    text-align: right;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

/* Tilmeld button */
.event-tilmeld-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1.25rem;
    padding: 0.85rem 1.5rem;
}

/* Google Maps embed */
.event-map {
    margin-top: 1.5rem;
}

.event-map-heading {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--color-text-heading);
}

.event-map-frame {
    overflow: hidden;
    border-radius: var(--radius-md);
    height: 250px;
}

.event-map-frame iframe {
    border: 0;
    display: block;
    margin-top: -56px;
}

/* ==========================================================
   Relaterede Artikler
   ========================================================== */

.event-related-section {
    max-width: var(--v3-content-max-width);
    margin: 3rem auto;
    padding: 0 var(--v3-side-padding);
}

.event-related-section h2 {
    margin-bottom: 1.5rem;
}

.event-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.event-related-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.event-related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.event-related-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.event-related-title {
    padding: 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-heading);
}

/* ==========================================================
   Senest afholdte events
   ========================================================== */

.event-recent-section {
    max-width: var(--v3-content-max-width);
    margin: 3rem auto;
    padding: 2rem var(--v3-side-padding);
    border-top: 1px solid var(--color-border-card);
}

.event-recent-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.event-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.event-recent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-default);
}

.event-recent-card:hover {
    transform: translateY(-3px);
}

.event-recent-card img {
    width: 100%;
    border-radius: var(--radius-md);
    aspect-ratio: 2 / 1;
    object-fit: cover;
    margin-bottom: 0.75rem;
}

.event-recent-title {
    font-size: 0.9rem;
    text-align: center;
    color: var(--color-text-heading);
}

.event-recent-cta {
    text-align: center;
    margin-top: 2rem;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 600px) {
    .feed-inner--events {
        grid-template-columns: 1fr;
    }

    .event-card-dato {
        min-width: 72px;
        padding: 0.75rem 0.5rem;
    }

    .event-card-dag {
        font-size: 1.5rem;
    }

    .hero.event-hero {
        padding-bottom: 2rem;
    }

    .kolonner--event-detail {
        margin-top: 0;
    }

    .event-recent-grid {
        grid-template-columns: 1fr;
    }
}