/* ============================================================
   BAYWATCH HOTEL — interior pages (multi-page) components
   Loaded after main.css. Inherits all tokens.
   ============================================================ */

/* active nav link */
.nav__links a.is-current{ color:var(--bone); }
.nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; }

/* page hero (interior) */
.page-hero{ position:relative; min-height:clamp(56vh,64vh,640px); display:flex; align-items:flex-end; overflow:hidden; }
.page-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.05); }
.page-hero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,16,15,.55) 0%, rgba(8,16,15,.12) 38%, rgba(8,16,15,.18) 60%, rgba(8,16,15,.92) 100%); }
.page-hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter) clamp(2.5rem,6vh,4.5rem); }
.page-hero__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,7vw,5.6rem); line-height:1.06; letter-spacing:-.01em; color:var(--bone); padding-bottom:.04em; }
.page-hero__title em{ font-style:italic; color:var(--gold-2); }
.page-hero__sub{ color:var(--bone); font-size:clamp(1.05rem,1.5vw,1.3rem); max-width:48ch; margin-top:1.2rem; font-weight:300; }

/* breadcrumb */
.breadcrumb{ display:flex; gap:.6rem; align-items:center; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); margin-bottom:1.4rem; flex-wrap:wrap; }
.breadcrumb a{ color:var(--bone-3); transition:color .3s var(--ease); }
.breadcrumb a:hover{ color:var(--bone); }
.breadcrumb i{ font-style:normal; color:var(--gold); }

/* generic section + prose */
.section{ padding:clamp(5rem,11vh,9rem) 0; border-bottom:1px solid var(--line-soft); }
.section--tight{ padding:clamp(3.5rem,7vh,6rem) 0; }
.prose{ max-width:68ch; }
.prose p{ color:var(--bone-3); font-size:1.1rem; margin-bottom:1.4rem; line-height:1.75; }
.prose p:last-child{ margin-bottom:0; }
.prose h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--gold-2); margin:2.4rem 0 1rem; }
.prose strong{ color:var(--bone); font-weight:500; }
.lead{ font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.35; color:var(--bone); font-style:italic; }

/* two-column intro: lead left, body right */
.intro2{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }

/* tabs / subnav (area page) */
.subnav{ position:sticky; top:64px; z-index:40; background:rgba(8,16,15,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-block:1px solid var(--line-soft); }
.subnav__row{ display:flex; gap:.4rem; max-width:var(--maxw); margin-inline:auto; padding:.7rem var(--gutter); overflow-x:auto; scrollbar-width:none; }
.subnav__row::-webkit-scrollbar{ display:none; }
.subnav__row a{ flex:none; font-size:.8rem; letter-spacing:.04em; color:var(--bone-2); padding:.55rem 1.1rem; border-radius:999px; transition:.3s var(--ease); white-space:nowrap; border:1px solid transparent; }
.subnav__row a:hover{ color:var(--bone); border-color:var(--line); }
.subnav__row a.is-active{ background:var(--gold); color:var(--ink); }

/* card grids (beaches / sights / excursions) */
.cards{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.card{ position:relative; display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .5s var(--ease), border-color .5s var(--ease); }
.card:hover{ transform:translateY(-4px); border-color:rgba(198,162,90,.42); }
.card__media{ aspect-ratio:4/3; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__body{ padding:1.4rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card__kicker{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.card__title{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--bone); line-height:1.1; }
.card__text{ color:var(--bone-3); font-size:.96rem; line-height:1.6; }
.card__meta{ margin-top:auto; padding-top:1rem; font-size:.78rem; letter-spacing:.04em; color:var(--gold-2); }

/* big teaser links (homepage / area hub) */
.tease{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.tease__item{ position:relative; min-height:400px; border-radius:var(--radius); overflow:hidden; display:flex; align-items:flex-end; }
.tease__item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform 1.1s var(--ease); }
.tease__item::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,16,15,.05),rgba(8,16,15,.88)); }
.tease__item:hover img{ transform:scale(1.07); }
.tease__cap{ position:relative; z-index:2; padding:1.9rem; }
.tease__cap h3{ font-family:var(--serif); font-weight:400; font-size:1.9rem; color:var(--bone); line-height:1.05; }
.tease__cap span{ font-size:.78rem; letter-spacing:.1em; color:var(--gold-2); display:inline-flex; gap:.5rem; align-items:center; margin-top:.5rem; }

/* facts row */
.facts-row{ display:flex; flex-wrap:wrap; gap:0 2.5rem; margin-top:1.4rem; }
.facts-row div{ padding:1rem 0; border-top:1px solid var(--line); min-width:150px; flex:1; }
.facts-row b{ display:block; font-family:var(--serif); font-size:1.9rem; color:var(--gold); line-height:1; }
.facts-row span{ font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bone-2); }

/* amenity chips */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.chips li{ font-size:.85rem; color:var(--bone-2); border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; }

/* price table */
.prices{ max-width:760px; }
.prices li{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding:1.2rem 0; border-top:1px solid var(--line); }
.prices li:last-child{ border-bottom:1px solid var(--line); }
.prices .range{ font-size:1.05rem; color:var(--bone); }
.prices .range span{ display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.2rem; }
.prices .amount{ font-family:var(--serif); font-size:1.8rem; color:var(--gold-2); white-space:nowrap; }
.prices__note{ color:var(--bone-3); font-size:.92rem; margin-top:1.4rem; }

/* contact form */
.form{ display:grid; gap:1.2rem; max-width:560px; }
.form .row{ display:grid; gap:.5rem; }
.form label{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-2); }
.form input,.form textarea{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--bone); padding:.9rem 1.1rem; font:inherit; font-size:1rem; transition:border-color .3s var(--ease); }
.form input::placeholder,.form textarea::placeholder{ color:rgba(241,233,218,.4); }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--gold); }
.form textarea{ min-height:150px; resize:vertical; }
/* live validation states */
.form input.is-invalid,.form textarea.is-invalid{ border-color:#c46a5a; }
.form input.is-valid,.form textarea.is-valid{ border-color:rgba(31,175,84,.55); }
.field-err{ font-size:.78rem; color:#e0917f; letter-spacing:.01em; min-height:1em; }
.field-err:empty{ display:none; }
/* submit loading spinner + success note */
.btn .btn__spin{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(11,20,19,.35); border-top-color:var(--ink); display:inline-block; animation:cf-spin .7s linear infinite; }
@keyframes cf-spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ pointer-events:none; opacity:.85; }
.cf-note--ok{ color:var(--gold-2)!important; border-left:2px solid var(--gold); padding-left:.9rem; }

/* contact info columns */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.contact-info dl div{ padding:1.1rem 0; border-top:1px solid var(--line); }
.contact-info dt{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; }
.contact-info dd{ font-family:var(--serif); font-size:1.25rem; color:var(--bone); }
.contact-info dd a{ transition:color .3s var(--ease); }
.contact-info dd a:hover{ color:var(--gold-2); }

/* map */
.map{ position:relative; width:100%; aspect-ratio:16/8; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-top:2rem; }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05); }

/* gallery grid + lightbox — fixed-cell CSS grid (no column-reflow jank) with
   content-visibility so off-screen tiles aren't decoded/painted until near view */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-grid figure{
  margin:0; overflow:hidden; border-radius:var(--radius); cursor:zoom-in;
  aspect-ratio:4/3; content-visibility:auto; contain-intrinsic-size:auto 280px;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease), filter .5s var(--ease); filter:saturate(.95); will-change:transform; }
.gallery-grid figure:hover img{ transform:scale(1.04); filter:saturate(1.06); }
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(6,10,9,.95); display:flex; align-items:center; justify-content:center; padding:4vw; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__close{ position:absolute; top:1.4rem; right:1.8rem; color:var(--bone); font-size:2.2rem; line-height:1; }

/* section heading helper */
.shead{ max-width:48ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.shead .story__kicker{ margin-bottom:1rem; }
.shead p{ color:var(--bone-3); font-size:1.08rem; margin-top:1rem; }

/* responsive */
@media (max-width:1024px){
  .intro2{ grid-template-columns:1fr; gap:2rem; }
  .tease{ grid-template-columns:1fr 1fr; }
  .cards--3{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  /* keep cards two-per-row on phones (compact) instead of one big stack */
  .cards--2,.cards--3{ grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .tease{ grid-template-columns:1fr; }
  .card__media{ aspect-ratio:1/1; }
  .card__body{ padding:.85rem .9rem 1rem; gap:.35rem; }
  .card__kicker{ font-size:.56rem; letter-spacing:.14em; }
  .card__title{ font-size:1.02rem; }
  .card__text{ font-size:.8rem; line-height:1.42; }
  /* clamp only photo cards (keeps uniform height); text-only info cards stay full */
  .card:has(.card__media) .card__text{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .card__meta{ font-size:.7rem; padding-top:.6rem; }
  .gallery-grid{ grid-template-columns:1fr 1fr; gap:.6rem; }
  .prices li{ flex-direction:column; gap:.3rem; }
  .prices .amount{ align-self:flex-start; }
  /* "Πώς να έρθετε" — text-dense transport cards read better full-width; tidy map spacing */
  #access .cards--3{ grid-template-columns:1fr; gap:1rem; margin-top:1.8rem!important; }
  #access .table__menu{ margin-top:.4rem; }
  #access .locmap{ margin-top:1.6rem; }
}