/* ==========================================================================
   SIGETH — Gallery + Booking page
   Loads after styles.css and reuses its tokens.
   ========================================================================== */

/* ==========================================================================
   PROPERTY HERO
   ========================================================================== */
.phero {
  position: relative;
  min-height: 88vh;  /* fallback for browsers without svh */

  min-height: 88svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 70px) 0 64px;
  overflow: hidden; isolation: isolate;
}
.phero-media {
  position: absolute; inset: 0; z-index: -2;
  /* background-image is set inline on each property page */
  background-size: cover; background-position: center 50%;
  transform: scale(1.06);
  animation: kenburns 30s var(--ease) infinite alternate;
}
.phero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,24,42,.72) 0%, rgba(6,24,42,.2) 34%, rgba(6,24,42,.86) 100%);
}
.phero-inner { color: #fff; max-width: 760px; }
.phero .eyebrow { color: var(--amber-2); }
.phero h1 {
  color: #fff; margin-bottom: 14px;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  text-shadow: 0 4px 40px rgba(0,0,0,.4);
}
/* Address, and the house's own phone beside it. flex-wrap rather than a fixed
   row so a long address and a number cannot run off a narrow screen — on a
   phone the number simply drops to its own line. */
.phero-loc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  color: rgba(255,255,255,.82); font-weight: 600; font-size: 1rem;
  margin-bottom: 26px;
}
.phero-loc > span { display: inline-flex; align-items: center; gap: 8px; }
.phero-loc svg { width: 17px; height: 17px; color: var(--amber-2); flex-shrink: 0; }

.phero-tel {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: .9rem; text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.phero-tel:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); }
.phero-tel svg { width: 15px; height: 15px; }

.phero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.phero-tags li svg { width: 16px; height: 16px; color: var(--amber-2); flex-shrink: 0; }
.phero-tags li {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 8px 15px;
  font-size: .84rem; font-weight: 600; color: #fff;
}
.phero-ctas { display: flex; gap: 13px; flex-wrap: wrap; }

/* ==========================================================================
   FACTS STRIP
   ========================================================================== */
.facts {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 3;
}
.facts-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
}
.fact {
  background: var(--white);
  padding: 30px 26px;
  display: flex; align-items: center; gap: 16px;
  transition: background var(--t);
}
.fact:hover { background: var(--paper); }
.fact-ico {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--aqua-dim); color: var(--aqua);
}
.fact-ico svg { width: 20px; height: 20px; }
.fact-body strong { display: block; color: var(--t-900); font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.fact-body span   { display: block; font-size: .83rem; color: var(--t-500); }

/* ==========================================================================
   ROOMS & RATES
   ========================================================================== */
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.room {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.room:hover { transform: translateY(-7px); box-shadow: var(--sh-xl); border-color: transparent; }

.room-media { position: relative; height: 218px; overflow: hidden; }
.room-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.room:hover .room-media img { transform: scale(1.08); }
.room-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,24,42,.5));
}
.room-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.94);
  color: var(--navy); font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.room-tag.is-top { background: var(--amber); color: #24160a; }

.room-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.room-body h3 { margin-bottom: 6px; }
.room-sleeps { font-size: .85rem; color: var(--t-500); font-weight: 600; margin-bottom: 18px; }

.room-rate {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.room-rate .amt {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.9rem; color: var(--navy); letter-spacing: -.03em;
}
.room-rate .per { font-size: .84rem; color: var(--t-500); font-weight: 600; }
.room-rate .alt { margin-left: auto; font-size: .8rem; color: var(--t-500); }

.room-feats { margin-bottom: 24px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.room-feats li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .89rem; color: var(--t-700);
}
.room-feats li::before {
  content: ""; flex-shrink: 0; margin-top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aqua);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 40px;
}
.gal-filter {
  padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--line-2);
  background: var(--white);
  font-size: .87rem; font-weight: 700; color: var(--t-700);
  transition: all var(--t);
}
.gal-filter:hover { border-color: var(--aqua); color: var(--aqua); transform: translateY(-2px); }
.gal-filter.active {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 22px -10px rgba(11,43,71,.7);
}
.gal-filter .count { opacity: .55; font-weight: 600; margin-left: 5px; font-size: .8em; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 14px;
}
.gal-item {
  position: relative; overflow: hidden;
  border-radius: var(--r);
  cursor: zoom-in;
  background: var(--paper);
  box-shadow: var(--sh-md);
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              box-shadow var(--t);
}
/* Entrance state only when scripting is live — otherwise the photos would
   never receive .pop and the gallery would render empty. */
.js .gal-item { opacity: 0; transform: scale(.94) translateY(14px); }
.js .gal-item.pop { opacity: 1; transform: none; }
.gal-item:hover { box-shadow: var(--sh-xl); }
.gal-item.is-hidden { display: none; }

.gal-item.g-tall { grid-row: span 2; }
.gal-item.g-wide { grid-column: span 2; }

.gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter var(--t);
}
.gal-item:hover img { transform: scale(1.09); }

.gal-item figcaption {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, transparent 42%, rgba(6,24,42,.86));
  opacity: 0; transition: opacity var(--t);
}
.gal-item:hover figcaption, .gal-item:focus-visible figcaption { opacity: 1; }
.gal-item figcaption b {
  color: #fff; font-family: var(--font-display);
  font-size: .96rem; font-weight: 700;
  transform: translateY(8px); transition: transform .45s var(--ease);
}
.gal-item figcaption em {
  color: var(--amber-2); font-style: normal;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(8px); transition: transform .45s var(--ease) .05s;
}
.gal-item:hover figcaption b, .gal-item:hover figcaption em { transform: none; }

.gal-zoom {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: var(--navy);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--t), transform var(--t);
}
.gal-zoom svg { width: 15px; height: 15px; }
.gal-item:hover .gal-zoom { opacity: 1; transform: none; }

.gal-empty { text-align: center; padding: 60px 0; color: var(--t-500); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4, 14, 24, .95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lb.open { opacity: 1; visibility: visible; }
/* Author `display:flex` above outranks the UA's [hidden] rule, so restate it —
   otherwise the closed viewer stays in the a11y tree and the tab order. */
.lb[hidden] { display: none; }

.lb-stage {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

/* Fixed box so the outgoing and incoming photos overlap exactly while they
   slide past each other. The open/close animation lives here, leaving the
   image free to own the slide. */
.lb-frame {
  position: relative;
  width: min(1180px, 92vw);
  height: 74vh;   /* fallback for browsers without svh */
  height: 74svh;
  overflow: hidden;
  opacity: 0; transform: scale(.96);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.lb.open .lb-frame { opacity: 1; transform: none; }

.lb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* drop-shadow hugs the photo itself, so letterboxed images still look right */
  filter: drop-shadow(0 26px 55px rgba(0, 0, 0, .75));
  transition: transform .45s var(--ease), opacity .34s var(--ease);
  will-change: transform, opacity;
}

/* Incoming photo starts offset toward the edge it travels from … */
.lb-img.slide-from-right { transform: translateX(10%); opacity: 0; }
.lb-img.slide-from-left  { transform: translateX(-10%); opacity: 0; }
/* … while the outgoing clone leaves the opposite way. */
.lb-img.slide-to-left    { transform: translateX(-10%); opacity: 0; }
.lb-img.slide-to-right   { transform: translateX(10%); opacity: 0; }

/* Used to plant the incoming photo at its start point without animating there */
.lb-img.no-anim { transition: none !important; }

.lb-cap { text-align: center; color: #fff; }
.lb-cap b { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; }
.lb-cap span { font-size: .8rem; color: rgba(255,255,255,.55); letter-spacing: .1em; text-transform: uppercase; }

.lb-btn {
  position: absolute;
  /* The frame is positioned and comes later in the DOM, so without this it
     paints over the controls and eats the taps once it is wide enough
     to reach them (narrow viewports). */
  z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  transition: background var(--t), transform var(--t), border-color var(--t);
}
.lb-btn:hover { background: rgba(255,255,255,.24); transform: scale(1.08); border-color: rgba(255,255,255,.5); }
.lb-prev  { left: 24px;  top: 50%; margin-top: -26px; }
.lb-next  { right: 24px; top: 50%; margin-top: -26px; }
.lb-close { top: 24px; right: 24px; }
.lb-count {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,.6); font-size: .84rem; font-weight: 600;
  letter-spacing: .1em;
}
.lb-book {
  position: absolute; bottom: 22px; right: 24px;
  z-index: 3;
}

/* ==========================================================================
   AMENITIES
   ========================================================================== */
.amen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.amen {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  padding: 18px 20px;
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.amen:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); }
.amen i {
  flex-shrink: 0; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,.08); color: var(--amber-2);
}
.amen i svg { width: 19px; height: 19px; }
.amen span { font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.88); }

/* ==========================================================================
   BOOKING
   ========================================================================== */
.book-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  /* `1fr` on row 2 keeps the slack there instead of padding out row 1 and
     opening a gap under the heading. */
  grid-template-rows: auto 1fr;
  gap: 28px 56px;
  align-items: start;
}
/* Desktop: heading and the WhatsApp card stack in the left column,
   form fills the right across both rows. */
.book-grid > .book-aside { grid-column: 1; grid-row: 1; }
.book-grid > .book-call  { grid-column: 1; grid-row: 2; align-self: start; }
.book-grid > .form-card  { grid-column: 2; grid-row: 1 / span 2; }


.book-call {
  padding: 22px 24px;
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  border-radius: var(--r);
  color: rgba(255,255,255,.75);
}
.book-call strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 4px; }
.book-call p { font-size: .87rem; margin-bottom: 16px; }
.book-call .btn { width: 100%; }

.nights-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--aqua-dim); color: var(--aqua);
  border-radius: 999px; padding: 5px 13px;
  font-size: .78rem; font-weight: 700;
  margin-left: 8px;
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--t), transform var(--t);
}
.nights-badge.show { opacity: 1; transform: none; }

/* Sticky mobile book bar */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px -12px rgba(6,24,42,.28);
  transform: translateY(120%);
  transition: transform .45s var(--ease);
}
.book-bar.show { transform: none; }
.book-bar .bb-copy strong {
  display: block; font-family: var(--font-display);
  font-size: .95rem; color: var(--t-900); line-height: 1.2;
}
.book-bar .bb-copy span { font-size: .78rem; color: var(--t-500); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .amen-grid { grid-template-columns: repeat(2, 1fr); }
  /* Single column: the form follows the heading directly so that jumping to
     #book actually lands on the fields, with the call-us card after it. */
  .book-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; }
  .book-grid > .book-aside { grid-column: auto; grid-row: auto; order: 1; }
  .book-grid > .form-card  { grid-column: auto; grid-row: auto; order: 2; }
  .book-grid > .book-call  { grid-column: auto; grid-row: auto; order: 3; }
}

@media (max-width: 720px) {
  .phero { min-height: 82svh; padding: calc(var(--nav-h) + 50px) 0 48px; }
  .phero-ctas .btn { flex: 1 1 100%; }
  .facts-grid { grid-template-columns: 1fr; }
  .fact { padding: 20px 22px; }

  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 10px; }
  .gal-item.g-wide { grid-column: span 2; }
  .gal-item figcaption { opacity: 1; padding: 12px; background: linear-gradient(180deg, transparent 55%, rgba(6,24,42,.8)); }
  .gal-item figcaption b { font-size: .8rem; transform: none; }
  .gal-item figcaption em { font-size: .62rem; transform: none; }
  .gal-zoom { display: none; }

  .lb-btn { width: 44px; height: 44px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-close { top: 14px; right: 14px; }
  .lb-book { display: none; }
  .lb-frame { width: 94vw; height: 62vh; height: 62svh; }

  .amen-grid { grid-template-columns: 1fr; }

  .book-bar { display: flex; }
  body { padding-bottom: 74px; }
}

/* Tier badge beside a room name, for properties whose categories share a
   layout and differ only by size or finish. */
.room-tier {
  display: inline-block; vertical-align: middle;
  margin-left: 9px; padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--paper); color: var(--t-500);
  border: 1px solid var(--line);
}
.room-tier.is-premium {
  background: var(--amber-dim); color: var(--amber);
  border-color: transparent;
}