/*
  LinkUP — Design Fixes & Visual Polish
  Resolves text-on-image contrast issues,
  adds gradient overlays, and improves visual hierarchy.
*/

/* ==========================================
   1. "КАК ЭТО РАБОТАЕТ" — feat-tile overlays
   ========================================== */

/* Semi-transparent gradient overlay so labels read clearly */
.feat-tile__frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.38) 30%,
    rgba(0, 0, 0, 0.80) 68%,
    rgba(0, 0, 0, 0.90) 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 0 0 var(--radius-lg, 28px) var(--radius-lg, 28px);
}

/* Text must sit above the gradient */
.feat-tile__text {
  z-index: 1;
}

.feat-tile__label {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8), 0 2px 16px rgba(0, 0, 0, 0.5);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.42;
}

/* ==========================================
   2. HERO BENTO CARDS — title overlays
   ========================================== */

/* Dark-to-transparent gradient from top so the title text is legible */
.hero-card__frame::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.46) 52%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Title must sit above the gradient */
.hero-card__title {
  z-index: 1;
}

.hero-card__title-text {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Lift cards on hover */
.hero-card--stack:hover .hero-card__frame {
  transform: translateY(-5px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.50),
              0 0 0 1px rgba(245, 201, 180, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ==========================================
   3. SECTION TYPOGRAPHY & EYEBROW
   ========================================== */

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent, #f5c9b4);
  opacity: 0.9;
  margin-bottom: 8px;
}

.section-title {
  letter-spacing: -0.022em;
}

/* ==========================================
   4. CATALOG CARDS — hover & polish
   ========================================== */

.product-card {
  transition: transform 0.22s ease, border-color 0.22s, box-shadow 0.22s;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 201, 180, 0.55);
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.44);
}

/* Price row emphasis */
.product-card .price {
  font-size: 1.175rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.product-card .cur {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.75;
}

/* CTA button on card */
.product-card__cta {
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 10px 18px;
  letter-spacing: 0.01em;
}

/* ==========================================
   5. CTA BUTTONS — prominence
   ========================================== */

.btn-accent {
  box-shadow: 0 4px 22px rgba(245, 201, 180, 0.28);
  letter-spacing: 0.01em;
}

.btn-accent:hover {
  box-shadow: 0 7px 32px rgba(245, 201, 180, 0.44);
  filter: brightness(1.06);
}

/* ==========================================
   6. FAQ ITEMS — subtle border accent
   ========================================== */

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.065);
  transition: border-color 0.2s;
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.13);
}

.faq-item.open {
  border-color: rgba(245, 201, 180, 0.28);
}

/* ==========================================
   7. HERO SPLIT CARD — minor polish
   ========================================== */

/* Slightly boost the hero copy card padding on large screens */
@media (min-width: 961px) {
  .hero-split-card--copy {
    padding: clamp(24px, 4vw, 42px) clamp(24px, 3.5vw, 40px);
  }
}

/* Tighten hero title for better hierarchy */
.hero-split-card__title {
  letter-spacing: -0.022em;
}

.hero-split-card__title-accent {
  font-weight: 700;
}

/* ==========================================
   8. CATALOG BANNER — improved readability
   ========================================== */

.catalog-banner__title {
  letter-spacing: -0.018em;
  line-height: 1.25;
}

/* ==========================================
   9. INSTALLMENT SECTION — title refinement
   ========================================== */

.installment-split__title-pre,
.installment-split__title-potom {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.installment-split__title-potom {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
}

/* ==========================================
   10. COMFORT BRAND PILL
   ========================================== */

.comfort-brand__pill {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 11px 32px;
  border: 1px solid rgba(255, 255, 255, 0.13);
}