/* ==========================================================================
   FUTAI INTERNACIONAL — RESPONSIVE
   Mobile-first: style.css contém a base mobile.
   Este ficheiro só ACRESCENTA regras a partir dos breakpoints abaixo.
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
   ========================================================================== */

/* ---------- Container ---------- */
@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-8); }
}

/* ---------- Secções ---------- */
@media (min-width: 1024px) {
  .section { padding-block: var(--space-20); }
}

/* ---------- Grid utilitário ---------- */
/* Uso: <div class="grid grid--2"> ... a partir de md vira 2 colunas, etc. */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Visibilidade condicional ---------- */
.hide-mobile { display: none; }
.hide-desktop { display: block; }

@media (min-width: 1024px) {
  .hide-mobile { display: block; }
  .hide-desktop { display: none; }
}

/* ---------- Botões ---------- */
/* No mobile, CTAs principais ocupam a largura toda (fricção mínima) */
.btn--block-mobile { width: 100%; }
@media (min-width: 640px) {
  .btn--block-mobile { width: auto; }
}

/* ---------- Modal ---------- */
/* já tratado em style.css (bottom-sheet no mobile, centrado no desktop) */

/* ---------- Cards ---------- */
@media (min-width: 480px) {
  .card__media { aspect-ratio: 4 / 3; }
}

/* ---------- Footer ---------- */
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ---------- Homepage ---------- */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .hero__actions .btn { flex: 0 1 auto; }
}

@media (min-width: 768px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .trust-strip { grid-template-columns: repeat(4, 1fr); }
  .path-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Marcas (marcas.html) ---------- */
@media (min-width: 1024px) {
  .brand-feature { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .brand-feature--reverse .brand-feature__media { order: 2; }
  .brand-feature--reverse .brand-feature__content { order: 1; }
}

/* ---------- Filtros de produtos (produtos.html) ---------- */
@media (min-width: 768px) {
  .product-filters { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
}