/* ==========================================================================
   ISKCON DNIPRO — VAISHNAVA CALENDAR
   Events landing, list, and detail pages.
   Builds on tokens.css + vedic.css editorial primitives.
   ========================================================================== */


/* ==========================================================================
   Page rhythm
   ========================================================================== */

.events-section {
    padding: 96px 0 112px;
    position: relative;
    background: var(--color-bg);
}

.events-section--deep { background: var(--color-surface-sunken); }

@media (max-width: 768px) {
    .events-section { padding: 64px 0 80px; }
}

@media (max-width: 480px) {
    .events-section { padding: 48px 0 60px; }
}


/* ==========================================================================
   Lead block
   ========================================================================== */

.events-lead {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.events-lead .ornament { margin-bottom: 22px; }

.events-lead p {
    font-family: 'PT Sans', sans-serif;
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--color-text-muted);
    margin: 0;
}


/* ==========================================================================
   Calendar — month-grid view
   ========================================================================== */

.calendar {
    max-width: 1100px;
    margin: 0 auto;
}

/* Month nav bar */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    position: relative;
}

.calendar-nav-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-strong);
    text-decoration: none;
    font-size: 0.9rem;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.calendar-nav-btn:hover {
    border-color: var(--color-accent-strong);
    color: var(--color-accent-strong);
}

.calendar-nav-label {
    font-family: 'PT Serif', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0;
    letter-spacing: 0.4px;
    min-width: 280px;
    text-align: center;
}

.calendar-nav-today {
    position: absolute;
    right: 0;
    font-family: 'PT Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-strong);
    text-decoration: none;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    transition: border-color .2s ease, color .2s ease;
}

.calendar-nav-today:hover {
    border-color: var(--color-accent-strong);
    color: var(--color-text-strong);
}

@media (max-width: 720px) {
    .events-lead {
        margin: 0 auto 36px;
    }
    .events-lead p {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .calendar-nav {
        gap: 10px;
        margin-bottom: 22px;
    }
    .calendar-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 0.78rem;
    }
    .calendar-nav-label {
        min-width: 0;
        font-size: clamp(1.1rem, 4.5vw, 1.4rem);
        letter-spacing: 0.2px;
    }
    .calendar-nav-today {
        position: static;
        order: 99;        /* always wrap to its own row, after < label > */
        margin-top: 0;
        padding: 8px 14px;
        font-size: 0.7rem;
    }
}

/* Grid frame */
.calendar-grid {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.calendar-weekdays,
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays {
    background: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-border);
}

.calendar-weekday {
    padding: 14px 8px;
    font-family: 'PT Sans', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
    border-right: 1px solid var(--color-border-soft);
}

.calendar-weekday:last-child { border-right: none; }

.calendar-weekday--weekend { color: var(--color-brand); }

/* Week row — explicit row height so photo cells don't drag siblings taller */
.calendar-week {
    border-bottom: 1px solid var(--color-border);
    grid-auto-rows: minmax(150px, auto);
}

.calendar-week:last-child { border-bottom: none; }

/* Day cell — number, optional photo, type pill rail at the bottom, plus a
   hover popover with full details. The full event copy lives in the month
   list under the grid. */
.calendar-day {
    min-height: 138px;
    min-width: 0;            /* allow grid item to shrink to 1fr */
    padding: 10px 10px 10px;
    border-right: 1px solid var(--color-border-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--color-surface);
    position: relative;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
}

.calendar-day:last-child { border-right: none; }

.calendar-day--out {
    background: var(--color-surface-sunken);
    color: var(--color-text-faint);
}

.calendar-day--out .calendar-day-number {
    color: var(--color-text-faint);
}

.calendar-day--weekend .calendar-day-number {
    color: var(--color-brand);
}

.calendar-day--out.calendar-day--weekend .calendar-day-number {
    color: var(--color-text-faint);
}

.calendar-day--today {
    background: var(--color-accent-soft);
    box-shadow: inset 0 0 0 2px var(--color-accent-strong);
}

/* Anchor cell — focus + hover highlights but no movement */
.calendar-day--link {
    cursor: pointer;
}

.calendar-day--link:hover {
    background: var(--color-accent-soft);
}

.calendar-day--link.calendar-day--photo:hover {
    background: var(--color-surface);
}

.calendar-day--link.calendar-day--photo:hover .calendar-day-photo-img {
    filter: brightness(1.04);
}

.calendar-day--link:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: -2px;
}

/* Photo cell — img + soft veil + day number overlay; no chips */
.calendar-day--photo {
    padding: 0;
}

.calendar-day-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

/* No wide top-to-bottom veil — the photo shows in full. The date pill,
   type icons, and title chip carry their own localized backings. */
.calendar-day-photo-veil {
    display: none;
}

.calendar-day--photo .calendar-day-head {
    position: relative;
    z-index: 2;
    padding: 10px 10px 0;
}

/* Photo cell — digit position and size match non-photo cells. The pseudo
   element draws a subtle cream backing slightly larger than the glyph so the
   digit reads against any photograph without shifting layout. */
.calendar-day--photo .calendar-day-number {
    color: var(--palette-ink);
    position: relative;
    isolation: isolate;
}

.calendar-day--photo .calendar-day-number::before {
    content: '';
    position: absolute;
    inset: -1px -4px;
    background: rgba(255, 252, 243, 0.85);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    z-index: -1;
}

.calendar-day--photo.calendar-day--weekend .calendar-day-number {
    color: var(--palette-maroon);
}

/* Out-of-month photo cell — full grayscale + dim (only used if we ever
   relax the in_month gate; current template skips photos for out-of-month). */
.calendar-day--out.calendar-day--photo {
    filter: grayscale(1) brightness(0.92);
    opacity: 0.7;
}

.calendar-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.calendar-day-number {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-strong);
    line-height: 1;
    letter-spacing: 0.3px;
}

.calendar-day--today .calendar-day-number {
    color: var(--color-accent-strong);
}

/* Type icon rail — absolute-positioned so it doesn't compete with the
   day number for space in the head. Lives top-right on desktop and slides
   to bottom-right on mobile (where festival titles are hidden anyway). */
.calendar-day-types {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.calendar-day--photo .calendar-day-types {
    top: 6px;
    right: 6px;
}

.calendar-day-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-ghost);
    color: var(--color-accent-strong);
    flex-shrink: 0;
}

.calendar-day-icon i { font-size: 0.62rem; line-height: 1; }

/* Type tints — derived from theme tokens so they adapt to all four themes. */
.calendar-day-icon--ekadasi {
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
}

/* .calendar-day-icon--festival inherits the base accent palette. */

.calendar-day-icon--appearance {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.calendar-day-icon--disappearance {
    background: var(--color-brand-soft);
    color: var(--color-brand);
}

.calendar-day-icon--vrata {
    background: var(--color-brand-soft);
    color: var(--color-brand);
}

.calendar-day-icon--main {
    background: var(--color-brand);
    color: var(--color-on-accent);
}

/* Photo cell icons — cream pill stays legible over any photo. The fg color
   inherits from the type class above; on the cream pill we want a stable
   dark-on-cream read regardless of the active theme. */
.calendar-day--photo .calendar-day-icon {
    background: rgba(255, 252, 243, 0.94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    color: var(--palette-gold-dark);
}

.calendar-day--photo .calendar-day-icon--ekadasi { color: var(--palette-tulsi); }
.calendar-day--photo .calendar-day-icon--appearance { color: var(--palette-gold-dark); }
.calendar-day--photo .calendar-day-icon--disappearance,
.calendar-day--photo .calendar-day-icon--vrata { color: var(--palette-maroon); }

.calendar-day--photo .calendar-day-icon--main {
    background: rgba(126, 31, 42, 0.94);
    color: var(--palette-off-white);
}


/* Title rail — bottom of the cell. Each event becomes a translucent chip
   with a one-line title so multiple events stack tidily without crowding. */
.calendar-day-titles {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    z-index: 2;
    min-width: 0;
}

.calendar-day-title {
    display: block;
    padding: 3px 8px;
    background: var(--color-accent-soft);
    border-left: 2px solid var(--color-accent);
    color: var(--color-text-strong);
    font-family: 'PT Serif', Georgia, serif;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.calendar-day-title--main {
    background: var(--color-brand);
    border-left-color: var(--color-accent-strong);
    color: var(--color-on-accent);
}

/* Photo cell — chips get a translucent cream backing so they stay legible
   over any photograph; soft blur keeps the picture present underneath.
   Text color is force-pinned dark since the cream pill never flips. */
.calendar-day--photo .calendar-day-titles {
    padding: 8px;
    gap: 4px;
}

.calendar-day--photo .calendar-day-title {
    background: rgba(255, 252, 243, 0.88);
    border-left-color: var(--palette-gold-dark);
    color: var(--palette-ink);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.calendar-day--photo .calendar-day-title--main {
    background: rgba(126, 31, 42, 0.90);
    color: var(--palette-off-white);
    border-left-color: var(--palette-gold);
}


/* Hover popover — beautifully laid-out card with the day's events.
   Lives inside the cell anchor; visibility-only show/hide so there is no
   movement (per project preference). Disabled on touch via @media hover. */
.calendar-day-popover {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: 92vw;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent-strong);
    box-shadow: var(--shadow-lg);
    padding: 18px 20px 16px;
    z-index: 50;
    visibility: hidden;
    pointer-events: none;
    text-align: left;
    color: var(--color-text);
}

@media (hover: hover) {
    .calendar-day--link:hover .calendar-day-popover,
    .calendar-day--link:focus-visible .calendar-day-popover {
        visibility: visible;
        pointer-events: auto;
    }
    .calendar-day--link:hover {
        z-index: 51;
    }
}

/* Edge alignment so popovers don't escape the calendar frame.
   First two columns anchor left, last two columns anchor right. */
.calendar-week .calendar-day--link:nth-child(7n+1) .calendar-day-popover,
.calendar-week .calendar-day--link:nth-child(7n+2) .calendar-day-popover {
    left: 0;
    transform: none;
}
.calendar-week .calendar-day--link:nth-child(7n+6) .calendar-day-popover,
.calendar-week .calendar-day--link:nth-child(7n) .calendar-day-popover {
    left: auto;
    right: 0;
    transform: none;
}

/* Last week of the grid — popover anchors above so it doesn't drop into
   the next section. */
.calendar-week--last .calendar-day-popover {
    top: auto;
    bottom: calc(100% - 1px);
    border-top: 1px solid var(--color-border);
    border-bottom: 3px solid var(--color-accent-strong);
}

.calendar-day-popover-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: 14px;
}

.calendar-day-popover-day {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent-strong);
    line-height: 1;
}

.calendar-day-popover-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-day-popover-month {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-strong);
    text-transform: capitalize;
}

.calendar-day-popover-weekday {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.calendar-day-popover-events {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.calendar-day-popover-event {
    padding-left: 12px;
    border-left: 2px solid var(--color-accent);
}

.calendar-day-popover-event--main {
    border-left-color: var(--color-brand);
}

.calendar-day-popover-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.calendar-day-popover-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'PT Sans', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-strong);
}

.calendar-day-popover-type i { font-size: 0.66rem; }

.calendar-day-popover-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    background: var(--color-brand);
    color: var(--color-on-accent);
    font-family: 'PT Sans', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
}

.calendar-day-popover-title {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0 0 6px;
    line-height: 1.35;
    letter-spacing: 0.2px;
}

.calendar-day-popover-desc {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
}

.calendar-day-popover-fasting,
.calendar-day-popover-range {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--color-accent-strong);
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-day-popover-fasting i,
.calendar-day-popover-range i { font-size: 0.7rem; flex-shrink: 0; }

.calendar-day-popover-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-soft);
    font-family: 'PT Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-day-popover-foot i {
    color: var(--color-accent-strong);
    font-size: 0.7rem;
}

/* Legend */
.calendar-legend {
    margin-top: 24px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'PT Sans', sans-serif;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.calendar-legend-icon {
    color: var(--color-accent-strong);
    font-size: 0.78rem;
}

.calendar-legend-item--main {
    color: var(--color-brand);
}

.calendar-legend-item--main .calendar-legend-dot {
    width: 12px;
    height: 12px;
    background: var(--color-brand);
    display: inline-block;
}

/* Tablet (≤ 899px): hide title chips + popover, tighten cells. The grid
   keeps the desktop head/number layout, just at smaller sizes. */
@media (max-width: 899px) {
    .calendar-week { grid-auto-rows: minmax(96px, auto); }
    .calendar-day {
        min-height: 96px;
        padding: 8px;
    }
    .calendar-day-number { font-size: 0.95rem; }
    .calendar-day--photo .calendar-day-head { padding: 8px 8px 0; }
    .calendar-day-icon { width: 16px; height: 16px; }
    .calendar-day-icon i { font-size: 0.55rem; }
    .calendar-day-titles { display: none; }
    .calendar-day-popover { display: none; }
}

/* Phone (≤ 600px): minimal layout. Day number sits at the EXACT same
   pixel coordinates in every cell type via an absolute-positioned head;
   plain text on regular cells, a cream tab anchored to the left edge on
   photo cells (the pill backing keeps the number readable over any
   photograph but its TEXT lines up with plain numbers). Type icons drop
   to the bottom-right corner. */
@media (max-width: 600px) {
    .calendar-week { grid-auto-rows: minmax(60px, auto); }
    .calendar-day {
        min-height: 60px;
        padding: 0;
        gap: 0;
    }

    .calendar-day-head {
        position: absolute;
        top: 4px;
        left: 5px;
        z-index: 2;
        gap: 4px;
    }
    .calendar-day-number {
        font-size: 0.66rem;
        line-height: 1;
    }

    /* Photo cell head shares the same absolute slot as non-photo so the digit
       lands at exactly the same coords regardless of whether the cell carries
       a photograph. The pseudo backing on the number provides legibility. */
    .calendar-day--photo .calendar-day-head {
        position: absolute;
        top: 4px;
        left: 5px;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
        display: inline-flex;
        width: auto;
    }

    /* Type icons at bottom-right corner of every cell */
    .calendar-day-types,
    .calendar-day--photo .calendar-day-types {
        top: auto;
        bottom: 4px;
        right: 4px;
        gap: 2px;
    }
    .calendar-day-icon { width: 13px; height: 13px; }
    .calendar-day-icon i { font-size: 0.48rem; }

    .calendar-weekday {
        padding: 10px 4px;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }
}


/* ==========================================================================
   Month event list — sits under the calendar grid on the calendar page.
   Shares the events-row markup, so each item links to its detail page; the
   first row of each date carries an id="day-YYYY-MM-DD" anchor that the
   calendar cells link to.
   ========================================================================== */

.events-month-stream {
    max-width: 1100px;
    margin: 88px auto 0;
}

.events-month-stream-head {
    text-align: center;
    margin-bottom: 36px;
}

.events-month-stream-head .ornament {
    margin-bottom: 16px;
}

.events-month-stream-title {
    font-family: 'PT Serif', Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0 0 6px;
    letter-spacing: 0.3px;
}

.events-month-stream-sub {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-strong);
    margin: 0;
}

/* Anchor offset so jumping from the calendar doesn't tuck the row under the
   sticky nav. Applied per-li since :target on the row anchor would clash. */
.events-month-stream .events-row-list > li[id^="day-"] {
    scroll-margin-top: 96px;
}

.events-month-empty {
    text-align: center;
    padding: 48px 24px 32px;
    border: 1px dashed var(--color-border);
    background: var(--color-surface);
    max-width: 640px;
    margin: 0 auto;
}

.events-month-empty-icon {
    font-size: 2rem;
    color: var(--color-accent-strong);
    margin-bottom: 14px;
    display: block;
}

.events-month-empty-text {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.05rem;
    color: var(--color-text-strong);
    margin: 0 0 18px;
    line-height: 1.6;
}

.events-month-empty-link {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-strong);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent-strong);
    padding-bottom: 2px;
}

.events-month-empty-link:hover {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

@media (max-width: 720px) {
    .events-month-stream { margin-top: 56px; }
    .events-month-stream-head { margin-bottom: 24px; }
}


/* ==========================================================================
   Month-grouped stream — used on the list page
   ========================================================================== */

.events-stream {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.events-month {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.events-month-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.events-month-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-border) 30%,
        var(--color-border) 70%,
        transparent
    );
}

.events-month-label {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-strong);
    letter-spacing: 0.4px;
    text-transform: capitalize;
    white-space: nowrap;
}


/* ==========================================================================
   Events row — date | thumb | body | arrow
   ========================================================================== */

.events-row-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
}

.events-row-list > li {
    border-bottom: 1px solid var(--color-border);
}

.events-row {
    display: grid;
    grid-template-columns: 90px 84px 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 22px 4px;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}

.events-row:hover {
    background: var(--color-accent-ghost);
}

.events-row--main {
    background: var(--color-accent-ghost);
}

.events-row--main:hover {
    background: var(--color-accent-soft);
}

.events-row-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid var(--color-border);
    padding-right: 22px;
    min-width: 0;
}

.events-row-day {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent-strong);
    letter-spacing: 0.5px;
}

.events-row--main .events-row-day {
    color: var(--color-brand);
}

.events-row-month {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.events-row-weekday {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--color-text-faint);
    margin-top: 4px;
    letter-spacing: 0.04em;
}

.events-row-end {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.7rem;
    color: var(--color-text-faint);
    margin-top: 4px;
    letter-spacing: 0.04em;
}

.events-row-thumb {
    width: 84px;
    height: 84px;
    overflow: hidden;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-strong);
    font-size: 1.4rem;
    padding: 1px;
}

.events-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-row-thumb--placeholder {
    background: var(--color-accent-ghost);
}

.events-row-body {
    min-width: 0;
}

.events-row-eyebrow {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-strong);
    margin: 0 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.events-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--color-brand);
    color: var(--color-on-accent);
    border-radius: var(--radius-xs);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.events-row-title {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0 0 6px;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

.events-row-desc {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
}

.events-row-fasting {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.84rem;
    color: var(--color-accent-strong);
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.events-row-fasting i { font-size: 0.78rem; }

.events-row-arrow {
    color: var(--color-accent-strong);
    font-size: 0.9rem;
    padding: 0 8px;
}

@media (max-width: 720px) {
    .events-row {
        grid-template-columns: 64px 1fr;
        gap: 16px;
        padding: 18px 4px;
    }
    .events-row-thumb,
    .events-row-arrow { display: none; }
    .events-row-date {
        padding-right: 16px;
    }
    .events-row-day { font-size: 1.7rem; }
    .events-row-title { font-size: 1.05rem; }
}


/* ==========================================================================
   Tabs (upcoming / past)
   ========================================================================== */

.events-tabs {
    display: inline-flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 48px;
}

.events-tab {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    font-family: 'PT Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s ease, border-color .2s ease;
}

.events-tab:hover {
    color: var(--color-accent-strong);
}

.events-tab--active {
    color: var(--color-text-strong);
    border-bottom-color: var(--color-accent-strong);
}


/* ==========================================================================
   Event detail page
   ========================================================================== */

.event-detail {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 56px;
    align-items: start;
}

@media (max-width: 880px) {
    .event-detail {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.event-detail-media {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.event-detail-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-detail-photo--placeholder {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-brand));
    color: rgba(255, 252, 243, 0.85);
    font-size: 4rem;
}

.event-detail-meta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-detail-meta-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-soft);
}

.event-detail-meta-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.event-detail-meta-label {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-strong);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.event-detail-meta-label i { font-size: 0.78rem; }

.event-detail-meta-value {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.02rem;
    color: var(--color-text-strong);
    line-height: 1.5;
}

.event-detail-body {
    min-width: 0;
}

.event-detail-lead {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--color-text-strong);
    font-style: italic;
    margin: 0 0 28px;
    padding-left: 20px;
    border-left: 2px solid var(--color-accent-strong);
}

.event-detail-text {
    font-family: 'PT Sans', sans-serif;
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--color-text);
}

.event-detail-text p {
    margin: 0 0 18px;
}

.event-detail-back {
    margin-top: 40px;
}


/* ==========================================================================
   CTA — closing block
   ========================================================================== */

.events-cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.events-cta .ornament { margin-bottom: 18px; }

.events-cta h3 {
    font-family: 'PT Serif', Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0 0 14px;
    letter-spacing: 0.3px;
}

.events-cta p {
    font-family: 'PT Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    margin: 0 0 26px;
}