/* ============ Página do configurador: introdução e "Com fecho ou permanente?" ============
   design_handoff_configurador_tema. O configurador (shortcode do plugin) fica entre os dois e
   não é tocado: a introdução vai por cima dele, alinhada à coluna dos controlos em desktop. */

/* ---------- Introdução ---------- */
.fbs-config-intro {
  padding: 20px var(--fbs-pad-x) 16px;
}
.fbs-config-intro .fbs-config-intro__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
}
.fbs-config-intro__text {
  max-width: 480px;
  margin: 12px 0 0;
  font: 400 14px/1.6 var(--fbs-body);
  color: var(--fbs-muted);
}
.fbs-config-intro__facts {
  display: flex;
  flex-wrap: wrap;
  margin: 14px 0 0;
  font: 600 10px/1.6 var(--fbs-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fbs-ink);
}
.fbs-config-intro__facts span:not(:last-child)::after {
  /* o separador fica no fim da linha quando a frase parte (nunca no início da seguinte) */
  content: '·';
  margin: 0 8px;
  color: var(--fbs-accent);
}
/* "← Designs" (inc/fbs-design-system.php, fbs_config_back_link()): só existe no mobile. */
.fbs-config-back {
  display: none;
}
/* O prazo de entrega no "O teu preço" do configurador (fbs-config.js): a folha só abre no mobile. */
.fbs-config-delivery {
  margin: 8px 0 0;
  font: 500 12.5px/1.45 var(--fbs-body);
  color: var(--fbs-muted);
}
/* Mobile (Daniel, 21/10/2026): a grelha dos designs já disse o que a introdução diz, e ela
   empurrava a pulseira para baixo. Fica só a linha "← Designs"; o H1 continua no HTML, escondido
   como .fbs-visually-hidden (leitores de ecrã e SEO), sem ocupar espaço. Em max-width, e não no
   bloco base, para o tablet e o desktop ficarem exatamente como estavam. */
@media (max-width: 699px) {
  .fbs-config-intro {
    padding: 0;
  }
  .fbs-config-intro .fbs-config-intro__title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .fbs-config-intro__text,
  .fbs-config-intro__facts {
    display: none;
  }
  .fbs-config-back {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    min-height: 44px;
    padding: 0 16px;
    font: 600 13px/1 var(--fbs-body);
    color: var(--fbs-ink);
    text-decoration: none;
  }
  .fbs-config-back:hover,
  .fbs-config-back:focus-visible {
    color: var(--fbs-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .fbs-config-back:focus-visible {
    outline: 2px solid var(--fbs-accent);
    outline-offset: 3px;
  }
}
@media (min-width: 700px) {
  /* 28px de lado como o contentor do configurador; a margem dele (40px) junta-se à de baixo */
  .fbs-config-intro {
    padding: 32px 28px 0;
    margin-bottom: -16px;
  }
  .fbs-config-intro__inner {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fbs-ink);
    margin-bottom: 24px;
  }
  .fbs-config-intro .fbs-config-intro__title {
    font-size: 34px;
  }
}
@media (min-width: 1100px) {
  /* Alinhada à coluna dos controlos do configurador (520px, encostados à direita do contentor
     dele, assets/css/configurator.css do plugin). O contentor mudou no plugin 0.6.338: de
     1320px com 28px de margem para até 1920px com 40px. A classe fbs-config-wide no body
     (inc/fbs-design-system.php, pela versão do plugin) escolhe os valores certos.
     O configurador já tem 40px de margem em cima: a margem negativa deixa os 24px do design. */
  .fbs-config-intro {
    max-width: 1320px;
    margin: 0 auto -40px;
    padding: 40px 28px 0;
    display: flex;
    justify-content: flex-end;
  }
  .fbs-config-wide .fbs-config-intro {
    max-width: 1920px;
    padding: 40px 40px 0;
  }
  .fbs-config-intro__inner {
    width: 520px;
    max-width: 100%;
  }
  .fbs-config-intro .fbs-config-intro__title {
    font-size: 44px;
  }
}

/* ---------- Com fecho ou permanente? ---------- */
.fbs-config-compare {
  border-top: 1px solid var(--fbs-ink);
  margin-top: var(--fbs-sec);
}
.fbs-config-compare__cols {
  display: grid;
  gap: 28px;
}
.fbs-config-compare__col {
  padding-top: 18px;
  border-top: 1px solid var(--fbs-ink);
}
.fbs-config-compare__col--perm .fbs-kicker {
  color: var(--fbs-muted-2);
}
.fbs-config-compare .fbs-config-compare__title {
  margin: 10px 0 8px;
  font: 400 20px/1.2 var(--fbs-display);
  text-transform: uppercase;
}
.fbs-config-compare__col .fbs-actions {
  margin-top: 14px;
}
@media (min-width: 700px) {
  .fbs-config-compare__cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (min-width: 1100px) {
  .fbs-config-compare.fbs-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    column-gap: 96px;
  }
}