/* =========================================================
   Skiathos Homes — sh-homes.css (Optimized for 60FPS)
========================================================= */

body.page-template-template-homes,
body.page-template-template-homes-php {
  --arch-bg: var(--navy-dark);
  --arch-panel: var(--navy);
  --arch-text: rgba(255,255,255,.9);
  --arch-gold: var(--gold);
  --arch-line: rgba(255,255,255,0.06);

  background: var(--arch-bg); color: var(--arch-text);

  /* Flex column: nav sits on top, gallery fills the rest */
  display: flex;
  flex-direction: column;
  height: 100vh; /* fallback for browsers/webviews that don't parse dvh */
  height: 100dvh;
  overflow: hidden;
}

/* Footer not needed on gallery pages */
body.page-template-template-homes footer,
body.page-template-template-homes-php footer { display:none !important; }

/* Nav is already position:relative via .is-static in sh-nav2.css — just pin it */
body.page-template-template-homes #sh-nav2-header,
body.page-template-template-homes-php #sh-nav2-header {
  flex-shrink: 0;
}

/* PRELOADER */
.arch-preloader{ position:fixed; inset:0; z-index:9999; background: var(--navy-dark); display:flex; align-items:center; justify-content:center; transition: opacity .6s ease, visibility .6s ease; }
.arch-preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.arch-preloader-dot{ width:10px; height:10px; border-radius:999px; background: rgba(201,174,120,.85); box-shadow:0 0 22px rgba(201,174,120,.35); animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.6); opacity:1; } }

.arch-grain{ position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); transition: opacity 0.8s ease; }
body.no-grain .arch-grain{ opacity:0; }


/* === SCROLL & ITEMS === */
.arch-gallery {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* container-type:size allows children to use 100cqh */
  container-type: size;
}

/* grid-template-rows: minmax(0,1fr) — not the implicit `auto`.
   An auto row sizes to its content's max-content height, so on a short window
   the text column grew TALLER than .arch-item and simply overflowed it (clipped
   by overflow:hidden below). Nothing inside ever knew it was short, so the
   shrink-and-clip in .arch-txt-body never engaged and the CTA fell out the
   bottom anyway. minmax(0,1fr) pins the row to the card height and lets the
   panel's own flex layout absorb the difference. */
.arch-item { position: relative; width: 100%; height: 100%; height: 100cqh; display: grid; grid-template-columns: 50% 50%; grid-template-rows: minmax(0, 1fr); scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }

/* IMG SIDE */
.arch-img-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; border-right: 1px solid var(--arch-line); }
.arch-bg {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  /* The Luxury Curve */
  transition: transform 1.8s cubic-bezier(.25,1,.5,1);
  /* No darkening/contrast filter — photos show at their true quality.
     (Text never overlays the image, so no scrim is needed for legibility.) */
  will-change: transform; /* Performance Boost */
}
.arch-item.in-view .arch-bg { transform: scale(1); }

/* Selective ("Classified") tier badge — visible on the card itself, before
   the visitor opens the dossier. Same gold-chip look as the single-property
   hero's status pill (.sh-doss-status.is-classified in sh-single.css). */
.arch-tier-badge {
  position: absolute; top: 24px; right: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(201,174,120,.7);
  background: rgba(5,8,14,.55);
  backdrop-filter: blur(6px);
  color: rgba(201,174,120,.95);
  font-family: var(--font-body);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  white-space: nowrap;
  pointer-events: none;
}
.arch-tier-dot {
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--arch-gold);
  box-shadow: 0 0 9px rgba(201,174,120,.85);
}

/* ── Classified tier — page-level state on the card itself.
   The badge alone was the ONLY difference between a public and a selective
   card: same photograph, same price, same detail grid, same CTA. One small
   label is not a state — you have to hunt for it. The frame below makes the
   tier readable at a glance, in the grid, before any word is read.

   The photograph is never altered: the frame is drawn on the WRAPPER, over
   the image and inset from it, so the asset still shows at full quality.
   A side effect worth keeping: .arch-bg scales on hover inside a frame that
   stays put, so the photo breathes within a fixed boundary.

   z-index 2 keeps it under .arch-tier-badge (z-index 3); pointer-events:none
   keeps the whole image clickable through it. ── */
.arch-item--classified .arch-img-wrap::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.4vw, 20px);
  border: 1px solid rgba(201,174,120,.55);
  z-index: 2;
  pointer-events: none;
}

/* CTA follows the locked brand vocabulary ("Request Clearance"), so it should
   read gold rather than the neutral white used for "Open Dossier". */
.arch-item--classified .arch-btn {
  color: rgba(201,174,120,.85);
  border-bottom-color: rgba(201,174,120,.35);
}
.arch-item--classified .arch-btn:hover {
  color: var(--arch-gold);
  border-bottom-color: rgba(201,174,120,.6);
}

/* The image is a secondary link to the dossier (the "Open Dossier" button stays the primary control).
   Full-bleed block so it covers the whole image area; the .arch-bg scale animation still applies to the img inside. */
.arch-img-link { display: block; width: 100%; height: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Branded fallback when a property has no featured image (rare) — no external image */
.arch-bg--placeholder{
  transform: scale(1);
  filter: none;
  background: radial-gradient(140% 120% at 28% 18%, var(--navy) 0%, var(--navy-dark) 55%, #05080e 100%);
}
.arch-bg--placeholder::after{
  content: "Skiathos Homes";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-head); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: .04em;
  color: rgba(201,174,120,.28);
}

/* TXT SIDE */
/* Vertical padding is min()'d against a container-height share as well as the
   old 6vw. 6vw alone is driven by viewport WIDTH, so a wide-but-short window
   (1920x700) produced 115px of padding top AND bottom inside a panel that had
   already lost height — padding grew exactly when there was least room for it.
   12cqh resolves to ~91px at the normal ~756px panel, so the desktop look is
   unchanged; it only takes over when the panel is genuinely short. */
.arch-txt-wrap { position: relative; background: var(--arch-panel); display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; padding: min(6vw, 12cqh) 8vw; }

/* ── The CTA guarantee ──
   Everything above the CTA lives in .arch-txt-body, which is the only part of
   the panel allowed to give way: min-height:0 lets flexbox shrink it past its
   content height, overflow:hidden clips it there. The CTA is a sibling, so it
   keeps its full size and can never be the thing that gets pushed out.

   This replaces the previous approach of hand-tuning font sizes per breakpoint
   until things happened to fit. That approach failed twice, because "fits" was
   only ever true for the content that existed at the time — one property with a
   longer Condition line (AERON: "Completed 2010, never inhabited") pushed the
   status row from 37px to 74px and the button vanished again. Sizes below still
   scale, but they are now an optimisation, not the safety mechanism. */
.arch-txt-body { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

.arch-num { position: absolute; top: 10%; right: 10%; font-family: var(--font-head); font-size: 12rem; line-height: 1; color: rgba(255,255,255,0.02); pointer-events: none; }

/* REVEAL ANIMATIONS */
/* flex-shrink:0 matters here: .arch-txt-wrap is a column flexbox, and this
   box's own overflow:hidden (needed to mask the slide-up reveal) makes its
   flex automatic min-height resolve to 0 per spec — so on a short viewport
   where content overflows the panel, flexbox would crush title/location to
   literally 0px instead of leaving them at their content size and letting
   the wrap's overflow-y:auto scroll (which is what price/grid/status/cta,
   lacking their own overflow:hidden, already do for free). */
.reveal-box { overflow: hidden; margin-bottom: 5px; flex-shrink: 0; }
.reveal-text {
  display: block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.16,1,.3,1); /* Λίγο πιο αργό (.9s) για class */
  will-change: transform;
}
.arch-item.in-view .reveal-text { transform: translateY(0); }

/* Staggered Delays (Το μυστικό της ροής) */
.arch-item.in-view .t-loc { transition-delay: .1s; }
.arch-item.in-view .t-tit { transition-delay: .2s; }
.arch-item.in-view .t-det { transition-delay: .35s; }
.arch-item.in-view .t-dsc { transition-delay: .5s; }
.arch-item.in-view .t-btn { opacity: 1; }

.t-loc { font-family: var(--font-body); font-size: .7rem; text-transform: uppercase; letter-spacing: .3em; color: var(--arch-gold); margin-bottom: 15px; }
.t-tit { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 4.5rem); line-height: 1.1; color: #fff; margin-bottom: 30px; }
.t-tit a { text-decoration: none; color: inherit; }

/* Gold asking price — sits directly under the title */
.arch-price {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--arch-gold); letter-spacing: .01em;
  margin-bottom: 26px;
  transform: translateY(20px); opacity: 0;
  transition: all .9s ease .3s;
}
.arch-item.in-view .arch-price { transform: translateY(0); opacity: 1; }

.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 25px 0; border-top: 1px solid var(--arch-line); border-bottom: 1px solid var(--arch-line); margin-bottom: 30px; transform: translateY(30px); opacity: 0; transition: all .9s ease; }
.arch-item.in-view .arch-grid { transform: translateY(0); opacity: 1; }
.arch-cell { padding: 0 16px; border-right: 1px solid var(--arch-line); }
.arch-cell:first-child { padding-left: 0; }
.arch-cell:last-child { border-right: none; padding-right: 0; }

/* Status line — editorial credibility row (mirrors /land/ .card-status) */
.card-status {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-bottom: 30px;
  font-family: var(--font-body); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.5); line-height: 2.2;
  transform: translateY(20px); opacity: 0;
  transition: all .9s ease .4s;
}
.arch-item.in-view .card-status { transform: translateY(0); opacity: 1; }
/* The separator is drawn as a ::before on the item that follows it, not as a
   standalone <span>. A standalone span is its own inline box with whitespace
   around it, so when the row wrapped it could land alone at the start of a
   line — on mobile the third line read "|  BUILT: 2010". As a ::before with no
   whitespace between it and the text, there is no soft-wrap opportunity, so the
   rule always stays glued to the label it introduces. */
.card-status-bit::before {
  content: ""; display: inline-block;
  width: 1px; height: 10px;
  background: rgba(255,255,255,.12); margin: 0 12px;
  vertical-align: middle;
}
.card-status-bit:first-child::before { content: none; }

.arch-cell b { display: block; font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.52); margin-bottom: 8px; font-family: var(--font-body); }
.arch-cell span { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: rgba(255,255,255,.72); letter-spacing: .02em; }

.t-dsc { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.55); margin-bottom: 40px; max-width: 45ch; transform: translateY(20px); opacity: 0; transition: all .9s ease; font-family: var(--font-body); will-change: transform, opacity; }
.arch-item.in-view .t-dsc { transform: translateY(0); opacity: 1; }

.arch-btn { display: inline-block; text-decoration: none; color: rgba(255,255,255,.7); font-size: .70rem; text-transform: uppercase; letter-spacing: .3em; border-bottom: 1px solid rgba(255,255,255,.15); padding: 0 0 6px; opacity: 0; transition: opacity .45s ease .6s, color .25s ease, border-color .25s ease; pointer-events: auto; font-family: var(--font-body); }
.arch-btn:hover { color: var(--arch-gold); border-color: rgba(201,174,120,.4); }

/* Intro/Outro */
.arch-intro .t-tit { font-size: clamp(3rem, 6vw, 6rem); }

.scroll-hint { margin-top: 40px; font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; color: var(--arch-gold); opacity: 0; cursor: default; pointer-events: none; animation: fadeIn 1s ease forwards 1s, bounce 2.5s infinite 2s; font-family: var(--font-body); }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(-3px); } }

.arch-outro { display: flex !important; align-items: center; justify-content: center; background: var(--navy-dark); text-align: center; }
.arch-outro .arch-img-wrap { display: none; }
.arch-outro .arch-txt-wrap { background: transparent; padding: 0 20px; align-items: center; max-width: 900px; }
.arch-lock-icon { color: var(--arch-gold); margin-bottom: 30px; opacity: 0; transform: translateY(20px); transition: all 0.8s ease 0.1s; }
.arch-item.in-view .arch-lock-icon { opacity: 1; transform: translateY(0); }
.arch-outro .t-tit { font-size: clamp(1.8rem, 2.5vw, 2.8rem); color: #fff; margin-bottom: 20px; white-space: nowrap; text-align: center; }
.arch-outro-btn { display: inline-block; padding: 18px 40px; border: 1px solid var(--arch-gold); color: var(--arch-gold); font-size: .7rem; text-transform: uppercase; letter-spacing: .25em; text-decoration: none; pointer-events: auto; opacity: 0; transform: translateY(20px); font-family: var(--font-body); }
.arch-item.in-view .arch-outro-btn { opacity: 1; transform: translateY(0); }
.arch-outro-btn:hover { background: var(--arch-gold); color: var(--navy-dark); }

/* MOBILE ADJUSTMENTS */
@media (max-width: 1024px) {

.arch-item {
  grid-template-columns: 1fr;
  /* minmax(0,…) on the panel row for the same reason as the desktop rule
     above: a plain 1fr is minmax(auto,1fr) and refuses to go below its
     content height. The photo row keeps its clamp — the image never gives
     way, only the text does. */
  grid-template-rows: clamp(220px, 38svh, 360px) minmax(0, 1fr);
}

.arch-img-wrap {
  height: 100%;
  width: 100%;
  border-right: none;
  border-bottom: 1px solid var(--arch-line);
}

.arch-tier-badge { top: 14px; right: 14px; padding: 6px 11px; font-size: .68rem; letter-spacing: .16em; }

/* Each cqh value below is preceded by the plain value it replaces. A browser
   without container-query units drops the clamp() as invalid and keeps the
   plain one, i.e. exactly today's layout — it does NOT fall through to the
   desktop rule. (.arch-item already relies on 100cqh, so support is assumed
   anyway; this just makes the degradation graceful rather than dramatic.) */
.arch-item:not(.arch-outro) .arch-txt-wrap {
  height: 100%;
  padding: 22px 25px;
  padding: clamp(13px, 2.8cqh, 22px) 25px;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
}

  .arch-num { font-size: 6rem; top: 20px; right: 20px; opacity: .03; }

  /* ── Height-driven vertical rhythm ──
     Every value below is clamp(floor, Ncqh, current). cqh is a share of the
     .arch-gallery container height (it already sets container-type:size), so
     the MAX in each clamp reproduces today's value at a ~780px-tall panel —
     nothing changes on an iPhone 14/15 or larger — and everything tightens
     smoothly as the panel gets shorter, instead of jumping at a breakpoint
     someone has to guess in advance.

     This is what "keep the photo, shrink the type" looks like when the browser
     does the arithmetic. It is deliberately NOT the safety mechanism — see
     .arch-txt-body above for that. */
  .t-loc      { margin-bottom: 9px; margin-bottom: clamp(5px, 1.15cqh, 9px); }
  .reveal-box { margin-bottom: 2px; }
  .t-tit      { font-size: 2.2rem; font-size: clamp(1.6rem, 4.5cqh, 2.2rem);
                margin-bottom: 12px; margin-bottom: clamp(6px, 1.55cqh, 12px); }

  /* Title reveal goes opacity-only on mobile. The default slide-up
     (transform + reveal-box's overflow:hidden mask) has nothing to clip if
     interrupted mid-transition, but a fade does — even the sticky observer
     fix above shouldn't be the only thing standing between a race condition
     and a title with its letters sliced off. */
  .t-tit.reveal-text { transform: none; opacity: 0; transition: opacity .6s ease; }
  .arch-item.in-view .t-tit.reveal-text { opacity: 1; }

  .arch-price { font-size: 1.4rem; font-size: clamp(1.15rem, 2.9cqh, 1.4rem);
                margin-bottom: 14px; margin-bottom: clamp(7px, 1.8cqh, 14px); }
  .arch-grid  { grid-template-columns: 1fr 1fr 1fr; gap: 0;
                padding: 12px 0; padding: clamp(7px, 1.55cqh, 12px) 0;
                margin-bottom: 16px; margin-bottom: clamp(9px, 2.05cqh, 16px); }
  .arch-cell span { font-size: 1.05rem; font-size: clamp(.92rem, 2.15cqh, 1.05rem); }

  /* Hard 2-line cap on the status row. This is the one element whose height is
     driven by editorial copy rather than layout: "Condition: Excellent" is one
     line, "Condition: Completed 2010, never inhabited" is three on a 340px
     panel. 3.4em = 2 x line-height, so a verbose property costs the same
     vertical budget as a terse one and a future entry cannot silently reclaim
     the space the CTA needs. Losing "Built: 2010" here is the intended
     trade — it is on the property page, the button is the thing that matters. */
  /* On a phone the row never actually sits on one line — measured at 375px,
     each of View / Condition / Built already wrapped onto its own line. So the
     vertical rules were not separating anything; they were just landing at the
     start of a line ("|  BUILT: 2010"). Stack the items honestly instead and
     drop the rules; keep them for desktop, where the row IS one line.

     Exactly two items are shown, each on one line: that fixes the block's
     height at 2 x line-height no matter how verbose a property's copy is,
     which is what stops this row from ever eating the CTA's space again.
     "Built:" is the one that gives way — it is the least load-bearing of the
     three and it is on the property page regardless. */
  .card-status { line-height: 1.7; max-height: 3.4em; overflow: hidden;
                 flex-direction: column; align-items: flex-start;
                 margin-bottom: 16px; margin-bottom: clamp(9px, 2.05cqh, 16px); }
  .card-status-bit::before { content: none; }
  .card-status-bit { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-status-bit:nth-child(n+3) { display: none; }
  /* Push the CTA to the foot of the panel (not glued under the stats), with the
     panel's own 22px bottom padding left as the light gap beneath it. margin-top:
     auto absorbs the free space above; if content is tall it collapses to the
     padding-top min-gap and the panel scrolls as before. */
  .arch-cta { margin-top: auto; flex: 0 0 auto;
              padding-top: 22px; padding-top: clamp(12px, 2.8cqh, 22px); }
.arch-outro { height: 100cqh; }
  .arch-outro .t-tit { white-space: normal; font-size: 2rem; text-align: center !important; }
}

/* =========================================================
   LANDSCAPE PHONE (rotated, short viewport)
   The portrait-mobile stack right above (photo on top, panel below,
   each row clamp(220px,38svh,360px) / 1fr) is sized for portrait's
   generous height. Rotate a phone and the same ≤1024px width still
   matches, but height collapses to ~350-430px — the image row alone
   eats most of it, leaving ~100px for title/price/facts/CTA. Below
   this height, go back to a side-by-side split (photo left, details
   right, both full height) like desktop, with sizing scaled down to
   fit. Placed last so it wins the cascade without !important.
   ========================================================= */
@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
  .arch-item {
    grid-template-columns: 46% 54%;
    grid-template-rows: 1fr;
  }
  .arch-img-wrap { height: 100%; border-right: 1px solid var(--arch-line); border-bottom: none; }
  .arch-item:not(.arch-outro) .arch-txt-wrap { padding: 14px 20px; justify-content: center; }
  .arch-num { display: none; }
  .t-loc { margin-bottom: 4px; font-size: .68rem; }
  .reveal-box { margin-bottom: 0; }
  .t-tit { font-size: 1.3rem; margin-bottom: 8px; line-height: 1.05; }
  .arch-price { margin-bottom: 8px; font-size: 1.1rem; }
  .arch-grid { padding: 6px 0; margin-bottom: 8px; }
  .arch-cell b { font-size: .65rem; margin-bottom: 3px; }
  .arch-cell span { font-size: .85rem; }
  /* Same simplification as the property hero's landscape-phone treatment:
     drop the status line, keep only what fits — facts grid + CTA. */
  .card-status { display: none; }
  .arch-cta { margin-top: 0; padding-top: 0; }
  .arch-btn { font-size: .68rem; }

  /* .is-static (menu.php, applied on /homes/, /land/, /contact/) makes the
     nav position:relative + solid navy, which eats real flow height — a
     small tax in portrait's abundant space, but a big bite out of the
     ~350-430px landscape budget above. Switch it back to the site's
     default fixed+transparent overlay so it floats over the gallery
     instead of pushing it down; .arch-gallery's flex:1 then reclaims
     the nav's ~68px automatically once the nav is out of flow. */
  body.page-template-template-homes #sh-nav2-header.is-static,
  body.page-template-template-homes-php #sh-nav2-header.is-static {
    position: fixed;
    background: transparent;
    border-bottom-color: transparent;
  }
}

/* Το περιεχόμενο παραμένει ορατό ακόμη κι αν καθυστερήσει ή λείπει το JS. */
.arch-item .reveal-text, .arch-item .t-tit.reveal-text { transform: none; opacity: 1; }
.arch-item .arch-price, .arch-item .arch-grid, .arch-item .card-status,
.arch-item .t-dsc, .arch-item .arch-btn, .arch-item .arch-lock-icon,
.arch-item .arch-outro-btn { opacity: 1; transform: none; }