/* ============================================================
   index.css — homepage
   ============================================================ */

/* HERO */
.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 820px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 90px 70px;
  color: var(--paper);
  background-image: url('../assets/images/hero-bg.png');
  background-size: cover;
  background-position: center;
}
.hero .ph-label { z-index: 3; }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,26,18,0.86) 0%, rgba(20,26,18,0.55) 45%, rgba(20,26,18,0.15) 100%),
    linear-gradient(to top, rgba(20,26,18,0.7), transparent 40%);
  z-index: 1;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-size: clamp(3rem, 9vw, 7.4rem); margin: 16px 0 22px; color: var(--paper); }
.hero h1 .accent { color: var(--clay); }
.hero .eyebrow { color: var(--sand); }
.hero .lead { max-width: 46ch; color: rgba(250,246,236,0.9); }
.hero-cta { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.hero-slogan {
  position: absolute; bottom: 26px; left: 0; right: 0; z-index: 2;
  text-align: center; font-family: var(--cond); letter-spacing: 0.34em;
  text-transform: uppercase; font-size: 0.78rem; color: rgba(250,246,236,0.6);
}

/* TRUST STRIP */
.trust { background: var(--forest-deep); padding-block: 26px; border-block: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  color: rgba(250,246,236,0.86); padding: 6px 8px;
  border-right: 1px solid var(--line);
}
.trust-item:last-child { border-right: none; }
.trust-item svg { width: 26px; height: 26px; color: var(--clay); }
.trust-item span { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; line-height: 1.2; }

/* FILM / ADVENTURES IN MOTION (static image carousel) */
.film { background: var(--paper); }
.film-head { text-align: center; margin-bottom: 46px; }
.film-head h2 { margin-top: 14px; }

.carousel { position: relative; }
.carousel-viewport {
  aspect-ratio: 16/8; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(25,28,22,0.5);
}
.carousel-track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.65,0,.35,1); }
.carousel-slide {
  flex: 0 0 100%; height: 100%; position: relative;
  display: grid; align-items: end; justify-items: center;
  background-size: cover; background-position: center;
}
.carousel-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,26,18,0.75) 0%, rgba(20,26,18,0) 45%);
}
.carousel-caption {
  position: relative; z-index: 1;
  margin: 0 0 18px; padding: 8px 18px;
  font-family: var(--cond); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 0.82rem; color: rgba(250,246,236,0.9);
  background: rgba(20,26,18,0.45);
  border: 1px dashed rgba(250,246,236,0.4); border-radius: 3px; backdrop-filter: blur(2px);
}

/* Real photos for each slide. #filmCarousel-scoped + explicit size/position/repeat on every
   rule so these reliably beat shared.css's .ph[data-x] rules, which set `background` as a
   shorthand (resetting size/position/repeat to their defaults) at equal-or-higher specificity. */
#filmCarousel .carousel-slide[data-beach] {
  background-image: url('../assets/images/carousel-beach.jpeg');
  background-size: cover; background-position: bottom; background-repeat: no-repeat;
}
#filmCarousel .carousel-slide[data-bush] {
  background-image: url('../assets/images/carousel-bush.jpeg');
  background-size: cover; background-position: bottom; background-repeat: no-repeat;
}
#filmCarousel .carousel-slide[data-combo] {
  background-image: url('../assets/images/carousel-combo.jpeg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.carousel-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(250,246,236,0.9); color: var(--forest); display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow:hover { background: var(--paper); transform: translateY(-50%) scale(1.06); }
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }
.carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.carousel-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(46,58,44,0.18); transition: background .2s ease, transform .2s ease;
}
.carousel-dot.active { background: var(--clay); transform: scale(1.2); }

/* DESIGNED FOR DOGS */
.designed { background: var(--sand); }
.designed-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.designed-media .ph { border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(25,28,22,0.4); }
.transport-photo {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(25,28,22,0.4);
}
.designed-copy h2 { margin: 14px 0 18px; }
.includes { margin: 30px 0 34px; display: grid; gap: 14px; }
.includes li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.02rem; }
.includes svg { width: 22px; height: 22px; color: var(--clay); flex-shrink: 0; margin-top: 3px; }

/* SECTION HEADS (shared layout for adv/why/insta) */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 50px; }
.sec-head h2 { margin-top: 14px; }
.sec-head .lead { max-width: 40ch; text-align: right; }

/* ADVENTURES */
.adv { background: var(--paper); }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.adv-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 440px; display: flex; align-items: flex-end;
  transition: transform .35s ease;
}
.adv-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,26,18,0.94) 8%, rgba(20,26,18,0.35) 48%, rgba(20,26,18,0.05) 68%); z-index: 1; }
.adv-card:hover { transform: translateY(-6px); }
.adv-card .ph-label { z-index: 3; }
.adv-body { position: relative; z-index: 2; padding: 28px; color: var(--paper); }
.adv-tag { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; color: var(--clay); text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.adv-body h3 { margin: 8px 0 10px; color: var(--paper); }
.adv-body p { color: rgba(250,246,236,0.85); margin-bottom: 14px; }
.adv-link { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.92rem; color: var(--sand); transition: color .2s, gap .2s; }
.adv-link:hover { color: var(--clay); }
.adv-card--feature { min-height: 440px; grid-row: span 1; }
.adv-flag { position: absolute; top: 18px; left: 18px; z-index: 3; background: var(--clay); color: var(--paper); font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; padding: 6px 12px; border-radius: 3px; }

/* Real product photography for the three adventure cards (overrides the .ph placeholder gradient) */
.adv-grid .adv-card[data-beach] { background-image: url('../assets/images/dog-beach-run.jpg'); background-size: cover; background-position: bottom; }
.adv-grid .adv-card[data-bush]  { background-image: url('../assets/images/dog-bush-log.jpg'); background-size: cover; background-position: bottom; }
.adv-grid .adv-card[data-combo] { background-image: url('../assets/images/dogs-beach-play.jpg'); background-size: cover; background-position: center; }

/* TRAINING PREVIEW */
.training-preview { background: var(--sand); }
.training-description { margin: 20px 0 30px; }
.training-photo {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(25,28,22,0.4);
}

/* PHILOSOPHY */
.philosophy { background: var(--forest); position: relative; text-align: center; }
.philosophy::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% 0%, rgba(92,107,78,0.4), transparent 60%); }
.philosophy .container { position: relative; }
.philosophy-quote { max-width: 18ch; margin: 18px auto 0; font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.05; }
.philosophy-quote .accent { color: var(--clay); }
.philosophy-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; }
.stat b { display: block; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); color: var(--sand); line-height: 1; }
.stat span { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.84rem; color: var(--stone); margin-top: 8px; display: block; }

/* WHY */
.why { background: var(--paper); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card { background: var(--sand); border-radius: var(--radius); padding: 34px 26px; border-bottom: 3px solid var(--clay); transition: transform .3s ease, box-shadow .3s ease; }
.why-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -24px rgba(25,28,22,0.4); }
.why-card svg { width: 38px; height: 38px; color: var(--ocean); margin-bottom: 18px; }
.why-card h3 { margin-bottom: 10px; }
.why-card p { font-size: 0.98rem; }

/* INSTAGRAM */
.insta { background: var(--sand); }
.insta-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 34px; gap: 24px; }
.insta-head h2 { margin-top: 12px; }
.insta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1000px; }
.insta-post { min-width: 0; background: #fff; border-radius: var(--radius); overflow: hidden; }
.insta-post iframe { display: block; width: 100%; height: 620px; border: 0; }
.insta-post-link { display: block; padding: 16px 20px; color: var(--forest); font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em; }
.insta-post-link:hover { color: var(--clay-deep); }

/* CTA BAND */
.cta-band { background: var(--forest-deep); position: relative; padding-block: 110px; text-align: center; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 50% 120%, rgba(194,107,61,0.28), transparent 60%); }
.cta-inner { position: relative; max-width: 720px; margin: 0 auto; }
.cta-inner h2 { margin: 16px 0 18px; }
.cta-inner .lead { margin: 0 auto 30px; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .designed-grid { gap: 44px; }
}
@media (max-width: 980px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .trust-item:nth-child(3n) { border-right: none; }
  .designed-grid { grid-template-columns: 1fr; gap: 38px; }
  .designed-media .ph { aspect-ratio: 16/10 !important; max-height: 420px; }
  .training-photo { aspect-ratio: 16/10; max-height: 420px; }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .philosophy-stats { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .sec-head { align-items: flex-start; }
  .sec-head .lead { text-align: left; }
}
@media (max-width: 850px) {
  .carousel-viewport { aspect-ratio: 16/9; }
  .carousel-arrow { width: 38px; height: 38px; }
  .carousel-arrow svg { width: 17px; height: 17px; }
}
@media (max-width: 650px) {
  .hero { min-height: 78vh; padding-block: 60px 64px; background-image: url('../assets/images/hero-mobile-bg.png'); }
  .hero h1 { font-size: clamp(3.8rem, 13vw, 5.5rem); }
  .hero-cta { flex-direction: column; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-right: none; }
  .sec-head, .insta-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 34px; }
  .adv-grid { grid-template-columns: 1fr; }
  .adv-card, .adv-card--feature { min-height: 380px; }
  .why-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: 1fr; }
  .includes li { font-size: 0.98rem; }
}
@media (max-width: 480px) {
  .trust-grid { grid-template-columns: 1fr; }
  .philosophy-stats { grid-template-columns: 1fr; gap: 28px; }
}