/* Experiences Tabs — section styles
   The tab strip and its panels. Tab switching is in the shared home interactions script.
   Loads with the Tour Ceylon +94 theme. Depends on the shared styles
   snippet for the section shell, the container and the small pieces.
   -------------------------------------------------------------------- */

.tc94-experiences .tc94-section-head { margin-bottom: var(--wp--preset--spacing--80); }

.tc94-tabs { display: grid; gap: var(--wp--preset--spacing--60); }

@media (min-width: 62rem) {
  .tc94-tabs {
      grid-template-columns: minmax(16rem, 23rem) minmax(0, 1fr);
      gap: var(--wp--preset--spacing--90);
      align-items: start;
    }
}

.tc94-tabs__list {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--wp--preset--spacing--20);
  margin-inline: calc(var(--wp--custom--gutter) * -1);
  padding-inline: var(--wp--custom--gutter);
  scroll-snap-type: x proximity;
}

.tc94-tabs__list::-webkit-scrollbar { display: none; }

@media (min-width: 62rem) {
  .tc94-tabs__list {
      flex-direction: column;
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
      padding-bottom: 0;
      gap: var(--wp--preset--spacing--10);
      border-left: 1px solid var(--wp--preset--color--line);
    }
}

.tc94-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  flex: none;
  scroll-snap-align: start;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--pill);
  background-color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--custom--color--text-muted);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: color var(--tc94-transition-base),
              background-color var(--tc94-transition-base),
              border-color var(--tc94-transition-base);
}

.tc94-tab .tc94-icon { color: var(--wp--custom--color--text-subtle); transition: color var(--tc94-transition-base); }

.tc94-tab:hover { color: var(--wp--custom--color--text); border-color: var(--wp--preset--color--line-strong); }

.tc94-tab[aria-selected="true"] {
  color: var(--wp--custom--color--on-dark);
  background-color: var(--wp--preset--color--surface-dark);
  border-color: var(--wp--preset--color--surface-dark);
}

.tc94-tab[aria-selected="true"] .tc94-icon { color: var(--wp--preset--color--highlight); }

@media (min-width: 62rem) {
  .tc94-tab {
      width: 100%;
      white-space: normal;
      border: 0;
      border-radius: 0;
      border-left: 2px solid transparent;
      margin-left: -1px;
      padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
      background-color: transparent;
    }

  .tc94-tab:hover { background-color: var(--wp--preset--color--surface-subtle); border-color: transparent; }

  .tc94-tab[aria-selected="true"] {
      background-color: transparent;
      color: var(--wp--custom--color--text);
      border-left-color: var(--wp--preset--color--accent);
    }

  .tc94-tab[aria-selected="true"] .tc94-icon { color: var(--wp--preset--color--accent-ink); }
}

.tc94-tab__label { display: block; }

.tc94-tabs__panels { position: relative; min-width: 0; }

.tc94-tab-panel { display: none; }

.tc94-tab-panel[data-active] { display: block; animation: tc94-fade var(--wp--custom--duration--normal) var(--wp--custom--ease--out); }

@keyframes tc94-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.tc94-tab-panel__inner {
  display: grid;
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}

@media (min-width: 48rem) {
  .tc94-tab-panel__inner {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: var(--wp--preset--spacing--80);
    }
}

.tc94-tab-panel__media {
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--md);
  aspect-ratio: 4 / 3;
}

.tc94-tab-panel__media img { width: 100%; height: 100%; object-fit: cover; }

.tc94-tab-panel__body { display: grid; gap: var(--wp--preset--spacing--40); }

.tc94-tab-panel__body p {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
}