/* =========================================================
   TehranPay V2 — Exact Use-Case Panel Handoff
   Purpose: make Claude copy the reference exactly by using the
   approved panel images as the visual layer, while keeping the
   section responsive and clickable.
   ========================================================= */

.tp-exact-usecases {
  /* Desktop panels were too large — capped width reduced ~12% (1488 → 1320). */
  width: min(100% - 32px, 1320px);
  margin: 64px auto 58px;
  direction: rtl;
}

.tp-exact-usecases__header {
  text-align: center;
  margin-bottom: 28px;
}

.tp-exact-usecases__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 850;
  color: #ddd6fe;
  background: rgba(139, 92, 246, .22);
  border: 1px solid rgba(196, 181, 253, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(139,92,246,.12);
}

.tp-exact-usecases__title {
  margin: 16px 0 0;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.15;
  font-weight: 950;
  color: #fff;
  letter-spacing: -.035em;
}

.tp-exact-usecases__subtitle {
  margin: 14px auto 0;
  max-width: 650px;
  font-size: 1rem;
  line-height: 1.9;
  font-weight: 600;
  color: rgba(226,232,240,.68);
}

.tp-exact-usecases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.tp-exact-usecase-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 710 / 464;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 32px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  transform: translateZ(0);
  isolation: isolate;
  transition:
    transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s cubic-bezier(.22,.61,.36,1),
    filter .22s cubic-bezier(.22,.61,.36,1);
}

.tp-exact-usecase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(196,181,253,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.tp-exact-usecase-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  user-select: none;
  -webkit-user-drag: none;
}

.tp-exact-usecase-card.is-active::after {
  border-color: rgba(216,180,254,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(139,92,246,.24),
    0 0 38px rgba(139,92,246,.24);
}

.tp-exact-usecase-card:focus-visible {
  outline: 3px solid rgba(167,139,250,.72);
  outline-offset: 4px;
}

.tp-exact-usecase-card__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .tp-exact-usecase-card:hover {
    transform: translateY(-5px);
    box-shadow:
      0 36px 110px rgba(0,0,0,.48),
      0 0 42px rgba(139,92,246,.13);
    filter: saturate(1.05) brightness(1.035);
  }
}

/* Tablet */
@media (max-width: 980px) {
  .tp-exact-usecases {
    width: min(100% - 28px, 760px);
    margin-top: 48px;
  }

  .tp-exact-usecases__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Mobile carousel */
@media (max-width: 640px) {
  .tp-exact-usecases {
    width: 100%;
    /* Tightened top margin further — the hero/search above stops at minimal
       bottom padding now, so the section can start almost immediately. */
    margin: 8px auto 32px;
    overflow: hidden;
  }

  /* Hide the section header on mobile — the hero text above already
     establishes intent, and the panel images speak for themselves. This
     pulls the cards right up against the search bar. The header is still
     present for screen readers via aria-labelledby. */
  .tp-exact-usecases__header {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .tp-exact-usecases__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 14px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tp-exact-usecases__grid::-webkit-scrollbar {
    display: none;
  }

  .tp-exact-usecase-card {
    flex: 0 0 min(88vw, 370px);
    scroll-snap-align: center;
    border-radius: 24px;
    box-shadow: 0 22px 70px rgba(0,0,0,.40);
  }
}

@media (max-width: 360px) {
  .tp-exact-usecases__grid {
    padding-inline: 12px;
  }

  .tp-exact-usecase-card {
    flex-basis: min(90vw, 330px);
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-exact-usecase-card {
    transition: none !important;
  }
}