/* ============================================================
   Pearl Voyages — inner-page components
   Loaded after style.css
   ============================================================ */

/* ---------- page banner ---------- */
.page-hero{
  position:relative;min-height:54svh;
  display:flex;align-items:flex-end;
  padding-block:clamp(8rem,17vh,11.5rem) clamp(2.5rem,6vh,4rem);
  color:var(--paper);overflow:hidden;
}
.page-hero .hero-media{position:absolute;inset:0;z-index:-2}
.page-hero .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(16,14,10,.5) 0%,rgba(16,14,10,0) 30%),
    linear-gradient(5deg,rgba(8,22,30,.9) 3%,rgba(8,22,30,.4) 46%,rgba(8,22,30,.08) 80%);
}
.page-hero-inner{position:relative;width:100%}
.breadcrumb{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.68);margin-bottom:1.1rem;
}
.breadcrumb a{text-decoration:none;transition:color .25s}
.breadcrumb a:hover{color:var(--paper)}
.breadcrumb span{margin:0 .5rem;color:var(--sand)}
.page-hero h1{font-size:clamp(2.4rem,6.4vw,4.4rem)}
.page-hero .standfirst{
  max-width:46ch;margin-top:1.2rem;
  color:rgba(255,255,255,.9);font-size:clamp(1.02rem,.5vw + .95rem,1.2rem);
}

/* ---------- active nav ---------- */
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{width:100%}
.site-header.scrolled .nav a[aria-current="page"]{color:var(--teal)}
.mobile-panel a[aria-current="page"]{color:var(--teal)}

/* ---------- lead / intro statement ---------- */
.lead-statement{max-width:34rem}
.lead-statement.center{margin-inline:auto;text-align:center}
.lead-statement h2{font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.14}
.lead-statement p{margin-top:1.3rem;color:var(--ink-soft);font-size:1.1rem}

/* ---------- service / itinerary cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3.5vw,2.75rem)}
.card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--teal-deep)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media img{transform:scale(1.05)}

/* glyph panel (for cards without a photo) */
.card-glyph{
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 120% at 15% 0%,rgba(255,255,255,.12),transparent 55%),
    var(--teal);
}
.card-glyph.sand{background:
  radial-gradient(120% 120% at 15% 0%,rgba(255,255,255,.16),transparent 55%),
  var(--sand);}
.card-glyph svg{width:34%;max-width:96px;height:auto;color:rgba(255,255,255,.92);stroke-width:1.1}
.card-glyph .glyph-num{
  position:absolute;right:1.1rem;bottom:.4rem;
  font-family:var(--font-display);font-style:italic;font-size:2.4rem;
  color:rgba(255,255,255,.4);
}

.card-body{padding:1.9rem 1.8rem 2rem;display:flex;flex-direction:column;flex:1}
.card-eyebrow{font-family:var(--font-display);font-style:italic;color:var(--sand);font-size:.95rem;margin-bottom:.5rem}
.card-body h3{font-size:1.5rem;margin-bottom:.7rem}
.card-body>p{color:var(--ink-soft);margin-bottom:1.1rem}
.card-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.55rem}
.card-list li{position:relative;padding-left:1.4rem;font-size:.92rem;color:var(--ink-soft)}
.card-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  background:var(--teal);transform:rotate(45deg);
}
.card-cta{
  margin-top:auto;align-self:flex-start;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--teal);
  display:inline-flex;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--line);padding-bottom:.3rem;transition:gap .3s,border-color .3s;
}
.card-cta:hover{gap:.85rem;border-color:var(--teal)}

/* cta fill card */
.card.card-cta-block{
  background:
    radial-gradient(120% 120% at 12% 0%,rgba(255,255,255,.14),transparent 55%),
    var(--teal);
  color:var(--paper);border-color:transparent;
  justify-content:center;padding:2.4rem 2rem;
}
.card.card-cta-block h3{color:var(--paper);font-size:1.5rem;margin-bottom:.6rem}
.card.card-cta-block p{color:rgba(255,255,255,.86);margin-bottom:1.5rem}
.card.card-cta-block .btn{--bh:3rem;background:var(--paper);color:var(--teal-deep)}
.card.card-cta-block .btn:hover{background:#fff}

/* itinerary meta row */
.card-meta{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.card-meta b{color:var(--ink);font-weight:600}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft)}

/* ---------- split content block ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.split.reverse .split-media{order:2}
.split-media img{width:100%;border-radius:4px;aspect-ratio:4/3;object-fit:cover}
.split-media.arch img{aspect-ratio:4/5;border-radius:4px;filter:sepia(.26) saturate(.85) brightness(.97)}
.split-text h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:1.3rem}
.split-text>p{color:var(--ink-soft);max-width:48ch}
.split-text>p+p{margin-top:1rem}

/* ---------- why / feature list ---------- */
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}
.feature{border-top:2px solid var(--ink);padding-top:1.1rem}
.feature .f-ico{width:30px;height:30px;color:var(--teal);margin-bottom:.9rem;stroke-width:1.3}
.feature h3{font-size:1.2rem;margin-bottom:.45rem}
.feature p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ---------- forms ---------- */
.form-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.enq-form{display:grid;gap:1.4rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.field label,.fieldset-label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:.85rem .95rem;width:100%;transition:border-color .25s,box-shadow .25s;
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,95,114,.14);
}
fieldset.field{border:0;padding:0;margin:0}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .9rem;margin-top:.3rem}
.check{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--ink-soft);text-transform:none;letter-spacing:0;font-weight:400}
.check input{width:auto;accent-color:var(--teal)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--ink-soft)}
.consent input{width:auto;margin-top:.2rem;accent-color:var(--teal)}
.form-note{font-size:.82rem;color:var(--ink-soft);margin-top:.4rem}

.aside-card{background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:1.8rem}
.aside-card h3{font-size:1.25rem;margin-bottom:1rem}
.aside-steps{list-style:none;margin:0 0 1.5rem;padding:0;counter-reset:s;display:grid;gap:1rem}
.aside-steps li{position:relative;padding-left:2.4rem;font-size:.92rem;color:var(--ink-soft)}
.aside-steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-.1rem;width:1.7rem;height:1.7rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.85rem;color:var(--paper);background:var(--teal);border-radius:50%;
}
.aside-contact{border-top:1px solid var(--line);padding-top:1.2rem;font-size:.92rem;display:grid;gap:.4rem}
.aside-contact a{color:var(--teal);text-decoration:none}
.aside-contact a:hover{text-decoration:underline}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.contact-block{display:grid;gap:1.6rem}
.contact-item h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-bottom:.4rem}
.contact-item p,.contact-item a:not(.btn){margin:0;color:var(--ink-soft);text-decoration:none;font-size:1.05rem}
.contact-item a:not(.btn):hover{color:var(--teal)}
.contact-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.6rem}
.map-frame{border:1px solid var(--line);border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3) sepia(.12)}

/* ---------- misc ---------- */
.section-cta{margin-top:clamp(2.5rem,5vw,3.5rem)}
.center-cta{text-align:center;margin-top:clamp(2.5rem,5vw,3.5rem)}
.pv-note{
  background:var(--paper-2);border-left:2px solid var(--sand);
  padding:1.1rem 1.4rem;font-family:var(--font-display);font-style:italic;
  color:var(--ink);max-width:44rem;
}

@media (max-width:1000px){
  .card-grid{grid-template-columns:1fr}
  .split,.split.reverse .split-media{grid-template-columns:1fr;order:0}
  .split{gap:2rem}
  .feature-row{grid-template-columns:1fr;gap:1.5rem}
  .form-layout{grid-template-columns:1fr;gap:2.5rem}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
}

#enquire{scroll-margin-top:80px}
#enquire + .section .map-frame{aspect-ratio:auto;height:clamp(300px,38vw,440px)}
@media (max-width:1000px){#enquire .form-layout .aside-card{order:-1}}

/* ---------- mobile pass (2026-09-29): bigger touch targets ---------- */
.check input,.consent input{width:20px;height:20px;flex-shrink:0}
@media (max-width:1000px){
  .card-cta{padding-block:.6rem}
  .check{min-height:36px}
}