/* ==========================================================================
   responsive.css
   Layered on top of style.css (mobile-first). Breakpoints:
     768px  tablet: two-column compositions, gallery becomes an editorial grid
     1024px laptop: full navigation, asymmetric 12-column layouts, sticky story
     1440px large desktop: more air, larger type ceilings
   ========================================================================== */

/* ---------- 768px: tablet ---------- */
@media (min-width: 768px) {
  :root { --header-h: 5rem; }

  .welcome__grid { grid-template-columns: 1fr 1fr; align-items: end; }
  .welcome__media { padding-top: 0; }

  .figures { grid-template-columns: repeat(4, 1fr); }
  .figures__item { padding: 2.25rem 1.5rem 2.5rem; border-right: 1px solid var(--line); }
  .figures__item:nth-child(odd) { padding-right: 1.5rem; }
  .figures__item:first-child { padding-left: 0; }
  .figures__item:last-child { border-right: 0; }

  .space { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: end; }
  .space--wide .space__media { grid-column: 1 / 9; }
  .space--wide .space__text { grid-column: 9 / 13; padding-bottom: .5rem; }
  .space--reverse .space__media { grid-column: 6 / 13; grid-row: 1; }
  .space--reverse .space__text { grid-column: 1 / 6; grid-row: 1; align-self: center; }

  /* Gallery: asymmetric editorial grid */
  .gallery__grid {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem); align-items: start;
    overflow: visible; max-width: var(--maxw); margin-inline: auto;
  }
  .g { flex: none; }
  .g--a a, .g--d a, .g--i a { aspect-ratio: 3 / 2; }
  .g--a { grid-column: 1 / 8; }
  .g--b { grid-column: 9 / 13; margin-top: 18%; }
  .g--c { grid-column: 2 / 6; margin-top: -6%; }
  .g--d { grid-column: 7 / 13; margin-top: 12%; }
  .g--e { grid-column: 1 / 5; }
  .g--f { grid-column: 6 / 10; margin-top: 16%; }
  .g--g { grid-column: 1 / 13; margin-block: 2%; }
  .g--g a { aspect-ratio: 21 / 9; }
  .g--h { grid-column: 1 / 5; }
  .g--i { grid-column: 6 / 13; margin-top: 10%; }

  .moment { flex-basis: 42%; }
  .review { flex-basis: calc((100% - 2rem) / 2.3); }

  .location__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .location__media { aspect-ratio: 4 / 5; }

  /* amenities: always-open grid from tablet up */
  .amenities__grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .amenity__head { grid-template-columns: 1fr; gap: 1rem; padding: 2.25rem 0 .9rem; cursor: default; }
  .amenity__icon { width: 2rem; height: 2rem; }
  .amenity__chevron { display: none; }
  .amenity ul { padding: 0 0 2.25rem; }
  .amenity__title { font-size: 1.45rem; }



  .lightbox__figure { padding: 5rem 6rem 1.5rem; }
  .lightbox__prev, .lightbox__next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__prev { left: 1.5rem; }
  .lightbox__next { right: 1.5rem; }
  .lightbox__close { top: 1.5rem; right: 1.5rem; }
}

/* ---------- 1024px: laptop ---------- */
@media (min-width: 1024px) {
  /* the Availability button joins the header; the text menu waits for 1200px
     (the Greek labels do not fit next to it below that) */
  .site-header__cta { display: inline-flex; flex: none; white-space: nowrap; }
  .menu-toggle { order: 4; }

  .hero__content { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: end; }
  .hero__content > * { grid-column: 1 / 11; }
  .hero__lede { max-width: 34ch; }
  .hero__scroll { bottom: 2.5rem; }

  .welcome__grid { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; align-items: start; }
  .welcome__text { grid-column: 1 / 7; padding-top: 2rem; }
  .welcome__media { grid-column: 8 / 13; margin-top: 8rem; }

  .section-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .section-head > * { grid-column: 1 / 10; }
  .section-head--split { display: flex; }

  .space { column-gap: 1.5rem; }
  .space--wide .space__media { grid-column: 1 / 9; }
  .space--wide .space__text { grid-column: 10 / 13; }
  .space--reverse .space__media { grid-column: 7 / 12; }
  .space--reverse .space__text { grid-column: 2 / 6; }
  .spaces > .space:nth-child(3) .space__media { grid-column: 2 / 10; }
  .spaces > .space:nth-child(3) .space__text { grid-column: 10 / 13; padding-left: 1.5rem; }

  .interlude { height: 88svh; }

  /* Experience: sticky stage + scrolling moments */
  .experience__layout { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .experience__stage { display: block; grid-column: 1 / 7; }
  .experience__frame {
    position: sticky; top: calc(var(--header-h) + 4vh);
    height: calc(100vh - var(--header-h) - 8vh); max-height: 52rem;
    overflow: hidden; background: var(--sand);
  }
  .experience__frame picture { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--ease), transform 2.4s var(--ease-out); }
  .experience__frame picture.is-active { opacity: 1; transform: none; }
  .experience__frame img { width: 100%; height: 100%; object-fit: cover; }

  .experience__moments {
    grid-column: 8 / 13; display: grid; grid-template-columns: 1fr; gap: 0;
    overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none;
  }
  /* Inactive moments stay fully legible (AA); only the heading deepens when active */
  .moment { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; margin-top: 0 !important; }
  .moment .h3 { color: var(--muted); transition: color .8s var(--ease); }
  .moment.is-active .h3 { color: var(--ink); }
  .moment:first-child { min-height: 64vh; justify-content: flex-start; padding-top: 12vh; }
  .moment:last-child { min-height: 70vh; }
  .moment__media { display: none; }
  .moment .h3 { font-size: clamp(2rem, 3vw, 2.75rem); }

  .location__grid { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; }
  .location__text { grid-column: 1 / 6; }
  .location__media { grid-column: 7 / 13; }

  .amenities__grid { grid-template-columns: repeat(3, 1fr); column-gap: 3.5rem; }
  .review { flex-basis: calc((100% - 2rem) / 3); }
  .lang { order: 2; }
  .site-header__cta { order: 3; }

}

/* ---------- 1200px: full text menu in the header ---------- */
@media (min-width: 1200px) {
  .nav { display: block; flex: none; }
  .menu-toggle, .menu { display: none; }
  .wordmark { margin-right: 0; flex: 1; }
  .site-header__inner { gap: 2rem; }
}
@media (min-width: 1280px) {
  .site-header__inner { gap: 3rem; }
}

/* ---------- 1440px: large desktop ---------- */
@media (min-width: 1440px) {
  :root { --gutter: 5rem; }
  .hero__title { font-size: min(10rem, 10.5vw); }
  .welcome__media { grid-column: 8 / 12; }
}

/* Very large screens: keep the hero from becoming a letterbox */
@media (min-width: 1920px) {
  :root { --maxw: 100rem; }
}

/* Hover-capable devices only: nothing here should be required for touch users */
@media (hover: none) {
  .g a:hover img { transform: none; }
}