/* hebrew-year/hebrew-year.css — the /hebrew-year/ and /hebrew-year/:hyyy/
 * one-sheet yearly grid. Structurally identical to year/year.css (same tile
 * grid, same three print layouts) — kept as a separate file, not a shared
 * import, because there is no build step to share one; keep the two files in
 * sync if the tile layout changes.
 *
 * The Hebrew-day-primary / Gregorian-day-secondary inversion needs NO extra
 * CSS here: AxCal.buildHebrewMonthGridHTML() (calendar-core.js) puts the
 * Hebrew day number in the `.gregorian-date` class and the Gregorian day
 * number in `.hebrew-date` — the same swap /hebrew-month/ has always used —
 * so style.css's existing "`.gregorian-date` bold+bigger, `.hebrew-date`
 * small+grey" rule already renders Hebrew-primary automatically. The two
 * class-name font sizes below are copied verbatim from year.css for exactly
 * that reason.
 *
 * Twelve vs. thirteen tiles (a Hebrew leap year adds Adar II): screen layout
 * reflows with one extra tile the same way any responsive grid does. Print
 * DOES branch on the count — see the [data-tile-count="13"] rules below —
 * because left alone, 13 tiles produce a lone orphaned tile in portrait's and
 * landscape's last row, and a whole extra (3rd) sheet in the sixup layout;
 * both are fixed explicitly rather than left as acceptable degradation.
 * year.js/hebrew-year.js set data-tile-count on #year-tiles from the actual
 * month count, so this never has to guess.
 */

/* The sixup print-choice icon (calendar-core.js's yearPrintButtonsHTML) is
 * built like the shared is-landscape/is-portrait icons (a single inset,
 * rounded <rect>) but style.css only sizes those two — this is the one icon
 * specific to the year pages, so it's sized here instead of adding a
 * year-only class to the shared stylesheet. 20x20: a square of the same
 * area as is-landscape's 20x15 (√300≈17.3), scaled 15% larger, so the three
 * print buttons read as one family (same shape language, sixup's cell just
 * bigger) rather than an unrelated icon. This rule is NOT under @media
 * print — the button is on-screen UI that triggers printing, not part of
 * the printed page itself. */
.year-print-buttons .print-choice-page.is-sixup {
    width: 20px;
    height: 20px;
}

.year-tiles {
    display: grid;
    /* Two columns, filled top-to-bottom then the next column — not
       left-right-left-right across each row. 6 rows × 2 cols = 12 months;
       a leap year sets data-tile-count="13" and gets a 7th row. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    margin: 24px 0;
}

.year-tiles[data-tile-count="13"] {
    grid-template-rows: repeat(7, auto);
}

.year-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
    transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}

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

.year-tile:focus-visible {
    outline: 2px solid #3b6fc4;
    outline-offset: 2px;
}

.year-tile-title {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1f3a5f;
    text-align: center;
}

/* Placeholder shading while the fetch is in flight — aspect-ratio matches
 * the real rendered grid's proportions (measured: a ~260px-wide tile at 6
 * rows of the new 38px minimum comes out to ~252x228, ratio ~1.1) so the
 * tile doesn't visibly change size once real data replaces the placeholder.
 * Re-measure this if the column min-width or row height above ever
 * changes — it's an empirical match, not a formula. */
.year-tiles:not(.year-tiles-ready) .year-tile-grid {
    aspect-ratio: 11 / 10;
    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;
}

/* ---------------------------------------------------------- mini grid */

/* Row height and digit sizes below are SCREEN values — legible while
 * browsing, not the print legibility floor (8px/6px). @media print below
 * re-pins its own values explicitly instead of inheriting these, so growing
 * screen's no longer touches print's one-sheet budget. */
.year-tile-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Fixed row height — `auto` let holiday names grow the row and break the
     * grid alignment across columns. */
    grid-template-rows: repeat(var(--calendar-week-rows, 6), 38px);
}

.year-tile-grid .day-header {
    display: none;
}

.year-tile-grid .day-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding: 1px 2px 7px;
    overflow: hidden;
    box-sizing: border-box;
}

.year-tile-grid .gregorian-date {
    flex: 0 0 auto;
    font-size: 9px;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
}

.year-tile-grid .hebrew-date {
    position: absolute;
    top: 1px;
    inset-inline-end: 2px;
    flex: 0 0 auto;
    font-size: 7px;
    line-height: 1;
    max-width: calc(100% - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.year-tile-grid .cell-month-left,
.year-tile-grid .cell-month-right,
.year-tile-grid .month-name {
    display: none;
}

.year-tile-grid .day-cell.rosh-chodesh {
    border-inline-start-width: 2px;
}

/* Pinned to the cell floor — flex was clipping it when rows are tight. */
.year-tile-grid .holiday-name {
    position: absolute;
    bottom: 1px;
    inset-inline: 1px;
    margin: 0;
    width: auto;
    max-width: none;
    font-size: 5px;
    line-height: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    z-index: 1;
}

/* Civil-month-boundary borders (see buildHebrewMonthGridHTML): kept, thinner
 * than the full-scale /hebrew-month/ page, since a Hebrew month tile spans
 * one or two Gregorian months and the seam is still worth marking. */
.year-tile-grid .month-border-top {
    border-top: 1px solid #b7c4d6 !important;
}

.year-tile-grid .month-border-bottom {
    border-bottom: 1px solid #b7c4d6 !important;
}

.year-tile-grid .month-border-right {
    border-inline-start: 1px solid #b7c4d6 !important;
}

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

@media (max-width: 560px) {
    .year-tiles,
    .year-tiles[data-tile-count="13"] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 14px;
    }
}

/* ---------------------------------------------------------------- print */
@media print {
    .month-intro,
    .site-context-bar {
        display: none !important;
    }

    @page {
        /* Top/bottom 5mm (0.5 cm); sides stay at 9mm. Shared by all three
           layouts — a landscape sheet is only 210mm tall, so every extra mm
           here comes out of the tile budget (see that layout's comment). */
        size: auto;
        margin: 5mm 9mm;
    }

    html, body {
        height: 100%;
    }

    body {
        margin: 0;
    }

    .container {
        width: 100%;
    }

    .year-tiles {
        /* The screen layout's 24px top/bottom margin was never reset for
           print — on its own it was enough to push 6 rows of tiles from
           fitting on one A4 portrait sheet to needing two. A printed sheet
           needs no outer margin beyond @page's own (plus each layout's own
           inline padding below, where asked for). This 3mm gap is
           landscape's own; sixup and portrait override it wider below. */
        margin: 0;
        gap: 3mm;
    }

    .year-tile {
        /* 10px -> 9px: a small, universal trim banked as safety margin the
           first time portrait's page margin and gap were widened. */
        padding: 7px;
        /* Same light slate as the screen tile, not #999 — print used to
           force a darker frame that read as a heavy box around each month. */
        border: 1px solid #e2e8f0;
        box-shadow: none;
        transform: none !important;
        break-inside: avoid;
    }

    /* Holiday colours: inline backgrounds from getHolidayPresentation(), erev
       half-cell gradients and chol-ha-moed overlays from style.css — browsers
       drop these on paper unless forced (same approach as holiday.css). Scoped
       to the tile anchor and its grid so WebKit also prints through <a>. */
    .year-tiles .year-tile,
    .year-tiles .year-tile-grid,
    .year-tiles .year-tile-grid .day-cell {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .year-tile-title {
        /* margin-bottom pinned smaller than the screen value (8px) — banked,
           with the tile padding trim above, as safety margin for portrait's
           own block/inline padding below. */
        margin-bottom: 6px;
        font-size: 11px;
    }

    /* Row height and digit size are SCREEN values above this @media block,
       tuned for browsing (see that rule's comment) — print re-pins its own
       long-standing values here explicitly so growing the screen ones for
       legibility can never touch the print budget below. This is the
       12-tile / common-year default for portrait and landscape both; sixup
       and the 13-tile count each override further down. */
    .year-tile-grid {
        grid-template-rows: repeat(var(--calendar-week-rows, 6), minmax(20px, 1fr));
    }

    .year-tile-grid .gregorian-date {
        font-size: 7px;
        line-height: 1;
    }

    .year-tile-grid .hebrew-date {
        font-size: 5px;
        line-height: 1;
    }

    .year-tile-grid .holiday-name {
        font-size: 4px;
        line-height: 1;
    }

    /* Portrait: 2 columns — 6 rows for a 12-month year, 7 for a leap year's
       13 months. A portrait sheet is 297mm tall — plenty of vertical slack —
       so side padding on .year-tiles (inline only; top/bottom come from
       @page's 5mm) widens the horizontal gutter. The outer grid and each
       tile's mini-grid both use 1fr rows so the tiles stretch to fill the
       stopping at a fixed row minimum. (The extra month, Adar II, actually
       sits mid-sequence — /api/hyear orders Tishrei..Adar II, then Nisan..Elul —
       so the tile left alone in the last row is however many months a leap
       year adds, positionally always the 13th and last DOM tile [Elul], not
       literally Adar II.) One A4 portrait sheet must hold either row count
       — that is the whole point of this page type, not a nice-to-have — so
       7 rows get the [data-tile-count="13"] shrink below rather than being
       left to spill onto a 2nd sheet. */
    html[data-print-layout="portrait"] .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100%;
        box-sizing: border-box;
    }

    html[data-print-layout="portrait"] .year-tiles {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 1fr);
        grid-auto-flow: column;
        flex: 1;
        min-height: 0;
        gap: 3mm;
        padding-inline: 14mm;
        box-sizing: border-box;
    }

    html[data-print-layout="portrait"] .year-tile {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 5px;
    }

    html[data-print-layout="portrait"] .year-tile-grid {
        flex: 1;
        min-height: 0;
        grid-template-rows: repeat(var(--calendar-week-rows, 6), 1fr);
    }

    html[data-print-layout="portrait"] .year-tile-title {
        font-size: 11px;
        margin-bottom: 3px;
    }

    html[data-print-layout="portrait"] .year-tile-grid .gregorian-date {
        font-size: 8px;
    }

    html[data-print-layout="portrait"] .year-tile-grid .hebrew-date {
        font-size: 7px;
    }

    html[data-print-layout="portrait"] .year-tile-grid .holiday-name {
        font-size: 5px;
    }

    /* Landscape: 3 columns × 4 rows, one page. A landscape sheet is only
       210mm tall — the outer grid must use 4 equal 1fr rows (same trick as
       portrait's 6) so tiles never grow to content height and spill a 2nd
       page. Side (inline) padding is wide on purpose; height is the limit. */
    html[data-print-layout="landscape"] .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100%;
        box-sizing: border-box;
    }

    html[data-print-layout="landscape"] .year-tiles {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-auto-flow: column;
        flex: 1;
        min-height: 0;
        gap: 3mm;
        padding-inline: 14mm;
        box-sizing: border-box;
    }

    html[data-print-layout="landscape"] .year-tile {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 5px;
    }

    html[data-print-layout="landscape"] .year-tile-title {
        margin-bottom: 4px;
        font-size: 10px;
    }

    html[data-print-layout="landscape"] .year-tile-grid {
        flex: 1;
        min-height: 0;
        grid-template-rows: repeat(var(--calendar-week-rows, 6), 1fr);
    }

    /* 13 tiles: extra row so column-flow can put 7 months in the first
       column and 6 in the second, rather than spilling a 13th implicit
       column. The leftover empty cell sits at the foot of the second
       column — do not stretch the last tile across the row (that was the
       old row-major orphan rule). */
    html[data-print-layout="portrait"] .year-tiles[data-tile-count="13"] {
        grid-template-rows: repeat(7, 1fr);
    }

    html[data-print-layout="portrait"] .year-tiles[data-tile-count="13"] .year-tile-grid {
        grid-template-rows: repeat(var(--calendar-week-rows, 6), 1fr);
    }

    html[data-print-layout="landscape"] .year-tiles[data-tile-count="13"] {
        grid-template-rows: repeat(5, 1fr);
    }

    html[data-print-layout="landscape"] .year-tiles[data-tile-count="13"] .year-tile-grid {
        grid-template-rows: repeat(var(--calendar-week-rows, 6), 1fr);
    }

    /* A 13-tile (leap year) page needs an extra row in EITHER layout now
       (portrait: 7 rows, not 6; landscape: 5 rows, not 4). Neither fits its
       sheet at the 12-tile tile size. Shrink padding/title/row-height only
       for this count, so a common (12-month) Hebrew year keeps the larger,
       easier-to-read default instead of both being squeezed for the rarer
       case. Still one page, still both calendars per cell — nothing here
       hides Hebrew dates, day headers, or any other content, only makes the
       existing content smaller. Shared by both layouts on purpose —
       re-verify both if this ever needs re-deriving, since portrait's and
       landscape's margins/gaps differ. */
    .year-tiles[data-tile-count="13"] .year-tile {
        padding: 3px;
    }

    .year-tiles[data-tile-count="13"] .year-tile-title {
        margin-bottom: 3px;
        font-size: 10px;
    }

    .year-tiles[data-tile-count="13"] .year-tile-grid {
        grid-template-rows: repeat(var(--calendar-week-rows, 6), minmax(15px, 1fr));
    }

    /* Digit SIZE is left at the 12-tile default (8px/6px, above) — that is
       the legibility floor, not to be crossed. What's tightened instead is
       line-height (1 -> 1): a grid row auto-sizes to its content's own
       minimum, so lowering minmax()'s floor below that minimum had no effect
       at all once it dropped below the digits' own line-box height —
       measured, not assumed. Line-height is the one remaining lever that
       shrinks the actual content minimum without touching font-size. */
    .year-tiles[data-tile-count="13"] .year-tile-grid .gregorian-date,
    .year-tiles[data-tile-count="13"] .year-tile-grid .hebrew-date {
        line-height: 1;
    }

    .year-tiles[data-tile-count="13"] .year-tile-grid .holiday-name {
        font-size: 3.5px;
    }

    /* Six-up: 3 columns × 2 rows per page — larger cells than the common
       (12-tile) default for actual handwriting, which is the point of this
       layout, but pulled back from an earlier pass that sized rows/digits
       past what fits an A4 LANDSCAPE sheet (210mm tall) and ran content off
       the page. 12 tiles = 2 pages; every 6th tile forces the page break
       after it — except the very last tile, where a break-after would emit
       a trailing blank sheet. */
    html[data-print-layout="sixup"] .year-tiles {
        grid-template-columns: repeat(3, 1fr);
        /* Reset the screen/portrait column-flow (6 explicit rows) so sixup
           stays 3-across × 2-down per sheet, page-broken on the 6th tile. */
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 6mm;
    }

    html[data-print-layout="sixup"] .year-tiles:not([data-tile-count="13"]) .year-tile:nth-child(6n):not(:last-child) {
        break-after: page;
    }

    /* A leap year's 13 tiles ÷ 6-per-sheet would otherwise leave a 3rd sheet
       holding one lone tile. Breaking after the 7th tile instead of the 6th
       splits 13 as 7 + 6 — two sheets, same count as a common year — at the
       cost of one orphaned tile mid-way through sheet one instead of a whole
       extra sheet; the next rule centers that one. */
    html[data-print-layout="sixup"] .year-tiles[data-tile-count="13"] .year-tile:nth-child(7):not(:last-child) {
        break-after: page;
    }

    html[data-print-layout="sixup"] .year-tiles[data-tile-count="13"] .year-tile:nth-child(7) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 12mm) / 3);
    }

    html[data-print-layout="sixup"] .year-tile-grid {
        grid-template-rows: repeat(var(--calendar-week-rows, 6), minmax(40px, 1fr));
    }

    html[data-print-layout="sixup"] .year-tile-title {
        font-size: 13px;
    }

    html[data-print-layout="sixup"] .year-tile-grid .gregorian-date {
        font-size: 12px;
    }

    html[data-print-layout="sixup"] .year-tile-grid .hebrew-date {
        font-size: 8px;
    }

    html[data-print-layout="sixup"] .year-tile-grid .holiday-name {
        font-size: 7px;
    }
}