/**
 * 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(--page-space);
}

/* Arkiv-sektion efter "Seneste afholdte" – intro (ikke ekstra h2 ovenpå seneste) */
body.page-events .text--events-archive-intro {
    padding-top: var(--page-space);
}

/* Extra top spacing before h2 headings on the events page */
body.page-events main > .heading h2 {
    padding-top: var(--band-space);
}

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

body.page-events section.feed--older-events-archive .events-archive-flere-wrap {
    display: flex;
    justify-content: var(--center-align);
    margin: var(--band-space) 0 var(--band-space);
}

body.page-events section.feed--older-events-archive .events-archive-flere-btn {
    cursor: pointer;
    opacity: var(--full-opacity);
}

body.page-events .text--events-archive-intro .events-archive-lead {
    margin: 0 auto var(--section-space);
    max-width: 42rem;
    font-size: var(--heading-3-font-size);
    font-weight: var(--heading-font-weight);
    line-height: var(--compact-line-height);
    color: var(--body-heading-color);
    text-align: var(--center-align);
}

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

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

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

/* Date badge on left side */
.event-card-dato {
    display: flex;
    flex-direction: column;
    align-items: var(--center-align);
    justify-content: var(--center-align);
    min-width: 5.625rem;
    padding: var(--item-space) var(--control-space);
    background: var(--banner-background-color);
    color: var(--banner-text-color);
    text-align: var(--center-align);
    flex-shrink: 0;
}

.event-card-dag {
    display: block;
    font-size: var(--heading-2-font-size);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
}

.event-card-maaned {
    display: block;
    font-size: var(--small-font-size);
    text-transform: uppercase;
    letter-spacing: var(--caption-letter-spacing);
    margin-top: var(--hair-space);
    opacity: var(--muted-opacity);
}

/* Card content */
.event-card-content {
    padding: var(--item-space) var(--gutter-space);
    display: flex;
    flex-direction: column;
    justify-content: var(--center-align);
    gap: var(--tight-space);
    flex: 1;
    min-width: 0;
}

.event-card-titel {
    margin: 0;
    font-size: var(--lead-font-size);
    font-weight: var(--heading-font-weight);
    line-height: var(--compact-line-height);
    color: var(--body-heading-color);
}

.event-card-sted {
    margin: 0;
    font-size: var(--small-font-size);
    color: var(--body-text-color);
}

.event-card-meta {
    margin: 0;
    font-size: var(--small-font-size);
    color: var(--body-text-color);
}

.event-card-pris {
    font-weight: var(--heading-font-weight);
    color: var(--body-link-color);
}

/* Past event – muted appearance */
.event-card--afholdt {
    opacity: var(--event-past-opacity);
}

.event-card--afholdt .event-card-dato {
    background: var(--border-strong-color);
}

.event-card--afholdt:hover {
    opacity: var(--event-past-hover-opacity);
}

/* Image-based event cards (events with banner images) */
.event-card--image {
    flex-direction: column;
    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(--card-radius);
}

.event-card-image--default {
    background-size: 60% auto;
    background-repeat: no-repeat;
    background-color: var(--body-background-color);
}

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

/* ==========================================================
   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.hero--event-hero {
    max-width: none;
    text-align: var(--left-align);
    padding: var(--detail-hero-pad-block) var(--page-side-padding);
    min-height: var(--detail-hero-min-height);
    position: relative;
    z-index: var(--base-layer);
}

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

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

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

.columns--event-detail > .columns-inner > .column > .columns .columns-inner {
    gap: var(--hair-space);
    align-items: var(--start-align);
}

.columns--event-detail > .columns-inner > .column > .columns .text {
    font-weight: var(--strong-font-weight);
}

.columns--event-detail > .columns-inner > .column > .columns + .heading {
    margin-top: var(--block-space);
}

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

/* Extra space between talk abstract and instructor */
.columns--event-detail .column .heading h4 {
    margin-top: 2cm;
}

.columns--event-detail > .columns-inner > .column > .columns .text p {
    margin: var(--hair-space) 0;
}

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

.columns--event-detail > .columns-inner > .column: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(--body-background-color);
    border: var(--hairline-width) solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--gutter-space);
}

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

.event-info-table tr + tr td {
    padding-top: var(--control-space);
}

.event-info-icon {
    width: 1.5rem;
    text-align: var(--center-align);
    vertical-align: top;
    padding-right: var(--tight-space);
    color: var(--body-text-color);
    font-size: var(--small-font-size);
}

.event-info-label {
    white-space: nowrap;
    vertical-align: top;
    padding-right: var(--item-space);
    font-weight: var(--heading-font-weight);
    font-size: var(--small-font-size);
    color: var(--body-text-color);
}

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

/* Tilmeld button */
.event-tilmeld-btn {
    display: block;
    width: 100%;
    text-align: var(--center-align);
    margin-top: var(--gutter-space);
    padding: var(--control-space) var(--group-space);
}

/* Google Maps embed */
.event-map {
    margin-top: var(--group-space);
}

.event-map-heading {
    font-size: var(--lead-font-size);
    font-weight: var(--heading-font-weight);
    margin-bottom: var(--control-space);
}

.event-map-heading a {
    color: var(--body-link-color);
}

.event-map-frame {
    overflow: hidden;
    border-radius: var(--card-radius);
    height: 15.625rem;
}

.event-map-frame iframe {
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
}

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

.event-related-section {
    max-width: var(--layout-measure);
    margin: var(--band-space) auto;
    padding: 0 var(--page-side-padding);
}

.event-related-section h2 {
    margin-bottom: var(--group-space);
}

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

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

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

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

.event-related-title {
    padding: var(--item-space);
    font-weight: var(--heading-font-weight);
    font-size: var(--small-font-size);
    color: var(--body-heading-color);
}

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

.event-recent-section {
    max-width: var(--layout-measure);
    margin: var(--band-space) auto;
    padding: var(--block-space) var(--page-side-padding);
    border-top: var(--hairline-width) solid var(--border-color);
}

.event-recent-section h2 {
    text-align: var(--center-align);
    margin-bottom: var(--group-space);
}

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

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

.event-recent-card:hover {
    transform: translateY(-0.1875rem);
}

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

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

.event-recent-cta {
    text-align: var(--center-align);
    margin-top: var(--block-space);
}

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

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

    .event-card-dato {
        min-width: 4.5rem;
        padding: var(--control-space) var(--tight-space);
    }

    .event-card-dag {
        font-size: var(--heading-4-font-size);
    }

    .hero.hero--event-hero {
        padding-bottom: var(--block-space);
    }

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

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