/* LawVu Events Calendar
 *
 * Category colours are custom properties, so no JS change is needed to
 * restyle them. The values below are the defaults; the Breakdance element's
 * Category colours section overrides any of them per element.
 */

.lawvu-lec {
    --lawvu-lec-connect: var(--bde-palette-color-34-8202157e-3496-4c39-8689-c4e8b9bb7610);
    --lawvu-lec-meetup: var(--bde-palette-color-12-c3e0c7d9-540f-4b26-9594-8e729a17e464);
    --lawvu-lec-retreat: var(--bde-palette-color-4-4e640351-3285-4b15-b357-5b9eb97d0bb1);
    --lawvu-lec-supper-club: var(--bde-palette-color-28-37651b4f-73f2-4953-ae27-6453cb36923b);
    --lawvu-lec-fallback: #64748b;

    /* Overridden per breakpoint by the element's cssTemplate(), and by an
       inline style from the shortcode. These are the values a shortcode with
       no attributes gets. */
    --lawvu-lec-cards-columns: 3;
    --lawvu-lec-cards-gap-row: 32px;
    --lawvu-lec-cards-gap-column: 32px;

    position: relative;
}

/* Filters

   Two dropdowns of checkboxes. Both read "nothing ticked means no
   constraint", so an untouched calendar shows everything.

   Category checkboxes carry the event colours: filled when ticked,
   coloured border only when not. They are the only place the colours are
   explained, so the boxes start ticked and read as the legend. */

.lawvu-lec__filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.lawvu-lec__filter {
    position: relative;
}

.lawvu-lec__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 10px 15px;
    border: 1px solid #71717a;
    border-radius: .5rem;
    background: #fff;
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;    
    width: 100%;
}
.lawvu-lec__filters > div {
    width: 100%;
}
.lawvu-lec__filters > div {
    width: 100%;
}

.lawvu-lec__filter-toggle:hover {
    border-color: #52525b;
}

.lawvu-lec__filter-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.lawvu-lec__filter.is-filtering .lawvu-lec__filter-toggle {
    border-color: #3f3f46;
}

/* Open, the toggle and its panel read as one frame: the toggle drops its
   bottom edge and corners, and the panel below carries on the same sides
   and border colour. Both share the translucent ground, so the frame looks
   like a single box that has grown downwards. */
.lawvu-lec__filter-toggle[aria-expanded="true"] {
    border-color: #71717a;
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.lawvu-lec__filter-label {
    flex: 1 1 auto;
}

/* Filtering: the label moves up into a notch on the top border and the
   pills take its place, so the control says what it filters and what by,
   at the same height as when it is empty. The notch needs a background to
   break the border line; set --lawvu-lec-filter-notch to the colour behind
   the toolbar if it is not white. */
.lawvu-lec__filter-toggle {
    position: relative;
}

.lawvu-lec__filter.is-filtering .lawvu-lec__filter-toggle {
    padding-top: 9px;
    padding-bottom: 9px;
}

.lawvu-lec__filter.is-filtering .lawvu-lec__filter-label {
    position: absolute;
    top: 0;
    left: 11px;
    transform: translateY(-50%);
    padding: 0 4px;
    background: var(--lawvu-lec-filter-notch, #fff);
    color: #52525b;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}

.lawvu-lec__filter-pills {
    display: none;
}

.lawvu-lec__filter.is-filtering .lawvu-lec__filter-pills {
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

/* flex-shrink 0 so overflow is measurable: fitPills() hides pills from the
   end while the row is wider than the toggle. */
.lawvu-lec__filter-pill,
.lawvu-lec__filter-more {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #3f3f46;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Category pills carry the event's colour, as the events themselves do. */
.lawvu-lec__filter-pill[class*="lawvu-lec__cat--"] {
    background: var(--lawvu-lec-swatch);
    color: #fff;
}

.lawvu-lec__filter-pill[hidden],
.lawvu-lec__filter-more[hidden] {
    display: none;
}

/* Even one pill is too wide: let it truncate rather than spill. */
.lawvu-lec__filter-pills.is-squeezed .lawvu-lec__filter-pill:first-child {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawn in CSS rather than shipped as an icon: one element, no asset, and
   it inherits the button's colour. */
.lawvu-lec__filter-chevron {
    width: .6rem;
    height: .6rem;
    margin-right: .15rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-.2em) rotate(45deg);
    transition: transform .15s ease;
}

.lawvu-lec__filter-toggle[aria-expanded="true"] .lawvu-lec__filter-chevron {
    transform: translateY(.1em) rotate(-135deg);
}

.lawvu-lec__filter-panel {
    position: absolute;
    z-index: 20;
    /* Overlaps the toggle's transparent bottom border, so no seam shows
       between the two halves of the frame. */
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    /* max-height: 17rem; */
    overflow-y: auto;
    padding: 1rem 1rem 2rem 1rem;
    border: 1px solid #71717a;
    border-top: 0;
    border-radius: 0 0 .5rem .5rem;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

/* The panel overlays the grid below it, so it needs a stacking context
   above the cards; the blur keeps whatever shows through from competing
   with the options. */

/* Same horizontal inset as the toggle's text, so each checkbox lines up
   under the label, and the toggle's font size, so the options read as
   part of the same control. */
.lawvu-lec__filter-option {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .45rem 0;
    font-size: inherit;
    cursor: pointer;
}

/* Drawn rather than left native: the screenshot's box is a larger, softer
   square than any platform default, and appearance:none is the only way to
   get the same control on every OS. The checked state is a CSS-drawn tick,
   so there is still no image to load. */
.lawvu-lec__filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    border: 1px solid var(--grey-500);
    border-radius: .25rem;
    cursor: pointer;
}

.lawvu-lec__filter-checkbox:hover {
    border-color: #3f3f46;
}

.lawvu-lec__filter-checkbox:checked {
    background: var(--bde-palette-color-4-4e640351-3285-4b15-b357-5b9eb97d0bb1);
    border-color: var(--bde-palette-color-4-4e640351-3285-4b15-b357-5b9eb97d0bb1);
}

.lawvu-lec__filter-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lawvu-lec__filter-checkbox:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.lawvu-lec__filter-option-label {
    flex: 1 1 auto;
}

/* An option that would match nothing among the events showing. Kept in
   place rather than hidden, so the list does not reshuffle as filters
   change. */
.lawvu-lec__filter-option.is-disabled {
    cursor: not-allowed;
}

.lawvu-lec__filter-option.is-disabled .lawvu-lec__filter-checkbox {
    cursor: not-allowed;
}

.lawvu-lec__filter-option.is-disabled .lawvu-lec__filter-checkbox:hover {
    border-color: var(--grey-500);
}

/* Faded only when the box is actually locked. An unticked category also
   carries is-disabled but can still be ticked back, so it keeps its full
   colour and the pointer. */
.lawvu-lec__filter-option:has(.lawvu-lec__filter-checkbox:disabled) {
    opacity: .4;
}

.lawvu-lec__filter-option.is-disabled:has(.lawvu-lec__filter-checkbox:enabled),
.lawvu-lec__filter-option.is-disabled .lawvu-lec__filter-checkbox:enabled {
    cursor: pointer;
}

.lawvu-lec__filter-empty {
    margin: 0;
    padding: .45rem 0;
    opacity: .7;
}

/* Bordered like its neighbours rather than a bare link: it sits in a row of
   boxed controls, and an underlined word there reads as stray text. */
.lawvu-lec__reset {
    padding: 10px 15px;
    border: 1px solid #71717a;
    border-radius: .5rem;
    background: #fff;
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

.lawvu-lec__reset:hover:not(:disabled) {
    background: #fafafa;
}

.lawvu-lec__reset:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Always shown so the toolbar does not shift as filters change; greyed out
   while there is nothing to clear. */
.lawvu-lec__reset:disabled {
    border-color: #d4d4d8;
    color: #a1a1aa;
    cursor: default;
}

@media (max-width: 640px) {
    .lawvu-lec__filters {
        flex-direction: column;
        align-items: stretch;
    }

    .lawvu-lec__filter-toggle {
        width: 100%;
    }
}

/* Category boxes: the colour is the border when unticked and the fill
   when ticked. Hover thickens the border rather than greying it, which
   would lose the colour. */
.lawvu-lec__filter-option[class*="lawvu-lec__cat--"],
.lawvu-lec__filter-pill[class*="lawvu-lec__cat--"] { --lawvu-lec-swatch: var(--lawvu-lec-fallback); }
.lawvu-lec__filter-option.lawvu-lec__cat--connect,
.lawvu-lec__filter-pill.lawvu-lec__cat--connect { --lawvu-lec-swatch: var(--lawvu-lec-connect); }
.lawvu-lec__filter-option.lawvu-lec__cat--meetup,
.lawvu-lec__filter-pill.lawvu-lec__cat--meetup { --lawvu-lec-swatch: var(--lawvu-lec-meetup); }
.lawvu-lec__filter-option.lawvu-lec__cat--retreat,
.lawvu-lec__filter-pill.lawvu-lec__cat--retreat { --lawvu-lec-swatch: var(--lawvu-lec-retreat); }
.lawvu-lec__filter-option.lawvu-lec__cat--supper-club,
.lawvu-lec__filter-pill.lawvu-lec__cat--supper-club { --lawvu-lec-swatch: var(--lawvu-lec-supper-club); }

.lawvu-lec__filter-option[class*="lawvu-lec__cat--"] .lawvu-lec__filter-checkbox,
.lawvu-lec__filter-option[class*="lawvu-lec__cat--"] .lawvu-lec__filter-checkbox:hover,
.lawvu-lec__filter-option[class*="lawvu-lec__cat--"].is-disabled .lawvu-lec__filter-checkbox:hover {
    border: 2px solid var(--lawvu-lec-swatch);
}

.lawvu-lec__filter-option[class*="lawvu-lec__cat--"] .lawvu-lec__filter-checkbox:hover {
    box-shadow: 0 0 0 1px var(--lawvu-lec-swatch);
}

.lawvu-lec__filter-option[class*="lawvu-lec__cat--"] .lawvu-lec__filter-checkbox:checked {
    background: var(--lawvu-lec-swatch);
}

/* The 2px border shifts the tick's box; nudge it back to centre. */
.lawvu-lec__filter-option[class*="lawvu-lec__cat--"] .lawvu-lec__filter-checkbox:checked::after {
    top: 2px;
    left: 5px;
}

/* Events */

.lawvu-lec .fc-event {
    cursor: pointer;
    border: none;    
    padding: 5px 10px;
}

/* FullCalendar marks timed events in the month grid with a coloured dot.
   The event's background already carries its category colour, so the dot
   only repeats it and takes width from the title. */
  
.lawvu-lec .fc .fc-multimonth, 
.lawvu-lec .fc .fc-timeGridWeek-view,
.lawvu-lec .fc-theme-standard .fc-scrollgrid,
.lawvu-lec .fc-theme-standard th {
    border: none;
}
.lawvu-lec .fc-daygrid-event-dot {
    display: none;
}
/* Any category without a colour of its own — one picked in the builder
   beyond the four community strands — takes the "Other categories" colour.
   Same specificity as the named rules below, so it must stay above them
   for those to win. */
.lawvu-lec .fc-event[class*="lawvu-lec__cat--"] {
    background: var(--lawvu-lec-fallback);
    color: #fff;
}
.lawvu-lec .fc-event.lawvu-lec__cat--connect {
    background: var(--lawvu-lec-connect);     
    color: #fff;
}
.lawvu-lec .fc-event.lawvu-lec__cat--meetup { 
    background: var(--lawvu-lec-meetup);      
    color: #fff;
}
.lawvu-lec .fc-event.lawvu-lec__cat--retreat { 
    background: var(--lawvu-lec-retreat);      
    color: #fff;
}
.lawvu-lec .fc-event.lawvu-lec__cat--supper-club { 
    background: var(--lawvu-lec-supper-club);      
    color: #fff;
}
.lawvu-lec .fc-daygrid-dot-event .fc-event-title {
    font-weight: unset;
}
/* Year view layout: FullCalendar's own, with the 3rem gap made of padding.

   Not a CSS grid. FullCalendar sizes the year view from two measurements
   taken when the view is built: the container width, and each month's
   side padding, worked out as container width minus the first month's
   width. A grid that narrows the months to a third makes that padding read
   as two-thirds of the container, so FullCalendar computes one column,
   switches to its single-column layout and squeezes every day down to
   "+N more". Padding is something it measures correctly, so the gap is
   built from that instead: half the gap either side of each month, pulled
   back by a negative margin so the outer months still sit flush with the
   toolbar.

   Column count (3, 2 or 1) comes from multiMonthMinWidth in calendar.js. */
.lawvu-lec .fc-multimonth-multicol {
    margin: 0 -1.5rem -3rem;
}

.lawvu-lec .fc-multimonth-multicol .fc-multimonth-month {
    padding: 0 1.5rem 3rem;
}
.lawvu-lec .fc-multimonth-daygrid-table tr td:first-child,
.lawvu-lec .fc-theme-standard td:first-child {
    border-left: 0;
}
.lawvu-lec .fc-multimonth-daygrid-table tr td:last-child,
.lawvu-lec .fc-theme-standard td:last-child {
    border-right: 0px;
}
.lawvu-lec .fc-multimonth-daygrid-table tr:last-child td,
.lawvu-lec .fc-theme-standard tr:last-child td {
    border-bottom: 0px;
}
.lawvu-lec .fc .fc-timeGridWeek-view th[role="presentation"] {
    border-bottom: 1px solid var(--fc-border-color);
}
.lawvu-lec .fc .fc-multimonth-daygrid {
    background: var(--fc-page-bg-color);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e3e8f0;
}
.lawvu-lec .fc .fc-col-header-cell-cushion {
    font-weight: normal;
}
.lawvu-lec .fc .fc-dayGridMonth-view thead tr th,
.lawvu-lec .fc .fc-timeGridWeek-view thead tr th,
.lawvu-lec .fc .fc-multimonth-singlecol .fc-multimonth-header {
    background-color: transparent;
}
.lawvu-lec .fc .fc-dayGridMonth-view .fc-daygrid-body,
.lawvu-lec .fc .fc-timeGridWeek-view tbody {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e3e8f0;
}
.lawvu-lec .fc .fc-dayGridMonth-view .fc-scrollgrid-sync-table {
    width:100% !important;
}

/* States */

.lawvu-lec__message {
    padding: 2rem 1rem;
    text-align: center;
    color: #52525b;
}

.lawvu-lec__retry {
    margin-left: .5rem;
    padding: .25rem .75rem;
    font: inherit;
    cursor: pointer;
}

/* Popover */

.lawvu-lec__popover {
    position: absolute;
    z-index: 100;
    width: min(20rem, calc(100vw - 2rem));
    padding: 1rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    font-size: .875rem;
}

.lawvu-lec__popover-title {
    margin: 0 0 .25rem;
    padding-right: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.lawvu-lec__popover-meta {
    margin: 0 0 .5rem;
    color: #52525b;
}

.lawvu-lec__popover-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    border: 0;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

/* Block popover: the global block brings its own design, so the panel
   gives up its padding and only frames it. Height is bounded because a
   block designed for a card grid can be taller than the space below an
   event. */

.lawvu-lec__popover--block {
    padding: 0;
    overflow: auto;    
    min-width: 400px;
}

.lawvu-lec__popover--block .lawvu-lec__popover-close {
    z-index: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
}

.lawvu-lec__popover-loading {
    margin: 0;
    padding: 1rem;
    color: #52525b;
}

/* Phone: anchoring a panel to a small grid cell is unusable, so the popover
   becomes a bottom sheet. */

@media (max-width: 640px) {
    .lawvu-lec__popover {
        position: fixed;
        inset: auto 0 0 0;
        width: 100%;
        border-radius: .75rem .75rem 0 0;
    }
}

/* -------------------------------------------------------------------------
   Toolbar

   Ours rather than FullCalendar's, because it has to survive FullCalendar
   being hidden in card display.
   ------------------------------------------------------------------------- */

.lawvu-lec__toolbar {
    margin-bottom: 20px;
}

.lawvu-lec__titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;    
    justify-content: space-between;
}

.lawvu-lec__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
}

.lawvu-lec__nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lawvu-lec__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0 .4rem;
    border: none;
    border-radius: .375rem;
    background: none;
    color: inherit;
    font: inherit;
    font-size:12px;
    cursor: pointer;
}

/* Today is the one nav control that reads as a button rather than an
   affordance on the title, so it keeps a border where the arrows do not. */
.lawvu-lec__nav-today {
    padding: 0 .85rem;
    border: 1px solid #71717a;
}

.lawvu-lec__nav-btn:hover {
    background: #f4f4f5;
}

/* "Add to calendar": bordered like Today, since it is also a button rather
   than an affordance on the title. Its panel is anchored right because the
   menu sits at the end of the nav, against the calendar's right edge. */
.lawvu-lec__subscribe {
    position: relative;
    display: flex;
    align-self: stretch;
}

.lawvu-lec__subscribe-toggle {
    gap: .45rem;
    padding: 0 .85rem;
    border: 1px solid #71717a;
}

.lawvu-lec__subscribe-toggle[aria-expanded="true"] {
    background: #f4f4f5;
}

.lawvu-lec__subscribe-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    width: min(18rem, calc(100vw - 32px));
    padding: .5rem;
    border: 1px solid #71717a;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.lawvu-lec__subscribe-panel[hidden] {
    display: none;
}

.lawvu-lec__subscribe-note {
    margin: .25rem .5rem .5rem;
    font-size: 13px;
    line-height: 1.4;
    opacity: .75;
}

.lawvu-lec__subscribe-link {
    display: flex;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: 5px;
    background: #e4e4e7;
    color: inherit;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
}

.lawvu-lec__subscribe-link + .lawvu-lec__subscribe-link {
    margin-top: .375rem;
}

.lawvu-lec__subscribe-link .lawvu-lec__icon {
    flex: none;
    width: 14px;
    height: 14px;
}

.lawvu-lec__subscribe-link:hover {
    filter: brightness(.94);
}

.lawvu-lec__subscribe-link:focus-visible,
.lawvu-lec__subscribe-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.lawvu-lec__nav-btn:focus-visible,
.lawvu-lec__segment:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.lawvu-lec__icon {
    width: 1em;
    height: 1em;
    display: block;
}

/* -------------------------------------------------------------------------
   Control strip: filters on the left, view switches on the right
   ------------------------------------------------------------------------- */

.lawvu-lec__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;
    margin-bottom: 4rem;
}

.lawvu-lec__views {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* A segmented control: one bordered track, dividers between segments, and
   the active one filled. Grouping the border on the track rather than each
   button is what gives the single-pill look. */
.lawvu-lec__segmented {
    display: inline-flex;
    border: 1px solid #71717a;
    border-radius: .5rem;
    overflow: hidden;
}

.lawvu-lec__segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 10px 15px;
    border: none;
    background: #fff;
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

/* The dividers between segments: on each segment after the first, so the
   track's own border closes the outer edges. */
.lawvu-lec__segment + .lawvu-lec__segment {
    border-left: 1px solid #e4e4e7;
}

.lawvu-lec__segment:hover {
    background: #fafafa;
}

/* The subtle grey that marks the active view. Deliberately a fill rather
   than a colour change: it survives a theme recolouring the text. */
.lawvu-lec__segment[aria-pressed="true"] {
    background: #e4e4e7;
}

.lawvu-lec__segment--icon {
    padding: 1rem;
    font-size: 1.8rem;
}

/* -------------------------------------------------------------------------
   Search
   ------------------------------------------------------------------------- */

.lawvu-lec__search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lawvu-lec__search-input {
    width: 100%;
    min-width: 12rem;
    padding: 10px 40px 10px 15px;
    border: 1px solid #71717a;
    border-radius: .5rem;
    background: #fff;
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
}

.lawvu-lec__search-input:focus-visible {
    outline: none;
    background: #fff;
}

/* Sits inside the field rather than beside it, so the control reads as one
   box at any width. Pointer events off so a click lands on the input. */
.lawvu-lec__search-icon {
    position: absolute;
    right: .9rem;
    display: flex;
    opacity: .55;
    pointer-events: none;
}

/* WordPress ships this class, but the plugin may render where the theme
   does not, so it is defined here too. */
.lawvu-lec .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .lawvu-lec__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .lawvu-lec__views {
        justify-content: space-between;
    }

    .lawvu-lec__search,
    .lawvu-lec__search-input {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   Card grid
   ------------------------------------------------------------------------- */

.lawvu-lec__cards {
    display: grid;
    grid-template-columns: repeat(var(--lawvu-lec-cards-columns), minmax(0, 1fr));
    row-gap: var(--lawvu-lec-cards-gap-row);
    column-gap: var(--lawvu-lec-cards-gap-column);
}

/* minmax(0, 1fr) above rather than 1fr: a grid item's default min-width is
   auto, so a long unbroken title or a wide image inside a card would
   otherwise push the column wider than its share and break the grid. */

.lawvu-lec__card {
    min-width: 0;
}

.lawvu-lec__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin-top: 3rem;
}

/* display:flex above would otherwise outrank the hidden attribute. */
.lawvu-lec__pagination[hidden] {
    display: none;
}

.lawvu-lec__page {
    min-width: 2.25rem;
    padding: 0.3em 0.8em;
    border: 0;
    border-radius: .375rem;
    background: #fff;
    color: #18181b;
    font: inherit;
    font-size: var(--preset-id-e11d13e0-fc5c-4076-a850-5cfe68c25992-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.lawvu-lec__page:hover {
    background: #e4e4e7;
}

.lawvu-lec__page:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.lawvu-lec__page[aria-current="page"] {
    background: #18181b;
    color: #fff;
    cursor: default;
}

.lawvu-lec__page-gap {
    color: #52525b;
    letter-spacing: .1em;
}

/* -------------------------------------------------------------------------
   Display switching

   Both containers exist in the DOM at once; the inactive one is hidden
   rather than removed, so FullCalendar keeps its instance and its current
   date across a switch.
   ------------------------------------------------------------------------- */

.lawvu-lec[data-display="cards"] .lawvu-lec__calendar {
    display: none;
}

.lawvu-lec[data-display="calendar"] .lawvu-lec__cards-container {
    display: none;
}

/* Upcoming cards have no period to step through, so prev / next / Today go
   while they show. */
.lawvu-lec[data-display="cards"][data-resolution="upcoming"] .lawvu-lec__nav-btn[data-nav] {
    display: none;
}

/* FullCalendar's own header is replaced by .lawvu-lec__toolbar. Hidden
   rather than disabled via headerToolbar:false so that a JS failure leaves
   a usable calendar with its own controls rather than one with none. */
.lawvu-lec .fc-header-toolbar {
    display: none;
}

.lawvu-lec__cards-container[aria-busy="true"] {
    opacity: 0.5;
}

@media (max-width: 782px) {
    .lawvu-lec__toolbar {
        gap: 8px;
    }

    .lawvu-lec__title {
        flex-basis: 100%;
        order: -1;
    }
    .fc .fc-multimonth {
        gap: 3rem;
    }
}

/* Names the empty period, so a visitor who navigates into a quiet month
   knows which month is quiet rather than assuming the grid is broken. */
.lawvu-lec__empty-hint {
    margin: 8px 0 0;
    opacity: 0.7;
    text-align: center;
}