/* ======================================================================
   HOME -- Fogo & Vinho
   Estilos especificos das secoes do one-page.
   Arquetipo editorial: assimetria, sangria, escala dramatica.
   ====================================================================== */

/* ============================================================
   HERO
   Fullscreen, fundo texturizado, logo monumental centrado.
   Excecao ao editorial assimetrico: hero e cerimonial.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-hide);
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-20) var(--section-padding-x) var(--space-16);
  gap: var(--space-6);
  max-width: 960px;
}

.hero__logo {
  width: clamp(260px, 70vw, 720px);
  margin-bottom: var(--space-4);
}

.hero__logo-img {
  width: 100%;
  height: auto;
}

.hero__subtitle {
  max-width: none;
  font-size: var(--text-3xl);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
}

.hero__meta-sep {
  color: var(--color-primary);
}

.hero__actions {
  margin-top: var(--space-8);
}

.btn--lg {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-sm);
}

/* ============================================================
   SOBRE
   Texto em 5 colunas, imagem sangra a direita.
   Fundo flat (contraste com textura do hero).
   ============================================================ */

.sobre {
  background-color: var(--color-bg);
  position: relative;
  overflow: visible;
}

.sobre__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.sobre__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.sobre__text .eyebrow {
  margin-bottom: var(--space-2);
}

.sobre__body {
  max-width: 55ch;
}

.sobre__image {
  position: relative;
  overflow: hidden;
}

.sobre__image img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .sobre__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-12);
    align-items: center;
    padding-right: 0; /* imagem sangra a direita */
  }

  .sobre__image {
    margin-right: calc(var(--section-padding-x) * -1);
  }

  .sobre__image img {
    min-height: 500px;
  }
}

@media (min-width: 1024px) {
  .sobre__grid {
    padding-left: var(--section-padding-x);
  }

  .sobre__image {
    /* Sangra alem do container ate a borda da viewport */
    margin-right: calc((100vw - var(--container-max)) / -2);
  }

  .sobre__image img {
    min-height: 600px;
  }
}

/* ============================================================
   DESTAQUES
   Grid assimetrico: 2 grandes + 2 medios + 2 menores.
   Fundo texturizado. Sensacao de abundancia.
   ============================================================ */

.destaques {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-padding-y-dense);
}

.destaques__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-hide);
}

.destaques__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.destaques .container {
  position: relative;
  z-index: var(--z-base);
  margin-bottom: var(--space-10);
}

.destaques .container .eyebrow {
  margin-bottom: var(--space-3);
}

.destaques__grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.destaque {
  background-color: var(--color-surface-alpha);
  border: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-6);
  transition: border-color var(--transition-hover);
}

.destaque:hover {
  border-color: var(--color-primary);
}

.destaque__title {
  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  font-size: var(--text-xl);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.destaque__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 45ch;
}

/* Tamanhos variados -- assimetria editorial */
@media (min-width: 768px) {
  .destaques__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .destaque--lg {
    padding: var(--space-12) var(--space-8);
  }

  .destaque--lg .destaque__title {
    font-size: var(--text-xl);
  }

  .destaque--sm {
    padding: var(--space-6) var(--space-5);
  }

  .destaque--sm .destaque__title {
    font-size: var(--text-xl);
  }
}

@media (min-width: 1024px) {
  .destaques__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-5);
  }

  /* 2 grandes: 7 + 5 colunas */
  .destaque--lg:nth-child(1) {
    grid-column: 1 / 8;
  }

  .destaque--lg:nth-child(2) {
    grid-column: 8 / 13;
  }

  /* 2 medios: 6 + 6 */
  .destaque--md:nth-child(3) {
    grid-column: 1 / 7;
  }

  .destaque--md:nth-child(4) {
    grid-column: 7 / 13;
  }

  /* 2 menores: 5 + 7 (invertido = assimetria) */
  .destaque--sm:nth-child(5) {
    grid-column: 1 / 6;
  }

  .destaque--sm:nth-child(6) {
    grid-column: 6 / 13;
  }

  .destaque--lg {
    padding: var(--space-14) var(--space-10);
  }

  .destaque--lg .destaque__title {
    font-size: var(--text-2xl);
  }

  .destaque--md {
    padding: var(--space-10) var(--space-8);
  }

  .destaque--md .destaque__title {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   GASTRONOMIA
   Imagem sangra a esquerda, menu a direita.
   Fundo surface elevado.
   ============================================================ */

.gastronomia {
  background-color: var(--color-surface);
  position: relative;
  overflow: visible;
}

.gastronomia__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.gastronomia__image {
  position: relative;
  overflow: hidden;
}

.gastronomia__image img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.gastronomia__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.gastronomia__content .eyebrow {
  margin-bottom: var(--space-2);
}

.gastronomia__intro {
  max-width: 50ch;
}

.gastronomia__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 0;
}

.gastronomia__item {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.gastronomia__item:last-child {
  border-bottom: none;
}

.gastronomia__category {
  margin-bottom: var(--space-2);
}

.gastronomia__dishes {
  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  font-size: var(--text-xl);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

@media (min-width: 768px) {
  .gastronomia__grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--grid-gap);
    align-items: center;
    padding-left: 0; /* imagem sangra a esquerda */
  }

  .gastronomia__image {
    order: -1;
    margin-left: calc(var(--section-padding-x) * -1);
  }

  .gastronomia__image img {
    min-height: 500px;
  }
}

@media (min-width: 1024px) {
  .gastronomia__grid {
    padding-right: var(--section-padding-x);
  }

  .gastronomia__image {
    margin-left: calc((100vw - var(--container-max)) / -2);
  }

  .gastronomia__image img {
    min-height: 600px;
  }

  .gastronomia__dishes {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   OPEN WINE
   Lista de rotulos com presenca tipografica.
   Imagem de brinde a direita sangrada. Fundo texturizado.
   ============================================================ */

.open-wine {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-padding-y-dense);
}

.open-wine__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-hide);
}

.open-wine__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.open-wine__grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.open-wine__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.open-wine__content .eyebrow {
  margin-bottom: var(--space-2);
}

.open-wine__intro {
  max-width: 50ch;
}

.open-wine__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin-top: var(--space-4);
  list-style: none;
}

.open-wine__item {
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  /* font-size: var(--text-base); */
  color: var(--color-text);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-display);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

.open-wine__item:first-child {
  border-top: 1px solid var(--color-border);
}

.open-wine__image {
  position: relative;
  overflow: hidden;
}

.open-wine__image img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .open-wine__grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--grid-gap);
    align-items: center;
    padding-right: 0;
  }

  .open-wine__image {
    margin-right: calc(var(--section-padding-x) * -1);
  }

  .open-wine__image img {
    min-height: 500px;
  }

  .open-wine__item {
    font-size: var(--text-base);
  }
}

@media (min-width: 1024px) {
  .open-wine__grid {
    padding-left: var(--section-padding-x);
  }

  .open-wine__image {
    margin-right: calc((100vw - var(--container-max)) / -2);
  }

  .open-wine__image img {
    min-height: 600px;
  }

  .open-wine__item {
    font-size: var(--text-xl);
    padding-block: var(--space-5);
  }
}

/* ============================================================
   INCLUSO
   Grid de itens com icones. Fundo flat.
   ============================================================ */

.incluso {
  background-color: var(--color-bg);
}

.incluso__header {
  margin-bottom: var(--space-12);
}

.incluso__header .eyebrow {
  margin-bottom: var(--space-3);
}

.incluso__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  list-style: none;
}

.incluso__item {
  display: flex;
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

.incluso__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  flex-shrink: 0;
  margin-right: var(--space-4);
}

.incluso__label {
  font-family: var(--font-heading);
  font-weight: var(--font-regular);
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

@media (min-width: 768px) {
  .incluso__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-12);
  }
}

@media (min-width: 1024px) {
  .incluso__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--space-16);
  }

  .incluso__item {
    padding: var(--space-6) 0;
  }
}

/* ============================================================
   CTA INTERMEDIARIO
   Foto de fundo com overlay. CTA centrado.
   ============================================================ */

.cta-mid {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding-block: var(--section-padding-y);
}

.cta-mid__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-hide);
}

.cta-mid__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.cta-mid__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-photo);
}

.cta-mid__content {
  position: relative;
  z-index: var(--z-base);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.cta-mid__text {
  max-width: none;
}

/* ============================================================
   INFORMACOES
   Texto a esquerda, foto fachada a direita. Ziguezague.
   ============================================================ */

.informacoes {
  background-color: var(--color-bg);
}

.informacoes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.informacoes__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.informacoes__content .eyebrow {
  margin-bottom: var(--space-2);
}

.informacoes__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.informacoes__item {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.informacoes__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.informacoes__value {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.informacoes__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-primary);
  background: var(--color-primary-light);
}

.informacoes__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.informacoes__image {
  overflow: hidden;
}

.informacoes__image img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .informacoes__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--grid-gap);
    align-items: start;
  }

  .informacoes__image img {
    min-height: 450px;
  }
}

@media (min-width: 1024px) {
  .informacoes__image img {
    min-height: 550px;
  }
}

/* ============================================================
   INGRESSOS
   Tabela limpa com CTA forte. Fundo texturizado.
   ============================================================ */

.ingressos {
  position: relative;
  overflow: hidden;
}

.ingressos__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-hide);
}

.ingressos__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.ingressos__content {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
}

.ingressos__content .eyebrow {
  margin-bottom: var(--space-2);
}

.ingressos__table-wrap {
  width: 100%;
  max-width: 600px;
  margin-top: var(--space-6);
  overflow-x: auto;
}

.ingressos__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ingressos__table th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-border-strong);
}

.ingressos__table td {
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.ingressos__price {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-align: right;
  white-space: nowrap;
}

.ingressos__price--highlight {
  font-size: var(--text-lg);
  color: var(--color-accent);
}

.ingressos__table th:last-child,
.ingressos__table td:last-child {
  text-align: right;
}

.ingressos__cta {
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .ingressos__table th {
    padding: var(--space-4) var(--space-6);
  }

  .ingressos__table td {
    padding: var(--space-5) var(--space-6);
    font-size: var(--text-lg);
  }

  .ingressos__price {
    font-size: var(--text-xl);
  }

  .ingressos__price--highlight {
    font-size: var(--text-2xl);
  }
}

/* ============================================================
   RECOMENDACOES
   Bloco sutil de texto, fundo surface.
   ============================================================ */

.recomendacoes {
  background-color: var(--color-surface-2);
  padding-block: var(--space-12);
}

.recomendacoes__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
}

.recomendacoes__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 65ch;
  line-height: var(--leading-relaxed);
}