/**
 * Mary Cagnin — catálogo de cursos (/cursos/)
 * Depende de mary-brand.css
 */

.mary-ui.mary-catalog {
    --mary-surface: var(--mary-offwhite);
    --mary-card-surface: var(--mary-white);
    background: var(--mary-surface);
}

/* --- Hero --- */

.mary-ui.mary-catalog .mary-catalog__hero {
    padding: 76px 0 58px;
    background: var(--mary-purple-dark);
    color: var(--mary-white);
}

.mary-ui.mary-catalog .mary-catalog__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
    gap: 42px;
    align-items: stretch;
}

.mary-ui.mary-catalog .mary-catalog__hero h1 {
    margin: 0 0 20px;
    color: var(--mary-white);
    font-size: clamp(42px, 6vw, 78px);
    line-height: .95;
    letter-spacing: -0.055em;
}

.mary-ui.mary-catalog .mary-catalog__hero-lead {
    max-width: 650px;
    margin: 0 0 26px;
    color: var(--mary-on-dark-text);
    font-size: 20px;
    line-height: 1.5;
    font-weight: 900;
}

.mary-ui.mary-catalog .mary-catalog__hero-visual {
    min-height: 360px;
    border-radius: var(--mary-radius-sm);
    background:
        var(--mary-catalog-hero-gradient),
        var(--mary-catalog-hero-pattern);
    display: grid;
    place-items: center;
    padding: 28px;
    overflow: hidden;
    text-align: center;
    color: var(--mary-on-dark-text-muted);
    font-weight: 700;
}

.mary-ui.mary-catalog .mary-catalog__hero-visual.has-image {
    padding: 0;
    background: var(--mary-purple);
}

.mary-ui.mary-catalog .mary-catalog__hero-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --- Benefícios --- */

.mary-ui.mary-catalog .mary-catalog__benefits {
    padding: 26px 0;
    background: var(--mary-pink);
}

.mary-ui.mary-catalog .mary-catalog__benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.mary-ui.mary-catalog .mary-catalog__benefit {
    min-height: 112px;
    padding: 22px;
    border-radius: var(--mary-radius-sm);
    background: var(--mary-white);
}

.mary-ui.mary-catalog .mary-catalog__benefit strong {
    display: block;
    margin-bottom: 8px;
    color: var(--mary-ink);
    font-size: 20px;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.mary-ui.mary-catalog .mary-catalog__benefit span {
    color: var(--mary-muted);
    font-size: 18px;
    line-height: 1.45;
}

/* --- Seções --- */

.mary-ui.mary-catalog .mary-catalog__hero .mary-eyebrow {
    color: var(--mary-yellow);
}

.mary-ui.mary-catalog .mary-catalog__hero .mary-eyebrow::before {
    content: none;
}

.mary-ui.mary-catalog .mary-catalog__section .mary-copy {
    max-width: 720px;
    margin: 0 0 34px;
}

.mary-ui.mary-catalog .mary-catalog__section {
    padding: var(--mary-section-y) 0;
    background: var(--mary-surface);
}

.mary-ui.mary-catalog .mary-catalog__section--proof {
    background: var(--mary-white);
}

.mary-ui.mary-catalog .mary-catalog__head {
    margin-bottom: 22px;
}

.mary-ui.mary-catalog .mary-catalog__head .mary-copy {
    margin-bottom: 0;
}

.mary-ui.mary-catalog .mary-catalog__extra h3 {
    margin: 0 0 12px;
    color: var(--mary-ink);
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.mary-ui.mary-catalog .mary-catalog__extra p {
    margin: 0 0 16px;
    color: var(--mary-muted);
    font-size: 18px;
    line-height: 1.58;
}

.mary-ui.mary-catalog .mary-catalog__extra .mary-btn {
    border-radius: var(--mary-radius-sm);
}

.mary-ui.mary-catalog .mary-catalog__extra .mary-btn.mary-btn--secondary {
    background: var(--mary-lilac);
    color: var(--mary-purple-dark) !important;
    transition: background-color .18s ease, color .18s ease;
}

.mary-ui.mary-catalog .mary-catalog__extra .mary-btn.mary-btn--secondary:hover {
    background: var(--mary-purple-mid);
    color: var(--mary-white) !important;
    transform: none;
}

/* --- Extras --- */

.mary-ui.mary-catalog .mary-catalog__extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.mary-ui.mary-catalog .mary-catalog__extra {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 28px;
    border-radius: var(--mary-radius-sm);
    background: var(--mary-card-surface);
}

.mary-ui.mary-catalog .mary-catalog__extra-media {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
    border-radius: var(--mary-radius-sm);
    background: var(--mary-lilac);
}

.mary-ui.mary-catalog .mary-catalog__extra-media.is-empty {
    display: grid;
    place-items: center;
    color: var(--mary-purple);
    font-weight: 850;
}

.mary-ui.mary-catalog .mary-catalog__extra-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* --- Prova social --- */

.mary-ui.mary-catalog .mary-catalog__proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.mary-ui.mary-catalog .mary-quote {
    min-height: 220px;
}

/* --- CTA final --- */

.mary-ui.mary-catalog .mary-catalog__final {
    padding: 104px 0;
    text-align: center;
    background: var(--mary-purple-mid);
    color: var(--mary-white);
}

.mary-ui.mary-catalog .mary-catalog__final h2 {
    max-width: 800px;
    margin: 0 auto 18px;
    color: var(--mary-white);
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.mary-ui.mary-catalog .mary-catalog__final p {
    max-width: 720px;
    margin: 0 auto 28px;
    color: var(--mary-white);
    font-size: 18px;
    line-height: 1.65;
}

.mary-ui.mary-catalog .mary-catalog__final .mary-btn {
    min-height: 66px;
    padding: 20px 38px;
}

.mary-ui.mary-catalog .mary-catalog__empty {
    padding: 28px;
    border-radius: var(--mary-radius-sm);
    background: var(--mary-card-surface);
    color: var(--mary-muted);
}

/* --- Responsivo --- */

@media (max-width: 980px) {
    .mary-ui.mary-catalog .mary-catalog__hero-grid,
    .mary-ui.mary-catalog .mary-catalog__extra {
        grid-template-columns: 1fr;
    }

    .mary-ui.mary-catalog .mary-catalog__extra-media {
        height: 220px;
    }

    .mary-ui.mary-catalog .mary-catalog__benefit-grid,
    .mary-ui.mary-catalog .mary-catalog__proof-grid,
    .mary-ui.mary-catalog .mary-catalog__extras {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .mary-ui.mary-catalog .mary-catalog__section {
        padding: var(--mary-section-y) 0;
    }

    .mary-ui.mary-catalog .mary-catalog__hero {
        padding: 50px 0 42px;
    }

    .mary-ui.mary-catalog .mary-catalog__hero h1 {
        font-size: 42px;
    }

    .mary-ui.mary-catalog .mary-catalog__benefit-grid,
    .mary-ui.mary-catalog .mary-catalog__proof-grid,
    .mary-ui.mary-catalog .mary-catalog__extras {
        grid-template-columns: 1fr;
    }
}