/*
==========================================================
EVENT BLOCK — event.css
==========================================================
WHAT IT IS:
A manually filled event card: name, location, date and
time (free text) with optional small icons, plus an
optional label, status, description, photo and button.

WHAT IT DOES:
Pulls ACF fields and renders a styled event card. Each
detail line can show a decorative icon (Font Awesome
classes — the default — an uploaded image, or none).

HOW TO USE:
1. In the WordPress block editor add the "Event"
   block to any page or post.
2. Fill in the Title field (required).
3. Optionally fill in Location, Date, and Time fields.
4. Save and preview the page.

NOTE: Font Awesome icons need the site's Font Awesome kit
(enqueued in functions.php, front end only). Editor
organization: BATCH_8_PLAN.md §33.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/

.event_block {
    margin: var(--space-8) 0;
}

.event_block_inner {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    padding: var(--space-5);
}

/* The hover shadow was removed (§33): the card itself isn't clickable. */

/* (Corner triangle decoration removed — BATCH_8_PLAN.md §40.) */

.event_block_inner h2 {
    color: var(--color-primary);
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 var(--space-4) 0;
    margin: 0 0 var(--space-4) 0;
}

.event_block_inner p.event_block_detail {
    position: relative;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    line-height: var(--leading-relaxed);
    margin: var(--space-2) 0;
    padding: 0 0 0 var(--space-6);
}

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

/* Detail icons (§33) — decorative <span class="event_block_icon"> holding a
   Font Awesome <i> or an uploaded image, in the place the old Font Awesome
   pseudo-element glyphs used (left edge, bottom of the line, accent color). */
.event_block_icon {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-accent);
}

.event_block_icon img {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    object-fit: contain;
    vertical-align: middle;
}

/* Icons: None — the lines move to the left edge. */
.event_block_icons_none .event_block_inner p.event_block_detail {
    padding-left: 0;
}

@media (max-width: 768px) {
    .event_block_inner {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .event_block_inner h2 {
        font-size: var(--text-base);
    }
}

/* ==========================================================
   Batch 8H — Event (BATCH_8_PLAN.md §33)
   Everything below styles content that is empty or off by default.
   ========================================================== */

/* Screen-reader-only words ("Where:", "Date:", "Time:", new tab). */
.event_block_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Small label ───────────────────────────────────────── */
.event_block_inner .event_block_label {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin: 0 0 var(--space-3) 0;
}

/* ── Status and notice — always in words ────────────────── */
.event_block_inner .event_block_status {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-accent);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.event_block_status_word {
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

/* ── Description and button ────────────────────────────── */
.event_block_inner .event_block_description {
    margin: var(--space-4) 0 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.event_block_inner .event_block_actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin: var(--space-5) 0 0;
}

/* Filled button. Shared .btn base lives in style.css §6b.
   BOILERPLATE NOTE: essentials kept here so the block works when copied
   to a new project on its own. */
.event_block_btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: var(--weight-semi);
    line-height: 1;
    text-decoration: none;
}

.event_block_btn:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}

/* Second button: outlined (same as the theme's outline buttons). */
.event_block_btn.event_block_btn_secondary {
    background-color: transparent;
    color: var(--color-accent);
}

.event_block_btn.event_block_btn_secondary:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* Two buttons in a narrow card: one above the other, the same width.
   Side by side whenever they fit (the row above wraps). */
@container event (max-width: 479px) {
    .event_block_inner .event_block_actions_two {
        flex-direction: column;
        align-items: stretch;
    }

    .event_block_actions_two .event_block_btn {
        text-align: center;
    }
}

/* ── Photo ────────────────────────────────────────────────
   Only printed when a photo is chosen. Above the details when the card is
   narrow; beside them (⅓ photo · ⅔ details) when the card has room —
   decided by the card's own width, so it also works inside columns. */
.event_block_wrapper {
    container: event / inline-size;
}

.event_block_photo {
    margin: 0 0 var(--space-4) 0;
}

.event_block_photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

@container event (min-width: 640px) {
    .event_block_has_photo .event_block_inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-6);
        align-items: start;
    }

    .event_block_has_photo .event_block_photo {
        margin-bottom: 0;
    }

    .event_block_has_photo .event_block_photo img {
        aspect-ratio: 4 / 3;
    }
}

/* ── Label look: Rounded tag (Batch 8H §28 / §33) ──────────
   Added only when the editor picks Rounded tag. Uses the label's own color
   (currentColor); the first border line is the color-mix() fallback.
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own. */
.event_block_inner .event_block_label.event_block_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── Editor-only messages ──────────────────────────────── */
.event_block_preview_empty,
.event_block_inner .event_block_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: center;
}

.event_block_preview_empty {
    margin: var(--space-4) auto;
}

/* ==========================================================
   Section background (shared six-choice pattern, BATCH_8_PLAN.md §35)
   Only added when Background color is chosen; Standard adds nothing, so
   the section looks as before. The colour fills the section and its
   space moves from margin to padding so the colour surrounds the content.
   Nothing sits directly on the section: the event card keeps its own colours.
   ========================================================== */
.event_block.event_block_sbg {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.event_block_sbg_background     { background-color: var(--color-bg); }
.event_block_sbg_alt_background { background-color: var(--color-bg-alt); }
.event_block_sbg_dark           { background-color: var(--color-bg-dark); }
.event_block_sbg_accent         { background-color: var(--color-accent); }
.event_block_sbg_custom         { background-color: var(--event_block-section-bg, var(--color-bg)); }

/* ==========================================================
   Content look + card background (BATCH_8_PLAN.md §40)
   Card (default) keeps the usual card; a chosen Card background fills it
   (and drops the gray border). Flat removes fill, border, shadow and radius;
   the content sits on the section background. event_block_on_dark is added when the
   surface directly behind the content is dark (a Dark / Brand / light-text
   custom card, or Flat on such a section): text, links, labels, dividers and
   focus outlines switch to light. event_block_on_accent: buttons stay visible on the
   brand colour. Card settings stay saved while Flat is chosen.
   ========================================================== */

.event_block_look_flat .event_block_inner {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
}

.event_block_cbg_background .event_block_inner { background-color: var(--color-bg); border-color: transparent; }
.event_block_cbg_alt_background .event_block_inner { background-color: var(--color-bg-alt); border-color: transparent; }
.event_block_cbg_dark .event_block_inner { background-color: var(--color-bg-dark); border-color: transparent; }
.event_block_cbg_accent .event_block_inner { background-color: var(--color-accent); border-color: transparent; }
.event_block_cbg_custom .event_block_inner { background-color: var(--event_block-card-bg, var(--color-bg-alt)); border-color: transparent; }

.event_block_on_dark .event_block_inner h2 {
    color: var(--color-text-inverse);
    border-bottom-color: color-mix(in srgb, var(--color-text-inverse) 25%, transparent);
}

.event_block_on_dark .event_block_inner p.event_block_detail,
.event_block_on_dark .event_block_inner .event_block_label,
.event_block_on_dark .event_block_status_word,
.event_block_on_dark .event_block_icon {
    color: var(--color-text-inverse);
}

.event_block_on_dark .event_block_inner .event_block_status,
.event_block_on_dark .event_block_inner .event_block_description {
    color: var(--color-text-inverse-soft);
}

.event_block_on_dark .event_block_inner .event_block_status {
    border-left-color: var(--color-text-inverse);
}

.event_block_on_dark .event_block_btn.event_block_btn_secondary {
    color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
}

.event_block_on_dark .event_block_btn:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 3px;
}

/* On the brand colour the filled button turns light so it doesn't vanish. */
.event_block_on_accent .event_block_btn.event_block_btn_primary {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-accent);
}

.event_block_on_accent .event_block_btn.event_block_btn_primary:hover,
.event_block_on_accent .event_block_btn.event_block_btn_secondary:hover {
    background-color: var(--color-text-inverse-soft);
    border-color: var(--color-text-inverse-soft);
    color: var(--color-accent);
}