/* === month_calendar mini-sidebar ============================================ */
.month-calendar {
    width: 365px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 28px 36px;
    background: #fff;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    font-family: 'Golos Text', sans-serif;
    color: #333;
}

.month-calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.month-calendar__title {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-family: 'Cormorant', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    color: #000;
}

.month-calendar__month,
.month-calendar__year {
    display: inline-block;
}

.month-calendar__arrows {
    display: flex;
    gap: 16px;
    align-items: center;
}

.month-calendar__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    color: #1a1a1a;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.month-calendar__arrow--prev {
    transform: rotate(180deg);
}

.month-calendar__arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.month-calendar__arrow:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.30);
}

.month-calendar__arrow:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.month-calendar__dow,
.month-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 0;
    row-gap: 8px;
}

.month-calendar__dow {
    margin-bottom: 4px;
}

.month-calendar__dow-cell {
    font-family: 'Golos Text', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #828282;
    text-align: center;
    padding: 10px 0;
}

.month-calendar__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: 'Golos Text', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #333;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.month-calendar__cell:hover {
    background: #fdf3ec;
}

.month-calendar__cell:focus-visible {
    outline: 2px solid #af4409;
    outline-offset: 2px;
}

.month-calendar__cell.is-empty {
    visibility: hidden;
}

.month-calendar__cell.is-today {
    background: #a33d25;
    color: #fff;
}

a.month-calendar__cell.is-today:hover {
    background: #a33d25;
}

/* Mobile: make the month grid fit without horizontal overflow at 360/390/767px.
   Replaces the old max-width:480px rule (task 171). */
@media (max-width: 767.99px) {
    .month-calendar {
        width: 100%;
        /* 12px × 2 = 24px horizontal padding → 7 tracks get ≥ 40px each at 360px */
        padding: 20px 12px;
    }

    .month-calendar__title {
        font-size: 28px;
    }

    .month-calendar__picker-menu {
        min-width: 160px;
    }

    .month-calendar__picker-item {
        font-size: 14px;
    }

    .month-calendar__dow-cell {
        font-size: 14px;
        padding: 6px 0;
    }

    /* Cells fill their 1fr track (= no overflow) but never grow beyond 40px.
       Centred with margin:0 auto so they stay square-ish whatever the track width. */
    .month-calendar__cell {
        width: 100%;
        max-width: 40px;
        height: 40px;
        margin: 0 auto;
    }
}

/* === worship_calendar page layout (task #40) ================================ */

.worship-calendar {
    width: 100%;
    box-sizing: border-box;
}

.worship-calendar__layout {
    display: grid;
    /* Sidebar stays fixed; the days column takes the remaining width and
       shrinks below ~1512px (= 437 + 60 gap + 935 + 80 gutters) instead of
       overflowing/clipping on the right. minmax(0, …) lets it go below its
       content min-width; the 935px cap keeps the design width at max size. */
    grid-template-columns: 437px minmax(0, 935px);
    gap: 60px;
    align-items: start;
}

.worship-calendar__sidebar {
    position: sticky;
    top: 120px;
    align-self: start;
}

.worship-calendar__days {
    display: flex;
    flex-direction: column;
}

.worship-calendar__empty {
    font-family: 'Golos Text', sans-serif;
    font-size: 16px;
    color: #999;
    font-style: italic;
    margin: 40px 0;
}

/* === day-card (task #186 restyled to match Figma) ========================== */

.day-card {
    padding: 32px 36px;
    box-sizing: border-box;
    border-left: 3px solid transparent;
    scroll-margin-top: var(--ip-schedule-scroll-offset, 112px);
}

.day-card:not(:last-child) {
    border-bottom: 1px solid #e5e5e5;
}

.day-card--today {
    border-left: 3px solid #af4409;
}

/* Sunday / feast highlight — applied via Blade when $d->dayOfWeek === Carbon::SUNDAY */
.day-card--sunday .day-card__date-num,
.day-card--sunday .day-card__date-month,
.day-card--sunday .day-card__date-dow {
    color: #af4409;
}

.day-card--sunday .day-card__celebration {
    color: #af4409;
}

.day-card__head {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Fixed-width date column — wide enough to contain the 60px numeral */
.day-card__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 100px;
    width: 100px;
    flex-shrink: 0;
    gap: 4px;
}

.day-card__date-num {
    font-family: var(--ip-font-title, 'Cormorant Garamond', Georgia, serif);
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.018em;
    color: #333;
}

.day-card__date-month {
    font-family: var(--ip-font-body, 'Golos Text', system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: #828282;
    text-transform: none;
}

.day-card__date-dow {
    font-family: var(--ip-font-body, 'Golos Text', system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: #828282;
    text-transform: lowercase;
    letter-spacing: normal;
}

.day-card__celebration {
    font-family: var(--ip-font-title, 'Cormorant Garamond', Georgia, serif);
    font-weight: 700;
    font-style: normal;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #333;
    margin: 0;
    flex: 1;
    /* Optically align cap-height with top of the large date number */
    padding-top: 8px;
}

/* Services list — no indent: the time column sits directly under the date block */
.day-card__services {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Four-column grid: time | name | needs (annotation) | content.
   The time column matches the date block width (100px) and the 24px gap matches
   the header gap, so the name column starts exactly under the celebration title.
   The remaining three columns share equal width. */
.day-card__service {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding: 10px 0;
    /* Remove internal hairlines — separation is row spacing only */
    border-bottom: none;
}

.day-card__time {
    font-family: var(--ip-font-body, 'Golos Text', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #333;
}

.day-card__name {
    font-family: var(--ip-font-body, 'Golos Text', system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: #333;
}

.day-card__needs,
.day-card__content {
    font-family: var(--ip-font-body, 'Golos Text', system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: #333;
}

/* HTML rendered inside annotation/content cells: keep paragraph spacing tight
   so multi-<p> values read as a compact block within the grid cell.
   content is prefixed with a leading <style> tag (ContentHtmlField), so also
   zero the top margin of the first real element following it. */
.day-card__needs > :first-child,
.day-card__content > :first-child,
.day-card__content > style:first-child + * {
    margin-top: 0;
}

.day-card__needs > :last-child,
.day-card__content > :last-child {
    margin-bottom: 0;
}

/* Responsive: collapse to single column at < 1024px */
@media (max-width: 1023px) {
    .worship-calendar__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .worship-calendar__sidebar {
        position: static;
    }

    .day-card__services {
        padding-left: 0;
    }

    .day-card__service {
        grid-template-columns: 70px 1fr;
        row-gap: 4px;
        gap: 12px;
    }

    .day-card__needs,
    .day-card__content {
        grid-column: 2;
    }
}

/* Mobile: day-card reduced padding + stacked head (task 172).
   The .content wrapper provides --ip-side-padding (16px) horizontal gutter,
   so day-card uses 0 horizontal padding to avoid doubling the gutter. */
@media (max-width: 767.99px) {
    .day-card {
        padding: 16px 0;
    }

    /* Drop the red left accent on today's card and give it a full-bleed soft
       peach fill: cancel the .content gutter with negative side margins, then
       pad the content back so it stays aligned with the other day cards. */
    .day-card--today {
        border-left-color: transparent;
        background: #FFE9DF;
        margin-inline: calc(-1 * var(--ip-side-padding, 16px));
        padding-inline: var(--ip-side-padding, 16px);
    }

    /* Stack date block above celebration title on narrow screens. */
    .day-card__head {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    /* Date number/month/dow sit on one compact horizontal line */
    .day-card__date {
        flex-direction: row;
        gap: 8px;
        align-items: baseline;
        min-width: 0;
        width: auto;
    }

    /* Scale down the large date number to avoid overflow */
    .day-card__date-num {
        font-size: 44px;
    }

    /* Scale down celebration title on mobile */
    .day-card__celebration {
        font-size: 26px;
        padding-top: 0;
    }

    /* Prevent long unbroken Cyrillic strings from overflowing service grid cells. */
    .day-card__name,
    .day-card__needs,
    .day-card__content {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}