/* ============================================================
   Sabor y Son · direccion C «El patio»
   Tropical courtyard cafe: light, airy, botanical, rounded serif.
   Palette: botanical green #2F5D46 / warm white #FAF6EC /
   coral #E2725B / soft ink #20302A.
   Radius system: media + panels 22px, cards + chips 14px,
   buttons full pill.
   ============================================================ */

:root {
  --green: #2F5D46;
  --green-deep: #244A38;
  --green-tint: #E9F0E7;
  --coral: #E2725B;          /* decorative only: bands, tints, selection */
  --coral-ink: #A8452E;      /* AA-safe coral for text, stars, links */
  --coral-tint: #F7E6DF;
  --paper: #FAF6EC;
  --card: #FFFDF6;
  --line: #E3DAC3;
  --ink: #20302A;
  --ink-soft: #43554C;
  --shadow: 0 12px 32px rgba(32, 48, 42, 0.09);
  --r-media: 22px;
  --r-card: 14px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

::selection { background: rgba(226, 114, 91, 0.32); }

:focus-visible {
  outline: 3px solid var(--coral-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.visually-hidden,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  z-index: 10;
  background: var(--green);
  color: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

/* ---------- Top bar: inline anchors, not fixed ---------- */

.topbar { padding-block: 1.1rem 0.4rem; }

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  flex-wrap: wrap;
}

.brand {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--green);
}

.sprig { width: 20px; height: 20px; flex: none; }
.sprig-lg { width: 30px; height: 30px; color: var(--coral-ink); margin-bottom: 0.35rem; }

.topnav {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 1.7rem);
}

.topnav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.topnav a:hover { color: var(--coral-ink); border-bottom-color: var(--coral); }
.topnav a:focus-visible { outline-color: var(--green); }

/* ---------- Hero: food first, panel overlaps photo ---------- */

.hero-media {
  margin: 0;
  width: 100%;
  height: 56vh;
  height: 56svh;
  max-height: 620px;
  overflow: hidden;
  border-radius: 0 0 var(--r-media) var(--r-media);
}

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

.hero .wrap { position: relative; }

.hero-panel {
  position: relative;
  z-index: 1;
  margin-top: clamp(-3.5rem, -4vw, -1.75rem);
  background: var(--paper);
  border-radius: var(--r-media) var(--r-media) 0 0;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 5vw, 3rem) clamp(1.2rem, 3vw, 1.8rem);
  max-width: 760px;
  box-shadow: 0 -14px 30px rgba(32, 48, 42, 0.07);
}

.hero-panel h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 620;
  font-variation-settings: "opsz" 72;
  font-size: clamp(2.55rem, 6vw, 4.2rem);
  line-height: 1.04;
  color: var(--green);
  letter-spacing: -0.01em;
}

.hero-promise {
  margin: 0.9rem 0 1.4rem;
  max-width: 34rem;
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  color: var(--ink-soft);
}

.btn {
  display: inline-block;
  background: var(--green);
  color: var(--paper);
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  padding: 0.78rem 1.7rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.btn:hover { background: var(--green-deep); }
.btn:focus-visible { outline-color: var(--green-deep); }

/* ---------- Palm-shadow bands: CSS repeating gradients only ---------- */

.palm-band {
  height: 54px;
  margin-block: 0;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 26px,
      rgba(47, 93, 70, 0.10) 26px 30px,
      transparent 30px 62px),
    repeating-linear-gradient(65deg,
      transparent 0 24px,
      rgba(47, 93, 70, 0.07) 24px 27px,
      transparent 27px 56px);
}

.palm-band--calm {
  background:
    repeating-linear-gradient(115deg,
      transparent 0 34px,
      rgba(226, 114, 91, 0.14) 34px 37px,
      transparent 37px 74px),
    repeating-linear-gradient(65deg,
      transparent 0 30px,
      rgba(47, 93, 70, 0.06) 30px 33px,
      transparent 33px 64px);
}

/* ---------- Sections ---------- */

section { scroll-margin-top: 1.25rem; }

.section-head {
  max-width: 58ch;
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

.section-head h2,
.patio-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  line-height: 1.1;
  color: var(--green);
}

.section-head p {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
}

.carta { padding-block: clamp(2.8rem, 6vw, 4.5rem); }

/* ---------- La carta: asymmetric editorial card grid ---------- */

.carta-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.dish {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.15rem 1.3rem 1.25rem;
}

.dish h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.2;
}

.dish p {
  margin: 0;
  font-size: 0.99rem;
  color: var(--ink-soft);
}

.dish--green {
  background: var(--green);
  border-color: var(--green);
}

.dish--green h3 { color: var(--paper); }
.dish--green p { color: #F3EFE2; }

.dish--coral {
  background: var(--coral-tint);
  border-color: #EFD2C6;
}

.dish--leaf {
  background: var(--green-tint);
  border-color: #D5E2D2;
}

.carta-note {
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* ---------- El patio: copy + asymmetric photo grid ---------- */

.patio { padding-block: clamp(2.8rem, 6vw, 4.5rem); }

.patio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
}

.patio-copy p {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 2.2vw, 1.12rem);
}

.patio-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.9rem;
}

.patio-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-media);
  box-shadow: var(--shadow);
  background: #E7E3D4; /* tinted slot: never a plain white/gray hole while lazy images arrive */
  aspect-ratio: 4 / 3; /* reserve layout on the SLOT, not only the img, so the grid is stable pre-load */
}

.patio-photo--tall {
  grid-row: 1 / span 2;
  aspect-ratio: 3 / 4;
}

.patio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  font-size: 0; /* suppress alt-text flash while loading */
}

.patio-photo--tall img { aspect-ratio: 3 / 4; }
.patio-photo:not(.patio-photo--tall) img { aspect-ratio: 4 / 3; }

/* ---------- Encuentranos: address, Rappi, rating badge ---------- */

.encuentranos { padding-block: clamp(2.8rem, 6vw, 4.5rem); }

.find-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.find-col {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.4rem 1.5rem;
}

.find-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.find-item + .find-item { margin-top: 1.2rem; }

.icon {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--green);
  margin-top: 0.15rem;
}

.find-item h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--green);
}

.find-item p { margin: 0 0 0.45rem; color: var(--ink-soft); font-size: 0.99rem; }
.find-item p:last-child { margin-bottom: 0; }
.find-item strong { color: var(--ink); }

.text-link {
  color: var(--coral-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 3px;
}

.text-link:hover { color: var(--green); }

.rating-badge {
  margin-top: 1.3rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--green-tint);
  border-radius: var(--r-card);
  padding: 0.9rem 1.1rem;
}

.stars { width: 110px; height: 20px; }

.rating-text {
  margin: 0;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink);
}

/* ---------- Footer ---------- */

.footer {
  background: var(--green);
  color: var(--paper);
  padding-block: clamp(2.2rem, 5vw, 3.2rem);
}

.footer-brand {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
}

.footer-disclosure {
  margin: 0 0 1.1rem;
  font-weight: 700;
  font-size: 0.98rem;
}

.footer-colophon {
  margin: 0;
  max-width: 68ch;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #E9EFE4;
}

.footer a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer a:hover { color: #FFD9CC; }
.footer a:focus-visible { outline-color: var(--paper); }

/* ---------- Breakpoints ---------- */

@media (min-width: 640px) {
  .carta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dish--wide { grid-column: span 2; }
}

@media (min-width: 840px) {
  .find-grid { grid-template-columns: 1.1fr 1fr; }
  .rating-badge { margin-top: 0; }
}

@media (min-width: 900px) {
  .patio-grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
}

@media (min-width: 980px) {
  .carta-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .dish { grid-column: span 2; }
  .dish--wide { grid-column: span 3; }
}

/* ---------- Mobile hero cap: never taller than ~45svh ---------- */

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero-media {
    height: 45vh;
    height: 45svh;
    max-height: 45svh;
  }
  .hero-panel { margin-top: -1.6rem; }
  .patio-photos { grid-template-columns: 1fr; grid-template-rows: none; }
  .patio-photo--tall { grid-row: auto; aspect-ratio: 4 / 3; }
  .patio-photo--tall img { aspect-ratio: 4 / 3; }
  .topnav { flex-wrap: wrap; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}