/**
 * Activity Detail — minimal CSS for patterns Tailwind can't handle alone
 */

/* Gallery base */
.gallery-grid {
  height: clamp(300px, 44vw, 520px);
}

.gallery-grid > figure,
.gallery-grid > .gallery-cell--split-row {
  min-height: 0;
  height: 100%;
}

.gallery-grid .gallery-cell--split-row figure {
  min-height: 0;
  height: 100%;
}

.gallery-grid--interactive .tour-media,
.gallery-track--interactive figure {
  cursor: zoom-in;
}

/* 1 image — full width */
.gallery-grid--count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.gallery-grid--count-1 .gallery-cell--solo {
  grid-column: 1;
  grid-row: 1;
}

/* 2 images — split half */
.gallery-grid--count-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.gallery-grid--count-2 .gallery-cell--half-left {
  grid-column: 1;
  grid-row: 1;
}

.gallery-grid--count-2 .gallery-cell--half-right {
  grid-column: 2;
  grid-row: 1;
}

/* 3 images — featured left, stacked right */
.gallery-grid--count-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.gallery-grid--count-3 .gallery-cell--feature-left {
  grid-column: 1;
  grid-row: 1 / 3;
}

.gallery-grid--count-3 .gallery-cell--stack-top {
  grid-column: 2;
  grid-row: 1;
}

.gallery-grid--count-3 .gallery-cell--stack-bottom {
  grid-column: 2;
  grid-row: 2;
}

/* 4 images — featured left, one top-right, two bottom-right */
.gallery-grid--count-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.gallery-grid--count-4 .gallery-cell--feature-left {
  grid-column: 1;
  grid-row: 1 / 3;
}

.gallery-grid--count-4 .gallery-cell--stack-top {
  grid-column: 2;
  grid-row: 1;
}

.gallery-cell--split-row {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  min-height: 0;
}

.gallery-cell--split-row figure {
  min-height: 0;
}

/* 5+ images — original bento grid */
.gallery-grid--count-5 {
  grid-template-columns: 1fr 2.1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.gallery-grid--count-5 .gallery-cell--main {
  grid-column: 2;
  grid-row: 1 / 3;
}

.gallery-grid--count-5 .gallery-cell--tl {
  grid-column: 1;
  grid-row: 1;
}

.gallery-grid--count-5 .gallery-cell--bl {
  grid-column: 1;
  grid-row: 2;
}

.gallery-grid--count-5 .gallery-cell--tr {
  grid-column: 3;
  grid-row: 1;
}

.gallery-grid--count-5 .gallery-cell--br {
  grid-column: 3;
  grid-row: 2;
}

/* Itinerary timeline */
.itinerary-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: #e8ecf2;
  transform: translateX(-50%);
}
.itinerary-dot {
  width: 11px;
  height: 11px;
  position: absolute;
  top: 22px;
  border-radius: 50%;
  border: 1px solid #000000;
  background: #fff;
  z-index: 1;
  justify-self: center;
}
.itinerary-item:has(.itinerary-trigger[aria-expanded="true"]) .itinerary-dot {
  background: #0d1117;
  border-color: #0d1117;
}
.itinerary-trigger[aria-expanded="true"] .itinerary-chevron {
  transform: rotate(180deg);
}
.itinerary-panel[hidden] {
  display: none;
}

/* JS-driven states */
.gallery-dot[aria-current="true"] {
  background: #0d1117;
}
.mobile-book-bar.visible {
  display: flex;
}
.rec-fav-btn[aria-pressed="true"] svg {
  fill: #ef4444;
  stroke: #ef4444;
}

@media (prefers-reduced-motion: reduce) {
  .itinerary-chevron {
    transition: none;
  }
}