/*
 * Páginas de praça (THC-6): Rio de Janeiro, Búzios e San Diego. Sobre a base de home.css, o que é só
 * daqui: cartões de aula com preço, praias e a faixa de instrutores montada por assets/js/praca.js.
 * O conteúdo é da página (blocos com estas classes; ponto de partida em patterns/praca-*.php).
 */

.s4a-heroi--praca { min-height: min(76vh, 700px) !important; }
.s4a-heroi--praca .s4a-heroi__texto { padding-bottom: 140px; }
.s4a-migalha { font-size: .9rem; opacity: .85; }
.s4a-migalha a:hover { text-decoration: underline; }
.s4a-heroi--praca h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }
.s4a-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s4a-chip { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .88rem; font-weight: 500; }

/* Tipos de aula: cartões de preço */
.s4a-aulas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.s4a-aulas--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.s4a-aula { display: flex; flex-direction: column; border-radius: var(--s4a-raio-g); padding: 32px 28px 28px; background: #fff; box-shadow: var(--s4a-sombra); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.s4a-aula > * { margin: 0; }
.s4a-aula:hover { transform: translateY(-4px); }
.s4a-aula--destaque { background: var(--s4a-azul-profundo); color: #fff; }
/* Duas classes: a regra geral da lista (.s4a-aula .wp-block-list li) vem depois e venceria o empate. */
.s4a-aula.s4a-aula--destaque :is(.s4a-aula__desc, .wp-block-list li) { color: rgba(255, 255, 255, .85); }
.s4a-aula__nome { font-size: 1.5rem; letter-spacing: -.02em; }
.s4a-aula__para { align-self: flex-start; margin-top: 10px !important; padding: 5px 11px; border-radius: 999px; background: var(--s4a-espuma); color: var(--s4a-azul-profundo); font-size: .82rem; font-weight: 600; }
.s4a-aula--destaque .s4a-aula__para { background: rgba(255, 255, 255, .14); color: #fff; }
.s4a-aula__desc { color: var(--s4a-texto-2); margin: 16px 0 20px !important; }
.s4a-aula__preco strong { font: 700 2.6rem/1 var(--s4a-titulos); letter-spacing: -.04em; }
.s4a-aula .wp-block-list { list-style: none; padding: 0; margin: 14px 0 26px !important; display: grid; gap: 8px; font-size: .95rem; }
.s4a-aula .wp-block-list li { display: flex; gap: 10px; color: var(--s4a-texto-2); }
.s4a-aula .wp-block-list li::before { content: "✓"; color: var(--s4a-azul-claro); font-weight: 700; }
.s4a-aula .s4a-acoes { margin-top: auto !important; }
.s4a-aula .s4a-botao, .s4a-aula .s4a-botao .wp-block-button__link { width: 100%; justify-content: center; }
.s4a-aula--destaque .s4a-botao .wp-block-button__link { background: #fff; color: var(--s4a-azul-profundo) !important; }

/* Praias: com foto quando se sabe que a foto é daquela praia; senão, cartão de texto */
.s4a-praias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.s4a-praias--1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
.s4a-praia { border-radius: var(--s4a-raio-m); overflow: hidden; background: #fff; box-shadow: var(--s4a-sombra); }
.s4a-praia .wp-block-image { margin: 0; }
.s4a-praia .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.s4a-praias--1 .s4a-praia .wp-block-image img { aspect-ratio: 16 / 9; }
.s4a-praia__texto { padding: 18px 20px 22px; }
.s4a-praia--texto { display: flex; align-items: flex-end; }
.s4a-praia--texto .s4a-praia__texto { padding: 24px; }
.s4a-praia__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px 14px 14px 4px; background: var(--s4a-espuma); margin-bottom: 16px !important; font-size: 1.3rem; }
.s4a-praia h3 { font-size: 1.2rem; letter-spacing: -.015em; margin-bottom: 6px; }
.s4a-praia p:not(.s4a-praia__icone) { color: var(--s4a-texto-2); font-size: .95rem; line-height: 1.5; }

/* Instrutores: faixa que rola de lado; vazia (e escondida) até o praca.js preencher */
.s4a-instrutores { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.s4a-instrutores:empty { display: none; }
.s4a-instrutor { scroll-snap-align: start; position: relative; aspect-ratio: 3 / 4; border-radius: var(--s4a-raio-m); overflow: hidden; color: #fff !important; isolation: isolate; background: var(--s4a-azul-profundo); box-shadow: var(--s4a-sombra); transition: transform .3s; }
.s4a-instrutor:hover { transform: translateY(-4px); }
.s4a-instrutor:active { transform: scale(.985); }
.s4a-instrutor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.s4a-instrutor::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(12, 32, 55, .85)); }
.s4a-instrutor__texto { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.s4a-instrutor h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.s4a-instrutor span { font-size: .85rem; opacity: .85; }

@media (max-width: 900px) {
	.s4a-aulas, .s4a-aulas--2 { grid-template-columns: 1fr; }
	.s4a-praias { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.s4a-praias { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.s4a-aula, .s4a-instrutor { transition: none; transform: none !important; }
}