/* ===== Como Trabalhamos — page-specific styles ===== */

/* Warm page background: cream, with brown text */
.tenda-como-page {
    background: var(--tenda-cream);
    color: var(--tenda-brown);
}

/* ---- Alternating two-column sections ---- */
.tenda-como-section {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(56px, 8vw, 96px) 0;
    display: block;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

/* Section 2: image on the right, text on the left (desktop) */
.tenda-como-section--media-right .tenda-como-section__content {
    order: -1;
}

/* Section images */
.tenda-como-section__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(90, 46, 31, 0.22);
}

/* Section typography */
.tenda-como-section__title {
    font-family: var(--tenda-font-title);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--tenda-brown);
    margin: 0 0 0.75rem;
}

.tenda-como-section__subtitle {
    font-family: var(--tenda-font-title);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--tenda-terra-dark);
    margin: 0 0 1.5rem;
}

.tenda-como-section__text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--tenda-brown);
    margin: 0 0 1rem;
}

/* ---- Responsive: stack on mobile (image first, text below) ---- */
@media (max-width: 768px) {
    .tenda-como-section {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 48px 0;
    }

    /* Restore natural DOM order so the image comes first on mobile */
    .tenda-como-section--media-right .tenda-como-section__content {
        order: 0;
    }
}