/* ============================================================
   NALIA SUITE — components.css
   Photo placeholders · cards · forms · timeline · CTA · lightbox
   ============================================================ */

/* ---------------- photo placeholder system ----------------
   Every future photograph lives inside a .ph figure with a fixed
   aspect ratio (no layout shift). When a real image path is set in
   config.js → NALIA.photos, main.js injects the <img> and the
   placeholder artwork fades behind it. */
.ph{
  position:relative;overflow:hidden;background:var(--linen);
  border:1px solid var(--line);
}
.ph::after{ /* fine grain */
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph[data-ratio="3/2"]{aspect-ratio:3/2}
.ph[data-ratio="2/3"]{aspect-ratio:2/3}
.ph[data-ratio="4/5"]{aspect-ratio:4/5}
.ph[data-ratio="1/1"]{aspect-ratio:1/1}
.ph[data-ratio="16/9"]{aspect-ratio:16/9}
.ph[data-ratio="21/9"]{aspect-ratio:21/9}
.ph .ph-art{position:absolute;inset:0;width:100%;height:100%}
.ph .ph-art svg{width:100%;height:100%;display:block}
.ph .ph-label{
  position:absolute;left:0;bottom:0;z-index:3;display:inline-flex;align-items:center;gap:8px;
  font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(243,239,230,.78);
  padding:8px 14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
}
.ph .ph-label::before{content:"";width:5px;height:5px;border:1px solid var(--bronze);border-radius:50%}
.ph img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
}
.ph.has-photo .ph-label{display:none}

/* placeholder tonal variants */
.ph-sand{background:linear-gradient(160deg,#EFE9DA 0%,#E5DCC8 60%,#DDD2BA 100%)}
.ph-sea{background:linear-gradient(175deg,#DCE7E4 0%,#B9D2D3 45%,#8FB9BE 100%)}
.ph-deep{background:linear-gradient(175deg,#1B4A54 0%,#123B44 55%,#0C2B32 100%);border-color:rgba(243,239,230,.14)}
.ph-deep .ph-label{background:rgba(12,43,50,.75);color:var(--sea-soft)}
.ph-bronze{background:linear-gradient(160deg,#E9DFC9 0%,#DCC9A2 70%,#CBB185 100%)}

/* ---------------- feature / amenity list ---------------- */
.amenities{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.amenities li{
  list-style:none;background:var(--ivory);padding:clamp(24px,3vw,32px) clamp(20px,2.4vw,28px);
  font-size:.94rem;color:var(--aegean);display:flex;flex-direction:column;gap:14px;
  transition:background .4s var(--ease);
}
.amenities li:hover{background:var(--linen)}
.amenities li::before{
  content:"";width:20px;height:1px;background:var(--bronze);opacity:.7;
}
.section-linen .amenities li{background:var(--linen)}
.section-linen .amenities li:hover{background:var(--linen-deep)}
@media(max-width:960px){.amenities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.amenities{grid-template-columns:1fr}}

/* ---------------- glance table ---------------- */
.glance{border-top:1px solid var(--line)}
.glance .row{
  display:grid;grid-template-columns:200px 1fr;gap:24px;
  padding:22px 2px;border-bottom:1px solid var(--line);
}
.glance dt{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);padding-top:4px}
.glance dd{color:var(--ink-soft)}
@media(max-width:640px){.glance .row{grid-template-columns:1fr;gap:6px}}

/* ---------------- distance rows ---------------- */
.dist{border-top:1px solid var(--line)}
.dist .row{
  display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:baseline;
  padding:22px 4px;border-bottom:1px solid var(--line);
}
.dist .place{font-family:var(--serif);font-size:1.25rem;color:var(--aegean)}
.dist .mode{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.dist .time{font-size:.95rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media(max-width:520px){.dist .row{grid-template-columns:1fr auto}.dist .mode{grid-column:1;margin-top:-14px}}

/* ---------------- timeline (story) ---------------- */
.timeline{position:relative;margin-top:56px;padding-left:34px}
.timeline::before{
  content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line);
}
.timeline::after{
  content:"";position:absolute;left:4px;top:6px;width:1px;height:var(--tl-progress,0%);
  background:var(--bronze);transition:height 1.4s var(--ease);
}
.tl-step{position:relative;padding-bottom:40px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{
  content:"";position:absolute;left:-34px;top:7px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--bronze);background:var(--ivory);
}
.tl-step.done::before{background:var(--bronze)}
.tl-step.active::before{box-shadow:0 0 0 5px rgba(169,126,63,.16)}
.tl-step h3{font-size:1.3rem;margin-bottom:4px}
.tl-step .tl-status{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.tl-step.soon h3{color:var(--ink-soft)}

/* ---------------- countdown ---------------- */
.count-band{ text-align:center }
.count-band .num{
  font-family:var(--serif);font-size:clamp(4rem,11vw,7.5rem);line-height:1;color:var(--ivory);
}
.count-band .clock{
  margin-top:22px;display:inline-flex;gap:clamp(14px,3vw,30px);align-items:flex-end;justify-content:center;
}
.count-band .clock .u{display:flex;flex-direction:column;align-items:center;gap:6px}
.count-band .clock b{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,2rem);line-height:1;
  color:var(--ivory);font-variant-numeric:tabular-nums;
}
.count-band .clock .ul{font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sea);opacity:.8}
.count-band .clock .sep{font-family:var(--serif);font-size:1.6rem;color:var(--bronze-lt);opacity:.6;padding-bottom:2px}

/* ---------------- CTA band ---------------- */
.cta-band{background:var(--aegean);color:var(--ivory);text-align:center}
.cta-band h2{color:var(--ivory)}
.cta-band p{margin-inline:auto;color:rgba(243,239,230,.8);max-width:52ch}
.cta-band .cta-row{justify-content:center}

/* ---------------- forms ---------------- */
.form-wrap{max-width:560px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field label{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s;
}
.field input,.field select,.field textarea{
  background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:14px 2px;min-height:48px;font-family:var(--sans);font-weight:300;font-size:1.02rem;color:var(--ink);
  border-radius:0;transition:border-color .35s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bronze);border-bottom-width:1px}
.field:focus-within label{color:var(--bronze)}
.field textarea{resize:vertical;min-height:72px;line-height:1.6}
.field .err{font-size:.8rem;color:#9B3A2E;display:none}
.field.invalid input,.field.invalid select{border-color:#9B3A2E}
.field.invalid .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;height:1px;width:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 26px}
.consent input{width:16px;height:16px;margin-top:4px;accent-color:var(--aegean);flex:none}
.consent label{font-size:.86rem;color:var(--ink-soft);letter-spacing:0;text-transform:none;line-height:1.6}
.consent.invalid label{color:#9B3A2E}
.form-note{font-size:.82rem;color:var(--ink-soft);margin-top:16px}
.form-ok{display:none;text-align:left;padding:12px 0}
.form-ok.show{display:block;animation:fadeup .8s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ok-seal{width:64px;height:64px;margin-bottom:22px;display:block}
.ok-seal .ring{fill:none;stroke:var(--bronze);stroke-width:1.1;stroke-dasharray:189;stroke-dashoffset:189}
.ok-seal .ray{stroke:var(--bronze);stroke-width:1;opacity:0}
.ok-seal .disc{fill:var(--bronze);opacity:0;transform-origin:40px 40px;transform:scale(0)}
.form-ok.show .ring{animation:sealdraw 1.1s var(--ease) .1s forwards}
.form-ok.show .disc{animation:sealpop .7s var(--ease) .8s forwards}
.form-ok.show .ray{animation:sealray .5s var(--ease) 1s forwards}
@keyframes sealdraw{to{stroke-dashoffset:0}}
@keyframes sealpop{to{opacity:.9;transform:scale(1)}}
@keyframes sealray{to{opacity:.55}}

/* ---------------- gallery ---------------- */
.g-filters{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 34px}
.g-filters button{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  padding:10px 18px;border:1px solid var(--line);transition:all .3s var(--ease);
}
.g-filters button[aria-pressed="true"]{background:var(--aegean);border-color:var(--aegean);color:var(--ivory)}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.g-grid .g-col{display:flex;flex-direction:column;gap:22px}
.g-item{width:100%;text-align:left;padding:0;border:none;background:none;display:block}
.g-item[aria-disabled="true"]{cursor:default}
.g-item figcaption{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:10px;
}
.g-item.hide{display:none}
@media(max-width:900px){.g-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g-grid{grid-template-columns:1fr}}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(8,25,30,.92);
  display:none;align-items:center;justify-content:center;padding:5vh 5vw;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lightbox .lb-close{
  position:absolute;top:22px;right:26px;color:var(--ivory);font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;padding:12px;
}

/* ---------------- status pill ---------------- */
.status-pill{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--line-dark);color:var(--sea-soft);padding:10px 18px;
}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bronze-lt)}

/* ---------------- concierge assurances (contact) ---------------- */
.assurances{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.assurances li{list-style:none;background:var(--ivory);padding:26px clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:8px}
.assurances .as-k{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.assurances .as-v{font-family:var(--serif);font-size:1.15rem;line-height:1.3;color:var(--aegean)}
@media(max-width:720px){
  .assurances{grid-template-columns:1fr}
  .assurances li{flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 20px}
  .assurances .as-v{font-size:1rem;text-align:right;max-width:60%}
}

/* ============================================================
   PRELOADER — a quiet "arrival". Shows once per session,
   skipped on repeat visits and under reduced-motion.
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:300;background:var(--ocean);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  overflow:hidden;
}
#preloader.done{pointer-events:none;visibility:hidden;transition:visibility 0s 1s}
#preloader.done *{pointer-events:none}
/* two curtains that part upward/downward to reveal the page */
#preloader::before,#preloader::after{
  content:"";position:absolute;left:0;right:0;height:50%;background:var(--ocean);z-index:-1;
  transition:transform 1s var(--ease-out);
}
#preloader::before{top:0}
#preloader::after{bottom:0}
#preloader.done::before{transform:translateY(-100%)}
#preloader.done::after{transform:translateY(100%)}
.pl-brand{
  font-family:var(--serif);font-size:clamp(2.4rem,9vw,3.6rem);letter-spacing:.42em;text-indent:.42em;
  color:var(--ivory);line-height:1;opacity:0;transform:translateY(10px);
  animation:plIn 1s var(--ease-out) .15s forwards;
}
.pl-line{
  width:0;height:1px;background:linear-gradient(90deg,transparent,var(--bronze-lt),transparent);
  animation:plLine 1.3s var(--ease-out) .3s forwards;
}
.pl-sub{
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--sea);
  opacity:0;animation:plIn .9s var(--ease-out) .55s forwards;
}
.pl-count{
  position:absolute;bottom:clamp(28px,6vh,54px);right:var(--gutter);
  font-family:var(--serif);font-size:1.4rem;color:rgba(243,239,230,.5);font-variant-numeric:tabular-nums;
}
.pl-content{display:flex;flex-direction:column;align-items:center;gap:18px;
  opacity:1;transition:opacity .5s var(--ease)}
#preloader.done .pl-content,#preloader.done .pl-count{opacity:0}
@keyframes plIn{to{opacity:1;transform:none}}
@keyframes plLine{to{width:min(200px,42vw)}}
/* keep the page from flashing before the curtain: only when preloader is active */
html.pl-active,html.pl-active body{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  #preloader{display:none}
}

/* ============================================================
   COOKIE NOTICE — quiet, GDPR-style, on-brand
   ============================================================ */
.cookie{
  position:fixed;left:26px;bottom:26px;z-index:96;max-width:380px;
  background:var(--ivory);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(18,59,68,.18), 0 4px 12px rgba(18,59,68,.08);
  padding:26px 28px;
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.cookie.show{opacity:1;transform:none;pointer-events:auto}
.cookie .ck-mark{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cookie .ck-mark::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bronze)}
.cookie .ck-mark span{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)}
.cookie p{font-size:.9rem;line-height:1.62;color:var(--ink-soft);margin-bottom:20px;max-width:none}
.cookie p a{color:var(--aegean);border-bottom:1px solid var(--line);transition:border-color .3s}
.cookie p a:hover{border-color:var(--bronze)}
.cookie-btns{display:flex;gap:10px}
.cookie button{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:13px 20px;min-height:44px;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s;
}
.cookie button.accept{background:var(--aegean);color:var(--ivory);border:1px solid var(--aegean);flex:1}
.cookie button.accept:hover{background:var(--bronze);border-color:var(--bronze)}
.cookie button.decline{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.cookie button.decline:hover{border-color:var(--aegean);color:var(--aegean)}
@media(max-width:860px){
  .cookie{left:14px;right:14px;bottom:14px;max-width:none;padding:22px 22px;
    bottom:calc(env(safe-area-inset-bottom) + 14px)}
}
@media(prefers-reduced-motion:reduce){.cookie{transition:opacity .3s}}