/* TP V4 — responsive overrides (mobile-first base; bumps at 640/768/1024/1280) */

/* ── 640+ ────────────────────────────────────────────────────── */
@media (min-width: 40rem) {
    :root {
        --tp4-container-px: var(--tp4-s-6);
    }
    .tp4-hero { min-height: 36rem; padding-block: var(--tp4-s-24) var(--tp4-s-32); }
    .tp4-cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--tp4-s-6); }
    .tp4-trust__list { grid-template-columns: repeat(4, 1fr); }
    .tp4-vehicle-form { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: var(--tp4-s-5); }
    .tp4-vehicle-form__btn { padding: 0 var(--tp4-s-8); }
    .tp4-section__head { margin-block-end: var(--tp4-s-12); }
    .tp4-section__title { font-size: var(--tp4-fs-4xl); }
    .tp4-banner__title { font-size: var(--tp4-fs-4xl); }
    .tp4-banner__visual { display: block; }
    .tp4-banner__grid { grid-template-columns: 1.4fr 1fr; gap: var(--tp4-s-12); }
    .tp4-cta-strip__inner { grid-template-columns: 1fr auto; gap: var(--tp4-s-10); }
    .tp4-cta-strip__title { font-size: var(--tp4-fs-3xl); }
    .tp4-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--tp4-s-8); }
    .tp4-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── 768+ ────────────────────────────────────────────────────── */
@media (min-width: 48rem) {
    .tp4-hero__title { font-size: var(--tp4-fs-5xl); }
    .tp4-hero__sub { font-size: var(--tp4-fs-xl); }
    .tp4-vehicle-card { padding: var(--tp4-s-10); }
    .tp4-banner { padding-block: var(--tp4-s-20); }
}

/* ── 1024+ ───────────────────────────────────────────────────── */
@media (min-width: 64rem) {
    :root {
        --tp4-section-py: var(--tp4-section-py-lg);
        --tp4-container-px: var(--tp4-s-8);
    }
    .tp4-hero { min-height: 42rem; }
    .tp4-hero__title { font-size: var(--tp4-fs-6xl); }
    .tp4-section__title { font-size: var(--tp4-fs-4xl); }
    .tp4-trust__value { font-size: var(--tp4-fs-4xl); }
    .tp4-banner__title { font-size: clamp(var(--tp4-fs-4xl), 4vw, var(--tp4-fs-5xl)); }
    .tp4-banner__shape { width: 32rem; height: 32rem; }
    .tp4-footer { padding-block: var(--tp4-s-20) var(--tp4-s-10); }
}

/* ── 1280+ (wide) ────────────────────────────────────────────── */
@media (min-width: 80rem) {
    .tp4-vehicle-card { padding: var(--tp4-s-12); }
}

/* ── Blindagem overflow-x mobile (2026-08-21) ────────────────────
 * O utilizador reportou o mobile "desformatado / tudo sobreposto" na Loja
 * e na home. Causa raiz: campos de formulário (select/input) têm o default
 * min-width:auto, logo NÃO encolhem abaixo da largura do seu conteúdo (ex.
 * "Seleccione a marca…") e empurram o cartão/grelha para lá do viewport de
 * 390px. Corrige-se forçando min-width:0 + width:100% nos campos, empilhando
 * o formulário de viatura a 1 coluna, e um clip defensivo no body.
 * Esta folha (tp4-responsive) carrega DEPOIS de homepage/woo → ganha a cascata.
 * Fica só no tema Inteligente (estes ficheiros só carregam na famain). */
@media (max-width: 767px) {
    body.tp4-theme { overflow-x: clip; }

    /* Home — cascata Ano→Marca→Modelo empilhada + campos encolhíveis */
    .tp4-vehicle-form.tp4-vehicle-form--adv { grid-template-columns: 1fr; }
    .tp4-vehicle-form__field { min-width: 0; }
    .tp4-vehicle-form__field select,
    .tp4-vehicle-form__field input {
        min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box;
    }
    .tp4-hero__title, .tp4-shop2__title { overflow-wrap: break-word; }

    /* Loja (shop2) — sidebar/filtros/ordenar não podem exceder o viewport */
    .tp4-shop2, .tp4-shop2__layout, .tp4-shop2__sidebar, .tp4-shop2__filters,
    .tp4-shop2__filter-block, .tp4-shop2__main, .tp4-shop2__hero { min-width: 0; max-width: 100%; }
    .tp4-shop2 select, .tp4-shop2 input,
    .tp4-shop2 .orderby, .tp4-shop2__searchinput {
        min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box;
    }
    .tp4-shop2__hero { flex-wrap: wrap; }
    .tp4-shop2__hero-right { width: 100%; }
    .tp4-shop2__sort { display: flex; width: 100%; box-sizing: border-box; }
    .tp4-shop2__sort .woocommerce-ordering { flex: 1 1 auto; min-width: 0; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
    .tp4-topbar, .tp4-header, .tp4-cta-strip, .tp4-footer { display: none; }
    .tp4-hero { color: var(--tp4-text); padding-block: var(--tp4-s-8); min-height: 0; }
    .tp4-hero__bg, .tp4-hero__overlay { display: none; }
}