/* =========================================================================
   Mohács 500 — Design tokens + reusable atoms
   -------------------------------------------------------------------------
   Source of truth for the festival's visual language. Tokens live as CSS
   custom properties on :root so they can be re-themed per tenant via inline
   style overrides set from the `festivals` DB record (see layout.php).
   ========================================================================= */
:root {
    /* Brand */
    --m-red:        #c1272d;
    --m-red-deep:   #7a1a1f;
    --m-red-tint:   #f5e6e0;
    --m-red-soft:   #fbeeea;

    /* Neutrals */
    --m-cream:      #fafaf7;
    --m-paper:      #f3f1eb;
    --m-ink:        #1a1a1a;
    --m-ink-muted:  #5a5754;
    --m-ink-soft:   #8a8682;
    --m-line:       #e5e1d8;

    /* Type */
    --m-font: "Outfit", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    --m-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

    /* Radius */
    --m-r-sm: 6px;
    --m-r-md: 12px;
    --m-r-lg: 20px;
    --m-r-xl: 32px;

    /* Shadow */
    --m-shadow-sm: 0 1px 2px rgba(26,26,26,.04), 0 1px 1px rgba(26,26,26,.03);
    --m-shadow-md: 0 4px 12px rgba(26,26,26,.06), 0 2px 4px rgba(26,26,26,.04);
    --m-shadow-lg: 0 20px 40px -12px rgba(122,26,31,.18), 0 8px 16px -8px rgba(26,26,26,.08);

    /* Motion */
    --m-ease: cubic-bezier(.4,0,.2,1);
}

html, body { background: var(--m-cream); color: var(--m-ink); font-family: var(--m-font); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[x-cloak] { display: none !important; }

/* ---------- Typography scale ---------- */
.m-display { font-size: clamp(40px, 7vw, 96px); font-weight: 700; line-height: .98; letter-spacing: -0.025em; }
.m-h1 { font-size: clamp(34px, 4.5vw, 56px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.m-h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.m-h3 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.m-body-lg { font-size: 19px; line-height: 1.6; color: var(--m-ink); }
.m-body { font-size: 16px; line-height: 1.65; color: var(--m-ink); }
.m-meta { font-size: 13px; line-height: 1.5; color: var(--m-ink-muted); }
.m-mono { font-family: var(--m-mono); font-size: 12px; letter-spacing: .04em; }

/* ---------- Eyebrow ---------- */
.m-eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--m-red);
}
.m-eyebrow-muted { color: var(--m-ink-muted); }

/* ---------- Pill ---------- */
.m-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px;
    font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px;
    font-family: var(--m-font); font-size: 15px; font-weight: 500;
    letter-spacing: .01em; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 44px;
    transition: transform .18s var(--m-ease), background .18s var(--m-ease),
                color .18s var(--m-ease), box-shadow .18s var(--m-ease),
                border-color .18s var(--m-ease);
}
.m-btn-primary { background: var(--m-red); color: #fff; box-shadow: 0 6px 20px -8px rgba(193,39,45,.5); }
.m-btn-primary:hover { background: var(--m-red-deep); transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(122,26,31,.55); }
.m-btn-on-dark { background: #fff; color: var(--m-red-deep); box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); }
.m-btn-on-dark:hover { background: var(--m-cream); transform: translateY(-1px); }
.m-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.m-btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-1px); }
.m-btn-ghost { background: transparent; color: var(--m-ink); border-color: var(--m-line); }
.m-btn-ghost:hover { background: var(--m-paper); }
.m-btn-ink { background: var(--m-ink); color: #fff; }
.m-btn-ink:hover { background: #000; transform: translateY(-1px); }

/* ---------- Card ---------- */
.m-card {
    background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r-lg);
    box-shadow: var(--m-shadow-sm);
    transition: transform .2s var(--m-ease), box-shadow .2s var(--m-ease), border-color .2s var(--m-ease);
}
.m-card-lift:hover { transform: translateY(-2px); box-shadow: var(--m-shadow-md); }

/* ---------- Link ---------- */
.m-link {
    color: var(--m-red); text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--m-red) 30%, transparent);
    transition: border-color .18s var(--m-ease);
}
.m-link:hover { border-bottom-color: var(--m-red); }

/* ---------- Divider ---------- */
.m-divider { height: 1px; background: var(--m-line); border: none; margin: 0; }

/* ---------- Striped image placeholder ---------- */
.m-img-placeholder {
    background:
        repeating-linear-gradient(135deg, rgba(122,26,31,.08) 0, rgba(122,26,31,.08) 1px, transparent 1px, transparent 10px),
        linear-gradient(135deg, var(--m-red-tint), var(--m-paper));
    display: flex; align-items: center; justify-content: center;
    color: var(--m-red-deep); font-family: var(--m-mono);
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    text-align: center; padding: 16px;
}

/* ---------- Initials placeholder ---------- */
.m-initials {
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; letter-spacing: -0.02em; color: #fff;
    background: linear-gradient(160deg, var(--m-red) 0%, var(--m-red-deep) 100%);
}

/* ---------- Pulse dot ---------- */
@keyframes m-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .55; transform: scale(.92); }
}
.m-pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; display: inline-block;
    animation: m-pulse 1.6s var(--m-ease) infinite;
}

/* ---------- Section padding helpers ---------- */
.m-section { padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 64px); }
.m-section-tight { padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 64px); }

/* ---------- Brand-ed shortcut classes (back-compat with old templates) ---------- */
.brand-bg     { background-color: var(--m-red); color: #fff; }
.brand-bg-acc { background-color: var(--m-red-deep); color: #fff; }
.brand-text   { color: var(--m-red); }
.brand-border { border-color: var(--m-red); }

/* ---------- Hero ----------
   The hero WebP is pre-blurred + pre-darkened on the server (ffmpeg gblur+eq),
   so the gradient overlay below adds only colour grading and bottom contrast,
   not a second blur — keeps the image weight tiny (~20 KB). */
.m-hero {
    position: relative;
    min-height: 720px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.m-hero-bg {
    position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 30%, rgba(26,12,14,.45) 65%, rgba(0,0,0,.78) 100%),
        radial-gradient(ellipse at 70% 35%, rgba(193,39,45,.18) 0%, transparent 65%),
        url('/assets/img/hero-1920.webp');
    background-size: cover, cover, cover;
    background-position: center, center, center center;
}
@media (max-width: 768px) {
    .m-hero { min-height: 560px; }
    .m-hero-bg {
        background-image:
            linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 30%, rgba(26,12,14,.55) 65%, rgba(0,0,0,.88) 100%),
            url('/assets/img/hero-mobile.webp');
        background-size: cover, cover;
        background-position: center, center;
    }
}
@media (min-width: 769px) and (max-width: 1280px) {
    .m-hero-bg { background-image:
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 30%, rgba(26,12,14,.45) 65%, rgba(0,0,0,.78) 100%),
        radial-gradient(ellipse at 70% 35%, rgba(193,39,45,.18) 0%, transparent 65%),
        url('/assets/img/hero-1280.webp'); }
}

/* ---------- Frosted nav over hero ---------- */
.m-nav-frosted {
    background: rgba(250,250,247,.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--m-line);
}
.m-nav-mono {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

/* ---------- Timeline / event card status colors ---------- */
.m-status-NOW      { color: var(--m-red); }
.m-status-NEXT     { color: #b8590a; }
.m-status-TODAY    { color: var(--m-ink); }
.m-status-UPCOMING { color: var(--m-ink-muted); }
.m-status-PAST     { color: var(--m-ink-soft); }

/* ---------- Drop cap (mayor welcome) ---------- */
.m-dropcap::first-letter {
    float: left;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: var(--m-red);
    font-size: 4.5em;
    line-height: .85;
    padding: 6px 10px 0 0;
}

/* ---------- Choir chip ---------- */
.m-chip {
    display: inline-flex; align-items: center; padding: 5px 10px;
    font-size: 12px; font-weight: 500;
    background: var(--m-paper); color: var(--m-ink);
    border-radius: 999px; border: 1px solid transparent;
    text-decoration: none;
    transition: background .18s var(--m-ease), border-color .18s var(--m-ease);
}
.m-chip:hover { background: var(--m-red-soft); border-color: color-mix(in oklab, var(--m-red) 25%, transparent); color: var(--m-red-deep); }

/* ---------- Focus visible ---------- */
:focus-visible { outline: 2px solid var(--m-red); outline-offset: 2px; border-radius: 4px; }