/* gallery.css — the month gallery on /hebrew-gregorian/ (and /eng/…).
 *
 * Loads on top of style.css, which already carries the grid: .calendar-grid,
 * .day-cell, every holiday colour and every erev half-cell gradient. Nothing
 * here restyles a calendar — it only shrinks the shared cells to thumbnail
 * scale and lays twelve of them out in a horizontal scroller.
 *
 * Everything is scoped under #month-gallery so the same class names on a real
 * /month/ page are never touched. Direction is handled with logical properties
 * only (inline-start/end, scroll-padding-inline) plus one glyph flip, so the
 * strip reads right→left on the Hebrew page and left→right under /eng/ without
 * a single hard-coded left/right offset.
 */

#month-gallery {
    /* One knob for how many cards are visible; the media queries below change
       only this and the whole strip re-lays itself. */
    --mg-visible: 4;
    --mg-gap: 16px;
    margin: 34px 0 10px;
}

#month-gallery .mg-title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 600;
    color: #1f3a5f;
    text-align: start;
}

#month-gallery .mg-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------------------------------------------------------------- track */

#month-gallery .mg-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: var(--mg-gap);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline-start: 0;
    padding-block: 4px;
    /* Touch: the browser's own inertial swipe does the work; the arrows are
       there for the mouse and the keyboard. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#month-gallery .mg-track:focus-visible {
    outline: 2px solid #3b6fc4;
    outline-offset: 3px;
}

/* --------------------------------------------------------------- cards */

#month-gallery .mg-card {
    flex: 0 0 calc((100% - (var(--mg-visible) - 1) * var(--mg-gap)) / var(--mg-visible));
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}

#month-gallery .mg-card:hover,
#month-gallery .mg-card:focus-visible {
    border-color: #3b6fc4;
    box-shadow: 0 4px 14px rgba(31, 58, 95, 0.14);
    transform: translateY(-2px);
}

#month-gallery .mg-card:focus-visible {
    outline: 2px solid #3b6fc4;
    outline-offset: 2px;
}

#month-gallery .mg-card-title {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1f3a5f;
    text-align: center;
}

/* ----------------------------------------------------------- mini grid */
/*
 * The cells are the site's real .day-cell elements, so all that is needed is a
 * scale-down: the row height comes from --calendar-week-rows (set by
 * gallery.js from buildMonthGridHTML's weekRows) so a 5-week month is not
 * stretched to the height of a 6-week one.
 */
#month-gallery .mg-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(var(--calendar-week-rows, 6), minmax(28px, auto));
}

#month-gallery .mg-grid:empty {
    /* Placeholder while the year's data is in flight — the links are already
       clickable, the grid simply has not been drawn yet. */
    aspect-ratio: 7 / 6;
    background:
        repeating-linear-gradient(to right, transparent 0, transparent calc(14.2857% - 1px), #eef1f5 calc(14.2857% - 1px), #eef1f5 14.2857%),
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(16.6667% - 1px), #eef1f5 calc(16.6667% - 1px), #eef1f5 16.6667%),
        #fbfcfd;
}

/* No weekday header row in a thumbnail: "ראשון"/"Sunday" cannot be set legibly
   in a 25px column, and seven Sunday-first columns need no caption. The header
   elements stay in the DOM (style.css's `.day-cell:nth-child(7n+8)` counts on
   them being there) — they are only taken out of the layout, which is why the
   row template above starts at the first week instead of `auto`. The full
   headers come back at phone width, where one card fills the screen. */
#month-gallery .mg-grid .day-header {
    display: none;
}

#month-gallery .mg-grid .day-cell {
    min-height: 0;
    padding: 2px 3px;
    overflow: hidden;
}

#month-gallery .mg-grid .gregorian-date {
    font-size: 10px;
    line-height: 1.1;
}

#month-gallery .mg-grid .hebrew-date {
    position: static;
    align-self: flex-end;
    font-size: 8px;
    line-height: 1.1;
}

/* At thumbnail scale a holiday name is a smudge, and the month tags repeat the
   card title. The holiday's colour survives — and gallery.js copies the name
   into the cell's tooltip, so nothing is actually lost. */
#month-gallery .mg-grid .holiday-name,
#month-gallery .mg-grid .cell-month-left,
#month-gallery .mg-grid .cell-month-right {
    display: none;
}

/* -------------------------------------------------------------- arrows */

#month-gallery .mg-arrow {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: #1f3a5f;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

#month-gallery .mg-arrow:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #3b6fc4;
}

#month-gallery .mg-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* The chevron is drawn from CSS so it can be flipped with the writing
   direction: "previous" always points backwards on the page, which is towards
   the right edge in Hebrew and the left edge under /eng/. */
#month-gallery .mg-arrow::before {
    content: '\203A'; /* › */
}

#month-gallery .mg-arrow-next::before {
    content: '\2039'; /* ‹ */
}

[dir="ltr"] #month-gallery .mg-arrow::before {
    content: '\2039';
}

[dir="ltr"] #month-gallery .mg-arrow-next::before {
    content: '\203A';
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    #month-gallery { --mg-visible: 3; }
}

@media (max-width: 820px) {
    #month-gallery { --mg-visible: 2; }
}

@media (max-width: 560px) {
    #month-gallery {
        --mg-visible: 1;
        --mg-gap: 12px;
    }

    /* On a phone the swipe is the interaction; the round buttons only eat the
       width the calendar needs. */
    #month-gallery .mg-arrow {
        display: none;
    }

    #month-gallery .mg-card { padding: 10px; }
    #month-gallery .mg-card-title { font-size: 16px; }

    #month-gallery .mg-grid {
        grid-template-rows: auto repeat(var(--calendar-week-rows, 6), minmax(44px, auto));
    }

    #month-gallery .mg-grid .day-header {
        display: block;
        padding: 4px 0;
        font-size: 11px;
        line-height: 1.2;
        overflow: hidden;
    }

    #month-gallery .mg-grid .day-cell { padding: 4px 5px; }
    #month-gallery .mg-grid .gregorian-date { font-size: 14px; }
    #month-gallery .mg-grid .hebrew-date { font-size: 11px; }

    /* A single card on a phone is a full-size month, cell for cell the same
       size as the one on /month/ — so the holiday names belong back in it. */
    #month-gallery .mg-grid .holiday-name {
        display: block;
        font-size: 9px;
        line-height: 1.15;
    }
}

/* ---------------------------------------------------------------- print */
/* Navigation, not product: the printed page is the article. */
@media print {
    #month-gallery {
        display: none !important;
    }
}