/* =====================================================
   Audience landing pages (infoskaerm-til-*)
   Small additions on top of styles.css: hero, trust
   quote and minor tweaks. Media queries follow the
   1024/900/768/480 convention from styles.css.
   Requires: styles.css + legal.css (.legal-breadcrumb)
   ===================================================== */

/* Same background as the front page hero */
.audience-hero {
    padding: 180px 0 70px;
    background: url('../img/bg.webp') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

.audience-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--color-blue-light) 0%, transparent 70%);
    pointer-events: none;
}

/* Wide hero like the front page (1400px); content above the glow */
.audience-hero .container {
    max-width: var(--container-wide);
    position: relative;
    z-index: 1;
}

.audience-hero .legal-breadcrumb {
    margin-bottom: 28px;
}

/* Two-column hero: text left, live TV-preview right */
.audience-hero-inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.audience-hero-text {
    flex: 1 1 0;
    min-width: 0;
}

.audience-hero-visual {
    flex: 0 0 48%;
    min-width: 0;
}

.audience-hero h1 {
    max-width: 860px;
    margin-bottom: 20px;
}

/* Two-column layout up to ~1200px: the text column is ~420-560px and the
   desktop 5vw/3.5rem headline makes "gymnastikforeninger" wider than the
   column (bare mid-word break). Graduated cap so the longest foreningstype
   name always fits whole; from 1201px the column is wide enough for the
   full-size headline. */
@media (min-width: 901px) and (max-width: 1200px) {
    .audience-hero h1 {
        font-size: clamp(2rem, 3.3vw, 2.8rem);
    }
}

.audience-hero-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 740px;
    margin-bottom: 28px;
}

.audience-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.audience-hero-facts {
    display: flex;
    gap: 12px 28px;
    flex-wrap: wrap;
}

.audience-hero-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.audience-hero-fact i {
    color: var(--color-green);
}

/* Facts that link to a guide keep the pill look but hint at the link.
   Underline lives on the text span only — on the flex anchor it would be
   drawn under the icon glyph too. */
a.audience-hero-fact {
    text-decoration: none;
}

a.audience-hero-fact span {
    text-decoration: underline;
    text-decoration-color: rgba(107, 114, 128, 0.4);
    text-underline-offset: 3px;
}

a.audience-hero-fact:hover {
    color: var(--color-blue);
}

/* Escape hatch under the hero facts for mislanded visitors — deliberately
   quieter than .audience-demo-note so it reads as meta-navigation, not copy */
.audience-switch-note {
    margin-top: 18px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.audience-switch-note a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.audience-switch-note a:hover {
    color: var(--color-blue);
}

/* Trust quote card */
.audience-quote-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px 48px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.audience-quote-card > i {
    font-size: 1.5rem;
    color: var(--color-blue);
    margin-bottom: 16px;
}

.audience-quote-card blockquote {
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin: 0 0 24px;
}

.audience-quote-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: left;
}

.audience-quote-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.audience-quote-author strong {
    display: block;
    line-height: 1.3;
}

.audience-quote-author span {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.audience-quote-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-weight: 600;
}

/* Side-by-side buttons in a section CTA */
.section-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Lighter trust mention shown above the feature grid */
.audience-trust-note {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 1.05rem;
    color: var(--color-text-secondary);
}

/* The long unique-content sections reuse this class but wrap their prose in
   one or more <p>. Give them a slightly wider, comfortable measure; the text
   stays centered to match the section heading above it. */
.audience-trust-note:has(p) {
    max-width: 760px;
}

.audience-trust-note p {
    margin-bottom: 1rem;
}

.audience-trust-note p:last-child {
    margin-bottom: 0;
}

/* When the prose block sits in a text/image split (.section-header-row), it
   left-aligns under the heading instead of centering against the column */
.section-header-side .audience-trust-note {
    text-align: left;
    max-width: none;
    margin: 24px 0 0;
}

@media (max-width: 1024px) {
    .audience-hero {
        padding: 165px 0 60px;
    }
}

/* Stacked hero (phones AND the 769-900 tablet band): front-page-consistent
   centered single column — headline → lead → live TV → CTA → demo-note →
   facts → testimonial. The text/visual columns flatten (display:contents) so
   the TV can interleave — every child needs an order or it defaults to 0 and
   jumps first; the catch-all puts unknown children LAST. */
@media (max-width: 900px) {
    .audience-hero .legal-breadcrumb {
        justify-content: center;
    }

    .audience-hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .audience-hero-text,
    .audience-hero-visual {
        display: contents;
    }

    .audience-hero-text > *,
    .audience-hero-visual > * {
        order: 9;
    }

    .audience-hero h1 {
        order: 1;
        text-align: center;
    }

    .audience-hero-lead {
        order: 2;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .audience-hero-visual .hero-tv-frame {
        order: 3;
        width: 100%;
        max-width: 720px;
        margin: 0 auto 24px;
        align-self: center;
    }

    /* CTA row mirrors the TV width above it, two equal halves (phone rules
       below 480px stack them full-width as before) */
    .audience-hero-cta {
        order: 4;
        justify-content: center;
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .audience-hero-cta .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .audience-demo-note {
        order: 5;
        text-align: center;
        /* shrink-wrap and center like the front-page note: the box hugs the
           text (icon rides its left edge) but never exceeds the TV/CTA column.
           width:100% would pin the icon to the far column edge instead. */
        align-self: center;
        width: auto;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .audience-hero-facts {
        order: 6;
        justify-content: center;
        /* no extra gap: the demo-note above carries 28px bottom margin */
        margin-top: 0;
    }

    /* A fact whose label wraps keeps the full row width — center its content
       so it doesn't read left-anchored among centered siblings */
    .audience-hero-fact {
        justify-content: center;
        text-align: center;
    }

    .audience-switch-note {
        order: 7;
        text-align: center;
    }

    .audience-hero-visual .hero-testimonial {
        order: 8;
        width: 100%;
        max-width: 720px;
        margin: 24px auto 0;
        align-self: center;
    }

    .audience-quote-card {
        padding: 32px;
    }

    /* The split-layout trust-note variant is left-aligned beside the heading
       on desktop; centered like everything else once stacked */
    .section-header-side .audience-trust-note {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .audience-hero {
        padding: 120px 0 50px;
    }

    .audience-hero-lead {
        font-size: 1.05rem;
    }

    .audience-quote-card blockquote {
        font-size: 1.05rem;
    }

    /* Standalone section CTAs read better full-width and stacked on phones —
       matches the hero CTA treatment and gives each a full tap target.
       A shared min-height keeps a one-line button level with one whose label
       wraps to two lines (e.g. "Se alle 8 medlemssystem-integrationer"). */
    .section-cta-row .btn {
        width: 100%;
        justify-content: center;
        min-height: 56px;
        align-items: center;
    }

    /* Linked hero facts get a comfortable tap height on touch screens */
    a.audience-hero-fact {
        min-height: 44px;
    }
}

/* On tablet the two section-CTA buttons fit side-by-side, so restore auto width
   there; the full-width stack above is kept for true phones (<=600px). */
@media (min-width: 601px) and (max-width: 768px) {
    .section-cta-row .btn {
        width: auto;
    }
}

@media (max-width: 480px) {
    .audience-hero-cta .btn {
        /* flex-basis auto (not the tablet 0): basis 0 would beat width:100%
           and squeeze the pair side-by-side with wrapped labels */
        flex: 1 1 auto;
        width: 100%;
        justify-content: center;
    }

    /* Facts stay a centered wrapping row (not a left column) — 2+1 when all
       three don't fit one line */
    .audience-hero-facts {
        gap: 10px 20px;
    }

    .audience-quote-card {
        padding: 24px 20px;
    }

    .audience-quote-card blockquote {
        font-size: 1rem;
    }

    /* Author line wraps under the avatar instead of squeezing on tiny screens */
    .audience-quote-author {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

.audience-screenshot { max-width: 720px; margin: 32px auto 0; }
.audience-screenshot img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); display: block; }
.audience-screenshot figcaption { text-align: center; font-size: 0.9rem; color: var(--color-text-muted); margin-top: 12px; }

/* Stacked layouts (phones + the 769-900 band): standalone screenshot figures
   follow the full container width like the cards around them — the 720px
   desktop cap otherwise freezes them between ~720 and 900px. (Split-column
   contexts already release the cap with their own rules.) */
@media (max-width: 900px) {
    .audience-screenshot {
        max-width: none;
    }
}

/* Same fix as the front page: at 481-600px the 50/50 CTA halves are too
   narrow for label + rocket icon, so the label wraps — hide the icon there
   (below 480 the buttons stack full-width and the global .btn rules apply) */
@media (max-width: 600px) {
    .audience-hero-cta .btn .fa-rocket {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 600px) {
    .audience-hero-cta .btn {
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
}

/* Same as the front page: no icon on the centered stacked demo-note */
@media (max-width: 900px) {
    .audience-demo-note > i {
        display: none;
    }
}

/* Screenshot figures inside alt sections: on stacked layouts the full 16:9
   frame towers over the copy — crop to a shorter 2:1 band, centered */
@media (max-width: 900px) {
    .section-alt .audience-screenshot img {
        aspect-ratio: 2 / 1;
        object-fit: cover;
        object-position: center;
    }
}

/* Tiny phones: "gymnastikforeninger" doesn't fit the clamp minimum at 320px —
   step the size down instead of hyphenating (auto-hyphens produced junk
   breaks like "in-foskaerm" even when words fit) */
@media (max-width: 340px) {
    .audience-hero h1 {
        font-size: 1.85rem;
    }
}