/* ============================================================
   "App overview" review pages (e.g. pages/proroast-ai-dating-assistant-smm.html)
   — hero, feature list, and screenshot sections specific to that layout.

   NOTE: the shared "install CTA" panel (.review-cta / .cta-panel) used at
   the bottom of this page is intentionally NOT redefined here — it's the
   same component already used on index.html and pages/download.html and is
   fully defined in css/style.css (~line 450). This file used to be an
   inline <style> block on the review page that silently re-declared
   .review-cta/.cta-panel with slightly different literal values (e.g.
   border-radius: 8px instead of the shared var(--radius-md) = 12px token),
   which won the cascade on this page only since it loaded after style.css.
   That meant edits to the shared CTA panel in style.css quietly didn't
   apply here. See CODE_REVIEW.md 2.3.
   ============================================================ */

.review-hero {
  position: relative;
  padding: clamp(32px, 7vw, 82px) 0 clamp(28px, 6vw, 64px);
}

.review-hero-grid,
.review-section,
.review-cta {
  position: relative;
  z-index: 1;
}

.review-hero-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}

.review-hero-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
}

.review-hero-copy {
  flex: 0 1 660px;
  min-width: 0;
}

.hero-figure {
  flex: 0 0 310px;
}

.review-eyebrow {
  margin: 0 0 14px;
  color: var(--gold-300);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.review-title {
  max-width: 980px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: 0;
}

.review-title span,
.gradient-text {
  background: var(--grad-ai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.review-lead {
  max-width: 660px;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.55;
}

.review-hero .hero-store-buttons {
  justify-content: flex-start;
  margin-top: 26px;
}

.review-hero .store-btn {
  justify-content: flex-start;
}

.store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 8px;
  font-weight: 800;
  color: var(--text-on-ai);
  background: var(--grad-ai);
  box-shadow: 0 18px 50px rgba(59, 130, 246, 0.22);
}

.store-link.secondary {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-default);
  box-shadow: none;
}

.hero-shot {
  width: min(100%, 310px);
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.52);
}

.review-section {
  padding: clamp(28px, 4.6vw, 52px) 0;
  border-top: 1px solid var(--border-subtle);
}

.section-kicker {
  margin: 0 0 10px;
  color: var(--gold-300);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-title {
  max-width: 760px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: 0;
}

.section-intro {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.65;
  text-align: center;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.feature-list a {
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.feature-list strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.3;
}

.feature-list span {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.screen-block {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: start;
  margin-top: clamp(20px, 4vw, 38px);
}

.screen-block.reverse {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.62fr);
}

.screen-block.reverse .screen-figure {
  order: 2;
}

.screen-figure {
  margin: 0;
}

.screen-figure .shot {
  display: block;
  position: relative;
  width: min(100%, 330px);
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 1290 / 2796;
  box-shadow: 0 28px 74px rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.04) 70%
  );
  background-size: 200% 100%;
  animation: shot-shimmer 1.4s ease-in-out infinite;
}

.screen-figure .shot.is-loaded {
  animation: none;
  background: none;
}

.screen-figure .shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.screen-figure .shot.is-loaded img {
  opacity: 1;
}

.screen-figure .shot.hero-shot {
  width: min(100%, 310px);
  margin-left: 0;
  aspect-ratio: 1290 / 1021;
}

@keyframes shot-shimmer {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -180% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-figure .shot {
    animation: none;
  }
  .screen-figure .shot img {
    transition: none;
  }
}

.screen-figure figcaption {
  max-width: 430px;
  margin: 14px auto 0;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.screen-copy h2 {
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.13;
  letter-spacing: 0;
}

.screen-copy h3 {
  margin: 32px 0 0;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.25;
  letter-spacing: 0;
}

.screen-copy h3 + p,
.screen-copy h3 + ul {
  margin-top: 12px;
}

.screen-copy p {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.screen-copy ul {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.screen-copy li {
  position: relative;
  padding-left: 24px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.screen-copy li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gold-300);
  box-shadow: 0 0 18px rgba(242, 199, 95, 0.55);
}

.screenshot-note {
  margin-top: 20px;
  padding: 16px;
  border-left: 3px solid var(--purple-400);
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.1);
  color: var(--text-secondary);
  line-height: 1.55;
}

.screenshot-note strong {
  color: var(--text-primary);
}

@media (max-width: 860px) {
  .review-hero-grid,
  .screen-block,
  .screen-block.reverse {
    grid-template-columns: 1fr;
  }

  .review-hero-body {
    display: block;
  }

  .screen-block.reverse .screen-figure {
    order: 0;
  }

  .hero-figure {
    display: none;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .screen-figure .shot,
  .screen-figure .shot.hero-shot {
    width: min(100%, 330px);
  }
}

@media (max-width: 520px) {
  .store-actions {
    flex-direction: column;
  }

  .store-link {
    width: 100%;
  }

  .review-hero .hero-store-buttons {
    justify-content: stretch;
  }

  .review-hero .store-btn {
    width: 100%;
  }

  .review-title {
    font-size: 32px;
  }
}

/* Текстовый блок функции без скриншота: ширина строки как у .section-intro,
   но выравнивание по левому краю и маркированный список из .screen-copy. */
.review-copy {
  max-width: 780px;
  margin: 0 auto;
}

.review-copy .section-title {
  max-width: none;
}

.review-note {
  margin-top: 22px;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1.6;
}

.review-note a {
  color: var(--gold-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}