/* =============================================================
   KONGRES 2026 — BEKRÆFT DELTAGELSE
   Styles for page-templates/page-kongres-deltagelse.php
============================================================= */

.page-kongres-deltagelse {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-bottom: var(--space-3xl);
}

/* ------------------------------------------------------------
   1. HERO
------------------------------------------------------------ */
.deltagelse-hero {
    width: calc(100% - 2 * var(--space-lg));
    max-width: var(--max-width-content);
    margin: var(--space-sm) auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--color-primary);
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
}

.deltagelse-hero__badge {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    color: var(--color-primary-light);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    padding: 6px var(--space-md);
    margin-bottom: var(--space-md);
}

.deltagelse-hero__heading {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1);
    color: var(--color-text-white);
    margin: 0 0 var(--space-md) 0;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.deltagelse-hero__text {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: rgba(255,255,255,0.8);
    max-width: 560px;
    margin: 0 auto var(--space-xl) auto;
}

.deltagelse-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.deltagelse-hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-secondary);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white);
}

.deltagelse-hero__meta-item i,
.deltagelse-hero__meta-item svg {
    color: var(--color-accent);
    stroke: var(--color-accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.deltagelse-hero__signup {
    margin-top: var(--space-xl);
}

.deltagelse-hero__form-embed {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

/* HubSpot-formularens eget indhold arver Inter herfra;
   selve feltstyling styres af HubSpots stylesheet. */
.deltagelse-hero__form-embed,
.deltagelse-hero__form-embed * {
    font-family: var(--font-family) !important;
}

/* hbspt.forms.create() pakker selv iframen ind i en ekstra indre
   div med klassen .hs-form-frame (inde i vores #hubspot-kongres-form),
   og det er DEN div, HubSpot selv dynamisk højde-justerer via JS ud
   fra formularens faktiske, målte indhold — ikke #hubspot-kongres-form
   eller iframen direkte. At tvinge en fast højde på de forkerte
   elementer får HubSpots egen (korrekte) højde til at overflowe og
   blive klippet af kortets overflow:hidden. Vi lader derfor
   .hs-form-frame styre sig selv og sætter kun en lille min-height
   som sikkerhedsnet mod 0px, før scriptet har målt færdigt. */
#hubspot-kongres-form .hs-form-frame {
    min-height: 48px;
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1024px) {
    .deltagelse-hero__heading {
        font-size: 36px;
    }
}

@media (max-width: 640px) {
    .deltagelse-hero {
        padding: var(--space-2xl) var(--space-lg);
    }

    .deltagelse-hero__meta {
        flex-direction: column;
        gap: var(--space-sm);
    }
}