/* ==========================================================================
   Catalogue pages — loaded only where they're used, via the layout's
   pageStyles slot. Keeps app.css from growing into a monolith, which matters
   because this project has no build step.
   ========================================================================== */

/* --- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs {
    border-bottom: 1px solid var(--alfa-line);
    background: var(--alfa-surface);
}
.breadcrumbs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2xs, .5rem);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: var(--space-xs, .75rem) 0;
    font-size: var(--step--1, .875rem);
    color: var(--alfa-gray);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.breadcrumbs__list::-webkit-scrollbar { display: none; }
.breadcrumbs__item { display: flex; align-items: center; white-space: nowrap; }
.breadcrumbs__item:not(:last-child)::after {
    content: "/";
    margin-left: var(--space-2xs, .5rem);
    color: var(--alfa-line);
}
.breadcrumbs__item a { color: var(--alfa-gray); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--alfa-red); }
.breadcrumbs__item [aria-current="page"] { color: var(--alfa-ink); font-weight: 500; }

/* --- Sticky in-page sub-nav ----------------------------------------------- */
.subnav {
    position: sticky;
    top: 72px;
    z-index: 20;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--alfa-line);
}
.subnav__list {
    display: flex;
    gap: var(--space-m, 1.5rem);
    list-style: none;
    margin: 0;
    padding: var(--space-xs, .75rem) 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__link {
    white-space: nowrap;
    font-size: var(--step--1, .875rem);
    color: var(--alfa-gray);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}
.subnav__link:hover { color: var(--alfa-ink); }
.subnav__link.is-active { color: var(--alfa-ink); border-bottom-color: var(--alfa-red); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section--gallery .gallery-grid { --tile-min: 44vw; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .card-grid { grid-template-columns: 1fr; }
    .subnav { top: 60px; }
}
@media (min-width: 1200px) {
    .card-grid { gap: var(--space-xl, 3rem) var(--space-l, 2rem); }
}