/* ==========================================
   MADHYA EARTH — experience.css
   Experience page styles
   ========================================== */

/* ======================================
   EXPERIENCE HERO
   ====================================== */
.exp-hero {
  position: relative;
  /* Sits below the fixed navbar instead of behind it — see
     .navbar--solid in global.css for the matching static navbar look. */
  margin-top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  height: calc(100vh - var(--nav-h));
  min-height: calc(600px - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
}

.exp-hero__media {
  position: absolute;
  inset: -30% 0;
  will-change: transform;
}

.exp-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-panel-1, #eee) center / cover no-repeat;
}

/* Mobile's full, uncropped static image (see the responsive block below —
   hidden on desktop, where the video above is shown instead). Sized by
   its own aspect ratio rather than cover-cropped, since it carries
   baked-in title text that cover-crop would cut off. */
.exp-hero__mobile-media {
  display: none;
}

/* ======================================
   EXPERIENCES AT THE FARM
   ====================================== */
.coming-soon { background: var(--bg-light); }

.coming-soon__header {
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 600px;
}

.coming-soon__title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
}

.coming-soon__sub {
  font-size: 1.05rem;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* 3 columns lays the 9 experiences out as an even 3 x 3 on desktop */
.coming-soon__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.coming-card {
  background: var(--bg-mid);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  transition: background var(--t-base);
}

.coming-card:hover {
  background: var(--bg-dark);
}

.coming-card__media {
  /* Matches the source graphics' native 16:9 composition so nothing —
     including their baked-in title text — gets cropped off. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.coming-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88) saturate(0.9);
  transition: transform 0.7s var(--ease-out), filter 0.5s ease;
}

.coming-card:hover .coming-card__media img {
  transform: scale(1.05);
  filter: brightness(0.98) saturate(1);
}

/* Colour-wash overlay — each card blooms in its tree's hue on hover */
.coming-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.coming-card:hover .coming-card__media::after { opacity: 0.55; }

.coming-card:nth-child(1) .coming-card__media::after { background: var(--tree-5); }
.coming-card:nth-child(2) .coming-card__media::after { background: var(--tree-2); }
.coming-card:nth-child(3) .coming-card__media::after { background: var(--tree-1); }
.coming-card:nth-child(4) .coming-card__media::after { background: var(--tree-4); }

.coming-card__body {
  padding: 1.5rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.coming-card__tag {
  align-self: flex-start;
}

.coming-card__title {
  font-family: var(--font-card-title);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--text-light);
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: uppercase;
  /* Reserve 2 lines so short titles still line up across a row. Longer
     titles wrap and grow the card rather than truncating — there's no
     "more" view to reveal clipped text. */
  min-height: calc(1.35em * 2);
}

/* Long unbroken strings (URLs, long words) wrap inside the card instead
   of overflowing its edge. */
.experience-card__face {
  overflow-wrap: anywhere;
}

.coming-card__desc {
  font-size: 0.92rem;
  color: var(--text-light-muted);
  line-height: 1.65;
}

/* Flip affordance at the foot of the front face. Desktop flips on hover,
   mobile on tap, so each breakpoint gets its own wording. */
.experience-card__hint {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  opacity: 0.75;
}

.experience-card__hint-mobile {
  display: none;
}

.experience-card {
  display: block;
  background: transparent;
  overflow: visible;
  perspective: 1200px;
}

/* Both faces are stacked in one grid cell rather than absolutely
   positioned, so the card is always as tall as its taller face and
   nothing on the back can be clipped. The grid row then stretches every
   card in a row to the same height — no fixed heights or JS needed. */
.experience-card__inner {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Desktop: flip on hover/focus (see js/experience.js for the mobile
   tap-to-toggle equivalent, scoped to its own breakpoint below). */
@media (min-width: 768px) {
  .experience-card:hover .experience-card__inner,
  .experience-card:focus .experience-card__inner,
  .experience-card:focus-within .experience-card__inner {
    transform: rotateY(180deg);
  }
}

.experience-card__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--bg-mid);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.experience-card__front {
  transform: rotateY(0deg);
}

.experience-card__back {
  justify-content: space-between;
  padding: 1.5rem;
  transform: rotateY(180deg);
  background:
    linear-gradient(145deg, rgba(159, 176, 143, 0.1), transparent 60%),
    var(--bg-mid);
}

.experience-card__back h3 {
  font-family: var(--font-card-title);
  font-size: clamp(0.95rem, 1.45vw, 1.15rem);
  font-weight: 400;
  color: var(--text-light);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* ---- Details list (price / minimum / group size) ----
   Label-left, value-right rows with a hairline divider, instead of a
   plain bulleted sentence — separates the "what" from the "how much"
   at a glance. */
.experience-card__details {
  list-style: none;
  margin: 1rem 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.experience-card__details-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(251, 246, 240, 0.12);
}

.experience-card__details-row:first-child {
  padding-top: 0;
}

.experience-card__details-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.experience-card__details-label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  opacity: 0.65;
  flex: 0 1 40%;
  min-width: 0;
}

.experience-card__details-value {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-light);
  text-align: right;
  flex: 1;
  min-width: 0;
}

/* Two equal columns keep Call and Email side by side on every card
   instead of Email wrapping onto its own row in narrow columns. */
.experience-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: auto;
}

.experience-card__actions a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(251, 246, 240, 0.28);
  padding: 0.65rem 0.5rem;
  white-space: normal;
  text-align: center;
  color: var(--text-light);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}

.experience-card__actions a:hover,
.experience-card__actions a:focus-visible {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--bg-dark);
}

.experience-card__phone-desktop {
  display: inline;
}

.experience-card__phone-mobile {
  display: none;
}

.coming-soon__contact {
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  max-width: 680px;
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
}

.coming-soon__contact a {
  color: var(--accent-primary);
}

.experiences-status { padding: 1.5rem 0; color: var(--ink-muted); }
.experiences-status[hidden] { display: none; }
.coming-card__tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* ======================================
   RESPONSIVE
   ====================================== */
@media (max-width: 1023px) {
  .coming-soon__grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 767px) {
  /* No parallax video on mobile — swap to the full, uncropped static
     image and let the hero's height come from the image itself instead
     of a fixed viewport-height box. */
  .exp-hero {
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }

  .exp-hero__media {
    display: none;
  }

  .exp-hero__mobile-media {
    display: block;
    width: 100%;
    height: auto;
  }

  .coming-soon__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
  }

  .coming-card__media {
    aspect-ratio: 16 / 9;
  }

  /* Tighter than desktop — the image is much shorter at this aspect ratio
     and column width, so the card doesn't need as much body padding to
     comfortably fit the same content. */
  .coming-card__body {
    padding: 1rem 1rem 1.25rem;
    gap: 0.5rem;
  }

  /* Mobile: tapping toggles this class instead of relying on hover/focus
     (see js/experience.js). Tap again to flip back. */
  .experience-card.is-flipped .experience-card__inner {
    transform: rotateY(180deg);
  }

  .experience-card__phone-desktop {
    display: none;
  }

  .experience-card__phone-mobile,
  .experience-card__hint-mobile {
    display: inline;
  }

  .experience-card__hint-desktop {
    display: none;
  }
}

@media (max-width: 599px) {
  .coming-soon__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Reduced motion: crossfade between faces instead of the 3D rotation */
@media (prefers-reduced-motion: reduce) {
  .experience-card__inner,
  .experience-card:hover .experience-card__inner,
  .experience-card:focus .experience-card__inner,
  .experience-card:focus-within .experience-card__inner,
  .experience-card.is-flipped .experience-card__inner {
    transform: none;
    transition: none;
  }

  .experience-card__face {
    transform: none;
    transition: opacity 0.25s ease;
  }

  .experience-card__back {
    opacity: 0;
  }

  .experience-card:hover .experience-card__back,
  .experience-card:focus-within .experience-card__back,
  .experience-card.is-flipped .experience-card__back {
    opacity: 1;
  }

  .experience-card:hover .experience-card__front,
  .experience-card:focus-within .experience-card__front,
  .experience-card.is-flipped .experience-card__front {
    opacity: 0;
  }
}