/* year/year.css — the /year/ and /year/:yyyy/ one-sheet yearly grid.
 *
 * Loads on top of style.css, which already owns .calendar-grid / .day-cell /
 * every holiday colour and erev half-cell — this file only lays out twelve
 * tiles and shrinks the cells inside them to thumbnail scale (the same
 * relationship gallery.css has to its .mg-grid, scoped to #year-tiles
 * instead of #month-gallery).
 *
 * Print is the point of this page, so unlike gallery.css (navigation, not
 * product — hidden under @media print) the print rules here are the primary
 * spec: three layouts selected by html[data-print-layout], set by
 * AxCal.printYear() in calendar-core.js. hebrew-year.css repeats this block
 * near-verbatim; keep the two in sync if one changes.
 */

/* 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
       (Jan–Jun then Jul–Dec in LTR; the reverse start-edge in RTL). */
    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 AxCal.fetchCalendarData() is in flight — the
 * links are already real and clickable, only the grid inside is blank.
 * aspect-ratio here 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). They used to be one
 * shared rule for screen and print both, which is why the print page was
 * fine but the on-screen grid read as squashed: 20px rows and 8px/6px
 * digits are sized for a printed sheet held at arm's length, not a browser
 * window. @media print below now 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: 9px;
    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;
}

/* ---------------------------------------------------------- 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: 6px;
        line-height: 1;
    }

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

    /* Portrait (default): 2 columns × 6 rows, one page. 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
       stretch to fill the printable height instead of stopping at a fixed
       row minimum. year.js always sets exactly 12 tiles (a civil year is
       always 12 months), so there is no orphaned last row here — the
       [data-tile-count="13"] rules below exist for parity with
       hebrew-year.css (a Hebrew leap year), which shares this file's
       structure so the two stay in sync; they are inert here. */
    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: 8px;
    }

    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 (parity with hebrew-year.css; inert on a civil year): an 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 year 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 — one A4 sheet, either orientation, has room for one
       more short row, not one more row sized for the common count. Shrink
       padding/title/row-height only for this count, so a common (12-month)
       year keeps the larger, easier-to-read default instead of both sizes
       being squeezed for the rarer case. Still one page, still shows 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. Flat DOM, no wrapper divs: 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;
    }

    /* 13 tiles (a Hebrew leap year) ÷ 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 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: 10px;
    }

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