/* Daily meditation block (saa/daily-meditation), rendered in PHP by saa-core.
   Full mode: the /daily-meditation/ page. Teaser mode: "קולות של החלמה" on the home page.

   MAP
   1. SETTINGS   custom properties right below: change sizes and colours here
   2. READING    the quote, the reading and the summary (centred column)
   3. DAY NAV    prev / date button / next row (icon buttons)
   4. PICKER     the month grid that opens under the date button
   5. TEASER     the home page block (title + "Read more" link, quote, expand button)
*/

/* ==========================================================================
   1. SETTINGS
   ========================================================================== */
.saa-meditation {
    /* reading column */
    --med-column: 100%; /* width of the quote/reading column: the page's full content width */
    --med-quote-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --med-quote-line: 1.45;
    --med-body-size: 1.1875rem;
    --med-body-line: 1.9;
    --med-block-gap: 2rem; /* space between quote, reading, summary */
    --med-text: var(--saa-body);
    --med-quote-color: var(--saa-ink);
    --med-muted: var(--saa-muted);
    /* day nav buttons (prev / next / date) */
    --med-btn-size: 40px; /* height; prev/next are this wide too */
    --med-btn-pad: 0 14px; /* the date button's padding */
    --med-btn-color: var(--saa-accent);
    --med-btn-tint: var(--saa-tint);
    /* month picker */
    --med-picker-width: 19rem;
    --med-cell: 36px; /* height of one day cell */
    --med-picker-bg: #fff;
}

.saa-meditation {
    margin-block-end: var(--saa-gap);
    overflow-wrap: anywhere;
}

/* ==========================================================================
   2. READING (full mode): the column is centred on the page, text starts on the start side
   ========================================================================== */
.saa-meditation__body {
    max-inline-size: var(--med-column);
    margin-inline: auto;
    padding-block: 0.5rem 1rem;
}
.saa-meditation__quote {
    margin-block: 0 var(--med-block-gap);
    padding-inline-start: 0;
    border-inline-start: 0;
    font-family: var(--saa-font-heading);
    font-weight: 500;
    font-size: var(--med-quote-size);
    line-height: var(--med-quote-line);
    color: var(--med-quote-color);
}
.saa-meditation__quote p {
    margin-block-end: 0.75rem;
    text-wrap: balance;
}
.saa-meditation__quote cite {
    display: block;
    font-family: var(--saa-font);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    color: var(--med-muted);
}
.saa-meditation__reading {
    font-size: var(--med-body-size);
    line-height: var(--med-body-line);
    color: var(--med-text);
}
.saa-meditation__reading p {
    margin-block-end: 1em;
}
.saa-meditation__summary {
    margin-block: var(--med-block-gap) 0;
    margin-inline-start: 0;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--saa-line);
    font-size: var(--med-body-size);
    line-height: var(--med-body-line);
    font-style: italic;
    color: var(--med-text);
}

/* While the next day loads: fade the reading (after a short delay, so fast loads do not flicker) */
.saa-meditation__body {
    transition: opacity 0.2s 0.15s;
}
.saa-meditation.is-loading .saa-meditation__body {
    opacity: 0.4;
}

/* ==========================================================================
   3. DAY NAV: its own row, centred like the reading
   ========================================================================== */
.saa-meditation__nav {
    position: relative; /* the picker panel anchors to the nav row on phones */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-block-end: var(--saa-gap);
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--saa-line);
    font-size: 1rem;
}
.saa-meditation__prev,
.saa-meditation__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--med-btn-size);
    block-size: var(--med-btn-size);
    border-radius: 999px;
    color: var(--med-btn-color);
    text-decoration: none;
    transition: background-color 0.15s ease-out;
}
.saa-meditation__prev:hover,
.saa-meditation__next:hover {
    background: var(--med-btn-tint);
}
.saa-meditation__chev {
    inline-size: 20px;
    block-size: 20px;
    flex: none;
}
/* chevrons are drawn for LTR; mirror them in RTL so "previous" points to the start side */
:root[dir="rtl"] .saa-meditation__chev {
    transform: scaleX(-1);
}

/* ==========================================================================
   4. PICKER: date button + month grid
   ========================================================================== */
.saa-meditation__picker {
    position: relative;
    border: 0;
    padding: 0;
    margin: 0;
}
.saa-meditation__picker > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    block-size: var(--med-btn-size);
    min-block-size: 0;
    padding: var(--med-btn-pad);
    border: 1.5px solid var(--med-btn-color);
    border-radius: 999px;
    background: transparent;
    color: var(--med-btn-color);
    font-family: var(--saa-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}
.saa-meditation__picker > summary::after {
    display: none;
}
.saa-meditation__picker > summary:hover,
.saa-meditation__picker[open] > summary {
    background: var(--med-btn-tint);
}
.saa-meditation__cal-icon {
    inline-size: 18px;
    block-size: 18px;
    flex: none;
}

.saa-meditation__calendar {
    position: absolute;
    z-index: 20;
    inset-block-start: calc(100% + 6px);
    left: 50%; /* centred under the date button */
    translate: -50% 0;
    inline-size: var(--med-picker-width);
    max-inline-size: calc(100vw - 2 * var(--saa-gutter));
    box-sizing: border-box;
    margin: 0;
    padding: 12px;
    background: var(--med-picker-bg);
    border-radius: 16px;
    box-shadow: var(--saa-shadow);
    font-size: 1rem;
    line-height: 1.2;
}
@media (prefers-reduced-motion: no-preference) {
    .saa-meditation__picker[open] > .saa-meditation__calendar {
        animation: saa-picker-in 0.18s ease-out;
    }
}
@keyframes saa-picker-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.saa-meditation__month[hidden] {
    display: none;
}
.saa-meditation__month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 8px;
}
/* the .saa-meditation prefix wins over the page's .entry-content h2 / li / li a rules */
.saa-meditation .saa-meditation__month-name {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.2;
    margin-top: 0px;
}
.saa-meditation__month-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--med-btn-color);
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}
.saa-meditation__month-btn:hover {
    background: var(--med-btn-tint);
}
.saa-meditation__month-btn .saa-meditation__chev {
    inline-size: 18px;
    block-size: 18px;
}
.saa-meditation__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.saa-meditation .saa-meditation__days li {
    margin: 0;
    padding: 0;
}
.saa-meditation .saa-meditation__days li::before {
    content: none;
}
.saa-meditation .saa-meditation__days li a[href] {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: var(--med-cell);
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition:
        background-color 0.15s ease-out,
        border-color 0.15s ease-out;
}
.saa-meditation .saa-meditation__days li a[href]:hover {
    background: var(--med-btn-tint);
}
.saa-meditation .saa-meditation__days li a[href].is-today {
    border-color: var(--med-btn-color);
}
.saa-meditation .saa-meditation__days li a[href][aria-current="date"] {
    background: var(--med-btn-color);
    border-color: var(--med-btn-color);
    color: #fff;
}

/* Phones: the panel spans the nav row instead of hanging off the button */
@media (max-width: 559px) {
    .saa-meditation__picker {
        position: static;
    }
    .saa-meditation__calendar {
        inline-size: auto;
        max-inline-size: none;
        inset-inline: 0;
        translate: none;
    }
}

/* ==========================================================================
   5. TEASER (home): title and date on the start side, quote + reading on the other
   ========================================================================== */

:root .saa-meditation--teaser {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 56px;
    max-inline-size: 1200px;
    margin-block: clamp(56px, 8vw, 88px) 0;
    margin-inline: auto;
    padding-inline: var(--saa-gutter);
}
.saa-meditation__aside > * {
    margin-block: 0;
}
.saa-meditation__title {
    font-weight: 500;
    margin-block: 0 14px;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.1;
}
/* "Read more" link under the title: same look as "All meetings" in todays-meetings.css */
.saa-meditation__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    color: var(--saa-ink);
    font-weight: 400;
    text-decoration: none;
}
.saa-meditation__all:hover {
    color: var(--saa-ink);
    text-decoration: none;
}
.saa-meditation__arrow {
    inline-size: 18px;
    block-size: 18px;
    flex: none;
}
:root[dir="rtl"] .saa-meditation__arrow {
    transform: scaleX(-1);
}
@media (prefers-reduced-motion: no-preference) {
    .saa-meditation__arrow {
        transition: transform 0.18s ease-out;
    }
    .saa-meditation__all:hover .saa-meditation__arrow {
        transform: translateX(3px);
    }
    :root[dir="rtl"] .saa-meditation__all:hover .saa-meditation__arrow {
        transform: scaleX(-1) translateX(3px);
    }
}
.saa-meditation--teaser .saa-meditation__main > * {
    margin-block: 0;
}
.saa-meditation--teaser .saa-meditation__quote {
    margin-block-end: 10px;
}
.saa-meditation--teaser .saa-meditation__quote cite {
    margin-block-start: 0;
}
.saa-meditation--teaser .saa-meditation__quote p {
    margin-block-end: 10px;
}
.saa-meditation--teaser .saa-meditation__quote cite {
    margin-block-end: 10px;
}
.saa-meditation--teaser .saa-meditation__reading {
    max-inline-size: 680px;
    margin-block-start: 10px;
    overflow: clip;
    block-size: 2lh; /* two lines while collapsed */
}
.saa-meditation--teaser .saa-meditation__reading p {
    margin-block-end: 14px;
}
.saa-meditation--teaser .saa-meditation__reading p:last-child {
    margin-block-end: 0;
}
.saa-meditation--teaser .saa-meditation__reading p:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.saa-meditation--teaser .saa-meditation__reading p:not(:first-child) {
    visibility: hidden;
}
.saa-meditation--teaser .saa-meditation__summary {
    max-inline-size: 680px;
    margin-block-start: 0;
    font-size: 1.125rem;
    line-height: 1.85;
    overflow-x: visible; /* the italic letters lean past the box: clip only vertically (for the collapse) */
    overflow-y: clip;
    block-size: 0;
    opacity: 0;
    visibility: hidden;
}
.saa-meditation--teaser.is-expanded .saa-meditation__reading {
    block-size: auto;
}
.saa-meditation--teaser.is-expanded .saa-meditation__reading p:first-child {
    display: block;
    overflow: visible;
}
.saa-meditation--teaser.is-expanded
    .saa-meditation__reading
    p:not(:first-child) {
    visibility: visible;
}
.saa-meditation--teaser.is-expanded .saa-meditation__summary {
    block-size: auto;
    margin-block-start: 18px;
    opacity: 1;
    visibility: visible;
}

/* Expand control, as on the meetings block */
.saa-meditation__expand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    margin-block-start: 10px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--saa-accent);
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
}
.saa-meditation__expand:hover {
    text-decoration: none;
}
.saa-meditation__expand-label {
    font-size: 1rem;
}
.saa-meditation__chevron {
    inline-size: 18px;
    block-size: 18px;
    flex: none;
}
.saa-meditation--teaser.is-expanded .saa-meditation__chevron {
    transform: rotate(180deg);
}
.saa-meditation--teaser .saa-meditation__expand {
    display: flex;
    inline-size: 100%;
    margin-block-start: 10px;
    padding-block-start: 6px;
    padding-inline: 4px;
    border-block-start: 1px solid var(--saa-line);
}

@media (prefers-reduced-motion: no-preference) {
    .saa-meditation--teaser .saa-meditation__reading {
        transition: block-size 0.28s ease-out;
    }
    .saa-meditation--teaser .saa-meditation__reading p:not(:first-child) {
        transition: visibility 0.28s;
    }
    .saa-meditation--teaser .saa-meditation__summary {
        transition:
            block-size 0.28s ease-out,
            margin-block-start 0.28s ease-out,
            opacity 0.24s ease-out,
            visibility 0.28s;
    }
    .saa-meditation__chevron {
        transition: transform 0.2s ease-out;
    }
}

@media (max-width: 781px) {
    .saa-meditation--teaser .saa-meditation__all {
        display: none;
    }
    :root .saa-meditation--teaser {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}