/* ============================================================
   Página /cafes — no padrão do site (hero, seções e rodapé iguais
   às demais páginas). Usa as variáveis e classes de styles.css
   (--ink, --amber, --cream, --line, --maxw, --pad, .eyebrow, .h2...).
   ============================================================ */

.cafes-wrap { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Hero ---------- */
.cafes-hero { min-height: min(850px, 94svh); position: relative; display: grid; align-items: end; isolation: isolate; }
.cafes-hero__image, .cafes-hero__scrim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.cafes-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.cafes-hero__scrim {
  background:
    linear-gradient(180deg, rgba(7,13,16,.10) 25%, rgba(7,13,16,.50) 60%, var(--night) 100%),
    linear-gradient(90deg, rgba(7,13,16,.62), transparent 80%);
}
.cafes-hero__content { padding-block: 9rem clamp(3.5rem, 8vw, 6rem); display: grid; gap: 1.2rem; }
.cafes-hero__title {
  margin: 0; max-width: 12ch; font-family: var(--ff-display); font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: .9; font-weight: 700; letter-spacing: -.015em; text-transform: uppercase;
}
.cafes-hero__content .lede { color: var(--cream); max-width: 30rem; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.cafes-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }

/* ---------- Seção do rancho (texto em duas colunas) ---------- */
.cafes-rancho { padding-block: clamp(4.5rem, 10vw, 8rem); }
.cafes-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.cafes-split__texto { display: grid; gap: 1.1rem; color: var(--muted); font-size: 1.05rem; }
.cafes-split__texto p { margin: 0; }

/* ---------- Cabeçalho de seção centralizado à esquerda ---------- */
.cafes-secao__head { display: grid; gap: .7rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- O encontro (três cartões) ---------- */
.cafes-encontro { padding-block: clamp(4rem, 9vw, 7rem); background: var(--night); border-block: 1px solid var(--line); }
.cafes-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cafes-card {
  position: relative; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--teal), var(--ink));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.cafes-card:hover { border-color: var(--amber); transform: translateY(-3px); }
.cafes-card__num { display: block; margin-bottom: 1.2rem; font-family: var(--ff-display); font-weight: 700; font-size: 1rem; letter-spacing: .14em; color: var(--amber); }
.cafes-card h3 { margin: 0 0 .6rem; font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.cafes-card p { margin: 0; color: var(--muted); }

/* ---------- Edições ---------- */
.cafes-edicoes-intro { padding-block: clamp(4.5rem, 10vw, 7rem) 0; background: linear-gradient(180deg, var(--ink), var(--teal-soft) 58%, var(--ink)); }
.cafes-edicoes-intro .cafes-wrap { display: grid; gap: .7rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cafes-ed { padding-block: clamp(3.5rem, 8vw, 5.5rem); background: linear-gradient(180deg, var(--ink), var(--teal-soft) 58%, var(--ink)); scroll-margin-top: 5rem; }
.cafes-ed__head { display: grid; gap: .6rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.cafes-ed__head h3 { margin: 0; font-family: var(--ff-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .95; text-transform: uppercase; }
.cafes-ed__head .muted { max-width: 52ch; margin: 0; }

.cafes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.cafes-foto { display: block; overflow: hidden; background: var(--teal); outline-offset: 3px; }
.cafes-foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.cafes-foto:hover img, .cafes-foto:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }
.cafes-foto:focus-visible { outline: 2px solid var(--amber); }

.cafes-em-breve {
  display: grid; place-items: center; min-height: 14rem; padding: 2rem;
  border: 1px dashed var(--line); color: var(--muted);
  font-family: var(--ff-display); font-weight: 600; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.cafes-em-breve p { margin: 0; }

/* Fileira de fotos que se abre no passar do mouse (no celular vira rolagem lateral).
   Mesma ideia do componente image-gallery, em CSS puro. */
.cafes-strip { display: flex; gap: .5rem; height: clamp(300px, 46vw, 420px); }
.cafes-strip .cafes-foto {
  flex: 1 1 0; min-width: 3.5rem; height: 100%; border-radius: 4px;
  transition: flex-grow .6s var(--ease), filter .4s var(--ease);
}
.cafes-strip .cafes-foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .6s var(--ease); }
.cafes-strip .cafes-foto:hover, .cafes-strip .cafes-foto:focus-visible { flex-grow: 5; }
.cafes-strip .cafes-foto:hover img, .cafes-strip .cafes-foto:focus-visible img { transform: none; filter: none; }
.cafes-strip:hover .cafes-foto:not(:hover) img { filter: brightness(.55) saturate(.8); }

/* ---------- Viva o rancho (dois cartões com foto) ---------- */
.cafes-viva { padding-block: clamp(4.5rem, 10vw, 7.5rem); }
.cafes-viva__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.cafes-viva__card {
  display: grid; overflow: hidden; text-decoration: none; color: var(--cream);
  border: 1px solid var(--line); background: var(--night);
  transition: border-color .3s var(--ease);
}
.cafes-viva__card:hover, .cafes-viva__card:focus-visible { border-color: var(--amber); }
.cafes-viva__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.cafes-viva__card:hover img { transform: scale(1.03); }
.cafes-viva__card div { display: grid; gap: .6rem; padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.cafes-viva__card h3 { margin: 0; font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.cafes-viva__card p { margin: 0; color: var(--muted); }
.cafes-viva__link { margin-top: .3rem; font-family: var(--ff-display); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }

/* ---------- Convite final ---------- */
.cafes-convite { padding-block: clamp(4.5rem, 10vw, 7rem); background: linear-gradient(160deg, var(--teal-soft), var(--ink) 75%); border-top: 1px solid var(--line); }
.cafes-convite__inner { display: grid; gap: 1rem; justify-items: start; max-width: var(--maxw); }
.cafes-convite__inner .lede { max-width: 40rem; margin: 0; color: var(--muted); }
.cafes-convite__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* ---------- Visualizador de foto (dialog nativo) ---------- */
.cafes-lb {
  width: min(100vw - 1.5rem, 1100px); max-width: none; max-height: none;
  padding: 0; border: 0; background: transparent; color: var(--cream);
}
.cafes-lb::backdrop { background: rgba(7, 13, 16, .92); }
.cafes-lb__frame { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.cafes-lb figure { margin: 0; text-align: center; }
.cafes-lb img { max-height: 84vh; max-width: 100%; margin-inline: auto; object-fit: contain; }
.cafes-lb figcaption { margin-top: .7rem; color: var(--muted); font-size: .9rem; }
.cafes-lb__fechar, .cafes-lb__nav {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px;
  background: rgba(7, 13, 16, .7); border: 1px solid var(--line); color: var(--cream); cursor: pointer;
}
.cafes-lb__fechar:hover, .cafes-lb__fechar:focus-visible, .cafes-lb__nav:hover, .cafes-lb__nav:focus-visible { color: var(--amber); border-color: var(--amber); }
.cafes-lb__fechar { top: 0; right: 0; }
.cafes-lb__nav--prev { left: 0; top: 50%; transform: translateY(-50%); }
.cafes-lb__nav--next { right: 0; top: 50%; transform: translateY(-50%); }
.cafes-lb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .cafes-split { grid-template-columns: 1fr; }
  .cafes-cards { grid-template-columns: 1fr; }
  .cafes-viva__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cafes-hero { min-height: 84svh; }
  .cafes-hero__image img { object-position: 60% center; }
  .cafes-hero__content { padding-block: 8rem 3rem; }
  .cafes-hero__title { font-size: clamp(3rem, 14vw, 4.5rem); }
  .cafes-strip { overflow-x: auto; scroll-snap-type: x mandatory; height: 360px; padding-bottom: .4rem; }
  .cafes-strip .cafes-foto { flex: 0 0 62vw; scroll-snap-align: start; }
  .cafes-strip .cafes-foto:hover { flex-grow: 0; }
  .cafes-lb__frame { min-height: 50vh; padding-bottom: 3.5rem; }
  .cafes-lb__nav--prev, .cafes-lb__nav--next { top: auto; bottom: .5rem; transform: none; }
  .cafes-lb__nav--prev { left: .5rem; }
  .cafes-lb__nav--next { right: .5rem; }
}

/* ---------- Cards "Viva o rancho": imagem na proporção certa, texto embaixo ---------- */
.cafes-viva__card { display: flex; flex-direction: column; }
.cafes-viva__card img { flex: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }
.cafes-viva__card div { flex: 1 1 auto; align-content: start; }

/* ---------- 3º Café: fileira com setas para ver todas as fotos ---------- */
.cafes-carrossel { position: relative; display: flex; align-items: center; gap: .6rem; }
.cafes-carrossel .cafes-strip--lista {
  flex: 1 1 auto; min-width: 0; height: clamp(300px, 40vw, 400px);
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.cafes-carrossel .cafes-strip--lista::-webkit-scrollbar { display: none; }
.cafes-strip--lista .cafes-foto { flex: 0 0 auto; width: clamp(200px, 22vw, 280px); }
.cafes-strip--lista .cafes-foto:hover, .cafes-strip--lista .cafes-foto:focus-visible { flex-grow: 0; }
.cafes-strip--lista:hover .cafes-foto:not(:hover) img { filter: none; }
.cafes-carrossel__seta {
  flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer;
  background: rgba(7, 13, 16, .7); border: 1px solid var(--line); color: var(--cream);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.cafes-carrossel__seta:hover, .cafes-carrossel__seta:focus-visible { color: var(--amber); border-color: var(--amber); }
.cafes-carrossel__seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) {
  .cafes-carrossel { gap: .35rem; }
  .cafes-carrossel__seta { width: 40px; height: 40px; }
  .cafes-carrossel .cafes-strip--lista { height: 300px; }
  .cafes-strip--lista .cafes-foto { width: 58vw; }
}

/* Visualizador: a foto aparece suavemente quando carrega (evita mostrar a anterior). */
.cafes-lb img { transition: opacity .2s var(--ease); }