/* ============================================================
   COASTAL BLOOM v4 — photos as framed windows inside the
   graphic scenes. Loads after styles.css + v2 + v3.
   ============================================================ */

/* ---------- framed prints ---------- */
.frame{
  position:absolute;
  background:#fbf7ee;
  padding:1.3vmin;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 30px 60px -28px rgba(44,40,32,.45);
}
.frame .ph,
.frame image-slot{
  display:block; width:100%; height:100%;
  border-radius:inherit; overflow:hidden;
  background-size:cover; background-position:center;
}
.frame--arch{ border-radius:50vmin 50vmin 0 0; }
.frame--soft{ border-radius:2vmin; }
.frame--round{ border-radius:50%; }
.frame--round .ph, .frame--round image-slot{ border-radius:50%; }

/* small caption tag hanging under a frame */
.frame .tag{
  position:absolute; left:50%; top:calc(100% + 14px); transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}

/* ---------- hero becomes split: text left, arch photo right ---------- */
.cap--hero{
  text-align:left; margin-right:auto;
  width:min(580px,92vw); max-width:none;
  padding:0 24px 0 clamp(24px,6vw,96px);
}
.cap--hero .num::before{ display:none; }
.cap--hero .lede{ margin:0; }
.hero .frame--arch{
  width:38vmin; height:52vmin;
  right:clamp(16px,9vw,12%); bottom:16%;
}

/* ---------- living: photo in the doorway arch ---------- */
.s-living .frame--arch{
  width:36vmin; height:54vmin;
  left:10%; bottom:13%;
}

/* ---------- balcony: landscape print behind the railing ---------- */
.s-balcony .frame--soft{
  width:48vmin; height:34vmin;
  right:13%; bottom:26%;
}

/* ---------- pool: porthole photo + float ring overlap ---------- */
.s-pool .frame--round{
  width:42vmin; height:42vmin;
  left:11%; bottom:22%;
}
.s-pool .ring{
  right:auto; left:calc(11% + 34vmin); bottom:18%;
}

/* ---------- highlights of Dénia ---------- */
.highlights{
  position:relative; background:var(--paper);
  padding:clamp(90px,14vh,150px) 6vw clamp(70px,10vh,110px);
  border-top:1px solid var(--line);
}
.hl-head{ max-width:820px; margin:0 auto clamp(50px,7vh,80px); text-align:center; }
.hl-head .eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--clay);
}
.hl-head h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px,5.4vw,72px); line-height:1.06; letter-spacing:-.01em;
  margin:18px 0 14px; text-wrap:balance;
}
.hl-head h2 em{ font-style:italic; color:var(--clay); }
.hl-head .sub{
  font-weight:300; font-size:clamp(15px,1.7vw,19px); color:var(--ink-soft);
  max-width:48ch; margin:0 auto; line-height:1.6;
}

.hl-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(20px,3.4vw,44px);
  max-width:1240px; margin:0 auto; align-items:end;
}
.hl-card{
  background:#fbf7ee; padding:12px 12px 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 26px 50px -26px rgba(44,40,32,.4);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.hl-card img{ display:block; width:100%; object-fit:cover; }
.hl-card .hl-tag{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:12px; padding:0 2px;
}
.hl-card .hl-name{
  font-family:var(--serif); font-size:clamp(17px,1.6vw,21px); font-weight:600;
}
.hl-card .hl-sub{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  align-self:center; text-align:right;
}
.hl-card:hover{
  transform:translateY(-6px) rotate(0deg) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 36px 60px -26px rgba(44,40,32,.5);
}

/* collage placement + print-like tilt */
.hl-card:nth-child(1){ grid-column:span 4; }
.hl-card:nth-child(1) img{ aspect-ratio:16/9; }
.hl-card:nth-child(2){ grid-column:span 2; transform:rotate(1.4deg); }
.hl-card:nth-child(2) img{ aspect-ratio:1/1.06; }
.hl-card:nth-child(3){ grid-column:span 2; transform:rotate(-1.2deg); }
.hl-card:nth-child(3) img{ aspect-ratio:4/3.2; }
.hl-card:nth-child(4){ grid-column:span 2; }
.hl-card:nth-child(4) img{ aspect-ratio:4/3.2; }
.hl-card:nth-child(5){ grid-column:span 2; transform:rotate(1deg); }
.hl-card:nth-child(5) img{ aspect-ratio:4/3.2; }

.highlights .reveal > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.highlights .reveal.in > *{ opacity:1; transform:none; }
.hl-grid.reveal.in > .hl-card:nth-child(2){ transform:rotate(1.4deg); transition-delay:.1s; }
.hl-grid.reveal.in > .hl-card:nth-child(3){ transform:rotate(-1.2deg); transition-delay:.18s; }
.hl-grid.reveal.in > .hl-card:nth-child(4){ transition-delay:.26s; }
.hl-grid.reveal.in > .hl-card:nth-child(5){ transform:rotate(1deg); transition-delay:.34s; }

@media (max-width:860px){
  .hl-grid{ grid-template-columns:1fr 1fr; }
  .hl-card:nth-child(n){ grid-column:span 1; }
  .hl-card:nth-child(1){ grid-column:span 2; }
}
@media (max-width:560px){
  .hl-grid{ grid-template-columns:1fr; }
  .hl-card:nth-child(n){ grid-column:span 1; transform:none; }
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero .frame--arch{ width:34vmin; height:46vmin; bottom:10%; }
}
@media (max-width:720px){
  .cap--hero{ padding-top:10vh; align-self:flex-start; }
  .hero .frame--arch{
    width:46vmin; height:58vmin;
    right:50%; transform:translateX(50%);
    bottom:6%;
  }
  .s-living .frame--arch{ width:44vmin; height:58vmin; left:8%; bottom:18%; }
  .s-balcony .frame--soft{ width:62vmin; height:42vmin; right:8%; bottom:30%; }
  .s-pool .frame--round{ width:52vmin; height:52vmin; left:8%; }
  .s-pool .ring{ left:calc(8% + 42vmin); }
  .frame .tag{ display:none; }
}