/* pages.css — estilos específicos de página (antes eram <style> scoped no Astro).
   Editável à mão como o site.css. */

/* ── Home / Hero ────────────────────────────────────────────────────────── */
.hero__cta { margin-top: var(--space-sm); margin-bottom: var(--space-md); align-self: flex-start; }

/* ── Acomodações (listagem) ─────────────────────────────────────────────── */
.acomodacoes__filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.acomodacoes__count { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.acomodacoes__count strong { color: var(--color-text-primary); }
.acomodacoes__list { display: flex; flex-direction: column; gap: var(--space-md); }

/* ── Acomodação (detalhe) ───────────────────────────────────────────────── */
.room-detail__quick-meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.room-detail__quick-meta span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.room-detail__gallery { margin-top: var(--space-lg); }
.room-detail { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); padding-block: var(--space-2xl); }
.room-detail__heading { font-size: var(--font-size-xl); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-soft); margin-bottom: var(--space-md); }
.room-detail__tagline { font-size: var(--font-size-lg); color: var(--color-text-primary); font-weight: var(--font-weight-medium); margin-bottom: var(--space-sm); }
.room-detail__amenities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.room-detail__included { display: flex; flex-direction: column; gap: var(--space-sm); }
.room-detail__included li { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.room-detail__included li .icon { color: var(--color-brand-primary); flex-shrink: 0; margin-top: 0.1em; }
@media (min-width: 1024px) { .room-detail { grid-template-columns: 1fr 380px; align-items: start; } }

/* ── Estrutura ──────────────────────────────────────────────────────────── */
.estrutura__row { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; max-width: 1200px; margin-inline: auto; padding: var(--space-2xl) var(--space-md); }
.estrutura__media { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background-size: cover; background-position: center; background-color: var(--color-bg-soft); }
.estrutura__tag { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--color-brand-primary); margin-bottom: var(--space-xs); }
.estrutura__text h2 { margin-bottom: var(--space-sm); }
.estrutura__cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.estrutura__prose p + p { margin-top: var(--space-sm); }
@media (min-width: 768px) { .estrutura__row { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } .estrutura__row--reverse .estrutura__media-col { order: 2; } }

/* ── Carrossel (estrutura) ──────────────────────────────────────────────── */
/* min-width: 0 nos filhos do grid → impede a faixa de thumbs de esticar a
   coluna e criar scroll horizontal na página. */
.estrutura__media-col, .estrutura__text, .carousel, .carousel__thumbs { min-width: 0; }

.carousel { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; }
.carousel__main { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; background-color: var(--color-bg-soft); }
.carousel__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.45); color: var(--color-neutral-0);
  font-size: var(--font-size-2xl); line-height: 1; cursor: pointer;
  transition: background-color var(--transition-fast);
}
.carousel__nav:hover { background-color: rgba(0, 0, 0, 0.75); }
.carousel__nav--prev { left: var(--space-sm); }
.carousel__nav--next { right: var(--space-sm); }
.carousel__counter {
  position: absolute; bottom: var(--space-sm); right: var(--space-sm);
  background-color: rgba(0, 0, 0, 0.55); color: var(--color-neutral-0);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
}

/* Dots (bolinhas): compacto, sem scroll, escala pra qualquer nº de fotos. */
.carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); }
.carousel__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: var(--radius-full); background-color: var(--color-border-strong); cursor: pointer; transition: background-color var(--transition-fast), transform var(--transition-fast); }
.carousel__dot:hover { background-color: var(--color-brand-primary-dark); }
.carousel__dot.is-active { background-color: var(--color-brand-primary); transform: scale(1.3); }

/* ── História ───────────────────────────────────────────────────────────── */
.historia__row { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; max-width: 1200px; margin-inline: auto; padding: var(--space-2xl) var(--space-md); }
.historia__media { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background-size: cover; background-position: center; background-color: var(--color-bg-soft); }
.historia__text h2 { margin-bottom: var(--space-md); }
.historia__text p { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
@media (min-width: 768px) { .historia__row { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } .historia__row--reverse .historia__media { order: 2; } }

/* ── Turismo ────────────────────────────────────────────────────────────── */
.turismo__card { background-color: var(--color-neutral-0); border: 1px solid var(--color-border-base); border-radius: var(--radius-xl); overflow: hidden; }
.turismo__media { aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--color-bg-soft); }
.turismo__body { padding: var(--space-md); }
.turismo__cat { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.turismo__body h3 { margin-bottom: var(--space-2xs); }

/* ── Localização ────────────────────────────────────────────────────────── */
.localizacao__address { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); }
.localizacao__route { background-color: var(--color-neutral-0); border: 1px solid var(--color-border-base); border-radius: var(--radius-xl); padding: var(--space-lg); }
.localizacao__route .icon { color: var(--color-brand-primary); margin-bottom: var(--space-sm); }
.localizacao__route h3 { margin-bottom: var(--space-xs); }
.localizacao__spot { background-color: var(--color-neutral-0); border: 1px solid var(--color-border-base); border-radius: var(--radius-xl); overflow: hidden; }
.localizacao__spot-media { aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--color-bg-soft); }
.localizacao__spot-body { padding: var(--space-md); }
.localizacao__spot-cat { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.localizacao__spot-body h3 { margin-bottom: var(--space-2xs); }

/* ── Tarifário ──────────────────────────────────────────────────────────── */
.tarifario__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
.tarifario__cta { background-color: var(--color-brand-primary); color: var(--color-text-inverted); border-radius: var(--radius-xl); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.tarifario__cta h3 { color: var(--color-text-inverted); }
.tarifario__cta p { color: rgba(255, 255, 255, 0.92); line-height: var(--line-height-relaxed); }
@media (min-width: 1024px) { .tarifario__grid { grid-template-columns: 2fr 1fr; } }

/* ── Políticas ──────────────────────────────────────────────────────────── */
.politicas { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
.politicas__toc-title { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.politicas__toc ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.politicas__toc a { font-weight: var(--font-weight-medium); }
.politicas__section h2 { margin-bottom: var(--space-md); scroll-margin-top: var(--space-2xl); }
.politicas__section p + p { margin-top: var(--space-sm); }
@media (min-width: 1024px) { .politicas { grid-template-columns: 240px 1fr; gap: var(--space-2xl); } .politicas__toc { position: sticky; top: calc(72px + var(--space-md)); } }

/* ── Fotos ──────────────────────────────────────────────────────────────── */
.fotos__grid { columns: 1; column-gap: var(--space-md); }
.fotos__item { display: block; width: 100%; margin-bottom: var(--space-md); break-inside: avoid; border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; border: 1px solid var(--color-border-base); }
.fotos__item img { width: 100%; height: auto; transition: transform var(--transition-base); }
.fotos__item:hover img { transform: scale(1.03); }
.fotos__dialog { max-width: min(92vw, 1000px); max-height: 90vh; padding: 0; border: none; border-radius: var(--radius-lg); background: transparent; }
.fotos__dialog::backdrop { background-color: rgba(0, 0, 0, 0.8); }
.fotos__dialog img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.fotos__close { position: absolute; top: var(--space-xs); right: var(--space-sm); color: var(--color-neutral-0); font-size: var(--font-size-3xl); line-height: 1; z-index: 1; }
@media (min-width: 640px) { .fotos__grid { columns: 2; } }
@media (min-width: 1024px) { .fotos__grid { columns: 3; } }