@import url("tokens.css");
/* Tela de detalhe – Layout Amplo (Stitch: Detalhes do Destino) */

.location-detail-stitch {
  padding: 2rem 1.5rem 4rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Detalhe destino: coluna principal mais larga para galeria 70% + sidebar */
.detalhe-layout-amplo.location-detail-stitch {
  max-width: 1200px;
}

/* Galeria + sidebar prática (desktop: ~70% / ~30%) */
.detalhe-galeria-sidebar-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 0;
}

.detalhe-galeria-col {
  min-width: 0;
}

.detalhe-galeria-col > .detalhe-bloco {
  margin-bottom: 0;
}

.detalhe-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.detalhe-sidebar-col .detalhe-bloco {
  margin-bottom: 0;
}

/* Sidebar estreita: horários legíveis e botão Maps em largura útil */
.detalhe-sidebar-col .detalhe-horarios-item {
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.detalhe-sidebar-col .detalhe-como-chegar .btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .detalhe-galeria-sidebar-row {
    grid-template-columns: 1fr;
  }

  .detalhe-galeria-col > .detalhe-bloco {
    margin-bottom: 0;
  }
}

.location-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--primary, var(--color-primary));
  font-weight: 600;
  text-decoration: none;
}
.location-detail-back:hover {
  text-decoration: underline;
}

.location-detail-section {
  min-height: 200px;
}

.location-detail-card,
.detalhe-card {
  padding: 2rem;
}

/* Hero do detalhe (tag + título + subtítulo + capa opcional) */
.detalhe-hero {
  position: relative;
  margin-bottom: 2.5rem;
  border-radius: 1rem;
  overflow: hidden;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, var(--color-bg), var(--color-hero-grad-end));
}
.detalhe-hero-has-image {
  color: var(--color-on-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
}
.detalhe-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 35%, transparent),
    color-mix(in srgb, var(--color-primary) 92%, #000000)
  );
}
.detalhe-hero-content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}
.detalhe-hero-has-image .detalhe-titulo {
  color: var(--color-on-primary);
}
.detalhe-hero-has-image .detalhe-tag {
  color: color-mix(in srgb, var(--color-on-primary) 82%, var(--color-accent));
}
.detalhe-hero-has-image .detalhe-subtitulo,
.detalhe-hero-has-image .detalhe-meta {
  color: color-mix(in srgb, var(--color-on-primary) 88%, var(--color-bg));
}
.detalhe-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary, var(--color-primary));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.detalhe-titulo {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin: 0 0 0.5rem;
}
.detalhe-subtitulo {
  color: var(--text-muted, var(--color-muted-ink));
  margin: 0 0 0.75rem;
  font-size: 1rem;
}
.detalhe-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
}
.detalhe-meta .material-symbols-outlined {
  color: var(--primary, var(--color-primary));
  font-size: 1.25rem;
}

@media (max-width: 640px) {
  .detalhe-hero {
    padding: 1.75rem 1.25rem;
  }
  .detalhe-hero-has-image {
    min-height: 42vh;
  }
}

/* Bloco de intro */
.detalhe-intro {
  margin-bottom: 2rem;
}
.detalhe-intro-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.detalhe-intro-titulo .material-symbols-outlined {
  color: var(--primary, var(--color-primary));
}
.detalhe-intro-texto {
  color: var(--text-muted, var(--color-muted-ink));
  line-height: 1.6;
  margin: 0;
}

/* Blocos genéricos (Contato, Horários, Galeria, Como Chegar) */
.detalhe-bloco {
  background: var(--color-surface);
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.detalhe-bloco-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.detalhe-bloco-titulo .material-symbols-outlined {
  color: var(--primary, var(--color-primary));
  font-size: 1.25rem;
}

/* Grid de contato */
.detalhe-contato-grid {
  display: grid;
  gap: 1rem;
}
.detalhe-contato-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.detalhe-contato-item .material-symbols-outlined {
  color: var(--primary, var(--color-primary));
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.detalhe-contato-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, var(--color-muted-ink));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}
.detalhe-contato-valor {
  font-size: 0.9375rem;
  color: var(--text, var(--color-on-surface));
  text-decoration: none;
}
a.detalhe-contato-valor:hover {
  color: var(--primary, var(--color-primary));
  text-decoration: underline;
}

/* Horários */
.detalhe-horarios-local {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--text, var(--color-on-surface));
  line-height: 1.5;
  white-space: pre-line;
}

.detalhe-horarios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--text, var(--color-on-surface));
}

.detalhe-horarios-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--color-border);
}

.detalhe-horarios-item:last-child {
  border-bottom: none;
}

.detalhe-horarios-dia {
  font-weight: 600;
  color: var(--text, var(--color-on-surface));
  text-transform: capitalize;
}

.detalhe-horarios-valor {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, var(--color-muted-ink));
  text-align: right;
}

.detalhe-horarios-vazio {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted, var(--color-muted-ink));
}

/* Galeria placeholder */
.detalhe-galeria-placeholder .detalhe-galeria-texto {
  margin: 0;
  color: var(--text-muted, var(--color-muted-ink));
  font-size: 0.9375rem;
}

/* Galeria – grid de thumbnails */
.detalhe-galeria-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.detalhe-galeria-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-surface));
  cursor: pointer;
}

.detalhe-galeria-img {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}

.detalhe-galeria-item:hover .detalhe-galeria-img,
.detalhe-galeria-item:focus-within .detalhe-galeria-img {
  transform: scale(1.03);
  filter: brightness(1.02);
}

@media (min-width: 640px) {
  .detalhe-galeria-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .detalhe-galeria-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Lightbox de galeria */
.detalhe-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-scrim-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1.5rem;
}

.detalhe-lightbox-inner {
  position: relative;
  max-width: 960px;
  width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detalhe-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}

.detalhe-lightbox-img {
  max-width: 100%;
  max-height: min(80vh, 600px);
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 20px 45px var(--color-scrim-shadow);
  display: block;
}

.detalhe-lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
  background: var(--color-scrim-control-strong);
  color: var(--color-on-primary);
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.detalhe-lightbox-close .material-symbols-outlined {
  font-size: 1.375rem;
}

.detalhe-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: var(--color-scrim-control);
  color: var(--color-on-primary);
  border-radius: 999px;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.detalhe-lightbox-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.detalhe-lightbox-nav .material-symbols-outlined {
  font-size: 1.75rem;
}

.detalhe-lightbox-prev {
  left: 0.25rem;
}

.detalhe-lightbox-next {
  right: 0.25rem;
}

/* Como Chegar */
.detalhe-como-chegar .detalhe-endereco {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--text-muted, var(--color-muted-ink));
  font-size: 0.9375rem;
}
.detalhe-como-chegar .detalhe-endereco .material-symbols-outlined {
  color: var(--primary, var(--color-primary));
  flex-shrink: 0;
}
.detalhe-como-chegar .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Legado (mantido para compatibilidade) */
.location-detail-address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-muted, var(--color-muted-ink));
  margin: 0.5rem 0 1rem;
}
.location-detail-address .material-symbols-outlined {
  color: var(--primary, var(--color-primary));
  flex-shrink: 0;
}
.location-detail-meta { margin-bottom: 1rem; font-size: 0.9375rem; }
.location-detail-meta .material-symbols-outlined { vertical-align: middle; margin-right: 0.25rem; }
.location-detail-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.location-detail-actions a { display: inline-flex; align-items: center; gap: 0.375rem; }
.location-detail-hours-list { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; color: var(--text-muted, var(--color-muted-ink)); }
.location-detail-hours-list li { margin-bottom: 0.25rem; }