/* Material Guide single page (#1207) — hero + prose content.
   Product grid/card/breadcrumb rules come from shop.css (co-enqueued). */

.material-guide {
    padding: 48px 0 80px;
}

.material-guide-hero {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.material-guide-title {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 600;
    color: var(--color-black);
    margin: 0 0 12px;
}

.material-guide-excerpt {
    font-size: 18px;
    color: var(--color-gray-700);
    margin: 0;
}

.material-guide-content {
    max-width: 720px;
    margin: 0 auto 32px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-800);
}

.material-guide-content p {
    margin: 0 0 1.2em;
}

.material-guide-content h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 1.6em 0 0.6em;
    color: var(--color-black);
}

.material-guide-archive-link {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.material-guide-related .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.material-guide-related .section-header h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--color-black);
}

.material-guide-related .section-link {
    font-size: 14px;
    color: var(--color-gray-600);
}

@media (max-width: 768px) {
    .material-guide {
        padding: 32px 0 56px;
    }
}