/* ==========================================================================
   zs-components.css — shared UI components for Zvjezdane Staze
   --------------------------------------------------------------------------
   Components canonized 2026-05-05 (brand consolidation pass). All blocks
   below were previously inline in programmes/index.php and de/programme/index.php.
   Extracted here so they can be referenced from any page module without
   duplication.

   Contents:
     1. Now-line (live status pill above page title)
     2. Now-context (solar context italic line)
     3. Section eyebrow (gold caps + leading mark + fade line)
     4. Section pause (Vez Dijamant divider glyph between sections)
     5. Meta-strip (Mijakovići data line before footer CTA)
     6. Format tag (RESIDENCY, FELLOWSHIP, GATHERING, etc.)
     7. Status pill (live countdown / state)
     8. Card-tags row (format-tag + status pill side by side)
     9. Programme card (standard / residency / featured variants)
    10. Season-aware sun-blob tint

   All tokens reference :root vars from zs-base.css.
   ========================================================================== */


/* ==========================================================================
   1. NOW-LINE — live status above the page title
   ========================================================================== */

.now-line {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.95rem;
    background: rgba(196, 160, 80, 0.08);
    border-radius: 22px;
    line-height: 1.4;
}
.now-line::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: nowPulse 3.2s ease-in-out infinite;
}
.now-line.urgent {
    background: rgba(160, 64, 96, 0.08);
    color: var(--magenta);
}
.now-line.urgent::before { background: var(--magenta); }

@keyframes nowPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}


/* ==========================================================================
   2. NOW-CONTEXT — solar context italic line under the now-line
   ========================================================================== */

.now-context {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--light);
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}
.now-context .sep {
    color: var(--gold);
    margin: 0 0.5rem;
    font-style: normal;
}


/* ==========================================================================
   3. SECTION EYEBROW — gold caps with leading mark + fade line
   --------------------------------------------------------------------------
   Used above each programme grid section. Default tone is gold. Magenta
   (eyebrow--launch) for sections driven by an imminent launch event.
   ========================================================================== */

.section-eyebrow {
    position: relative; z-index: 100;
    max-width: 900px;
    margin: 2rem auto 1rem;
    padding: 0 2rem;
    font-family: var(--font-sans);
    font-size: 10.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.section-eyebrow::before {
    content: '';
    width: 18px; height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}
.section-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right,
        rgba(196, 160, 80, 0.55) 0%,
        rgba(196, 160, 80, 0.10) 60%,
        transparent 100%);
    margin-left: 0.4rem;
}
.section-eyebrow .ctx {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13.5px;
    color: var(--muted);
    margin-left: 0.6rem;
    flex-shrink: 0;
}

/* Launch variant — magenta accent for imminent-event sections */
.section-eyebrow.eyebrow--launch {
    color: var(--magenta);
    font-size: 12px;
    letter-spacing: 0.32em;
}
.section-eyebrow.eyebrow--launch::before { background: var(--magenta); }
.section-eyebrow.eyebrow--launch::after {
    background: linear-gradient(to right,
        rgba(160, 64, 96, 0.40) 0%,
        rgba(160, 64, 96, 0.08) 60%,
        transparent 100%);
}


/* ==========================================================================
   4. SECTION PAUSE — Vez Dijamant divider glyph between sections
   --------------------------------------------------------------------------
   Brand glyph from Vez Dijamant pattern: 8 forest squares (0.7 opacity) +
   central gold square. Quiet visual breath between major content blocks.
   Element is rendered in PHP via pulse_section_pause(); CSS handles only
   the wrapper alignment.
   ========================================================================== */

.section-pause {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 2rem;
    user-select: none;
    position: relative;
    z-index: 100;
    text-align: center;
}
.section-pause svg {
    display: block;
    margin: 0 auto;
}


/* ==========================================================================
   5. META-STRIP — Mijakovići data line before footer CTA
   ========================================================================== */

.meta-strip {
    position: relative; z-index: 100;
    max-width: 720px;
    margin: 4rem auto 1.5rem;
    padding: 1.5rem 2rem 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
    border-top: 1px solid rgba(196, 160, 80, 0.18);
    line-height: 1.7;
}
.meta-strip .sep {
    color: var(--gold);
    margin: 0 0.55rem;
    font-style: normal;
}
.meta-strip .geo {
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--light);
    font-weight: 600;
    margin-top: 0.5rem;
}


/* ==========================================================================
   6. FORMAT TAG — programme category label (RESIDENCY, GATHERING, etc.)
   ========================================================================== */

.format-tag {
    font-family: var(--font-sans);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold);
    padding: 0.4rem 0.75rem;
    border-radius: 14px;
    background: rgba(196, 160, 80, 0.08);
    line-height: 1;
}


/* ==========================================================================
   7. STATUS PILL — live countdown / programme state
   --------------------------------------------------------------------------
   Default tone: forest. Variants: urgent (magenta), upcoming (gold), idle.
   Idle uses a dashed ring instead of a filled dot.
   ========================================================================== */

.status {
    font-family: var(--font-sans);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 14px;
    background: var(--whisper);
    color: var(--forest);
    line-height: 1;
}
.status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status--urgent   { background: rgba(160, 64, 96, 0.10);  color: var(--magenta); }
.status--upcoming { background: rgba(196, 160, 80, 0.14); color: var(--gold); }
.status--idle     { background: rgba(45, 74, 45, 0.04);     color: var(--light); }
.status--idle::before {
    background: transparent;
    border: 1px dashed currentColor;
    width: 5px; height: 5px;
}


/* ==========================================================================
   8. CARD-TAGS — format-tag + status pill row at top of card
   ========================================================================== */

.card-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}


/* ==========================================================================
   9. PROGRAMME CARD — base + variants
   --------------------------------------------------------------------------
   Base card: cream-ish wash + subtle hover (translateY + shadow + gold
   underline). Variants:
     .residency  — full-width highlight (forest tinted, forest accent rail)
     .featured   — full-width 2-col grid (Dvonoćje, Zvuчne Staze)
   On mobile (<= 768px) the featured grid collapses to single column with
   tags-on-top, content below.
   ========================================================================== */

.programme-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(45, 74, 45, 0.03);
    padding: 2rem;
    text-decoration: none;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
}
.programme-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 0;
    background: var(--teal);
    transition: height 0.4s;
}
/* Gold underline that grows from left on hover — soft polish */
.programme-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s ease;
}
.programme-card:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(45, 74, 45, 0.06);
}
.programme-card:hover::before { height: 100%; }
.programme-card:hover::after  { transform: scaleX(1); }

/* Symbol — programme SVG icon at top-left of card */
.programme-card .symbol {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--muted);
}
.programme-card .symbol svg {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
}

/* Title */
.programme-card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--forest);
    margin-bottom: 0.5rem;
}

/* Tagline — gold uppercase line under title */
.programme-card .tagline {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}

/* Body */
.programme-card p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Meta — small bottom row */
.programme-card .meta {
    font-size: 12px;
    color: var(--light);
}
.programme-card .meta span { margin-right: 1rem; }

/* ----- residency variant (highlight, forest tinted) ----- */
.programme-card.residency {
    grid-column: span 2;
    background: rgba(45, 74, 45, 0.04);
    border: 1px solid rgba(45, 74, 45, 0.10);
}
.programme-card.residency::before { background: var(--forest); }
.programme-card.residency h3       { color: var(--forest-deep); }

/* ----- featured variant (Dvonoćje, Zvuчne Staze) -----
   2-col grid: full-width tags row on top, then symbol/title/tagline (left)
   and description/deadline (right). Magenta accent rail. */
.programme-card.featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "tags tags"
        "left right";
    gap: 1.4rem 2rem;
    align-items: stretch;
}
.programme-card.featured::before { background: var(--magenta); }

.programme-card.featured .card-tags     { grid-area: tags; }
.programme-card.featured .featured-left {
    grid-area: left;
    align-self: start;
}
.programme-card.featured .featured-right {
    grid-area: right;
    align-self: end;
    display: flex;
    flex-direction: column;
}
.programme-card.featured .symbol { font-size: 2.5rem; }
.programme-card.featured h3      { font-size: 1.8rem; }


/* ==========================================================================
   10. SEASON-AWARE SUN-BLOB TINT
   --------------------------------------------------------------------------
   Subtle palette shift on .sun-blob based on season class set on body.
   Aligns the ambient atmosphere to the time of year — spring fresh, summer
   warm, autumn copper, winter cool blue. Brand-safe gradients.
   ========================================================================== */

body.season-spring .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(221, 230, 192, 0.85) 0%,
        rgba(232, 232, 197, 0.55) 25%,
        rgba(240, 232, 200, 0.30) 50%,
        rgba(244, 238, 208, 0.12) 75%,
        transparent 95%);
}
body.season-summer .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(244, 220, 170, 0.88) 0%,
        rgba(248, 230, 190, 0.55) 25%,
        rgba(250, 235, 200, 0.28) 50%,
        transparent 95%);
}
body.season-autumn .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(232, 196, 150, 0.82) 0%,
        rgba(220, 180, 140, 0.50) 25%,
        rgba(208, 165, 130, 0.26) 50%,
        transparent 95%);
}
body.season-winter .sun-blob {
    background: radial-gradient(ellipse at center,
        rgba(220, 220, 230, 0.78) 0%,
        rgba(208, 215, 225, 0.45) 25%,
        rgba(196, 205, 220, 0.22) 50%,
        transparent 95%);
}


/* ==========================================================================
   RESPONSIVE — stacks layouts on tablet (≤ 900px) and mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 900px) {
    .programme-card.featured {
        grid-column: span 1;
        grid-template-columns: 1fr;
        grid-template-areas:
            "tags"
            "left"
            "right";
        gap: 1.4rem;
    }
    .programme-card.residency { grid-column: span 1; }
}

@media (max-width: 768px) {
    /* Section pause — tighter margins on mobile */
    .section-pause {
        margin: 2.5rem auto;
        padding: 0 1.5rem;
    }

    /* Eyebrow — stack label and ctx on two lines, drop trailing gradient,
       tighten letter-spacing so the uppercase label fits without breaking. */
    .section-eyebrow {
        flex-wrap: wrap;
        gap: 0.5rem 0.6rem;
        font-size: 10px;
        letter-spacing: 0.18em;
        padding: 0 1.5rem;
        margin: 1.5rem auto 0.75rem;
    }
    .section-eyebrow::before { width: 14px; }
    .section-eyebrow::after  { display: none; }
    .section-eyebrow .ctx {
        flex: 1 1 100%;
        margin-left: 0;
        font-size: 12.5px;
        line-height: 1.4;
    }
    .section-eyebrow.eyebrow--launch {
        font-size: 11px;
        letter-spacing: 0.2em;
    }

    /* Featured card — single column, smaller h3 */
    .programme-card.featured {
        gap: 1rem;
    }
    .programme-card.featured h3 {
        font-size: 1.3rem;
        word-break: break-word;
    }
}