/* home-sections.css: shared by Home, About, Contact, Stay Updated and FAQ (sections first designed for the homepage).
   Loaded before each page's own <style>; a page can override anything here.
   Edit here and every page in the family follows. */

/* HERO */
.hero{
  position:relative;
  background-color:var(--dark);
  background-image:
  linear-gradient(transparent, transparent),
  url('/images/site/hero-group-photo-656b03e1fc.jpg');
  background-position:center 60%;
  background-size:cover;
  background-repeat:no-repeat;
  background-blend-mode:normal, normal;
  color:var(--white);
  padding:56px 0 40px;
  }
.hero-featured{gap:14px 18px;}
.hero-featured .hf-label{display:flex;align-items:center;gap:12px;}
.hero-featured .hf-label::after{content:'';width:28px;height:1px;background:var(--gold);opacity:.75;}
.press-logo{display:block;flex:none;background:var(--green-soft);opacity:.9;transition:opacity .2s ease, background-color .2s ease;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
a.press-logo:hover{opacity:1;background:var(--white);}
.press-sep{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none;}
.cs-postmark-card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:10px;width:208px;flex:0 0 208px;box-shadow:0 8px 20px rgba(21,34,48,0.18);text-align:left;}
.cs-postmark-photo{position:relative;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg, var(--dark-soft) 0%, var(--blue) 55%, var(--green-dark) 100%)}

/* HOMEPAGE FAQ - trimmed to the questions families ask first; the full set
     lives on faq.html */
.faq-home .faq-list{max-width:860px;}
.faq-more{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;margin-top:30px;max-width:860px;}
.faq-more p{margin:0;color:var(--muted)}
/* FAQ PAGE */
.faq-hero{padding:46px 0 52px;}
.faq-layout{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start;}
.faq-toc{position:sticky;top:24px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);}
.faq-toc .toc-title{font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding:0 0 10px 16px}
.faq-toc a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;font-weight:600;color:#3c4048;text-decoration:none;transition:color .15s ease,border-color .15s ease}
.faq-toc a:hover{color:var(--green-dark);border-left-color:var(--green);}
.faq-group{scroll-margin-top:24px;}
.faq-group + .faq-group{margin-top:44px;}
.faq-group h2{margin-bottom:6px}
.faq-ask{margin-top:56px;padding:30px 32px;border-radius:4px;background:var(--dark);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:18px 30px;flex-wrap:wrap;}
.faq-ask h3{color:var(--white);margin:0 0 4px}
.faq-ask p{margin:0;color:#c7ccd1}
@media (max-width:860px){
  .faq-layout{grid-template-columns:1fr;gap:28px;}
  .faq-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;border-left:none;}
  .faq-toc .toc-title{display:none;}
  .faq-toc a{margin:0;padding:7px 14px;border:1px solid var(--line);border-radius:4px;background:var(--white)}
  .faq-toc a:hover{border-color:var(--green);}
}

.hero h1{font-size:clamp(32px,4.6vw,52px);}
.hero p.lede{font-size:20px;max-width:680px;}
.btn{font-size:16px;}
.btn-sm{font-size:14.5px;}
.hero-featured{font-size:14px;}
.hero-featured .hf-label{font-size:14px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head p{font-size:18px;}
.story-media span{font-size:14px;}
.story-heading h2{font-size:clamp(26px,3vw,34px);}
.story-copy p{font-size:18px;line-height:1.7;}
.story-copy p.story-intro{font-size:20px;}
.quote-band blockquote{font-size:clamp(20px,2.2vw,25px);}
.quote-band .attribution{font-size:14px;}
.fb-banner .eyebrow{font-size:14px;}
.fb-banner h2{font-size:clamp(22px,2.4vw,30px);}
.trip-block-copy h2{font-size:clamp(26px,2.8vw,32px);}
.trip-block-intro{font-size:18px;}
.trip-tag{font-size:14px;}
.trip-filter-btn{font-size:14px;}
.trip-empty-note{font-size:16px;}
.spotlight-see-all{font-size:15px;}
.spotlight-card.style-photo .sp-caption{font-size:12px;}
.spotlight-dates, .spotlight-card.style-photo .spotlight-dates{font-size:14px;}
.spotlight-title{font-size:17px;}
.spotlight-card.style-photo .spotlight-title{font-size:22px;}

.community-prop h4{font-size:19px;}
.community-prop p{font-size:17px;line-height:1.55;}
.proof-label{font-size:14px;}
.proof-chip p{font-size:18px;}
.proof-chip .who, .proof-chip .who .who-trip{font-size:14px;}
.update-card h4{font-size:18px;}
.update-card p{font-size:16.5px;line-height:1.55;}
.newsletter-form input{font-size:16px;}
.contact-channel{font-size:18px;}
.contact-intro{font-size:18px !important;}
.form-row label, .form-row legend{font-size:14px;}
.form-row select, .form-row textarea, .form-row input[type="text"], .form-row input[type="email"]{font-size:16px;}
.reason-chip, .reason-chips .reason-chip{font-size:15px;}
.faq-category-label{font-size:14px;}
.faq-item summary{font-size:18px;padding:19px 0;gap:16px;}
.faq-item summary:after{font-size:24px;}
.faq-item .faq-a{font-size:18px;line-height:1.7;}
.footer-links a{font-size:16px;}

.faq-more p{font-size:16px;}
.faq-hero h1{font-size:clamp(32px,4.2vw,48px);}
.faq-toc .toc-title{font-size:14px;}
.faq-toc a{font-size:16px;}
.faq-group h2{font-size:26px;}
.faq-ask h3{font-size:24px;}
.faq-ask p{font-size:17px;}
.coming-soon h3{font-size:clamp(26px,3vw,34px);}
.cs-postmark-title{font-size:17px;}
.coming-soon-cta{font-size:16px;}
.spotlight-head h3{font-size:24px !important;}
@media (max-width:640px){
  .hero p.lede{font-size:18px;}
  .story-copy p, .trip-block-intro, .section-head p, .faq-item .faq-a, .proof-chip p, .contact-intro{font-size:17px !important;}
  .story-copy p.story-intro{font-size:18px;}
  .faq-item summary{font-size:17px;}
  .faq-toc a{font-size:15px;}
}
/* SQUARED CORNERS - 4px across cards, buttons and fields; 2px on photos framed
     inside cards. Circles stay only on decorative icon badges and social icons. */
.proof-arrow-btn{border-radius:4px;}
.cs-postmark-photo{border-radius:2px;}
/* ===== LIGHTER, HAPPIER PASS =====
     Dark stays as a frame, not a room; photos show clearly wherever no text sits on them. */
/* HERO - dark only behind the text (left), fading to clear over the families (right) */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(13,22,32,0.86) 0%, rgba(13,22,32,0.72) 34%, rgba(13,22,32,0.28) 60%, rgba(13,22,32,0.04) 100%);}
.hero .wrap{z-index:1;}

@media (max-width:760px){
  .hero::before{background:linear-gradient(180deg, rgba(13,22,32,0.62) 0%, rgba(13,22,32,0.78) 70%, rgba(13,22,32,0.6) 100%);}
}
@media (min-width:1000px){
  /* HERO PHOTO - on wider screens, enlarge slightly and anchor left so the
     group sits further right, centered in the clear (un-darkened) side */
  .hero{background-size:118% auto;background-position:0% 80%;min-height:clamp(470px, 36vw, 720px);display:flex;flex-direction:column;justify-content:center;}
  .hero > .wrap{width:100%;}
}