/* ==========================================================================
   Lectures — leaves of a pothi, one for each day, strung on a thread of roses
   ========================================================================== */

/* ---------- Hero ---------- */
.lectures-hero .page-title {
    max-width: 17ch;
    font-size: clamp(2.3rem, 5.4vw, 4.4rem);
    line-height: 1.02;
    text-wrap: balance;
}

.lectures-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.75rem;
    margin-top: 2.1rem;
}
.lectures-facts dt {
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--marigold);
}
.lectures-facts dd {
    margin-top: .2rem;
    font-size: 1.05rem;
    color: rgba(246, 238, 221, .88);
}

.lectures-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2.25rem;
}

/* Year chooser — only rendered when there is more than one year */
.year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2.4rem;
}
.year-tabs[hidden] { display: none; }
.year-tab {
    display: inline-flex;
    align-items: baseline;
    gap: .6rem;
    padding: .7rem 1.25rem .55rem;
    border: 1px solid rgba(242, 209, 140, .35);
    border-radius: 999px;
    color: rgba(246, 238, 221, .8);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.year-tab b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
}
.year-tab small {
    font-style: italic;
    font-size: .95rem;
    opacity: .75;
}
.year-tab:hover { border-color: var(--marigold); color: var(--paper); }
.year-tab[aria-pressed='true'] {
    background: var(--marigold);
    border-color: var(--marigold);
    color: var(--night);
}

/* ---------- Series chooser ---------- */
.series-section { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.series-section[hidden] { display: none; }
.series-label {
    font-family: var(--font-ui);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.series-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}
.series-tab {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 220px;
    max-width: 380px;
    padding: 1rem 1.25rem;
    text-align: left;
    background: var(--paper-hi);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-paper);
    transition: border-color .25s ease, box-shadow .25s ease, transform .3s var(--ease-out);
}
.series-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.series-tab[aria-pressed='true'] {
    border-color: var(--kumkum);
    box-shadow: inset 0 0 0 1px var(--kumkum), var(--shadow-paper);
}
.series-tab-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}
.series-tab-meta {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink-3);
}

/* ---------- The days ---------- */
.days-section { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6.5rem); }

.days {
    --mark-w: 10.5rem;
    --rail-w: 3.5rem;
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    list-style: none;
}
/* The thread the leaves hang from */
.days::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: calc(var(--mark-w) + var(--rail-w) / 2 - .5px);
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--gold) 4%, var(--gold) 96%, transparent);
    opacity: .6;
}
.days:has(> .days-loading, > .days-empty)::before { display: none; }

.day {
    position: relative;
    display: grid;
    grid-template-columns: var(--mark-w) var(--rail-w) minmax(0, 1fr);
    align-items: start;
}
.day + .day { margin-top: clamp(2.75rem, 5vw, 4rem); }

/* Date held in the margin while you read */
.day-mark {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    padding-top: .35rem;
    text-align: right;
}
.day-count {
    display: block;
    font-family: var(--font-ui);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--kumkum);
}
.day-count b { font-weight: 700; }
.day-date { display: block; margin-top: .55rem; }
.day-dom {
    display: block;
    font-family: var(--font-display);
    font-size: 4.4rem;
    font-weight: 600;
    line-height: .85;
    letter-spacing: -.03em;
    color: var(--ink);
}
.day-month {
    display: block;
    margin-top: .55rem;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.day-week {
    display: block;
    margin-top: .1rem;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-3);
}

/* A small rose strung on the thread */
.day-flower {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: 20px;
    height: 20px;
    margin-top: 1.55rem;
    background: radial-gradient(circle, #7a1736 0 12%, #f08aa8 14% 40%, #e0557f 42% 72%, #b8325a 100%);
    -webkit-mask: var(--rose) center / contain no-repeat;
    mask: var(--rose) center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(42, 25, 16, .35));
    animation: flowerSway 5s ease-in-out infinite;
}
.day:nth-child(2n) .day-flower { animation-delay: -1.6s; }
.day:nth-child(3n) .day-flower { animation-delay: -3.2s; }

/* The leaf */
.day-card {
    position: relative;
    padding: clamp(1.6rem, 3.6vw, 2.75rem) clamp(1.35rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.25rem);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 40%),
        var(--paper-hi);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-paper);
    transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.day-card:hover { box-shadow: var(--shadow-lift); }
/* Binding hole of a pothi leaf */
.day-card::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--paper-3);
    box-shadow: inset 0 1px 2px rgba(42, 25, 16, .35), 0 1px 0 rgba(255, 255, 255, .8);
}

.day-type {
    font-family: var(--font-ui);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.day-title {
    margin-top: .65rem;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.1vw, 2.45rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: balance;
}
.day-sub {
    margin-top: .45rem;
    font-size: clamp(1.1rem, 1.6vw, 1.25rem);
    font-style: italic;
    color: var(--kumkum-2);
}
.day-summary {
    max-width: 64ch;
    margin-top: 1.35rem;
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--ink-2);
}
.day-summary::first-letter {
    float: left;
    margin: .06em .12em 0 0;
    font-family: var(--font-display);
    font-size: 3.6em;
    font-weight: 600;
    line-height: .82;
    color: var(--kumkum);
}

/* Topics */
.topics-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    margin-top: 1.6rem;
    padding: .5rem 1.05rem .4rem;
    border: 1px solid var(--paper-edge);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2);
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.topics-toggle svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.topics-toggle:hover { border-color: var(--marigold); background: rgba(242, 163, 58, .08); color: var(--ink); }
.topics-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.topics {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .5s var(--ease-out), visibility 0s linear .5s;
}
.topics.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .5s var(--ease-out), visibility 0s linear 0s;
}
.topics-inner { min-height: 0; overflow: hidden; }

.topic-list {
    counter-reset: topic;
    list-style: none;
    margin-top: 1.25rem;
    columns: 2 22rem;
    column-gap: 2.5rem;
}
.topic-list li {
    counter-increment: topic;
    position: relative;
    break-inside: avoid;
    padding: .6rem 0 .6rem 2.3rem;
    border-top: 1px dashed var(--paper-edge);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.topic-list li::before {
    content: counter(topic, devanagari);
    position: absolute;
    left: 0;
    top: .62rem;
    font-family: var(--font-deva);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--saffron);
}

.day-place {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--paper-3);
    font-family: var(--font-ui);
    font-size: .88rem;
    color: var(--ink-3);
}
.day-place svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--saffron); }

/* Loading & empty */
.days-loading,
.days-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    text-align: center;
    font-family: var(--font-ui);
    color: var(--ink-3);
}
.days-empty p {
    max-width: 30rem;
    font-family: var(--font-read);
    font-size: 1.1rem;
    font-style: italic;
}

@keyframes flowerSway {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.06); }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .days {
        --rail-w: 1.75rem;
    }
    .days::before { left: calc(var(--rail-w) / 2 - .5px); top: 1rem; }
    .day {
        grid-template-columns: var(--rail-w) minmax(0, 1fr);
        column-gap: .9rem;
    }
    .day-mark {
        grid-column: 2;
        grid-row: 1;
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .2rem .85rem;
        margin-bottom: 1rem;
        padding-top: 0;
        text-align: left;
    }
    .day-date {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .2rem .55rem;
        margin-top: 0;
    }
    .day-dom { font-size: 2.1rem; }
    .day-month, .day-week { margin-top: 0; }
    .day-flower { grid-column: 1; grid-row: 1; margin-top: .4rem; }
    .day-card { grid-column: 2; grid-row: 2; }
    .topic-list { columns: 1; }
}

@media (max-width: 560px) {
    .lectures-facts { gap: 1rem 1.75rem; }
    .lectures-actions .btn { width: 100%; justify-content: center; }
    .year-tab { padding: .6rem 1rem .45rem; }
    .series-tab { min-width: 0; max-width: none; width: 100%; }
    .day-summary { font-size: 1.03rem; }
    .day-summary::first-letter { font-size: 3.2em; }
}