/* ═══════════════════════════════════════════
   PAGES.CSS — páginas internas e páginas de unidade
═══════════════════════════════════════════ */

/* ─── Abertura: módulo de título + foto ─── */
.page-head {
    padding-top: var(--gap);
}

.page-head__board {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    min-height: min(640px, calc(100svh - var(--header-h) - 24px));
}

.page-head__title {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(24px, 3.4vw, 56px);
    container-type: inline-size;
}

.page-head__title h1 {
    font-size: min(var(--fs-display), 10.5cqw);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin-top: 24px;
}

.page-head__title .t-lead {
    max-width: 36ch;
    margin-top: 20px;
}

.page-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.page-head__photo {
    grid-column: 8 / span 5;
    min-height: 320px;
}

.page-head__photo--stack {
    display: grid;
    gap: var(--gap);
    padding: 0;
    background: none;
}

.page-head__photo--stack .tile {
    min-height: 0;
}

.page-head .crumbs {
    color: var(--on-dark-soft);
}

.page-head .crumbs a {
    color: #fff;
}

/* ─── Bloco de texto: título à esquerda, texto à direita ─── */
.text-block {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px var(--gap);
}

.text-block > h2 {
    grid-column: 1 / span 5;
    font-size: var(--fs-h);
}

.text-block__body {
    grid-column: 7 / span 6;
}

.text-block__body .t-lead {
    margin-bottom: 24px;
}

/* ─── Colunas com termo em negrito ─── */
.run-ins {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 32px 24px;
}

.run-ins p {
    color: var(--ink-soft);
}

.run-ins strong {
    color: var(--ink);
    font-weight: 700;
}

/* ─── Linha do tempo em módulos ─── */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.timeline .tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 300px;
}

.timeline h3 {
    font-size: var(--fs-h);
    letter-spacing: -0.03em;
}

.timeline p {
    margin-top: auto;
}

/* ─── Valores: lista em tipo grande ─── */
.values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.values li {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px;
    align-items: baseline;
    padding: 28px clamp(20px, 2.4vw, 36px);
    border-radius: var(--r);
    background: var(--navy);
    color: #fff;
}

.values li:nth-child(4n + 2),
.values li:nth-child(4n + 3) {
    background: var(--navy-2);
}

.values h3 {
    font-size: var(--fs-lead);
}

.values p {
    color: var(--on-dark-soft);
}

/* ─── Serviços: foto e texto alternados ─── */
.service {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.service + .service {
    margin-top: clamp(48px, 6vw, 96px);
}

.service__photo {
    grid-column: 1 / span 5;
    min-height: 360px;
}

.service__text {
    grid-column: 6 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.service:nth-child(even) .service__photo {
    grid-column: 8 / span 5;
    grid-row: 1;
}

.service:nth-child(even) .service__text {
    grid-column: 1 / span 7;
    grid-row: 1;
}

.service__text h2 {
    font-size: var(--fs-h);
    margin-bottom: 16px;
}

.service__text .t-lead {
    max-width: 40ch;
}

.service__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: var(--fs-small);
    font-weight: 600;
}

.service__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* ─── Modelos de armário ─── */
.models {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.models .tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 280px;
}

.models strong {
    display: block;
    font-size: var(--fs-display);
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.models h3 {
    font-size: var(--fs-lead);
    margin-bottom: 8px;
}

/* ─── Galeria em módulos ─── */
.gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 120px;
    gap: var(--gap);
}

.gallery .tile--photo {
    grid-column: span 4;
    grid-row: span 3;
}

.gallery .tile--photo.is-wide {
    grid-column: span 8;
}

.gallery .tile--photo.is-tall {
    grid-row: span 5;
}

.gallery .tile--photo.is-half {
    grid-column: span 6;
}

.gallery figure {
    margin: 0;
}

/* ─── Parceiros ─── */
.partners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.partner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.partner__logo {
    height: 72px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.partner__logo--big {
    height: 140px;
}

.partner h2 {
    font-size: var(--fs-h);
}

.partner .btn {
    align-self: flex-start;
    margin-top: auto;
}

.partner .seal-teleton {
    max-width: 480px;
}

/* ─── Contato ─── */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.contact-grid__form {
    grid-column: 1 / span 7;
}

.contact-grid__info {
    grid-column: 8 / span 5;
    display: grid;
    gap: var(--gap);
    align-content: start;
}

.form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px var(--gap);
}

.form h2 {
    grid-column: 1 / -1;
    font-size: var(--fs-h);
}

.form > p {
    grid-column: 1 / -1;
}

.field {
    display: grid;
    gap: 6px;
}

.field--full {
    grid-column: 1 / -1;
}

.field label {
    font-size: var(--fs-small);
    font-weight: 600;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border: 2px solid transparent;
    border-radius: var(--r);
    background: #fff;
    font-size: var(--fs-body);
    transition: border-color 0.2s ease;
}

.field textarea {
    min-height: 140px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue);
}

.form .btn {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 56px;
    padding: 0 28px;
}

.form__note {
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

.map-tile {
    padding: 0;
    min-height: 320px;
}

.map-tile iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}

/* ─── Página de unidade ─── */
.unit-board {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.unit-board__title {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 420px;
    padding: clamp(24px, 3.4vw, 56px);
    container-type: inline-size;
}

.unit-board__title h1 {
    font-size: min(var(--fs-display), 9.6cqw);
    line-height: 1;
    letter-spacing: -0.035em;
    margin-top: 24px;
}

.unit-board__title .t-lead {
    margin-top: 16px;
}

.unit-board__map {
    grid-column: 8 / span 5;
    grid-row: span 2;
}

.unit-board__address {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.unit-board__address address {
    font-style: normal;
    font-size: var(--fs-lead);
    line-height: 1.35;
}

.unit-board__action {
    grid-column: 5 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.unit-board__action h2,
.unit-board__address h2 {
    font-size: var(--fs-lead);
}

.unit-board__action .btn {
    align-self: flex-start;
}

.unit-info {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.unit-info__text {
    grid-column: 1 / span 7;
}

.unit-info__text h2 {
    font-size: var(--fs-h);
    margin-bottom: 20px;
}

.unit-info__text ul {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.unit-info__text li {
    padding-left: 20px;
    position: relative;
}

.unit-info__text li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--blue);
}

.unit-info__photo {
    grid-column: 9 / span 4;
    min-height: 300px;
}

.nearby h2 {
    font-size: var(--fs-h);
    margin-bottom: 24px;
}

.nearby ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.nearby a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 120px;
    height: 100%;
    padding: 20px 24px;
    border-radius: var(--r);
    background: var(--tile);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.nearby a:hover {
    background: var(--tile-2);
}

.nearby strong {
    font-size: var(--fs-body);
}

.nearby span {
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

.instagram-tile {
    display: grid;
    place-items: center;
    padding: 24px;
}

/* ─── 404 ─── */
.not-found {
    min-height: 60svh;
}

/* ─── Responsivo ─── */
@media (max-width: 1024px) {
    .page-head__title,
    .page-head__photo,
    .unit-board__title,
    .unit-board__map,
    .unit-board__address,
    .unit-board__action,
    .unit-info__text,
    .unit-info__photo,
    .contact-grid__form,
    .contact-grid__info,
    .text-block > h2,
    .text-block__body {
        grid-column: 1 / -1;
    }

    .unit-board__map {
        grid-row: auto;
        min-height: 320px;
    }

    .page-head__board {
        min-height: 0;
    }

    .page-head__photo {
        min-height: 300px;
    }

    .timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .values {
        grid-template-columns: 1fr;
    }

    .service__photo,
    .service:nth-child(even) .service__photo,
    .service__text,
    .service:nth-child(even) .service__text {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .service__photo {
        min-height: 260px;
    }

    .models,
    .nearby ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .run-ins {
        --cols: 2;
    }

    .partners {
        grid-template-columns: 1fr;
    }

    .gallery .tile--photo,
    .gallery .tile--photo.is-wide,
    .gallery .tile--photo.is-half {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .timeline,
    .models,
    .nearby ul,
    .form {
        grid-template-columns: 1fr;
    }

    .run-ins {
        --cols: 1;
    }

    .values li {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .timeline .tile,
    .models .tile {
        min-height: 0;
    }

    .gallery {
        grid-auto-rows: 90px;
    }

    .gallery .tile--photo,
    .gallery .tile--photo.is-wide,
    .gallery .tile--photo.is-half {
        grid-column: 1 / -1;
    }

    .unit-board__title {
        min-height: 0;
    }

    .form .btn {
        width: 100%;
    }
}