/* ==========================================================================
   Content Pages — Our Story, Clean Philosophy, Support
   ========================================================================== */

/* Shared hero */
.sc-story-hero,
.sc-clean-hero,
.sc-support-hero {
    padding: var(--space-4xl) 0 var(--space-2xl);
}

.sc-story-hero h1,
.sc-clean-hero h1,
.sc-support-hero h1 {
    margin-bottom: var(--space-md);
}

/* Our Story — Alternating blocks */
.sc-story__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    margin-bottom: var(--space-4xl);
}

.sc-story__block--text-left {
    direction: ltr;
}

@media (max-width: 768px) {
    .sc-story__block {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

.sc-story__image-placeholder {
    aspect-ratio: 4 / 5;
    background: var(--color-sand);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-driftwood);
    font-size: var(--fs-sm);
}

.sc-story__text h2 {
    margin-bottom: var(--space-lg);
}

.sc-story__text p {
    color: var(--color-driftwood);
    margin-bottom: var(--space-md);
}

/* Values grid */
.sc-story__values {
    margin: var(--space-4xl) 0;
}

.sc-story__values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 768px) {
    .sc-story__values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sc-story__value {
    text-align: center;
    padding: var(--space-xl);
}

.sc-story__value-icon {
    width: 40px;
    height: 40px;
    color: var(--color-ocean);
    margin: 0 auto var(--space-md);
}

.sc-story__value h4 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-sm);
}

.sc-story__value p {
    font-size: var(--fs-sm);
    color: var(--color-driftwood);
}

/* Clean Philosophy */
.sc-clean__section {
    margin-bottom: var(--space-4xl);
}

.sc-clean__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 1024px) {
    .sc-clean__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sc-clean__card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-2xl);
    text-align: center;
    border: 1px solid var(--color-sand);
}

.sc-clean__card svg {
    width: 36px;
    height: 36px;
    color: var(--color-ocean);
    margin: 0 auto var(--space-md);
}

.sc-clean__card h4 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-sm);
}

.sc-clean__card p {
    font-size: var(--fs-sm);
    color: var(--color-driftwood);
}

/* Banned ingredients */
.sc-clean__leave-out {
    background: var(--color-sand);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
}

.sc-clean__banned {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .sc-clean__banned {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sc-clean__banned-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--fw-medium);
}

.sc-clean__banned-item svg {
    width: 18px;
    height: 18px;
    color: var(--color-error);
}

/* Certifications */
.sc-clean__certs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

.sc-clean__cert {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 140px;
}

.sc-clean__cert svg {
    width: 32px;
    height: 32px;
    color: var(--color-ocean);
    margin-bottom: var(--space-sm);
}

.sc-clean__cert strong {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-xs);
}

.sc-clean__cert span {
    font-size: var(--fs-xs);
    color: var(--color-driftwood);
}

/* Support / FAQ */
.sc-support__search {
    margin-bottom: var(--space-2xl);
}

.sc-support__search-input {
    font-size: var(--fs-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-full);
}

.sc-support__category {
    margin-bottom: var(--space-2xl);
}

.sc-support__category-title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-sand);
}

.sc-support__contact {
    margin-top: var(--space-4xl);
    padding: var(--space-3xl);
    background: var(--color-sand);
    border-radius: var(--radius-lg);
}