/* Homepage only: every band fills its rectangle, including odd category counts. */
.category-mosaic { display: grid; gap: 6px; overflow: hidden; border-radius: 14px; background: #d6d3ca; }
.category-mosaic-band { display: flex; gap: 6px; height: clamp(440px, 43vw, 650px); }
.category-mosaic-band[data-count="1"], .category-mosaic-band[data-count="2"] { height: clamp(280px, 30vw, 440px); }
.category-mosaic-column { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.category-mosaic-column:nth-child(2) { flex-grow: 1.12; }
.category-mosaic-column:nth-child(4) { flex-grow: 1.06; }
.category-mosaic-tile { position: relative; flex: 1; min-height: 0; min-width: 0; overflow: hidden; isolation: isolate; background: #d9ddd4; }
.category-mosaic-column:nth-child(odd) > .category-mosaic-tile:first-child:not(:last-child) { flex-grow: .82; }
.category-mosaic-column:nth-child(even) > .category-mosaic-tile:first-child:not(:last-child) { flex-grow: 1.35; }
.category-mosaic-tile .carousel, .category-mosaic-tile .carousel-inner,
.category-mosaic-tile .carousel-item, .category-mosaic-tile .gallery-placeholder,
.category-mosaic-tile img { width: 100%; height: 100%; border-radius: 0; }
.category-mosaic-photo { display: block; object-fit: cover; }
.category-mosaic-tile .gallery-placeholder { padding-bottom: 4rem; background: #d9ddd4; }
.category-mosaic-link { position: absolute; inset: 0; z-index: 2; display: block; color: #fff; }
.category-mosaic-link::before, .category-mosaic-link::after { content: ""; position: absolute; inset: 0; border-radius: 0; pointer-events: none; transition: opacity .22s ease; }
.category-mosaic-link::before { background: linear-gradient(180deg, transparent 40%, rgba(17, 25, 20, .75)); }
.category-mosaic-link::after { background: rgba(245, 242, 233, .86); opacity: 0; z-index: 0; }
/* `.category-mosaic-link` is on the selector only to win a specificity
   fight, not for structure. components.css has
   `.site-main :is(h1,h2,h3,h4,h5,h6) { color: var(--color-text) }`, and
   :is() carries the specificity of its most specific argument -- a type
   selector -- so that rule is (0,1,1) and beat the (0,1,0) this used to
   be. The name is an h2, so it was being painted dark grey over the
   photograph and the white here never applied. Invisible for as long as
   the development database had no category photographs; on the live
   site the names have been hard to read all along (2026-10-08). */
.category-mosaic-link .category-mosaic-name { position: absolute; z-index: 1; left: 22px; right: 65px; bottom: 34px; margin: 0; font-size: clamp(1rem, 1.4vw, 1.35rem); line-height: 1.4; font-weight: 500; color: inherit; overflow-wrap: anywhere; text-shadow: 0 1px 8px rgba(0,0,0,.3); transition: bottom .22s ease, transform .22s ease, color .22s ease; }
.category-mosaic-link:focus-visible { outline: 3px solid var(--color-primary-dark, #945516); outline-offset: -6px; }
.category-mosaic-link:focus-visible::after { outline: none; }
.category-mosaic-link:focus-visible { color: #fff; }
/* Controls remain separate buttons above the category link. Never auto-play. */
.category-mosaic-tile .carousel-control-prev, .category-mosaic-tile .carousel-control-next { z-index: 3; top: 12px; bottom: auto; width: 40px; height: 40px; opacity: 1; }
.category-mosaic-tile .carousel-control-prev { left: auto; right: 58px; }
.category-mosaic-tile .carousel-control-next { right: 12px; }
.category-mosaic-tile .carousel-control-prev-icon, .category-mosaic-tile .carousel-control-next-icon { width: 36px; height: 36px; background-color: #28352de0; border-radius: 50%; background-size: 52%; }
.category-mosaic-tile .carousel-indicators { z-index: 3; margin-bottom: 12px; }
/* A 3px bar is the look. The target measured 18x22.6: Bootstrap already pads
   these out with transparent borders, so it was never the 3px it appears, but
   it was still under the 24x24 minimum on both axes. The borders grow instead
   of the bar -- Bootstrap paints the indicator with background-clip:
   padding-box, so the bar stays exactly as thin as it looks -- and the
   horizontal margin gives back exactly what the side borders take (4 - 1 - 1
   - 1 - 1 + 4 = 6), so the bars sit where they always did rather than
   spreading apart. Measured after: hit 25x24, bar still 18x3. */
.category-mosaic-tile .carousel-indicators button {
    width: 18px; height: 3px; min-height: 0;
    border-top-width: 11px; border-bottom-width: 11px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    margin-left: -1px; margin-right: -1px;
}
.category-mosaic-tile .carousel-control-prev:focus-visible, .category-mosaic-tile .carousel-control-next:focus-visible { outline: 3px solid var(--color-primary-dark, #945516); outline-offset: 2px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
    .category-mosaic-tile .carousel-control-prev, .category-mosaic-tile .carousel-control-next { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
    .category-mosaic-tile:hover .carousel-control-prev, .category-mosaic-tile:hover .carousel-control-next,
    .category-mosaic-tile:focus-within .carousel-control-prev, .category-mosaic-tile:focus-within .carousel-control-next { opacity: 1; pointer-events: auto; }
    .category-mosaic-link:hover { color: #fff; }
    .category-mosaic-link:hover::after { background: rgba(0, 0, 0, .08); opacity: 1; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .category-mosaic-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; height: auto !important; }
    .category-mosaic-column { display: contents; }
    .category-mosaic-band[data-odd="true"] > .category-mosaic-column:first-child > .category-mosaic-tile:first-child { grid-row: span 2; }
    .category-mosaic-band[data-count="1"] > .category-mosaic-column > .category-mosaic-tile { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 575.98px) {
    .category-mosaic { gap: 4px; border-radius: 10px; }
    .category-mosaic-band { display: grid; gap: 4px; height: auto !important; }
    .category-mosaic-column { display: contents; }
    .category-mosaic-tile { aspect-ratio: 4 / 3; }
    .category-mosaic-name { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
    .category-mosaic *, .category-mosaic *::before, .category-mosaic *::after { transition: none !important; }
}