/**
 * Front-page section styles — values traced to Figma "Home" frame (26:732 desktop, 58:2070 mobile).
 * Full-bleed sections stretch at 1920+; inner content is capped by --container.
 */

/* ---------- Shared section furniture ---------- */
.eyebrow { color: var(--c-gold-300); font-size: var(--fs-14); margin-bottom: 8px; }
.section-title { font-size: var(--fs-24); font-weight: 500; color: var(--c-black-800); }
.section-title--lg { font-size: var(--fs-32); }
.section-sub { color: var(--c-gray-700); font-size: var(--fs-14); margin-top: 8px; max-width: 560px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.section-head--center { display: block; text-align: center; }
.section-head--center .section-sub { margin-inline: auto; }
.link-more { color: var(--c-brown-500); font-weight: 500; font-size: var(--fs-16); white-space: nowrap; }
.link-more:hover { color: var(--c-brown-900); }

.btn--brown { background: var(--c-brown-500); color: var(--c-white); }
.btn--brown:hover { background: var(--c-brown-900); }
.btn--white { background: var(--c-white); color: var(--c-brown-500); }
.btn--white:hover { background: var(--c-cream-50); }
.btn--ghost { border-color: var(--c-tan-500); color: var(--c-tan-500); }
.btn--ghost:hover { background: var(--c-tan-500); color: var(--c-black-900); }
.btn--sm { padding: 10px 20px; }

.chip {
  position: absolute; top: 16px; right: 16px;
  background: rgba(0, 0, 1, .55); color: var(--c-gray-50);
  font-size: var(--fs-12); padding: 6px 14px; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

/* ---------- Hero (video bg, poster = design image) ---------- */
.hero {
  position: relative;
  min-height: 736px;
  display: grid; place-items: center;
  color: var(--c-white);
  background: url("../img/hero-bg.jpg") center / cover no-repeat, var(--c-black-900);
  isolation: isolate;
  text-align: center;
  margin-top: -73px; /* design: nav floats over hero */
  padding-top: 73px;
}
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 1, .45) 0%, rgba(0, 0, 1, .25) 55%, rgba(0, 0, 1, .55) 100%);
}
.hero__inner { max-width: 820px; padding: 96px var(--gutter-mobile); }
.hero__badge {
  display: inline-block; color: var(--c-gold-100); font-size: var(--fs-12); font-weight: 500;
  border: 1px solid rgba(223, 205, 169, .4); border-radius: var(--radius-pill); padding: 6px 16px;
  background: rgba(0, 0, 1, .25);
}
.hero__title { font-size: var(--fs-40); font-weight: 600; color: var(--c-gray-50); margin-top: 24px; }
.hero__sub { color: var(--c-gray-200); font-size: var(--fs-20); font-weight: 500; margin-top: 16px; }
.hero__actions { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.hero__rating { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-16); }
.stars { color: var(--c-star); letter-spacing: 2px; }

/* ---------- Experiences ---------- */
.experiences__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.exp-card__media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 624 / 421; }
.exp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.exp-card__body { padding-top: 20px; display: grid; gap: 8px; justify-items: start; }
.exp-card__body h3 { font-size: var(--fs-24); font-weight: 500; }
.exp-card__body p { color: var(--c-gray-800); font-size: var(--fs-14); }

/* ---------- About ---------- */
.about { background: var(--c-cream-50); }
.about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.about__text { display: grid; gap: 16px; margin-top: 24px; color: var(--c-gray-700); font-size: var(--fs-18); }
.about__stats { display: grid; grid-template-columns: repeat(4, auto); gap: 32px; margin: 32px 0; }
.about__stats dt { font-size: var(--fs-24); font-weight: 500; color: var(--c-black-800); }
.about__stats dd { margin: 4px 0 0; font-size: var(--fs-14); color: var(--c-gray-700); }
.about__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Quote band ---------- */
.quote-band {
  background: url("../img/quote-bg.jpg") center / cover no-repeat, var(--c-espresso);
  position: relative; isolation: isolate; color: #F5F1EB;
}
.quote-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(23, 18, 15, .6); }
.quote-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 288px; padding-block: 48px; }
.quote-band blockquote { margin: 0; max-width: 780px; }
.quote-band blockquote p { font-size: var(--fs-32); font-weight: 500; line-height: 1.3; }

/* ---------- Packages ---------- */
.packages { background: var(--c-white); }
.packages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pkg-card {
  background: var(--c-black-soft); color: var(--c-gray-50);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.pkg-card__media { margin: 0; aspect-ratio: 405 / 240; }
.pkg-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pkg-card__body { padding: 24px; display: grid; gap: 12px; flex: 1; align-content: start; }
.pkg-card__tag { color: var(--c-gold-200); font-weight: 700; font-size: var(--fs-14); }
.pkg-card__tag span { color: var(--c-white-600); font-weight: 400; font-size: var(--fs-12); }
.pkg-card__body h3 { font-size: var(--fs-20); color: var(--c-gray-50); }
.pkg-card__desc { color: var(--c-gray-100); font-size: var(--fs-14); }
.pkg-card__meta { display: flex; gap: 16px; font-size: var(--fs-14); color: var(--c-white); }
.pkg-card__meta li::before { content: "•"; color: var(--c-gold-200); margin-right: 6px; }
.pkg-card__features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pkg-card__features li { color: var(--c-gold-200); font-size: var(--fs-12); font-weight: 700; }
.pkg-card__features li::before { content: "✓"; margin-right: 6px; }
.pkg-card__price { font-size: var(--fs-32); font-weight: 700; color: var(--c-gold-300); margin-top: auto; }
.pkg-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Blog ---------- */
.home-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-black-soft); color: var(--c-gray-50); }
.blog-card__media { position: relative; display: block; aspect-ratio: 405 / 260; background: var(--c-gray-200); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__date {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(0, 0, 1, .6); color: var(--c-gray-50);
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--fs-12);
}
.blog-card__body { padding: 20px; display: grid; gap: 10px; }
.blog-card__body h3 { font-size: var(--fs-16); font-weight: 600; }
.blog-card__body h3 a { color: var(--c-gold-300); }
.blog-card__body p { color: var(--c-gray-100); font-size: var(--fs-14); }
.blog-card .link-more { color: var(--c-white); font-size: var(--fs-14); }

/* ---------- Gallery strip (expanding panels) ---------- */
.gallery-strip {
  display: flex; gap: 12px;
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter);
  height: 546px;
}
.gallery-strip__item {
  margin: 0; border-radius: var(--radius-md); overflow: hidden;
  flex: 1; transition: flex .45s ease; cursor: pointer; min-width: 0;
}
.gallery-strip__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-strip__item.is-open, .gallery-strip__item:hover, .gallery-strip__item:focus-visible { flex: 3.2; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--c-cream-50); }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.testi-card { margin: 0; background: var(--c-white); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 20px; }
.testi-card blockquote { margin: 0; }
.testi-card blockquote p { color: var(--c-espresso); font-size: var(--fs-18); line-height: 1.45; }
.testi-card figcaption { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.testi-card figcaption img { grid-row: span 2; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.testi-card__name { font-weight: 500; font-size: var(--fs-14); color: var(--c-espresso); }
.testi-card__since { font-size: var(--fs-12); color: var(--c-gray-400); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.faq__media { margin: 24px 0 0; border-radius: var(--radius-lg); overflow: hidden; }
.faq__list { display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--c-gray-100); border-radius: var(--radius-md); padding: 4px 20px; background: var(--c-white); }
.faq__item summary {
  cursor: pointer; font-weight: 500; font-size: var(--fs-16); color: var(--c-black-800);
  padding: 14px 0; list-style: none; position: relative; padding-right: 32px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--c-brown-500); font-size: var(--fs-20); }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { padding: 0 0 16px; color: var(--c-gray-800); font-size: var(--fs-14); }

/* ---------- Tablet (768–1024, interpolated between Figma frames) ---------- */
@media (max-width: 1024px) {
  .about__grid, .faq__grid { grid-template-columns: 1fr; gap: 40px; }
  .packages__grid, .home-blog__grid, .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .about__stats { grid-template-columns: repeat(2, auto); }
  .gallery-strip { height: 420px; }
}

/* ---------- Mobile (Figma 390 frame) ---------- */
@media (max-width: 767px) {
  .hero { min-height: 640px; }
  .hero__title { font-size: var(--fs-32); }
  .hero__sub { font-size: var(--fs-16); }
  /* Figma mobile: full-width stacked CTAs */
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn { justify-content: center; }

  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
  .experiences__grid, .packages__grid, .home-blog__grid, .testimonials__grid { grid-template-columns: 1fr; }

  .quote-band blockquote p { font-size: var(--fs-20); }
  .quote-band__inner { flex-direction: column; align-items: flex-start; }

  .gallery-strip { flex-direction: column; height: auto; }
  .gallery-strip__item { height: 64px; flex: none; transition: height .45s ease; }
  .gallery-strip__item.is-open, .gallery-strip__item:hover, .gallery-strip__item:focus-visible { height: 320px; flex: none; }
}

/* ---------- Wide screens (1920+): full-bleed stretches, content stays capped ---------- */
@media (min-width: 1920px) {
  .hero { min-height: 820px; }
}