/**
 * Protection caps + Stories featured rotator — content transitions (not full section re-reveal).
 */

/* —— FAQ: auto-cycle (topic tabs + panels) —— */
#faq.faq--auto .faq__tabs [role="tab"],
#pkg-faq.faq--auto .faq__tabs [role="tab"] {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

#faq.faq--auto .faq__panel:not([hidden]),
#pkg-faq.faq--auto .faq__panel:not([hidden]) {
  animation: faq-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faq-panel-in {
  from {
    opacity: 0.92;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #faq.faq--auto .faq__panel:not([hidden]),
  #pkg-faq.faq--auto .faq__panel:not([hidden]) {
    animation: none !important;
  }
}

/* —— Protection: auto-cycle (left tabs + image + copy) —— */
.caps.caps--auto .caps__tabs [role="tab"] {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

/* —— Protection: smooth panel body on tab change —— */
.caps__panels .cap.is-switching .cap__body {
  animation: cap-body-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.caps__panels .cap.is-switching .cap__media img {
  animation: cap-img-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cap-body-in {
  from {
    opacity: 0.92;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cap-img-in {
  from {
    opacity: 0.88;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* —— Stories: auto-rotator —— */
.stories__grid.stories--auto .story-list li {
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* —— Stories: featured swap —— */
.stories__grid[data-stories-rotator] .story-feature__img img,
.stories__grid[data-stories-rotator] .story-feature__body {
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.stories__grid[data-stories-rotator] .story-feature.is-story-swapping .story-feature__img img,
.stories__grid[data-stories-rotator] .story-feature.is-story-swapping .story-feature__body {
  /* Soft swap — never blank the featured story (readability). */
  opacity: 0.88;
  transform: translateY(4px);
}

.story-list li.is-story-active {
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--brand);
}

.story-list li.is-story-selectable {
  cursor: pointer;
}

.story-list li.is-story-selectable:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--brand), var(--focus);
}

@media (prefers-reduced-motion: reduce) {
  .caps__panels .cap.is-switching .cap__body,
  .caps__panels .cap.is-switching .cap__media img {
    animation: none !important;
  }

  .stories__grid[data-stories-rotator] .story-feature__img img,
  .stories__grid[data-stories-rotator] .story-feature__body {
    transition: none !important;
  }
}

/* —— Stories section: compact above-the-fold layout (desktop)
   Home (#travel-stories) + package detail (.pkg-detail__stories) share exact sizes. —— */
@media (min-width: 992px) {
  #travel-stories.stories,
  body[data-page="package-detail"] .pkg-detail__stories.stories {
    padding-block: clamp(2rem, 3vw, 3rem);
  }

  #travel-stories .sec-head--row,
  body[data-page="package-detail"] .pkg-detail__stories .sec-head--row {
    margin-bottom: var(--s-4);
  }

  #travel-stories .sec-head--row h2,
  body[data-page="package-detail"] .pkg-detail__stories .sec-head--row h2 {
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  }

  #travel-stories .stories__grid,
  body[data-page="package-detail"] .pkg-detail__stories .stories__grid {
    gap: var(--s-5);
    align-items: start;
  }

  #travel-stories .story-feature__img,
  body[data-page="package-detail"] .pkg-detail__stories .story-feature__img {
    height: clamp(176px, 21vh, 228px);
    aspect-ratio: auto;
  }

  #travel-stories .story-feature__body,
  body[data-page="package-detail"] .pkg-detail__stories .story-feature__body {
    margin-top: var(--s-3);
    max-width: 52ch;
  }

  #travel-stories .story-feature__body h3,
  body[data-page="package-detail"] .pkg-detail__stories .story-feature__body h3 {
    font-size: clamp(1.0625rem, 0.92rem + 0.4vw, 1.3125rem);
    line-height: 1.28;
  }

  #travel-stories .story-feature__body > p:last-child,
  body[data-page="package-detail"] .pkg-detail__stories .story-feature__body > p:last-child {
    margin-top: var(--s-2);
    font-size: var(--fs-sm);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #travel-stories .story-list li,
  body[data-page="package-detail"] .pkg-detail__stories .story-list li {
    padding-block: var(--s-3);
    grid-template-columns: 112px 1fr;
    gap: var(--s-3);
  }

  #travel-stories .story-list img,
  body[data-page="package-detail"] .pkg-detail__stories .story-list img {
    width: 112px;
    height: 78px;
  }

  #travel-stories .story-list h3,
  body[data-page="package-detail"] .pkg-detail__stories .story-list h3 {
    font-size: 0.9375rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 992px) and (min-height: 800px) {
  #travel-stories .story-feature__img,
  body[data-page="package-detail"] .pkg-detail__stories .story-feature__img {
    height: clamp(200px, 24vh, 248px);
  }
}

/* Package pages: sticky header + price strip — keep stories in one viewport */
@media (min-width: 992px) and (max-height: 900px) {
  body[data-page="package-detail"] .pkg-detail__stories.stories {
    padding-block: clamp(1.5rem, 2.4vw, 2.25rem);
  }

  body[data-page="package-detail"] .pkg-detail__stories .story-feature__img {
    height: clamp(160px, 18vh, 200px);
  }
}