/* The Card of the Day calendar.

   FullCalendar is vendored with Tabler and themed by tabler-vendors.css, which
   every page already links — borders, the today highlight and the toolbar
   buttons all come from there. What is left is the day cell, which here holds a
   row of little cards rather than a stack of text events, the way ../app's
   DayCell lays one out. */

/* A day's cards side by side and centred under the date. FullCalendar stacks
   day-grid events vertically, one block per row, which would give a day with
   two cards a cell twice as tall as its neighbours. */
.fc-daygrid-day-events {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    /* Off the date, which FullCalendar puts on the line above. */
    padding-block: 2px 4px;
}

/* The harness is the positioned wrapper FullCalendar puts round each event; it
   carries a top margin that would separate cards that are now side by side, and
   an inline width when events overlap. !important because both are written as
   inline styles by the library — there is no rule to outrank. */
.fc-daygrid-event-harness {
    flex: 0 0 auto;
    margin: 0 !important;
    width: auto !important;
}

/* Sized by height, so a row of cards lines up whatever each one's source scan
   rounded to. 7:12 is the ratio layouts/geometry.py fixes for every card in the
   app, and the _small files are cut to it.

   Clamped to the viewport rather than fixed, because what a card has to fit in
   is a seventh of the grid: a month is always seven columns wide, so a cell is
   about 150px on a desktop and about 45px on a phone. 4.5vw tracks that, and
   the bounds keep it from turning into a stamp on a narrow window or from
   outgrowing its row on a very wide one. */
.cotd-card {
    display: block;
    height: clamp(1.75rem, 4.5vw, 4rem);
    width: auto;
    aspect-ratio: 7 / 12;
    object-fit: contain;
    cursor: pointer;
}

/* Drawn upside down, which is what reversed means on a board — the same thing
   the stored spread preview does with a reversed card, and what ../app does
   with .rotate(180f). */
.cotd-card--reversed {
    transform: rotate(180deg);
}

/* A month is only as tall as its cards, so the toolbar does not float above a
   screenful of empty grid on a month with nothing in it. */
.fc .fc-daygrid-day-frame {
    min-height: 5.5rem;
}

/* The month header, on a narrow window.

   Two things overflow there, and neither is FullCalendar's fault — it sizes a
   weekday cell at a seventh of the grid and lets the name be whatever the
   locale calls it. English abbreviates to three letters; Latvian's "short"
   weekday is "Ceturtd." and Russian's month is spelled out with a "г." after
   the year, so a phone showed overlapping column heads and a title crowding
   the buttons. Clipping the name and letting the toolbar wrap costs nothing in
   English and keeps every other locale legible. */
.fc .fc-col-header-cell-cushion {
    display: block;
    overflow: hidden;
    padding-inline: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: .75rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    .fc .fc-col-header-cell-cushion {
        font-size: .6875rem;
    }
}