/* =============================================================================
   05-sections.css  ·  invite, pillars, details, gallery, faq, icons, placeholders
   ========================================================================== */

/* Light sections sit on opaque cream and cover the living scene */
.invite,.details,.faq{ background:var(--bg); }
.awaits,.gallery{ background:var(--surface-alt); }
.invite,.awaits,.details,.gallery,.faq{ color:var(--ink); }

/* ---------- Injected icons ---------- */
.pillar-ico,.detail-ico{ display:inline-flex; color:var(--gold-ink); }
.pillar-ico svg,.detail-ico svg{ width:1.9rem; height:1.9rem; }
.detail-ico{ width:2.4rem; height:2.4rem; border-radius:var(--r-md); background:rgba(201,162,78,.14);
  align-items:center; justify-content:center; }
.detail-ico svg{ width:1.4rem; height:1.4rem; }

/* ---------- 3 · INVITE ---------- */
.invite{ text-align:center; }
.invite-inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.invite-orn{ color:var(--gold); font-size:1.4rem; letter-spacing:.4em; }
.invite-line{
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.85rem, 1.3rem + 2.8vw, 3.1rem);
  line-height:1.34; color:var(--ink); max-width:28ch; text-wrap:balance; letter-spacing:-.01em;
}
.invite-line .lead-word{ color:var(--gold-ink); font-style:italic; }

/* ---------- 4 · PILLARS ---------- */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(2rem,4vw,3.2rem); }
.pillar{
  position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  box-shadow:var(--shadow-soft); transform-style:preserve-3d; transition:box-shadow var(--dur) var(--ease);
}
.pillar:hover{ box-shadow:var(--shadow-lift); }
.pillar-media{
  position:relative; aspect-ratio:4/5; background-size:cover; background-position:center;
  background-repeat:no-repeat;
}
.pillar-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,28,50,0) 50%,rgba(10,28,50,.35)); }
[data-img="pillar-rainforest"] .pillar-media{ background-image:linear-gradient(155deg,#1f4d38,#2f6b4f 58%,#3f7fb0); }
[data-img="pillar-beach"] .pillar-media{ background-image:linear-gradient(155deg,#1f5f86,#4f9fc0 52%,#e7ce94); }
[data-img="pillar-golf"] .pillar-media{ background-image:linear-gradient(155deg,#23583f,#5b8f6a 55%,#cee5f6); }
[data-img="pillar-spa"] .pillar-media{ background-image:linear-gradient(155deg,#2f5fae,#8fbcf2 58%,#f3ead7); }
.pillar-media::before{ /* subtle sheen on placeholders; hidden once image loads */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-100%); animation:phsheen 4.5s var(--ease) infinite;
}
.pillar-media.img-ready::before{ display:none; }
@keyframes phsheen{ 0%{ transform:translateX(-100%);} 55%,100%{ transform:translateX(100%);} }
.pillar-body{ padding:1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; }
.pillar-ico{ margin-bottom:.1rem; }
.pillar-title{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600; color:var(--navy); }
.pillar-body p{ color:var(--ink-2); font-size:1rem; line-height:1.6; }

/* ---------- 5 · DETAILS ---------- */
.details-grid{ display:grid; gap:clamp(2rem,4vw,3rem); }
.detail-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem); }
.detail-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; box-shadow:var(--shadow-soft);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.detail-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.detail-card h3{ font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.detail-card p{ font-family:var(--font-display); font-size:1.32rem; color:var(--navy); line-height:1.25; }
.detail-card p .muted{ font-family:var(--font-ui); font-size:.92rem; }
.detail-card p strong{ font-weight:600; }
/* Airport code: the Montserrat patch here existed only because Fraunces' display
   S and J wobbled at this size. Playfair Display sets (SJU) cleanly — J on the
   baseline, stable S — so the code stays in the serif and the line reads in one
   voice. The rule now only resets abbr's default dotted underline and keeps the
   code unbreakable; the title tooltip is untouched. */
.detail-card p .code{
  text-decoration:none; border:0; white-space:nowrap; color:inherit;
}
.detail-card .link-cta{ margin-top:auto; }
.detail-card--accent{ background:linear-gradient(160deg,#fff,#fbf2dd); border-color:rgba(201,162,78,.4); }
.detail-card--accent .detail-ico{ background:rgba(201,162,78,.22); }

/* ---------- 6 · GALLERY ---------- */
.gallery-rail{
  display:flex; gap:clamp(.9rem,1.6vw,1.4rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:clamp(1.6rem,3vw,2.6rem) var(--gutter) 2rem; margin-top:0;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab;
}
.gallery-rail::-webkit-scrollbar{ display:none; }
.gallery-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.g-tile{
  flex:0 0 auto; width:clamp(15rem,30vw,21rem); aspect-ratio:4/3; border-radius:var(--r-card);
  overflow:hidden; scroll-snap-align:center; box-shadow:var(--shadow-soft);
  border:1px solid var(--line); position:relative; transform-style:preserve-3d;
}
.g-tile--tall{ aspect-ratio:3/4; width:clamp(13rem,24vw,17rem); }
.g-media{ position:absolute; inset:0; background-size:cover; background-position:center; }
.g-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,28,50,0) 55%,rgba(10,28,50,.4)); }
.g-tile:nth-child(1) .g-media{ background-image:linear-gradient(160deg,#143a5e,#3f7fb0 60%,#cdaa5e); }
.g-tile:nth-child(2) .g-media{ background-image:linear-gradient(160deg,#0e2540,#b06a3a 70%,#e7ce94); }
.g-tile:nth-child(3) .g-media{ background-image:linear-gradient(160deg,#1f5f86,#5fb0c8 60%,#f7f1e6); }
.g-tile:nth-child(4) .g-media{ background-image:linear-gradient(160deg,#0e2540,#2f6f9e 65%,#8fbcf2); }
.g-tile:nth-child(5) .g-media{ background-image:linear-gradient(160deg,#23583f,#5b8f6a 60%,#cee5f6); }
.g-tile:nth-child(6) .g-media{ background-image:linear-gradient(160deg,#1f5f86,#4f9fc0 55%,#e7ce94); }

/* ---------- 8 · PLANNING ---------- */
.plan-list{ margin-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--line); }
.plan-list li{
  position:relative; padding:1.3rem .25rem 1.3rem 2rem; border-bottom:1px solid var(--line);
  font-size:var(--fs-lead); line-height:var(--lh); color:var(--ink-2); max-width:var(--reading);
}
.plan-list li::before{
  content:""; position:absolute; left:.4rem; top:calc(1.3rem + .62em); width:.46rem; height:.46rem;
  border-radius:50%; background:var(--gold);
}
.plan-note{
  margin-top:clamp(1.8rem,3.4vw,2.6rem); text-align:center;
  font-family:var(--font-display); font-size:var(--fs-h3); color:var(--navy);
}

/* ---------- 8b · FAQ accordion (retained; not used on the page right now) ---------- */
.faq-list{ margin-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.25rem .25rem; font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.05rem, .98rem + .4vw, 1.2rem); color:var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-chev{ position:relative; width:1.1rem; height:1.1rem; flex:none; }
.faq-chev::before,.faq-chev::after{ content:""; position:absolute; top:50%; left:50%; width:.7rem; height:2px;
  background:var(--gold); border-radius:2px; transform-origin:center; transition:transform var(--dur) var(--ease); }
.faq-chev::before{ transform:translate(-50%,-50%); }
.faq-chev::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-chev::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-ans{ padding:0 .25rem 1.4rem; color:var(--ink-2); max-width:var(--reading); }
.faq-ans a{ color:var(--gold-ink); border-bottom:1px solid currentColor; }