/*
 * First Sheep — shared subpage App CTA interaction layer.
 *
 * Page styles continue to own backgrounds, decorative shapes, columns and
 * route-specific composition. HOME's `.home-v3-ending` is intentionally not
 * selected here, so its existing CTA remains unchanged.
 */

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) {
  /* The Google PNG canvas is 250px high, but its visible badge is only
     168px high. Separate canvas heights make both black badge bodies
     visually 64px tall without distorting either official asset. */
  --subpage-store-badge-apple-height: 64px;
  --subpage-store-badge-google-height: 95px;
  --subpage-store-badge-google-trim: -15.5px;
  --subpage-store-badge-gap: 18px;
  --subpage-cta-row-gap: clamp(28px, 3vw, 40px);
  --subpage-cta-column-gap: clamp(42px, 5vw, 70px);
  row-gap: var(--subpage-cta-row-gap);
  column-gap: var(--subpage-cta-column-gap);
}

main:not(.page-home) :is(.app-cta, .v1-start, .target-start) {
  padding-block: clamp(76px, 7vw, 104px);
}

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) :is(.store-links, .about-target-store-links) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--subpage-store-badge-gap);
}

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) :is(.store-links, .about-target-store-links) a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 0;
  transition: opacity 160ms ease;
}

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) :is(.store-links, .about-target-store-links) a:hover {
  opacity: .86;
}

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) :is(.store-links, .about-target-store-links) a:focus-visible {
  outline: 2px solid #91461f;
  outline-offset: 4px;
  border-radius: 8px;
}

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) :is(.store-links, .about-target-store-links) img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) :is(.store-links, .about-target-store-links) img[src$="/app-store-badge.svg"] {
  height: var(--subpage-store-badge-apple-height);
}

main:not(.page-home) :is(
  .app-cta,
  .v1-start,
  .target-start,
  .about-target-section--cta
) :is(.store-links, .about-target-store-links) img[src$="/google-play-badge.png"] {
  height: var(--subpage-store-badge-google-height);
  margin-block: var(--subpage-store-badge-google-trim);
}

main:not(.page-home) :is(.app-cta, .v1-start, .target-start) small {
  margin-top: 28px;
}

@media (max-width: 680px) {
  main:not(.page-home) :is(
    .app-cta,
    .v1-start,
    .target-start,
    .about-target-section--cta
  ) {
    --subpage-store-badge-apple-height: 54px;
    --subpage-store-badge-google-height: 80px;
    --subpage-store-badge-google-trim: -13px;
    --subpage-store-badge-gap: 16px;
    --subpage-cta-row-gap: 28px;
  }

  main:not(.page-home) :is(.app-cta, .v1-start, .target-start) {
    padding-block: 64px;
  }

  main:not(.page-home) :is(.app-cta, .v1-start, .target-start) .store-links {
    margin-top: 28px;
  }

  main:not(.page-home) :is(
    .app-cta,
    .v1-start,
    .target-start,
    .about-target-section--cta
  ) :is(.store-links, .about-target-store-links) a {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  main:not(.page-home) :is(
    .app-cta,
    .v1-start,
    .target-start,
    .about-target-section--cta
  ) :is(.store-links, .about-target-store-links) a {
    transition: none;
  }
}