/* =========================================
   KYRIMAI RESTAURANT — page-specific styles
   (shared layout / reveal / measure come from base.css)
========================================= */

.page-restaurant {
  background: #B5C9B8;
}

/* ---- Shared section bits ---- */
.rest-section {
  margin-top: 140px;
}

.rest-section__title,   .rest-hero__subtitle {
  font-weight: 700;
  font-size: 64px!important;
  line-height: 1.1!important;
  color: #000;
  text-align: center;
  margin: 0 auto 50px;
}

/* Body text (width/centering handled by .kev-measure) */
.rest-text {
  margin-top: 60px;
}

.rest-text p {
  font-weight: 500;
  color: #000;
  text-align: justify;
  margin: 0 0 24px;
}

.rest-text p:last-child {
  margin-bottom: 0;
}

/* Centered feature image */
.rest-feature-image {
  width: 78%;
}
.rest-feature-image img,
.rest-feature-image video {
  width: 100%;
  aspect-ratio: 1330 / 809;
  object-fit: cover;
  display: block;
}

/* =========================================
   SLIDERS — shared
========================================= */
/* Hand-swipable: let JS handle horizontal drags, keep vertical page scroll. */
.rest-swiper {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.rest-swiper img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Fade slider (hero + finesse) — cross-fade */
.rest-fade-slider {
  display: grid;
}

.rest-fade-slider > .rest-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.rest-fade-slider > .rest-slide.is-active,
.rest-fade-slider > .rest-slide:only-child {
  opacity: 1;
}

/* Nav arrows — sit BELOW the swiper, centered */
.rest-swiper-nav {
  display: flex;
  justify-content: center;
  gap: 90px;
  margin-top: 30px;
}

.rest-nav {
  display: block;
  width: 88px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  transition: opacity 0.2s ease;
}
.rest-nav svg { width: 100%; height: auto; display: block; }
.rest-nav:hover { opacity: 0.55; }

/* =========================================
   HERO
========================================= */
.rest-hero {
  padding-top: 150px;
  text-align: center;
}

.rest-hero__heading {
  font-size: clamp(36px, 13vw, 228px) !important;
  line-height: 1 !important;
  color: #fff;
  margin: auto;
  white-space: nowrap;
}

.rest-hero__heading span{
  color: #fff;
}

.rest-hero__subtitle {
  font-size: 64px;
  line-height: 1.1;
  color: #000;
  text-align: center;
  margin: 20px auto 36px;
}

.rest-hero__media {
  width: 78%;
}

.rest-hero__swiper .rest-slide {
  aspect-ratio: 1330 / 839;
  overflow: hidden;
}

.rest-hero__swiper .rest-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section tab nav (Breakfast / Lunch / Dinner / Sustainability)
   Width matches the body text below (kev-measure__inner); items spread
   edge-to-edge on one line with the highlighter drawn behind them. */
.rest-tabs-measure {
  margin-top: 70px;
}
.rest-tabs {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  /* Items centered within the full-width nav; gap controls the spacing. */
  font-size: 38px;
  gap: 40px;
  padding: 0 15px;
}

/* Highlighter SVG behind the tabs (~105% of the nav width, centered). */
.rest-tabs__bg {
  position: absolute;
  left: -2.5%;
  top: 50%;
  transform: translateY(-50%);
  width: 105%;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}
.rest-tabs__bg svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Left→right wipe reveal when the nav scrolls into view (no-JS: always shown). */
.kev-anim .rest-tabs__bg {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.kev-anim .rest-tabs.is-visible .rest-tabs__bg {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transition: -webkit-clip-path 1.1s cubic-bezier(0.5, 0, 0.2, 1),
              clip-path 1.1s cubic-bezier(0.5, 0, 0.2, 1);
}

.rest-tabs__item {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-weight: 700;
	font-family: 'Noto Serif Display';
  /* Flat 20px / 1.3 at all breakpoints (overrides the data-fit-row auto-sizing). */
  font-size: 24px;
  line-height: 1.3;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: opacity 0.2s ease;
}

/* Circle buttons (sample menu / book a table) */
.rest-hero__buttons {
  display: flex;
  justify-content: center;
  gap: 90px;
  margin-top: 50px;
}

.rest-circle-btn-wrap {
  position: relative;
  display: inline-block;
}

.rest-circle-btn {
	font-family: 'Noto Serif Display';
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
  padding: 18px 44px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hand-drawn circle outline behind each button (drawn on scroll via JS,
   reusing the events CTA mechanism). */
.rest-cta-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.rest-cta-circle__guide {
  /* JS overrides with the exact path length; gap > dash so it never repeats. */
  stroke-dasharray: 900 1800;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.5, 0, 0.3, 1);
}
/* Left button mirrors the right one's scribble. */
.rest-circle-btn-wrap--flip .rest-cta-circle {
  transform: scaleX(-1);
}

/* =========================================
   FROM HEART TO TABLE (full-bleed collage)
   Widths/heights mirror the Figma image proportions.
========================================= */
.rest-collage-section {
  position: relative;
  margin-top: 140px;
  /* Full-bleed so the absolutely-centered title lands on the SCREEN centre,
     not the host theme's (narrower) content container. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Grid keeps proportional widths AND reliable aspect-ratio heights */
.rest-collage {
  display: grid;
  grid-template-columns: 331fr 231fr 373fr 294fr 351fr;
  gap: 24px;
  align-items: start;
  align-content: start;
}

/* Heart collage: photos sit on a common center line and the row is centered
   within the (reserved) grid height. Lunch (--three) keeps its top cascade. */
.rest-collage:not(.rest-collage--three) {
  align-items: center;
  align-content: center;
}

.rest-collage__item {
  overflow: hidden;
}

.rest-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Heart collage (5 images, left→right) — aspect ratios + subtle offsets around
   the center line (centered via align-items/align-content above). */
.rest-collage__item:nth-child(1) { aspect-ratio: 331 / 497; margin-top: 0; }
.rest-collage__item:nth-child(2) { aspect-ratio: 231 / 308; margin-top: 40px; }
.rest-collage__item:nth-child(3) { aspect-ratio: 373 / 497; margin-top: 0; }
.rest-collage__item:nth-child(4) { aspect-ratio: 294 / 440; margin-top: 28px; }
.rest-collage__item:nth-child(5) { aspect-ratio: 351 / 494; margin-top: 14px; }

/* First view: the heart-collage photos fade in one by one, in a random order.
   The per-item animation-delay is set inline by initCollageReveal() (JS).
   After that the scroll-linked width animation (data-collage-scroll) takes
   over — the reveal observer is one-shot, so this never replays. */
.kev-anim .rest-collage[data-collage-scroll] .rest-collage__item.kev-fade.is-visible {
  animation: kevFadeIn 1.2s ease forwards;
}

.rest-collage__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)!important;
  margin: 0;
  font-size: 64px;
  line-height: 1.1;
  color: #fff;
  text-align: center;
}

/* =========================================
   LUNCH (full-bleed collage, 3 images left→right)
========================================= */
.rest-collage--three {
  grid-template-columns: 508fr 539fr 509fr;
}
.rest-collage--three .rest-collage__item:nth-child(1) { aspect-ratio: 508 / 678; margin-top: 226px; }
.rest-collage--three .rest-collage__item:nth-child(2) { aspect-ratio: 539 / 809; margin-top: 0; }
.rest-collage--three .rest-collage__item:nth-child(3) { aspect-ratio: 509 / 471; margin-top: 94px; }

.rest-portrait-image {
  width: 24%;
  max-width: 410px;
  margin: 100px auto 0;
}
.rest-portrait-image img,
.rest-portrait-image video {
  width: 100%;
  aspect-ratio: 9 / 16; /* reel format */
  object-fit: cover;
  display: block;
}

/* =========================================
   DINNER (full-bleed trio cross-fade slider)
========================================= */
.rest-trio {
  display: grid;
  grid-template-columns: 1fr 2.1fr 1fr; /* equal sides → center image stays page-centered */
  gap: 30px;
  align-items: start; /* center + right share the top edge */
}

.rest-trio > div { overflow: hidden; }
.rest-trio img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rest-trio__left   { aspect-ratio: 401 / 590; margin-top: 30%; } /* sits lower than center/right */
.rest-trio__center { aspect-ratio: 908 / 714; }
.rest-trio__right  { aspect-ratio: 444 / 592; }

/* Mobile variant (one image per slide) is hidden on desktop */
.rest-finesse-slider--mobile { display: none; }

.rest-finesse-single {
  aspect-ratio: 440 / 477;
  overflow: hidden;
}
.rest-finesse-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   VISION (peek slider)
========================================= */
.rest-vision {
  padding: 100px 0;
  background: #C7C9C9;
}

.rest-peek-viewport {
  overflow: hidden;
}

.rest-peek-track {
  display: flex;
  gap: 30px;
  transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1);
}

.rest-peek-slide {
  flex: 0 0 78%;
}

.rest-peek-slide img {
  width: 100%;
  aspect-ratio: 1296 / 907;
  object-fit: cover;
  display: block;
}

/* =========================================
   DECORATIVE ACCENTS (between sections)
========================================= */
.rest-deco {
  display: flex;
  justify-content: center;
  margin: 90px auto 0;
  color: #000;
}
.rest-deco svg {
  display: block;
  height: auto;
}
.rest-deco--slow svg    { width: 67px; }
.rest-deco--time svg    { width: 120px; }
.rest-deco--finesse svg { width: 141px; }
.rest-deco--vision svg  { width: 68px; }

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1199px) {
  .rest-hero__buttons { gap: 60px; }
  .rest-tabs { gap: 28px; }
  .rest-tabs__item,
  .rest-circle-btn { font-size: 16px; }
  .rest-circle-btn { padding: 14px 34px; }
}

@media (max-width: 991px) {
  .rest-hero { padding-top: 120px; }
  .rest-hero__heading { font-size: 96px; }
  .rest-hero__subtitle { font-size: 40px; }
  .rest-section { margin-top: 90px; }
  .rest-collage-section { margin-top: 90px; }
  .rest-section__title { font-size: 40px; }
  .rest-collage__title { font-size: 40px; }
  .rest-tabs { font-size: 26px; }
}

@media (max-width: 768px) {
  .rest-hero { padding-top: 100px; }
  
.rest-hero__heading {
  padding:0px;
}
  .rest-section { margin-top: 70px; }
  .rest-collage-section { margin-top: 70px; }

  .rest-hero__subtitle {
    font-size: 20px !important;
    line-height: 27px !important;
    margin-bottom: 15px;
  }
  .rest-section__title {
    font-size: 24px !important;
    line-height: 33px !important;
    margin-bottom: 20px;
  }

  .rest-text p { text-align: center; }

  .rest-tabs { flex-wrap: nowrap; font-size: 12px; gap: 15px; }

  .rest-hero__buttons { gap: 40px; }
  .rest-circle-btn { padding: 12px 28px; }

  .rest-nav { width: 56px; }
  .rest-swiper-nav { gap: 50px; }

  /* From heart to table: keep only THREE photos in one row, title overlaid.
     Photos sit on a common center line (with subtle offsets) and are centered
     within the reserved height. (JS sets the fr widths; CSS is the no-JS base.) */
  .rest-collage:not(.rest-collage--three) {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-items: center;
    align-content: center;
  }
  .rest-collage:not(.rest-collage--three) .rest-collage__item:nth-child(n+4) {
    display: none;
  }
  .rest-collage:not(.rest-collage--three) .rest-collage__item {
    margin-top: 0 !important;
  }
  .rest-collage:not(.rest-collage--three) .rest-collage__item:nth-child(2) {
    margin-top: 20px !important;
  }
  .rest-collage:not(.rest-collage--three) .rest-collage__item:nth-child(3) {
    margin-top: 10px !important;
  }

  /* Lunch (time travel): mobile keeps only the first two photos — left tall,
     right short, top-aligned (per mockup). */
  .rest-collage--three {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .rest-collage--three .rest-collage__item {
    margin-top: 0 !important;
  }
  .rest-collage--three .rest-collage__item:nth-child(1) {
    aspect-ratio: 508 / 678 !important;
  }
  .rest-collage--three .rest-collage__item:nth-child(2) {
    aspect-ratio: 4 / 3 !important;
    margin-top: 40px !important;
  }
  .rest-collage--three .rest-collage__item:nth-child(n+3) {
    display: none;
  }

  /* Title stays overlaid + centered on the collage (white, from desktop rule) */
  .rest-collage__title {
    font-size: 24px;
  }

  /* Finesse: swap the desktop trio slider for the one-image-per-slide slider */
  .rest-finesse-slider--desktop { display: none; }
  .rest-finesse-slider--mobile { display: block; }

  /* (trio only used on desktop now, but keep the stack rule harmless) */
  .rest-trio {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .rest-trio__left { margin-top: 0; }

  /* Contained sliders/images go full-bleed on mobile (portrait stays contained) */
  .rest-hero__media,
  .rest-vision-slider,
  .rest-feature-image {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Hero slider, breakfast image & finesse slider share one portrait ratio on mobile (full-bleed). */
  .rest-hero__swiper .rest-slide,
  .rest-feature-image img,
  .rest-feature-image video,
  .rest-finesse-single {
    aspect-ratio: 439 / 474;
  }

  .rest-peek-slide { flex: 0 0 88%; }

  .rest-portrait-image { width: 60%; }

  .rest-vision { padding: 70px 0; }
  .rest-deco { margin-top: 60px; }
  .rest-deco--slow svg    { width: 31px; }
  .rest-deco--time svg    { width: 64px; }
  .rest-deco--finesse svg { width: 79.995px; }
  .rest-deco--vision svg  { width: 32px; }
}

/* Titles at ≤1199px — placed LAST so it wins over the base (64px) and the
   ≤768 !important title rules, making 45px/50px apply across the whole range. */
@media screen and (max-width: 1199px) {
  .rest-section__title,
  .rest-hero__subtitle {
    font-size: 45px !important;
    line-height: 50px !important;
    text-decoration: none;
  }
}

/* Phones: smaller titles (after the ≤1199 block so this wins ≤768). */
@media screen and (max-width: 768px) {
  .rest-section__title,
  .rest-hero__subtitle {
    font-size: 24px !important;
    line-height: 33px !important;
  }
}