/* App landing template (page-templates/app-landing.php): body layout for a Nếp Sống family app page. Tokens only. */

.nsds .nsds-hero .nsds-hero__actions .nsds-btn[aria-disabled="true"] { cursor: default; color: var(--text-secondary); }
.nsds .nsds-hero .nsds-hero__actions .nsds-btn[aria-disabled="true"]:hover { background: transparent; }

.nsds .nsds-prose .nsds > .nsds-app-landing__note { margin-top: var(--space-xl); font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

.nsds .nsds-prose .nsds > * + * { margin-top: var(--space-md); }
.nsds .nsds-prose .nsds > h2 { margin-top: var(--space-section); }
.nsds .nsds-prose .nsds > .nsds-app-landing__note + h2 { margin-top: var(--space-2xl); }

.nsds .nsds-prose .nsds-app-landing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-2xl);
  margin-top: var(--space-xl);
}
.nsds .nsds-app-landing__grid > div { padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); }
.nsds .nsds-app-landing__grid svg { display: block; width: 32px; height: 32px; margin-bottom: var(--space-md); color: var(--text-link); }
.nsds .nsds-prose .nsds-app-landing__grid h3 { margin-top: 0; }
.nsds .nsds-app-landing__grid p { margin-top: var(--space-sm); color: var(--text-secondary); }

.nsds .nsds-prose .nsds-app-landing__steps { margin-top: var(--space-xl); }
.nsds .nsds-app-landing__steps .nsds-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.nsds .nsds-app-landing__steps .nsds-steps li { margin-top: 0; }

.nsds .nsds-prose .nsds-app-landing__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  margin-top: var(--space-section);
  align-items: start;
}
.nsds .nsds-prose .nsds-app-landing__pair > div > h2 { margin-top: 0; }
.nsds .nsds-app-landing__pair > div > * + * { margin-top: var(--space-md); }

/* Hero illustration: square, fills its box (no letterbox bands), centred in its column. */
.nsds .nsds-hero.nsds-app-landing-hero .nsds-media {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  background: var(--bg-secondary);
}
.nsds .nsds-app-landing-hero .nsds-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .nsds .nsds-hero.nsds-app-landing-hero .nsds-media { max-width: 320px; }
  .nsds .nsds-prose .nsds > h2 { margin-top: var(--space-2xl); }
  .nsds .nsds-prose .nsds-app-landing__grid,
  .nsds .nsds-prose .nsds-app-landing__pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .nsds .nsds-prose .nsds-app-landing__pair { margin-top: var(--space-2xl); }
  .nsds .nsds-app-landing__steps .nsds-steps ol { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .nsds .nsds-hero .nsds-hero__actions .nsds-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nsds .nsds-hero .nsds-btn { transition: none; }
}