/* =========================================================================
   Zumi Sushi — page sections
   Styles for the Elementor containers built by tools/build-pages.php and for
   the shortcodes that fill them.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Section rhythm
   ---------------------------------------------------------------------- */

body.zumi .zumi-section {
  padding-block: clamp(72px, 9vw, 120px);
}

body.zumi .zumi-section > .e-con-inner,
body.zumi .zumi-hero > .e-con-inner,
body.zumi .zumi-page-hero > .e-con-inner,
body.zumi .zumi-menu-hero > .e-con-inner {
  width: min(100% - (var(--zumi-gutter) * 2), var(--zumi-container));
  max-width: var(--zumi-container);
  margin-inline: auto;
  gap: clamp(20px, 2.6vw, 34px);
}

/* Widgets fill their column; nested containers keep Elementor's --width. */
body.zumi .zumi-section > .e-con-inner > .elementor-widget {
  width: 100%;
}

body.zumi .zumi-section > .e-con-inner > .e-con {
  flex: 0 1 auto;
  width: var(--width, 100%);
}

/* Elementor widgets inside a section keep the design gap */
body.zumi .zumi-section .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

body.zumi .zumi-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 150px 96px;
  overflow: hidden;
  isolation: isolate;
  background: var(--zumi-bg);
}

body.zumi .zumi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/hero.webp") center 50% / cover no-repeat;
  filter: brightness(0.7) saturate(0.98);
  transform: scale(1.03);
}

body.zumi .zumi-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(14, 13, 10, 0.74) 0%, rgba(14, 13, 10, 0.42) 48%, rgba(14, 13, 10, 0.16) 74%),
    linear-gradient(0deg, var(--zumi-bg) 0%, rgba(14, 13, 10, 0.06) 46%, rgba(14, 13, 10, 0.45) 100%);
}

body.zumi .zumi-hero > .e-con-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Warm inner frame, inset from the viewport like the reference.
   An outline paints above the image and its offset is measured from the section box,
   so it never depends on the container width. */
body.zumi .zumi-hero {
  outline: 1px solid rgba(201, 162, 94, 0.2);
  outline-offset: -22px;
}

body.zumi .zumi-hero .elementor-widget-text-editor.zumi-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--zumi-sans);
  font-size: clamp(11px, 1.35vw, 18px);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--zumi-cream);
}

body.zumi .zumi-hero .zumi-eyebrow::before,
body.zumi .zumi-hero .zumi-eyebrow::after {
  content: "";
  width: 42px;
  height: 1px;
}

body.zumi .zumi-hero .zumi-eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--zumi-gold));
}

body.zumi .zumi-hero .zumi-eyebrow::after {
  background: linear-gradient(90deg, var(--zumi-gold), transparent);
}

/* Client mark instead of the serif wordmark; the H1 is clipped, not removed. */
body.zumi .zumi-hero__logo {
  margin-top: 20px;
}

body.zumi .zumi-hero__logo img {
  width: clamp(240px, 30vw, 400px);
  height: auto;
  margin-inline: auto;
}

body.zumi .zumi-hero__title {
  margin-top: 16px;
}

body.zumi .zumi-hero__title .elementor-heading-title,
body.zumi .zumi-hero__title {
  font-family: var(--zumi-serif) !important;
  font-size: clamp(96px, 15.5vw, 224px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.0625em !important;
  color: var(--zumi-cream) !important;
  text-shadow: 0 24px 90px rgba(0, 0, 0, 0.4);
}

/* The serif overflow escapes the 0.84 line box, so the kanji needs real clearance. */
body.zumi .zumi-hero__jp {
  margin-top: 26px;
}

body.zumi .zumi-hero__jp .zumi-jp {
  margin: 0;
  font-family: var(--zumi-jp);
  font-size: 20px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--zumi-gold);
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 8px 28px rgba(0, 0, 0, 0.45);
}

body.zumi .zumi-hero__lead,
body.zumi .zumi-hero__lead p {
  max-width: 620px;
  margin: 22px auto 0;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(250, 229, 186, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 14px 44px rgba(0, 0, 0, 0.55);
}

body.zumi .zumi-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

body.zumi .zumi-hero__meta-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 38px;
  font-family: var(--zumi-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 229, 186, 0.82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

body.zumi .zumi-hero__meta-list span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--zumi-red);
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Split section
   ---------------------------------------------------------------------- */

/* The reference splits bleed: image edge to edge, copy on its own half with
   generous inner margins. Ours used to be an inset card with a 86 px gutter. */
body.zumi .zumi-split {
  padding: 0 !important;
}

body.zumi .zumi-split > .e-con-inner {
  width: 100%;
  max-width: none;
  padding: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
}

body.zumi .zumi-split__media {
  width: 50%;
  /* The image wipe scales to 1.06 before it reveals; clip it so the page never
     gains a horizontal scrollbar from those two pixels. */
  overflow: hidden;
}

body.zumi .zumi-split__media > .elementor-widget-image,
body.zumi .zumi-split__media .elementor-widget-container,
body.zumi .zumi-split__media .elementor-widget-image img {
  height: 100%;
}

body.zumi .zumi-split__media .elementor-widget-image img {
  width: 100%;
  aspect-ratio: auto;
  /* Fill the column so the photo and the copy end on the same line; the copy is
     the taller side because it carries the carousel. */
  height: 100%;
  min-height: clamp(470px, 43vw, 620px);
  max-height: none;
  object-fit: cover;
  filter: brightness(0.86) saturate(0.94);
}

body.zumi .zumi-split__copy {
  width: 50%;
  align-items: flex-start;
  justify-content: center;
  padding-block: clamp(48px, 5.4vw, 84px);
  padding-inline: clamp(28px, 6.5vw, 104px);
}

body.zumi .zumi-split__copy .zumi-body,
body.zumi .zumi-split__copy .zumi-body p {
  max-width: 560px;
  margin-top: 18px;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  color: rgba(250, 229, 186, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 14px 40px rgba(0, 0, 0, 0.5);
}

body.zumi .zumi-split__copy .zumi-display {
  margin-top: 2px;
}

body.zumi .zumi-split__carousel {
  margin-top: 34px;
}

/* Elementor leaves shortcode widgets shrink-to-fit inside the copy column. */
body.zumi .zumi-split__copy .elementor-widget-shortcode {
  width: 100%;
}

/* -------------------------------------------------------------------------
   Eyebrow + display, wherever Elementor renders them
   ---------------------------------------------------------------------- */

body.zumi .zumi-eyebrow p,
body.zumi .zumi-eyebrow {
  align-items: center;
  font-family: var(--zumi-sans);
  font-size: clamp(12px, 1.3vw, 19px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--zumi-cream);
}

body.zumi .zumi-eyebrow p::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-right: 14px;
  background: linear-gradient(90deg, transparent, var(--zumi-gold));
  vertical-align: middle;
}

body.zumi .zumi-display .elementor-heading-title,
body.zumi .zumi-display {
  font-family: var(--zumi-serif) !important;
  font-size: clamp(34px, 3.7vw, 52px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  color: var(--zumi-cream) !important;
}

body.zumi .zumi-display em {
  font-style: italic;
  color: var(--zumi-cream);
}

body.zumi .zumi-display--sm {
  font-size: clamp(26px, 2.6vw, 36px) !important;
}

/* -------------------------------------------------------------------------
   Category strip / highlights
   ---------------------------------------------------------------------- */

body.zumi .zumi-categories > .e-con-inner,
body.zumi .zumi-highlights > .e-con-inner {
  gap: 22px;
}

/* The category strip runs wider than the text measure: the cards are the message. */
body.zumi .zumi-categories > .e-con-inner {
  width: min(100% - (var(--zumi-gutter) * 2), 1380px);
  max-width: 1380px;
}

body.zumi .zumi-cats {
  gap: 12px;
}

/* -------------------------------------------------------------------------
   Gallery strip
   ---------------------------------------------------------------------- */

body.zumi .zumi-gallery > .e-con-inner {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
}

/* Equal-height gallery band: the row height drives every tile. */
body.zumi .zumi-gallery > .e-con-inner > .e-con {
  flex: 1 1 0;
  width: auto !important;
  height: clamp(320px, 32vw, 460px);
  overflow: hidden;
  align-self: stretch;
}

body.zumi .zumi-gallery .elementor-widget-image,
body.zumi .zumi-gallery .elementor-widget-image .elementor-widget-container,
body.zumi .zumi-gallery .elementor-widget-image .elementor-image {
  width: 100% !important;
  max-width: none !important;
  height: 100%;
}

body.zumi .zumi-gallery .elementor-widget-image img {
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(0.95);
  transition: transform 1.1s var(--zumi-ease), filter 0.6s ease;
}

body.zumi .zumi-gallery .elementor-widget-image:hover img {
  transform: scale(1.035);
  filter: brightness(0.9) saturate(1);
}

/* -------------------------------------------------------------------------
   Inverse CTA
   ---------------------------------------------------------------------- */

body.zumi .zumi-cta {
  background: var(--zumi-cream);
  color: var(--zumi-ink);
}

body.zumi .zumi-cta > .e-con-inner {
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(34px, 6vw, 80px);
}

body.zumi .zumi-cta .zumi-eyebrow,
body.zumi .zumi-cta .zumi-eyebrow p {
  color: var(--zumi-red);
}

body.zumi .zumi-cta .zumi-display,
body.zumi .zumi-cta .zumi-display .elementor-heading-title {
  color: var(--zumi-ink) !important;
}

body.zumi .zumi-cta .zumi-display em {
  color: var(--zumi-red);
}

body.zumi .zumi-cta .zumi-body,
body.zumi .zumi-cta .zumi-body p {
  max-width: 520px;
  margin-top: 20px;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  color: rgba(21, 18, 12, 0.72);
}

body.zumi .zumi-cta-btn .elementor-button {
  /* Elementor centres this label with symmetric padding; we set `padding: 0 32px`
     instead, so the text needs flex centring to sit in the middle. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 30px;
  padding: 0 32px;
  border: 0;
  border-radius: 4px;
  font-family: var(--zumi-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--zumi-ease);
}

body.zumi .zumi-cta-btn--ink .elementor-button {
  background: var(--zumi-ink);
  color: var(--zumi-cream);
}

body.zumi .zumi-cta-btn--ink .elementor-button:hover {
  background: var(--zumi-red);
  color: var(--zumi-white);
}

body.zumi .zumi-cta-btn--gold .elementor-button {
  background: var(--zumi-cream);
  color: var(--zumi-ink);
}

body.zumi .zumi-cta-btn--gold .elementor-button:hover {
  background: var(--zumi-white);
}

/* Category index inside the inverse band */

body.zumi .zumi-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
  border-top: 1px solid rgba(21, 18, 12, 0.18);
}

body.zumi .zumi-index a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(21, 18, 12, 0.18);
  font-family: var(--zumi-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--zumi-ink);
  transition: color 0.25s ease;
}

body.zumi .zumi-index a:hover {
  color: var(--zumi-red);
}

body.zumi .zumi-index span {
  font-size: 11px;
  font-weight: 500;
  color: var(--zumi-red);
}

/* -------------------------------------------------------------------------
   Reservations
   ---------------------------------------------------------------------- */

body.zumi .zumi-reservas {
  padding-inline: 0 !important;
  background:
    radial-gradient(circle at 82% 40%, rgba(31, 58, 46, 0.45), transparent 42%),
    var(--zumi-bg);
}

/* Full-bleed split: the map runs to the viewport edge, like the reference. */
body.zumi .zumi-reservas > .e-con-inner {
  width: 100%;
  max-width: none;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

body.zumi .zumi-reservas__mapcol,
body.zumi .zumi-reservas__panel {
  width: 50% !important;
}

body.zumi .zumi-reservas__mapcol {
  padding: 0 !important;
}

/* Percentage heights die inside a stretched flex item (the column has no
   definite height), so the map is stretched with flex instead. */
body.zumi .zumi-reservas__mapcol {
  display: flex;
}

body.zumi .zumi-reservas__mapcol > .elementor-widget,
body.zumi .zumi-reservas__mapcol .elementor-widget-container,
body.zumi .zumi-reservas__mapcol .elementor-shortcode {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

body.zumi .zumi-reservas__mapcol .zumi-map {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  min-height: 580px;
  border: 0;
}

/* Photo-backed panel, like the reference's Öffnungszeiten block. */
body.zumi .zumi-reservas__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 88px) !important;
  overflow: hidden;
  isolation: isolate;
  background: var(--zumi-bg);
}

body.zumi .zumi-reservas__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/interior-2.webp") center / cover no-repeat;
  filter: brightness(0.72) saturate(0.92);
}

body.zumi .zumi-reservas__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 13, 10, 0.5), rgba(14, 13, 10, 0.68));
}

body.zumi .zumi-reservas__panel .zumi-eyebrow {
  justify-content: center;
}

body.zumi .zumi-reservas__panel .zumi-display {
  margin-top: 16px;
  font-size: clamp(38px, 4.2vw, 64px) !important;
  text-align: center;
}

body.zumi .zumi-reservas__hours {
  margin-top: 22px;
}

/* Square map where the QR used to sit. */
body.zumi .zumi-reservas .zumi-datos__row {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   Page hero (about / reservations / contact)
   ---------------------------------------------------------------------- */

body.zumi .zumi-page-hero {
  position: relative;
  display: flex;
  padding-block: 170px 78px;
  overflow: hidden;
  isolation: isolate;
  background: var(--zumi-bg);
}

body.zumi .zumi-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/room-3.webp") center 55% / cover no-repeat;
  filter: brightness(0.38) saturate(0.9);
}

body.zumi .zumi-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 13, 10, 0.92), rgba(14, 13, 10, 0.35)),
    linear-gradient(0deg, var(--zumi-bg) 0%, transparent 60%);
}

body.zumi .zumi-page-hero__title .elementor-heading-title,
body.zumi .zumi-page-hero__title {
  font-family: var(--zumi-serif) !important;
  font-size: clamp(44px, 6.3vw, 90px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  color: var(--zumi-cream) !important;
}

body.zumi .zumi-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 30px;
}

body.zumi .zumi-page-hero__stats {
  max-width: 900px;
}

body.zumi .zumi-page-hero__lead,
body.zumi .zumi-page-hero__lead p {
  max-width: 600px;
  margin-top: 22px;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  color: rgba(250, 229, 186, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------
   About page: photo pairs, story, numbered features
   ---------------------------------------------------------------------- */

/* Tighter rhythm than the default 120 px bands: these blocks read as one story. */
body.zumi .zumi-about-photos,
body.zumi .zumi-about-story {
  padding-block: clamp(56px, 6.4vw, 92px) clamp(40px, 4.4vw, 64px);
}

body.zumi .zumi-about-features {
  padding-block: clamp(8px, 1.2vw, 16px) clamp(56px, 6.4vw, 92px);
}

body.zumi .zumi-about-photos--second {
  padding-block: clamp(40px, 4.4vw, 64px) clamp(64px, 7vw, 110px);
}

/* Centred introduction, like the reference's SEO band: rules either side of the
   eyebrow, centred heading and copy, one button. */
body.zumi .zumi-band {
  padding-block: clamp(56px, 6vw, 92px);
}

body.zumi .zumi-band > .e-con-inner {
  align-items: center;
  text-align: center;
}

body.zumi .zumi-band .zumi-eyebrow {
  justify-content: center;
  gap: 18px;
}

body.zumi .zumi-band .zumi-eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, var(--zumi-gold), transparent);
}

body.zumi .zumi-band > .e-con-inner > .elementor-widget.zumi-display {
  margin-top: 22px;
  max-width: 900px;
}

body.zumi .zumi-band > .e-con-inner > .elementor-widget.zumi-body,
body.zumi .zumi-band > .e-con-inner > .elementor-widget.zumi-body p {
  max-width: 860px;
  margin-top: 22px;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  color: rgba(250, 229, 186, 0.88);
  text-align: center;
}

body.zumi .zumi-band .zumi-cta-btn {
  margin-top: 34px;
  text-align: center;
}

body.zumi .zumi-band .zumi-cta-btn .elementor-button {
  margin-top: 0;
}

body.zumi .zumi-about-photos .e-con-inner {
  flex-flow: row nowrap;
  gap: clamp(8px, 0.9vw, 14px);
  align-items: stretch;
}

body.zumi .zumi-about-photos .elementor-widget-image,
body.zumi .zumi-about-photos .elementor-widget-container,
body.zumi .zumi-about-photos img {
  height: 100%;
}

body.zumi .zumi-about-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.9) saturate(0.96);
}

body.zumi .zumi-about-photos--four img {
  aspect-ratio: 1;
}

/* Two equal 4:5 cards: the dish files are 4:5, so the pair shows the whole plate. */
body.zumi .zumi-about-photos--second .elementor-widget-image,
body.zumi .zumi-about-photos--second .elementor-widget-container,
body.zumi .zumi-about-photos--second img {
  height: auto;
}

body.zumi .zumi-about-photos--second img {
  aspect-ratio: 4 / 5;
}

/* Elementor's `.e-con.e-con > .e-con-inner > .elementor-widget` (0,4,0) sets
   max-width: 100%; the wrappers have to be spelled out to win. */
body.zumi .zumi-about-story > .e-con-inner > .elementor-widget.zumi-display {
  max-width: 880px;
}

body.zumi .zumi-about-story > .e-con-inner > .elementor-widget.zumi-body,
body.zumi .zumi-about-story > .e-con-inner > .elementor-widget.zumi-body p {
  max-width: 640px;
  margin-top: 20px;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  color: rgba(250, 229, 186, 0.86);
}

body.zumi .zumi-about-features > .e-con-inner {
  flex-flow: row nowrap;
  gap: clamp(24px, 3.4vw, 54px);
  align-items: stretch;
}

body.zumi .zumi-about-features > .e-con-inner > .e-con {
  padding-top: 20px;
  border-top: 1px solid var(--zumi-line-strong);
}

body.zumi .zumi-feature__num {
  font-family: var(--zumi-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--zumi-gold);
}

body.zumi .zumi-feature__h {
  min-height: 2.3em;
  margin: 12px 0 10px;
  font-family: var(--zumi-serif);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--zumi-cream);
}

body.zumi .zumi-feature__p,
body.zumi .zumi-feature__p p {
  font-family: var(--zumi-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--zumi-muted);
}

@media (max-width: 760px) {
  body.zumi .zumi-about-features > .e-con-inner {
    gap: 22px;
  }
}

/* -------------------------------------------------------------------------
   Menu page hero
   ---------------------------------------------------------------------- */

body.zumi .zumi-menu-hero {
  position: relative;
  padding-block: 170px 62px;
  overflow: hidden;
  isolation: isolate;
  background: var(--zumi-bg);
}

body.zumi .zumi-menu-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/menu-hero.webp") center 52% / cover no-repeat;
  filter: brightness(0.46) saturate(1);
}

body.zumi .zumi-menu-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 13, 10, 0.97) 0%, rgba(14, 13, 10, 0.72) 46%, rgba(14, 13, 10, 0.2) 78%),
    linear-gradient(0deg, var(--zumi-bg) 0%, transparent 58%);
}

body.zumi .zumi-menu-hero__title .elementor-heading-title,
body.zumi .zumi-menu-hero__title {
  font-family: var(--zumi-serif) !important;
  font-size: clamp(44px, 6.3vw, 90px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  color: var(--zumi-cream) !important;
}

body.zumi .zumi-menu-hero__lead,
body.zumi .zumi-menu-hero__lead p {
  max-width: 580px;
  margin-top: 22px;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  color: rgba(250, 229, 186, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* The shortcode carries its own spacing */
body.zumi .zumi-menu-body {
  padding-block: clamp(40px, 4vw, 60px) clamp(60px, 7vw, 90px);
}

body.zumi .zumi-menu-body > .e-con-inner {
  gap: 0;
}

/* -------------------------------------------------------------------------
   Contact
   ---------------------------------------------------------------------- */

body.zumi .zumi-contact {
  padding-block: 24px 26px;
}

body.zumi .zumi-contact > .e-con-inner {
  flex-flow: row nowrap;
  align-items: stretch;
  gap: clamp(18px, 3vw, 34px);
}

/* Two portrait panels: the map and the QR poster, both 3:4. */
body.zumi .zumi-contact__map .zumi-map {
  /* A third shorter than 3:4 (583 × 518 at desktop). */
  aspect-ratio: 9 / 8;
  min-height: 0;
  height: 100%;
  margin-top: 0;
}

body.zumi .zumi-contact-info {
  padding-block: 10px 96px;
}

body.zumi .zumi-contact-info .zumi-hours {
  margin-top: 48px;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Column direction + wrap gives the container a definite main size, which
     collapses aspect-ratio children (the map) to nothing. Use nowrap here. */
  body.zumi .zumi-split > .e-con-inner,
  body.zumi .zumi-cta > .e-con-inner,
  body.zumi .zumi-reservas > .e-con-inner,
  body.zumi .zumi-contact > .e-con-inner,
  body.zumi .zumi-about-photos > .e-con-inner,
  body.zumi .zumi-about-features > .e-con-inner,
  body.zumi .zumi-gallery > .e-con-inner {
    flex-flow: column nowrap;
  }

  /* The map no longer needs a 520 px floor once the panel stacks under it. */
  body.zumi .zumi-reservas__mapcol .zumi-map {
    min-height: clamp(260px, 62vw, 380px);
  }

  body.zumi .zumi-reservas__panel {
    padding: 34px 22px 38px !important;
  }

  body.zumi .zumi-split__media,
  body.zumi .zumi-split__copy,
  body.zumi .zumi-cta > .e-con-inner > .e-con,
  body.zumi .zumi-reservas > .e-con-inner > .e-con,
  body.zumi .zumi-contact > .e-con-inner > .e-con {
    width: 100% !important;
  }

  /* Grid instead of flex-wrap: rows and heights stay honest, and auto-fit
     fills the row with however many interior shots the client keeps. */
  body.zumi .zumi-gallery > .e-con-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
  }

  body.zumi .zumi-gallery > .e-con-inner > .e-con {
    width: 100% !important;
    height: 240px;
  }
}

@media (max-width: 760px) {
  body.zumi .zumi-hero {
    padding-block: 130px 76px;
  }

  body.zumi .zumi-hero {
    outline-offset: -12px;
  }

  body.zumi .zumi-hero__title .elementor-heading-title,
  body.zumi .zumi-hero__title {
    font-size: clamp(76px, 22vw, 118px) !important;
  }

  body.zumi .zumi-hero .zumi-eyebrow {
    letter-spacing: 0.24em;
    font-size: 11px;
  }

  body.zumi .zumi-hero .zumi-eyebrow::before,
  body.zumi .zumi-hero .zumi-eyebrow::after {
    width: 20px;
  }

  body.zumi .zumi-hero__meta-list {
    gap: 6px 14px;
  }

  body.zumi .zumi-hero__meta-list span + span::before {
    display: none;
  }

  body.zumi .zumi-page-hero {
    padding-block: 150px 62px;
  }

  body.zumi .zumi-menu-hero {
    padding-block: 140px 52px;
  }

  body.zumi .zumi-index {
    grid-template-columns: 1fr;
  }

  body.zumi .zumi-gallery > .e-con-inner > .e-con {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.zumi .zumi-gallery .elementor-widget-image img {
    transition: none;
  }

  body.zumi .zumi-hero::before {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Simple pages (page.php, 404, search)
   ---------------------------------------------------------------------- */

body.zumi .zumi-vpage {
  padding: 190px 0 clamp(80px, 9vw, 130px);
  background: var(--zumi-bg);
}

body.zumi .zumi-vpage__inner {
  max-width: 820px;
}

body.zumi .zumi-vpage__title {
  margin-top: 12px;
  font-family: var(--zumi-serif);
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--zumi-cream);
}

body.zumi .zumi-vpage__body,
body.zumi .zumi-body-copy {
  margin-top: 26px;
  font-family: var(--zumi-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--zumi-muted);
}

body.zumi .zumi-vpage__body h2 {
  margin-top: 34px;
  font-family: var(--zumi-serif);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--zumi-cream);
}

body.zumi .zumi-vpage__body p {
  margin-bottom: 1em;
}

body.zumi .zumi-vpage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

body.zumi .zumi-search-list {
  margin-top: 26px;
  border-top: 1px solid var(--zumi-line);
}

body.zumi .zumi-search-list li {
  border-bottom: 1px solid var(--zumi-line);
}

body.zumi .zumi-search-list a {
  display: block;
  padding: 12px 0;
  font-family: var(--zumi-serif);
  font-size: 20px;
  color: var(--zumi-cream);
}

body.zumi .zumi-search-list a:hover {
  color: var(--zumi-gold);
}

/* -------------------------------------------------------------------------
   Category pages (/carta/<slug>/)
   ---------------------------------------------------------------------- */

body.zumi .zumi-cat-page {
  padding-bottom: clamp(60px, 7vw, 110px);
}

body.zumi .zumi-cat-hero {
  position: relative;
  padding-block: 170px 54px;
  background: var(--zumi-bg);
}

body.zumi .zumi-cat-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
}

body.zumi .zumi-cat-hero__copy {
  max-width: 640px;
}

body.zumi .zumi-cat-hero__title {
  margin-top: 18px;
  font-family: var(--zumi-serif);
  font-size: clamp(46px, 6.3vw, 90px);
  font-weight: 600;
  line-height: 1;
  color: var(--zumi-cream);
}

body.zumi .zumi-cat-hero__jp {
  margin-top: 10px;
  font-family: var(--zumi-jp);
  font-size: 18px;
  letter-spacing: 0.4em;
  color: var(--zumi-gold);
}

body.zumi .zumi-cat-hero__meta {
  margin-top: 22px;
  font-family: var(--zumi-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zumi-muted);
}

body.zumi .zumi-cat-hero__desc {
  max-width: 520px;
  margin-top: 18px;
  font-family: var(--zumi-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.66;
  color: rgba(250, 229, 186, 0.86);
}

body.zumi .zumi-cat-hero__media {
  margin: 0;
  overflow: hidden;
}

body.zumi .zumi-cat-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

body.zumi .zumi-cat-page__body {
  margin-top: clamp(34px, 4vw, 60px);
}

body.zumi .zumi-cat-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: clamp(50px, 6vw, 90px);
  padding-top: 28px;
  border-top: 1px solid var(--zumi-line);
  font-family: var(--zumi-sans);
}

body.zumi .zumi-cat-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.zumi .zumi-cat-nav__link--next {
  text-align: right;
  margin-left: auto;
}

body.zumi .zumi-cat-nav__link span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zumi-muted);
}

body.zumi .zumi-cat-nav__link strong {
  font-family: var(--zumi-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--zumi-cream);
}

body.zumi .zumi-cat-nav__all {
  justify-self: center;
  font-family: var(--zumi-serif);
  font-size: 17px;
  color: var(--zumi-gold);
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (max-width: 1024px) {
  body.zumi .zumi-cat-hero__inner {
    grid-template-columns: 1fr;
  }

  body.zumi .zumi-cat-hero__media {
    order: -1;
  }

  body.zumi .zumi-cat-hero__media img {
    aspect-ratio: 16 / 9;
  }
}