/* assets/css/pages/events.css — v10.5.3 (F4)
   Shared by events.php (listing) and event.php (detail). Ported from the two
   pages' $customStyles blocks; hard-coded hexes replaced with theme tokens
   where they mapped cleanly, and the maroon #7a1f1f folded onto --pcd-secondary.
   Class names (.ev-*) are kept from the original markup on purpose — they do not
   collide with Bootstrap, and preserving them keeps the migration diff small. */

.ev-hero {
    text-align: center;
    padding: 2.125rem 1rem 0.625rem;
}

.ev-hero h1 {
    color: var(--pcd-secondary);
    margin: 0 0 0.375rem;
    font-size: 1.875rem;
}

.ev-hero p {
    color: var(--pcd-text-muted);
    margin: 0;
}

.ev-list {
    max-width: 67.5rem;
    margin: 1.375rem auto 3.75rem;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.25rem;
}

.ev-card {
    background: var(--pcd-surface);
    border-radius: 1rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ev-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.ev-banner {
    height: 10.625rem;
    background: linear-gradient(135deg, #fde68a, #fca5a5);
    background-size: cover;
    background-position: center;
    position: relative;
}

.ev-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pcd-secondary);
    padding: 0.25rem 0.7rem;
    border-radius: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.ev-body {
    padding: 1.125rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ev-type {
    font-size: 0.75rem;
    color: #b45309;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.ev-title {
    font-size: 1.1875rem;
    color: var(--pcd-text);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.ev-meta {
    font-size: 0.8125rem;
    color: var(--pcd-text-muted);
    margin: 0.125rem 0;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}

.ev-foot {
    margin-top: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.ev-price {
    font-weight: 700;
    color: #166534;
}

.ev-price.free {
    color: #2563eb;
}

.ev-cta {
    background: var(--pcd-secondary);
    color: #fff;
    padding: 0.5625rem 1rem;
    border-radius: var(--pcd-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

.ev-cta:hover,
.ev-cta:focus {
    background: var(--pcd-secondary-dark);
    color: #fff;
}

.ev-empty {
    max-width: 40rem;
    margin: 2.5rem auto 5rem;
    text-align: center;
    color: var(--pcd-text-muted);
    background: var(--pcd-surface);
    padding: 2.5rem 1.25rem;
    border-radius: 1rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

/* ---------- event.php detail view (.evd-*) ----------
 *
 * ⚠ WIDTH IS 75rem TO MATCH THE REST OF THE SITE, NOT AN ARBITRARY "WIDER".
 * This was 57.5rem (920px) while `.pcd-shell` — the wrapper every other page sits in — is 1200px.
 * So the event page, the one page the ashram actually promotes and links to, was the narrowest
 * thing on the site: a poster, a description and a registration card squeezed into three quarters
 * of the available room while the header above it ran full width. Reported as "needs to be more
 * appealing", and the mismatch is most of why.
 *
 * These two are kept in step deliberately — the breadcrumb sits ABOVE the wrap and must share its
 * left edge, or "← All Events" hangs inset from the content it belongs to. */
.evd-wrap {
    max-width: 75rem;
    margin: 0 auto 3.75rem;
    padding: 0 1rem;
}

.evd-banner {
    height: 16.25rem;
    border-radius: 0 0 1.25rem 1.25rem;
    background: linear-gradient(135deg, #fde68a, #fca5a5);
    background-size: contain;
    background-position: center;
    margin-bottom: 1.375rem;
	background-repeat: no-repeat;
}

.evd-crumb {
    padding: 1rem 1rem 0;
    max-width: 75rem;   /* keep in step with .evd-wrap */
    margin: 0 auto;
}

.evd-crumb a {
    color: var(--pcd-secondary);
    text-decoration: none;
    font-weight: 600;
}

.evd-head h1 {
    color: var(--pcd-text);
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
}

.evd-type {
    font-size: 0.8125rem;
    color: #b45309;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.evd-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.875rem 0;
    color: var(--pcd-text-muted);
    font-size: 0.875rem;
}

.evd-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.evd-layout {
    display: grid;
    grid-template-columns: 1fr 20rem;
    gap: 1.5rem;
    align-items: start;
    margin-top: 0.625rem;
}

/* Stacks at 60rem rather than 820px: with a 20rem sidebar the content column was being squeezed
   to about 30rem before it gave way, which is narrower than the phone layout it stacks into. */
@media (max-width: 60rem) {
    .evd-layout {
        grid-template-columns: 1fr;
    }
}

.evd-card {
    background: var(--pcd-surface);
    border-radius: 1rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    padding: 1.375rem;
    margin-bottom: 1.25rem;
}

/* ⚠ THE TEXT DOES NOT GET THE FULL WIDTH, AND THAT IS THE POINT.
   Widening the page to 75rem leaves the content column around 53rem; set loose, a paragraph then
   runs to roughly 150 characters and becomes harder to read than it was at 920px. The card keeps
   the width, the prose inside it is capped at a comfortable measure. */
.evd-desc {
    color: var(--pcd-text);
    line-height: 1.7;
}

.evd-desc > * {
    max-width: 68ch;
}

/* Tables, images and embeds an admin pastes DO get the room — they are the things that were
   actually cramped. */
.evd-desc > :is(table, img, figure, pre, blockquote) {
    max-width: 100%;
}

.evd-block {
    border-left: 4px solid var(--pcd-border);
    padding: 0.75rem 0.875rem;
    border-radius: var(--pcd-radius);
    margin-bottom: 0.875rem;
}

.evd-block h3 {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
}

.evd-block .c {
    color: var(--pcd-text);
    line-height: 1.6;
    font-size: 0.875rem;
}

.evd-side {
    position: sticky;
    top: 1.25rem;
}

.evd-price {
    font-size: 1.625rem;
    font-weight: 800;
    color: #166534;
}

.evd-price.free {
    color: #2563eb;
}

/* -----------------------------------------------------------------------------------------------
   v11.4.6 — the member price, beside the public one.

   Deliberately NOT styled as a second .evd-price: two large amounts in the same visual weight is a
   page that makes a visitor work out which one applies to them. The applied state is a quiet
   confirmation; the invitation state is the one that has something to say.
   ----------------------------------------------------------------------------------------------- */
.evd-mprice {
    margin-top: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.625rem;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
}

.evd-mprice__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.evd-mprice__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #7C2D12;
}

.evd-mprice__amt {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #7C2D12;
    white-space: nowrap;
}

.evd-mprice__note {
    margin: 0.4375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #92400E;
}

.evd-mprice__note a {
    color: #7C2D12;
    font-weight: 700;
    text-decoration: underline;
}

/* Applied: the devotee is already getting it, so this only confirms and shows the saving. */
.evd-mprice--applied {
    background: #ECFDF5;
    border-color: #A7F3D0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    justify-content: space-between;
}

.evd-mprice__tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #065F46;
}

.evd-mprice__was {
    font-size: 0.75rem;
    color: #047857;
    text-decoration: line-through;
}

/* v11.15.0 — the child band. Its own colour because it can appear DIRECTLY BELOW the Sahyogi block
   and the two say different things about different people; two identical amber panels stacked read
   as one repeated mistake. Literal hex, matching the rest of this file — an undefined custom
   property here would fail silently and leave the panel unpainted. */
.evd-mprice--child {
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.evd-mprice--child .evd-mprice__label,
.evd-mprice--child .evd-mprice__amt {
    color: #1E40AF;
}

.evd-mprice--child .evd-mprice__note {
    color: #1D4ED8;
}

.evd-cta {
    display: block;
    text-align: center;
    background: var(--pcd-secondary);
    color: #fff;
    padding: 0.8125rem;
    border-radius: 0.625rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.875rem;
}

.evd-cta:hover,
.evd-cta:focus {
    background: var(--pcd-secondary-dark);
    color: #fff;
}

/* Retained deliberately with no caller in this release. v11.4.6 stopped event.php rendering a
   greyed register button for states that are not `open` — see .evd-state below — but a disabled
   call to action is an ordinary need on a public page, and the rule is measured and consistent
   with .evd-cta above. Deleting it would cost the next author the same measuring. */
.evd-cta.disabled {
    background: #e5e7eb;
    color: var(--pcd-text-muted);
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------------------------
   v11.4.6 — the registration state panel.

   Replaces the dead disabled button. It is deliberately NOT button-shaped: no full-width fill, no
   centred single line, a heading and a sentence instead. A devotee should be able to tell at a
   glance that this is the page telling them something, not a control they have failed to operate.
   ----------------------------------------------------------------------------------------------- */
.evd-state {
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid var(--pcd-border);
    border-left-width: 4px;
    background: var(--pcd-bg);
}

.evd-state__head {
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--pcd-text);
}

.evd-state__body {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--pcd-text-muted);
}

/* The registration window. v11.14.0 put it INSIDE the state card and only on an unopened event;
   v11.19.5 moved it out so every event shows one, which left it a bare bordered strip floating in
   the sidebar — a rule that made sense as a divider inside a card and made none standing alone.
   It is its own card now.

   ⚠ AND THE LABEL SITS ABOVE THE VALUE, NOT BESIDE IT. The side-by-side row squeezed a date into
   whatever was left of a narrow sidebar, so "Fri, 21 Aug 2026 · 12:00 AM" broke across two lines
   with the AM on its own — the value read as two facts. Stacked, the date gets the full width and
   stays one line at every sidebar size, which is why this is not a max-width:380px special case
   any more. */
.evd-regwin {
    margin: 0.875rem 0 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--pcd-border);
    border-radius: 0.625rem;
    background: var(--pcd-bg);
    display: grid;
    gap: 0.625rem;
}

.evd-regwin__row {
    display: grid;
    gap: 0.125rem;
}

.evd-regwin dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pcd-text-muted);
}

.evd-regwin dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pcd-text);
}

/* The venue, when it opens a map. Underlined on purpose: a link that only looks like a link on
   hover is not a link on a phone, and this is the one thing on the page somebody taps while
   standing outside trying to find the gate. */
.evd-venue__link {
    color: var(--pcd-maroon, #7c2d12);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.evd-venue__link:hover,
.evd-venue__link:focus-visible {
    text-decoration-thickness: 2px;
}

.evd-venue__go {
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.625rem;
    background: rgba(180, 83, 9, 0.12);
    color: var(--pcd-maroon, #7c2d12);
    font-size: 0.6875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* Four tones, matching the meaning rather than the status name: waiting for a date, full,
   paused, and finished-or-refused. */
.evd-state--wait {
    border-left-color: #2563EB;
    background: #EFF6FF;
}

.evd-state--wait .evd-state__head {
    color: #1E3A8A;
}

.evd-state--full {
    border-left-color: #0E7490;
    background: #ECFEFF;
}

.evd-state--full .evd-state__head {
    color: #155E75;
}

.evd-state--hold {
    border-left-color: #A16207;
    background: #FFFBEB;
}

.evd-state--hold .evd-state__head {
    color: #78350F;
}

.evd-state--shut {
    border-left-color: #9CA3AF;
}

.evd-state--shut .evd-state__head {
    color: #374151;
}

.evd-note {
    text-align: center;
    color: var(--pcd-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.75rem;
}

.evd-slot {
    display: flex;
    justify-content: space-between;
    padding: 0.5625rem 0;
    border-bottom: 1px solid var(--pcd-border);
    font-size: 0.875rem;
}

/* A `cta` guidance block is the one the ashram wants READ — a date change, a thing to bring, a
   deadline. It sat in the same still cream box as every other block and was skipped.

   ⚠ THE BORDER AND SHADOW PULSE, NOT THE TEXT. Blinking text is unreadable while it moves and is
   a documented seizure trigger; a slow glow on the frame draws the eye and leaves every word
   legible for the whole cycle. 2.2s — far slower than the 3-flashes-per-second threshold.

   ⚠ AND IT STOPS ENTIRELY under prefers-reduced-motion, where the block keeps a solid stronger
   border so it is still the most prominent thing on the page without moving at all. */
.evd-cta-block {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    color: #7C2D12;
    animation: evd-cta-pulse 2.2s ease-in-out infinite;
}

@keyframes evd-cta-pulse {
    0%, 100% { border-color: #FED7AA; box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
    50%      { border-color: #EA580C; box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .evd-cta-block {
        animation: none;
        border-color: #EA580C;
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
    }
}

/* ==========================================================================
   v10.6.0 inline-style sweep.

   Three of these values are DATA-DRIVEN (the banner URL, and the per-block
   accent/tint from $blockMeta), so they cannot live in a static stylesheet.
   They are passed as custom properties on the element instead — the same
   mechanism dashboard.php uses for --db-progress — which keeps the style
   attribute to a value handoff rather than a declaration block.
   ========================================================================== */

/* ═══ THE POSTER, WITHOUT EITHER CROPPING IT OR STRANDING IT ══════════════════════════════════════
 *
 * `background-size: contain` is right and must stay: an event poster is usually portrait and
 * carries text — dates, a deity's name, a phone number — and `cover` would crop exactly that off.
 * But at the new 75rem width a contained portrait sits as a narrow strip in the middle of a plain
 * peach gradient, which is most of what made this page look unfinished.
 *
 * So the SAME image is painted twice: blurred and scaled to fill behind, sharp and whole in front.
 * The result reads as a designed hero at any width, and nothing is cropped away.
 *
 * ⚠ THE FALLBACK IN var() IS LOAD-BEARING. An undefined custom property here does not fall back to
 * the gradient — the whole declaration is thrown out with nothing in the console — so an event with
 * no banner would lose its background entirely. `none` keeps the gradient underneath visible. */
/* -----------------------------------------------------------------------------------------------
   The banner: a CONTAINED poster over a blurred fill.

   ⚠ THE FIRST VERSION OF THIS WASHED THE POSTER OUT, AND THE CSS SAID IT WOULD NOT.
   The blurred layer was a ::before at `z-index: -1`, which reads as "behind everything" and is not:
   CSS paints an element's OWN background first, then its negative-z descendants, then its content.
   A negative z-index child is therefore always ABOVE its parent's background — never below it — so
   the blur landed on top of the poster and greyed it by 55%. `isolation: isolate` made it certain
   by trapping the pseudo-element in this element's own stacking context.

   There is no z-index that fixes that, because the rule is painting order rather than stacking
   order. The poster has to stop being the element's background. So: the element keeps the gradient,
   ::before carries the blurred fill, and ::after carries the poster ON TOP of it, crisp.
   ----------------------------------------------------------------------------------------------- */
.evd-banner--image {
    position: relative;
    overflow: hidden;
}

.evd-banner--image::before,
.evd-banner--image::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--evd-banner, none);
}

/* The fill. Bleeds past every edge so the blur has no soft border of its own. */
.evd-banner--image::before {
    inset: -2rem;
    background-size: cover;
    filter: blur(1.75rem) saturate(1.15);
    opacity: 0.55;
}

/* The poster. Whole, unblurred, nothing over it. */
.evd-banner--image::after {
    inset: 0;
    background-size: contain;
}

/* Respect a reader who has asked for less movement and less visual noise. */
@media (prefers-reduced-motion: reduce) {
    .evd-banner--image::before {
        filter: blur(1.75rem);
        opacity: 0.4;
    }
}

/* Taller on a wide screen, where 16.25rem against 75rem of width reads as a letterbox strip. */
@media (min-width: 60rem) {
    .evd-banner {
        height: 22rem;
    }
}

.evd-card--cancelled {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.evd-cancel-reason {
    margin-top: 4px;
}

/* --evd-accent / --evd-bg are set inline per block. The fallbacks match the
   $blockMeta default so an unknown block_type still renders sanely. */
.evd-block--themed {
    border-left-color: var(--evd-accent, #334155);
    background: var(--evd-bg, #e2e8f0);
}

.evd-block--themed h3 {
    color: var(--evd-accent, #334155);
}

.evd-per-person {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.evd-note--reg-close {
    margin-top: 6px;
    text-align: left;
}

.evd-sessions {
    margin-top: 18px;
}

.evd-sessions__title {
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

.evd-session-date {
    color: #6b7280;
}

/* Listing-page pieces from the v10.6.0 sweep. --ev-banner is data-driven. */
.ev-empty-h {
    color: var(--pcd-secondary);
    margin-top: 0;
}

.ev-back {
    color: var(--pcd-secondary);
    font-weight: 600;
}

.ev-badge--open {
    background: #dcfce7;
    color: #166534;
}

.ev-meta--muted {
    color: var(--pcd-text-muted);
}

.ev-banner--image {
    background-image: var(--ev-banner, none);
}

/* v11.4 — asking for a Poojan that is not on the calendar.
   Only defined tokens are used (--pcd-secondary, --pcd-text-muted, --pcd-gold, --pcd-radius-lg);
   an undefined custom property is dropped silently on this platform, with no console error. */
.ev-ask {
    margin: 36px auto 0;
    max-width: 720px;
    padding: 26px;
    text-align: center;
    background: #fffaf0;
    border: 1px dashed var(--pcd-gold);
    border-radius: var(--pcd-radius-lg);
}
.ev-ask h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--pcd-secondary);
}
.ev-ask p {
    margin: 0 0 16px;
    color: var(--pcd-text-muted);
    font-size: 15px;
    line-height: 1.7;
}

.ev-empty-ask {
    margin: 16px 0;
    color: var(--pcd-text-muted);
    font-size: 15px;
    line-height: 1.7;
}
.ev-empty .ev-cta { display: inline-block; margin-bottom: 14px; }
.ev-ask .ev-cta,
.ev-empty .ev-cta { padding: 11px 22px; font-size: 15px; }

/* ==========================================================================
   v11.20.24 — THE LISTING SUMMARY IS THREE LINES, AND THEN A CHOICE

   A long summary pushed the date, the venue and the button off the fold, so
   the cards stopped being scannable and every event looked different in
   height. Clamped to three lines, justified, with a read-more that opens it
   in place.

   ⚠ THE CLAMP IS CSS, SO NOTHING IS TRUNCATED IN THE MARKUP. The whole
   summary is in the DOM and reachable by a screen reader and by search; only
   its DISPLAY is bounded. Cutting the string server-side would have hidden it
   from both, and mid-word in Devanagari at that.

   ⚠ AND hyphens:auto RIDES WITH text-align:justify. Justified text without
   hyphenation opens rivers of white space at narrow widths, which is exactly
   where a three-line clamp puts it.
   ========================================================================== */
.ev-summary {
    /* ⚠ NOT A FLEX ROW. `.ev-meta` is `display: flex` (icon beside text), and this block inherits
       it — so the toggle, the clamped text and the "Read more" label were three flex ITEMS side by
       side. The label got the sliver of width the text left over and, with `overflow-wrap:
       anywhere` on the container, "Read more" broke into one letter per line down the card's edge.
       The summary is a block: text first, the choice under it. */
    display: block;
    text-align: justify;
    hyphens: auto;
    overflow-wrap: anywhere;
}
.ev-summary__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The checkbox is the state. No JavaScript, so it works on a card rendered
   before any script has run — and a devotee on a slow connection is exactly
   who is reading a summary rather than the full page. */
.ev-summary__toggle { position: absolute; opacity: 0; pointer-events: none; }
.ev-summary__toggle:checked ~ .ev-summary__text {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.ev-summary__more {
    display: inline-block;
    white-space: nowrap;
    margin-top: 0.25rem;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--pcd-maroon, #8b1538);
    cursor: pointer;
}
.ev-summary__more::after { content: 'Read more'; }
.ev-summary__toggle:checked ~ .ev-summary__more::after { content: 'Show less'; }
/* Keyboard reachable: the label is not focusable, the input is, so the focus
   ring has to be drawn on the label from the input's state. */
.ev-summary__toggle:focus-visible ~ .ev-summary__more {
    outline: 2px solid var(--pcd-maroon, #8b1538);
    outline-offset: 2px;
    border-radius: 3px;
}