/* Matched to appstar-world/new-home-page-design and its rendered reference. */
@font-face {
  font-family: AppstarInter;
  src: url('assets/inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

main > section > .section-heading { margin-bottom: var(--section-heading-content-gap, 24px); }
main > section > .shelf { margin-top: -12px; padding-top: 12px; }
.section-heading :is(h1, h2) {
  font-family: AppstarHeading, Haas, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 33px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.shelf .title {
  font-family: AppstarInter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0;
}

/* Keep video card backgrounds clear during hover and keyboard interaction. */
:is(#podcast-list, #content-list) .podcast-card,
:is(#podcast-list, #content-list) .podcast-card:is(:hover, :focus-within) {
  background: transparent;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1), background-color 200ms cubic-bezier(.4, 0, .2, 1);
}
:is(#podcast-list, #content-list) .podcast-card::before {
  inset: -8px;
  border-radius: 12px;
  background: transparent;
  transition: background-color 200ms cubic-bezier(.4, 0, .2, 1);
}
:is(#podcast-list, #content-list) .podcast-card:is(:hover, :focus-within)::before {
  background: transparent;
}
:is(#podcast-list, #content-list) .podcast-card:is(:hover, :focus-within) .appstar-visual {
  box-shadow: 0 0 0 3.5px oklch(0 0 0 / 10%);
}
@media (prefers-reduced-motion: reduce) {
  :is(#podcast-list, #content-list) .podcast-card,
  :is(#podcast-list, #content-list) .podcast-card::before { transition: none; }
}

/* Independent spacing controls retain responsive card counts and page gutters. */
body main { padding-top: var(--spacing-headerGap, 48px); }
body main > .section-divider {
  height: min(1px, var(--spacing-sectionGap, 140px));
  border-top-width: min(1px, var(--spacing-sectionGap, 140px));
  margin-block: max(0px, calc((var(--spacing-sectionGap, 140px) - 1px) / 2));
}
body #article-list { column-gap: var(--spacing-articleColumnGap, 24px); row-gap: var(--spacing-articleRowGap, 24px); }
body #app-list { gap: var(--spacing-appGap, 24px); }
body #app-list .caption { margin-top: var(--spacing-appCaptionGap, 12px); }
body #content-list { column-gap: var(--spacing-contentColumnGap, 24px); row-gap: var(--spacing-contentRowGap, 24px); }
body #content-list .appstar-caption { margin-top: var(--spacing-contentCaptionGap, 12px); }
@media (max-width: 1000px) {
  body main, body .latest-layout > main { padding-top: var(--spacing-headerMobileGap, 32px); }
}