/* Travelcare — Blocos: ajustes de composição.
   Carregado depois do CSS do tema. */

.tcb{display:block}
.ph--1x1{aspect-ratio:1/1}

/* ── Correcção estrutural ─────────────────────────────────────
   Dentro de .pt__pin (flex em coluna), o .wrap tem margin-inline:auto.
   Em flexbox, margens automáticas no eixo transversal anulam o stretch,
   por isso o .wrap encolhia até ao tamanho do conteúdo e tudo aparecia
   espremido ao centro. Forçar width:100% devolve-lhe a largura toda.
   É o mesmo que o tema já faz em .hs__head e .hs__bar.            */
.tcb .pt__pin>.wrap{width:100%}
.tcb .pt__pin{padding-block:calc(var(--hh) + 3rem) var(--s-xl)}

/* Separadores à esquerda, painel à direita */
@media(min-width:64em){
  .tcb .pt__pin>.wrap{display:grid;
    grid-template-columns:minmax(13rem,17rem) 1fr;
    column-gap:clamp(3rem,6vw,6rem);align-items:start}
  .tcb .pt__pin>.wrap>.kicker,
  .tcb .pt__pin>.wrap>h2,
  .tcb .pt__pin>.wrap>.pt__tabs{grid-column:1}
  .tcb .pt__tabs{flex-direction:column;align-items:stretch;margin-block-end:0;
    gap:.55rem}
  .tcb .pt__tab{width:100%;text-align:start}
  .tcb .pt__panes{grid-column:2;grid-row:1/span 3;min-height:28rem}
  .tcb .pt__pane ul{columns:2;column-gap:3rem}
  .tcb .pt__pane li{break-inside:avoid}
}

/* Lista-índice sem ligação */
.tcb .idx__row{display:grid;grid-template-columns:2.6rem 1fr 1.6rem;
  align-items:center;gap:1rem;padding-block:1.15rem;
  border-block-end:1px solid var(--line)}

/* Módulos com nome: o nome respira melhor do que um número */
.tcb .mod b{display:block;margin-block-end:.7rem;text-transform:uppercase}

/* Texto nunca centrado */
.tcb .sec>.wrap>.rv{margin-inline:0}

/* ═══════════════ FUNDO OPACO EM TODAS AS SECÇÕES ═══════════════

   O topo da página inicial é "position:sticky": fica fixo enquanto o
   corpo da página sobe por cima, como uma cortina. Para isso resultar,
   o que sobe tem de ser opaco.

   Na maqueta havia um <div class="deck"> a envolver tudo o que vinha
   depois do topo, e era ele que dava o fundo. Ao passar para blocos,
   cada secção ficou independente e esse invólucro desapareceu — o que
   deixou as secções sem fundo transparentes, com o slider a ver-se
   por trás do texto.

   A correcção é dar fundo ao invólucro de cada bloco. Fica por baixo
   das secções, portanto não interfere com nenhuma cor já definida. */
/* O fundo sozinho não chega. O topo é "sticky", ou seja, posicionado —
   e num contexto de empilhamento os elementos posicionados pintam-se por
   cima dos fundos dos blocos normais, por muito opacos que sejam. Só com
   position:relative e z-index é que o bloco passa a subir por cima. */
.tcb{background:var(--paper);position:relative;z-index:1}

/* Dentro do slider é ao contrário: os slides voltam a ser transparentes e
   sem posicionamento, para o .hero continuar a ancorar-se ao slider. */
.hsl > .tcb{background:none;position:static;z-index:auto;height:auto}

/* O primeiro bloco depois do topo volta a ter o canto arredondado e a
   sombra que o descolava da fotografia. É o detalhe que dava a leitura
   de "cortina a subir" em vez de "secção a seguir a outra". */
/* Atenção ao :not(.hsl) — sem ele, esta regra apanhava também os slides
   dois e três, que são .tcb a seguir a .tcb dentro do slider. Ficavam com
   position:relative em vez de absolute, saíam da pilha e desapareciam. */
.hsl + .tcb > section,
:not(.hsl) > .tcb:has(> .hero) + .tcb > section{
  position:relative;z-index:1;
  border-start-start-radius:24px;border-start-end-radius:24px;
  box-shadow:0 -28px 64px rgba(16,38,43,.34)}

@media(max-width:47.99em){
  .hsl + .tcb > section,
  :not(.hsl) > .tcb:has(> .hero) + .tcb > section{
    border-start-start-radius:16px;border-start-end-radius:16px}
}

/* Rede de segurança: dentro do slider, um slide é sempre absoluto e sem
   cantos nem sombra, aconteça o que acontecer às regras acima. */
.hsl .hero{position:absolute;border-radius:0;box-shadow:none}