/* ============================================================
   SCE-102 — strony hubowe katalogu (/marki, /marki/{slug},
   /perfumy/{gender}) + sekcje polecane i breadcrumb na /p/{id}.
   Builds on the design tokens defined in landing.css
   (--cream/--paper/--deep/--sage/--ink/--muted/--hairline,
   --font-display/--font-text). Loaded after landing.css + perfume.css.
   ============================================================ */

/* Pułapka odziedziczona z perfume.css: .perfume-body sięga po niezdefiniowany
   token --color-bg, więc tło spada na kanwę przeglądarki — w dark mode strona
   robiła się czarna mimo <meta color-scheme="light">. Na stronach ładujących
   catalog.css (huby + /p/) przybijamy design light jawnie, tokenami, które
   landing.css naprawdę definiuje. */
.perfume-body {
    background: var(--cream);
    color: var(--ink);
}

/* Ta sama pułapka: CTA w headerze ma tło z niezdefiniowanego --color-primary
   (biały tekst na kremowym tle = niewidoczny przycisk). */
.perfume-header__cta {
    background: var(--sage);
}

.perfume-header__cta:hover {
    background: var(--deep);
}

/* Szerszy main pod siatki kart (perfume-main trzyma 880px dla artykułu). */
.catalog-main {
    max-width: 1080px;
}

/* ---------- Breadcrumb (huby + /p/) ---------- */

.catalog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 20px;
}

.catalog-breadcrumb a {
    color: var(--sage);
    text-decoration: none;
}

.catalog-breadcrumb a:hover {
    text-decoration: underline;
}

.catalog-breadcrumb__sep {
    color: var(--hairline);
    user-select: none;
}

/* ---------- Nagłówek listy ---------- */

.catalog-hero {
    margin: 0 0 28px;
}

.catalog-hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    line-height: 1.15;
    color: var(--deep);
    margin: 0 0 10px;
}

.catalog-hero__lead {
    max-width: 640px;
    color: var(--muted);
    line-height: 1.6;
}

/* ---------- /marki: indeks literowy ---------- */

.catalog-letter-index {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0;
    margin: 0 0 20px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.catalog-letter-index a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sage);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.catalog-letter-index a:hover {
    background: var(--sage-soft);
    color: var(--deep);
}

.catalog-letter-group {
    margin: 0 0 26px;
    scroll-margin-top: 24px;
}

.catalog-letter-group__letter {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--deep);
    padding-bottom: 8px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--hairline);
}

.catalog-brands-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 24px;
}

.catalog-brands-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.15s ease;
}

.catalog-brands-list a:hover {
    background: var(--sage-soft);
}

.catalog-brands-list__name {
    font-weight: 500;
}

.catalog-brands-list__count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--sage-soft);
    border-radius: 999px;
    padding: 2px 9px;
}

/* ---------- Siatka kart ---------- */

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.15s var(--ease-out), box-shadow 0.15s ease;
}

.catalog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(40, 48, 37, 0.1);
}

/* Media: jasne tło pod warianty _nobg — jak .perfume-card__media na /p/. */
.catalog-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background: #fff;
    padding: 14px;
}

.catalog-card__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.catalog-card__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--sage);
    background: var(--sage-soft);
    border-radius: 10px;
}

/* Badge koncentracji — lewy dolny róg zdjęcia, jak na kartach w aplikacji (SCE-70). */
.catalog-card__badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cream);
    background: var(--deep);
    border-radius: 999px;
    padding: 3px 9px;
}

.catalog-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
}

.catalog-card__brand {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.catalog-card__name {
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-card__price {
    margin-top: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sage);
}

/* ---------- Paginacja ---------- */

.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 30px 0 6px;
}

.catalog-pagination__page,
.catalog-pagination__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 8px 12px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    background: var(--paper);
    transition: background 0.15s ease, color 0.15s ease;
}

.catalog-pagination__page:hover,
.catalog-pagination__nav:hover {
    background: var(--sage-soft);
}

.catalog-pagination__page.is-current {
    background: var(--deep);
    border-color: var(--deep);
    color: var(--cream);
}

.catalog-pagination__gap {
    color: var(--muted);
    padding: 0 2px;
    user-select: none;
}

/* ---------- Sekcje polecane na /p/ ----------
   Markup: <section class="perfume-section catalog-section"> — odstęp i tytuł
   daje .perfume-section (perfume.css), tu tylko ciaśniejsza siatka. */

.catalog-section .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* ---------- Stopka: nawigacja katalogu (ciemne tło site-footer) ---------- */

.catalog-footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 0 0;
    font-size: 0.88rem;
    color: rgba(242, 244, 239, 0.7);
}

.catalog-footer-nav a {
    color: rgba(242, 244, 239, 0.85);
    text-decoration: none;
}

.catalog-footer-nav a:hover {
    text-decoration: underline;
    color: var(--cream);
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
    .catalog-grid,
    .catalog-section .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .catalog-brands-list {
        grid-template-columns: 1fr;
    }
}