/*-- grid-menu stylesheet (for confindex.qmd only) --*/

/* Outer wrapper for the menu grid */
.grid-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    width: min(100%, 600px);
    margin: 2em auto;
    aspect-ratio: 1 / 1;
}

/* Each grid cell — link wrapper */
.grid-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    position: relative;
     /* Prevent Pandoc/Bootstrap margin/padding leaks into cell */
    padding: 0 !important;
    margin: 0 !important;
}

/* Grid images: dimmed by default, brighten on hover */
.grid-menu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(45%);
    transition: filter 0.3s ease;
    /* Pandoc/Quarto may set default padding/margin/vertical-align on <img>; reset */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    vertical-align: unset !important;
}

/* Brighten image when the cell is hovered, focused, or pressed */
.grid-menu a:hover img,
.grid-menu a:focus img,
.grid-menu a:focus-within img,
.grid-menu a:active img {
    filter: brightness(100%);
}

/* Hover label text — invisible by default, visible on parent hover */
.grid-menu .label {
    position: absolute;
    color: #ffffff;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Show label on cell hover, keyboard focus, or press.
* :focus / :focus-within make each square reveal its label when a keyboard or
* screen-reader user Tabs to it; :active covers the instant of a tap. */
.grid-menu a:hover .label,
.grid-menu a:focus .label,
.grid-menu a:focus-within .label,
.grid-menu a:active .label {
    opacity: 1;
}

/* Touch devices (phones / tablets) report (hover: none) and have no hover
* state, so a dimmed 2x2 grid with hover-only labels is unusable there: a
* visitor sees four dim images and cannot tell what any square links to.
* On such devices keep the labels visible at all times. */
@media (hover: none) {
      .grid-menu .label {
        opacity: 1;
      }
}

/* Empty placeholder cells */
.grid-menu .empty {
    background-color: #222;
    transition: background-color 0.3s ease;
}

/* Dark-mode overrides for empty cells */
@media (prefers-color-scheme: dark) {
    .grid-menu .empty {
        background-color: #333;
    }
}

.grid-menu .empty:hover {
    background-color: #444;
}

/* Credit / attribution text */
.grid-credit {
    text-align: left;
    font-size: 0.85em;
    margin-top: 2em;
    opacity: 0.7;
}