/* ══════════════════════════════════════════════════════════════
   mesa.css — Sección "Mesas" del directorio (portada + perfiles)
   Sistema propio mesa-* (independiente de dir-* del directorio).
   Depende de base.css (tokens, nav, footer, .reveal).
══════════════════════════════════════════════════════════════ */

/* ── Portada /mesas ─────────────────────────────────────────── */
.mesas-intro {
  background: var(--o);
  padding: 5.5rem 1.5rem 5rem;
  text-align: center;
}
.mesas-intro-inner { max-width: 760px; margin: 0 auto; }
.mesas-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--e); font-weight: 500; display: block; margin-bottom: 1.1rem;
}
.mesas-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1.04;
  letter-spacing: -0.015em; color: var(--c); margin: 0 0 1.2rem;
}
.mesas-lead {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem); line-height: 1.5;
  color: rgba(244,237,224,0.82); margin: 0;
}

.mesas-grid {
  max-width: 1080px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

/* Tarjeta de mesa (con foto opcional) */
.mesa-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--w); border: 0.5px solid rgba(107,78,46,0.18);
  border-radius: 2px; overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mesa-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(26,22,16,0.12); }
.mesa-card-foto {
  display: block; width: 100%; height: 200px;
  aspect-ratio: 16 / 9; object-fit: cover;
}
@supports (aspect-ratio: 16 / 9) { .mesa-card-foto { height: auto; } }
.mesa-card-body { padding: 1.5rem 1.7rem 1.8rem; }
.mesa-card-meta {
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t); display: block; margin-bottom: 0.6rem;
}
.mesa-card-name {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.6rem;
  color: var(--o); margin: 0 0 0.4rem;
}
.mesa-card-desc {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.97rem;
  line-height: 1.6; color: var(--g); margin: 0;
}
.mesa-card.is-soon {
  pointer-events: none; opacity: 0.55; background: transparent; border-style: dashed;
}

/* ── Perfil de mesa /mesas/[slug] ───────────────────────────── */
.mesa-hero {
  position: relative; min-height: 60vh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--o);
}
/* Variante sin foto (mesa sin imagen propia con permiso): hero oscuro sólido,
   más bajo, sin necesidad de overlay ni imagen. */
.mesa-hero--sinfoto { min-height: 38vh; }
.mesa-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.mesa-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,22,16,0.85) 0%, rgba(26,22,16,0.35) 45%, rgba(26,22,16,0.15) 100%);
}
.mesa-hero-inner {
  position: relative; z-index: 2; max-width: 1080px; width: 100%;
  margin: 0 auto; padding: 3rem 1.5rem 3.2rem;
}
.mesa-hero-eyebrow {
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--e); font-weight: 500;
  display: block; margin-bottom: 0.9rem;
}
.mesa-hero-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.02;
  color: var(--c); margin: 0 0 0.8rem;
}
.mesa-hero-sub {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: rgba(244,237,224,0.9);
  margin: 0; max-width: 40ch;
}

.mesa-bc {
  max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.5rem 0;
  font-family: 'Jost', sans-serif; font-size: 13px; color: var(--g);
}
.mesa-bc a { color: var(--t); }

.mesa-section { max-width: 760px; margin: 0 auto; padding: 3.5rem 1.5rem 0; }
.mesa-section--wide { max-width: 1080px; }
.mesa-section-eyebrow {
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--t); font-weight: 500;
  display: block; margin-bottom: 0.8rem;
}
.mesa-section-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem); color: var(--o); margin: 0 0 1.2rem;
}
.mesa-prosa p {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 1.05rem;
  line-height: 1.85; color: var(--g); margin: 0 0 1.15rem;
}
.mesa-prosa strong { color: var(--o); font-weight: 500; }

/* Cita destacada (placeholder de Gregorio) */
.mesa-cita {
  max-width: 860px; margin: 3.5rem auto 0; padding: 0 1.5rem;
}
.mesa-cita blockquote {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.3; color: var(--o);
  margin: 0; border-left: 2px solid var(--e); padding: 0.2rem 0 0.2rem 1.6rem;
}
.mesa-cita cite {
  display: block; margin-top: 1.1rem; padding-left: 1.7rem;
  font-family: 'Jost', sans-serif; font-style: normal; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--t);
}
.mesa-cita .is-placeholder { color: var(--gl); }

/* Bloque "lo que trabajan de la Ribera" */
.mesa-trabajan {
  max-width: 1080px; margin: 0 auto; padding: 3.5rem 1.5rem 0;
}
.mesa-trabajan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem; margin-top: 1.6rem;
}
.mesa-prod {
  border: 0.5px solid rgba(107,78,46,0.18); border-radius: 2px; overflow: hidden;
  background: var(--w);
}
.mesa-prod-foto {
  display: block;
  width: 100%;
  height: 300px;                 /* fallback fijo: nunca se estira (mismo patrón robusto que la tarjeta de Osés) */
  aspect-ratio: 9 / 10;          /* vertical suave: bastante menos alto que el 4:5 anterior */
  object-fit: cover;
  object-position: center 40%;   /* foco hacia el plato (algo por encima del centro) */
}
@supports (aspect-ratio: 9 / 10) {
  .mesa-prod-foto { height: auto; }
}
.mesa-prod-body { padding: 1.2rem 1.4rem 1.4rem; }
.mesa-prod-name {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.3rem;
  color: var(--o); margin: 0 0 0.3rem;
}
.mesa-prod-desc {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.92rem;
  line-height: 1.55; color: var(--g); margin: 0;
}

/* Visita / enlaces */
.mesa-visita { max-width: 1080px; margin: 0 auto; padding: 3.5rem 1.5rem 0; }
.mesa-visita-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem; margin-top: 1.4rem;
}
.mesa-info {
  display: block; text-decoration: none; color: inherit;
  border: 0.5px solid rgba(107,78,46,0.18); border-radius: 2px;
  padding: 1.4rem 1.6rem; background: var(--w);
}
a.mesa-info { transition: transform 0.25s ease, box-shadow 0.25s ease; }
a.mesa-info:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,22,16,0.10); }
.mesa-info-meta {
  font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t); display: block; margin-bottom: 0.5rem;
}
.mesa-info-name {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.2rem;
  color: var(--o); margin: 0 0 0.3rem;
}
.mesa-info-desc {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.92rem;
  line-height: 1.55; color: var(--g); margin: 0;
}

.mesa-volver { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem 0; }
.mesa-volver a {
  font-family: 'Jost', sans-serif; font-size: 13px; color: var(--t);
  text-decoration: none; border-bottom: 0.5px solid rgba(107,78,46,0.3); padding-bottom: 2px;
}

.mesa-end { padding-bottom: 5rem; }

@media (max-width: 768px) {
  .mesa-hero { min-height: 52vh; }
  .mesas-grid { padding-bottom: 3.5rem; }
}