/* =========================================================
   Callouts / infoblokken – Alles over Oostenrijk
   Version: 2026-01-27.3
   ========================================================= */

/* ---------------------------------------------------------
   1. Base callout
--------------------------------------------------------- */

.callout {
    position: relative;

    padding: 1.25rem 1.5rem;
    margin: 2rem 0;

    background: var(--card-bg);
    color: var(--card-fg);

    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);

    line-height: 1.6;
    font-size: 0.95rem;
}

.callout>*:first-child {
    margin-top: 0;
}

.callout>*:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   2. Headings inside callouts
--------------------------------------------------------- */

.callout h2,
.callout h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------
   3. Color variants
--------------------------------------------------------- */

.callout--blue {
    background: var(--blue-bg);
    border-color: var(--blue-border);
    color: #0d3b66;
}

.callout--green {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: #14532d;
}

.callout--beige {
    background: var(--beige-bg);
    border-color: var(--beige-border);
    color: var(--fg);
}

.callout--warn {
    background: var(--warn-bg);
    border-color: var(--warn-border);
    color: var(--fg);
}

.callout--brand {
    background: var(--brand-alt-bg);
    border-color: var(--brand-alt-border);
}
/* ---------------------------------------------------------
   Citycard callout / rustig ticketblok
--------------------------------------------------------- */

.callout--citycard {
    position: relative;
    padding: 2rem 2.25rem;
    margin: 2.5rem 0;

    background: #fff8ee;
    border: 1px solid #e2c48f;
    border-radius: 18px;

    box-shadow: 0 10px 26px rgba(80, 55, 25, 0.08);
}

/* subtiele ticketstrook */
.callout--citycard::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;

    width: 1px;
    border-left: 2px dashed #c99a52;
    opacity: 0.65;
}

.callout--citycard::after {
    content: "Salzburgcard";
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;

    padding: 0.3rem 0.75rem;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #9b6a2c;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #d7ad70;
    border-radius: 999px;
}

.callout--citycard h2,
.callout--citycard h3 {
    margin-top: 0;
    padding-right: 8rem;
    padding-left: 1.5rem;

    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.15;
}

.callout--citycard p {
    padding-left: 1.5rem;
    max-width: 68ch;
}

.callout--citycard p:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .callout--citycard {
        padding: 1.5rem 1.25rem;
    }

    .callout--citycard::before {
        left: 1rem;
    }

    .callout--citycard::after {
        position: static;
        display: inline-block;
        margin-left: 1.4rem;
        margin-bottom: 0.8rem;
    }

    .callout--citycard h2,
    .callout--citycard h3,
    .callout--citycard p {
        padding-left: 1.4rem;
        padding-right: 0;
    }
}

/* ---------------------------------------------------------
   4. Avatar callout (local tip / servus)
--------------------------------------------------------- */

.callout--avatar {
    padding-left: 5.5rem;
    min-height: 90px;
}

.callout--avatar::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;

    width: 56px;
    height: 56px;

    border-radius: 50%;
    background-size: cover;
    background-position: center;

    border: 3px solid var(--card-bg);
    box-shadow: var(--shadow-xs);
}

/* default avatar (kan per site overschreven worden) */
.callout--avatar::before {
    background-image: url("https://media.allesoveroostenrijk.nl/uploads/2025/06/vincent-Oostenrijk-expert.jpg");
}

/* ---------------------------------------------------------
   5. Label / eyebrow (bijv. “Local tip”)
--------------------------------------------------------- */

.callout__label {
    display: inline-block;
    margin-bottom: 0.25rem;

    font-family: 'Caveat', 'Patrick Hand', 'Comic Neue', cursive;
    font-size: 1.1rem;
    font-weight: 600;

    letter-spacing: 0;
    text-transform: none;

    color: #0d3b66;
}

/* ---------------------------------------------------------
   6. Legacy mapping (oude classes blijven werken)
   ---------------------------------------------------------
   Deze classes bestaan nog in oudere content/templates.
   Ze erven hun styling via legacy.css — hier staan ze als
   documentatie dat ze bewust niet gestyled worden vanuit
   dit bestand.
   TODO: verwijder deze sectie zodra legacy.css gesaneerd is.
--------------------------------------------------------- */

/* .local-tip, .tip, .info-box, .tip-box, .wistjedat
   → gestyled via legacy.css */

/* disclaimer / let op — extra border-left accent */
.disclaimer,
.letop-box {
    border-left-width: 4px;
}

/* ---------------------------------------------------------
   7. Dark mode tweaks
--------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

    .callout {
        box-shadow: var(--shadow);
    }

    .callout--blue {
        color: #dbeafe;
    }

    .callout--green {
        color: #dcfce7;
    }

    .callout--beige {
        color: var(--fg);
    }

    .callout--warn {
        color: var(--fg);
    }

}