/* Experience-focused landing components. Global tokens remain in theme.json. */

/* Hero slider */
.tamba-hero-slider {
  position: relative;
  height: clamp(600px, 36vw, 680px);
  margin: 0;
  overflow: hidden;
  background: var(--wp--preset--color--background, #fffaf4);
}

.tamba-hero-slider > .tamba-hero-slide {
  position: absolute;
  inset: 0;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.65s ease, visibility 0.65s ease;
}

.tamba-hero-slider > .tamba-hero-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tamba-hero-slide > .wp-block-cover__image-background {
  z-index: 0 !important;
  transform: scale(1.015);
  transition: transform 7s ease;
}

.tamba-hero-slide::after {
  z-index: 1 !important;
}

.tamba-hero-slide > .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 10 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.tamba-hero-slide .tamba-shell,
.tamba-hero-slide .tamba-hero__content,
.tamba-hero-slide .tamba-hero__content > * {
  position: relative;
  z-index: 11;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.tamba-hero-slide .tamba-hero__content .wp-block-heading {
  color: var(--wp--preset--color--text, #24211f) !important;
}

.tamba-hero-slide .tamba-hero__content .wp-block-heading mark {
  color: var(--wp--preset--color--accent, #ff5a24) !important;
}

.tamba-hero-slide.is-active > .wp-block-cover__image-background {
  transform: scale(1.055);
}

.tamba-hero-slide .tamba-hero__content {
  width: min(680px, 54vw);
  max-width: 680px;
  margin-inline: 0 !important;
}

.tamba-hero-slide .tamba-hero__content .wp-block-heading {
  font-size: clamp(44px, 4.5vw, 64px);
}

.tamba-hero-slide .tamba-hero__content > p {
  max-width: 560px;
  margin: 26px 0 30px;
  color: var(--wp--preset--color--text, #24211f) !important;
  font-size: 18px;
  line-height: 1.6;
}

.tamba-hero-slider__controls {
  position: absolute;
  z-index: 20;
  right: max(24px, calc((100vw - var(--wp--custom--layout--content, 1180px)) / 2));
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tamba-hero-slider__arrow,
.tamba-review-carousel__arrow {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(36, 33, 31, 0.18);
  border-radius: 50%;
  color: var(--wp--preset--color--text, #24211f);
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tamba-hero-slider__arrow:hover,
.tamba-review-carousel__arrow:hover {
  border-color: var(--wp--preset--color--accent, #ff5a24);
  color: var(--wp--preset--color--accent, #ff5a24);
  transform: translateY(-1px);
}

.tamba-slider-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tamba-slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 33, 31, 0.25);
  cursor: pointer;
  transition: width 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}

.tamba-slider-dots button.is-active {
  width: 28px;
  border-radius: 999px;
  background: var(--wp--preset--color--accent, #ff5a24);
}

/* Why Tamba */
.tamba-section--why {
  background: linear-gradient(180deg, rgba(255, 242, 232, 0.48), rgba(255, 250, 244, 0));
}

.tamba-why-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.tamba-why-card {
  position: relative;
  min-width: 0;
  padding: 30px 24px 28px;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--line, #eee4da);
  border-radius: var(--wp--custom--radius--card, 18px);
  background: var(--wp--preset--color--surface, #fff);
  box-shadow: var(--wp--preset--shadow--soft, 0 10px 26px rgba(67, 45, 25, 0.05));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tamba-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(67, 45, 25, 0.1);
}

.tamba-why-card.is-layout-constrained > * {
  margin-inline: 0;
}

.tamba-why-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 0 24px;
  place-items: center;
  border-radius: 14px;
  color: var(--wp--preset--color--accent, #ff5a24);
  background: var(--wp--preset--color--surface-soft, #fff2e8);
  font-size: 23px;
  line-height: 1;
}

.tamba-why-card h3 {
  min-height: 48px;
  margin: 0 0 14px;
}

.tamba-why-card > p:last-child {
  margin: 0;
  color: var(--wp--preset--color--muted, #625b55);
  font-size: 14px;
  line-height: 1.65;
}

/* Gallery */
.tamba-gallery-heading .wp-block-buttons {
  margin: 0;
}

.tamba-instagram-button .wp-block-button__link {
  color: var(--wp--preset--color--accent, #ff5a24);
  background: transparent;
}

/* Reviews carousel */
.tamba-section--reviews {
  background: var(--wp--preset--color--surface, #fff);
}

.tamba-review-carousel {
  position: relative;
  margin-top: 30px;
  overflow: hidden;
}

.tamba-review-track {
  display: flex !important;
  gap: 18px;
  margin: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.tamba-review-track > .tamba-review {
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 0;
}

.tamba-review-carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.tamba-review-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

@media (max-width: 1100px) {
  .tamba-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tamba-review-track > .tamba-review {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (max-width: 700px) {
  .tamba-hero-slider {
    height: 650px;
  }

  .tamba-hero-slider > .tamba-hero-slide {
    height: 650px;
  }

  .tamba-hero-slide .tamba-hero__content {
    width: 100%;
    max-width: 100%;
  }

  .tamba-hero-slide .tamba-hero__content > p {
    max-width: 100%;
    font-size: 16px;
  }

  .tamba-hero-slider__controls {
    right: 15px;
    bottom: 22px;
  }

  .tamba-why-grid {
    grid-template-columns: 1fr;
  }

  .tamba-why-card h3 {
    min-height: 0;
  }

  .tamba-review-track > .tamba-review {
    flex-basis: 100%;
  }

  .tamba-gallery-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tamba-hero-slider > .tamba-hero-slide,
  .tamba-hero-slide > .wp-block-cover__image-background,
  .tamba-review-track {
    transition: none;
  }
}