/**
 * templates.responsive.css — responsive overrides for the SEO template pages
 * and the "Popular Templates" .hub-* cards on landing.html. Base (desktop)
 * styles live in templates.css.
 *
 * Breakpoints follow the project convention:
 *   tablet        (max-width: 1023px) and (min-width: 768px)
 *   mobile        (max-width: 767px)
 *   small-mobile  (max-width: 479px)
 */

/* ── Tablet ───────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) and (min-width: 768px) {
  .tp-hero,
  .tp-main,
  .hub-main {
    max-width: 720px;
  }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tp-back-bar {
    padding-top: 14px;
  }

  .tp-hero {
    padding-top: 20px;
  }

  .tp-hero-title {
    font-size: 2rem;
  }

  .tp-hero-intro {
    font-size: var(--font-size-md);
  }

  .tp-cta {
    width: 100%;
  }

  .tp-cta-primary {
    width: 100%;
    text-align: center;
  }

  .tp-title-row {
    align-items: center;
  }

  .tp-price-badge {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xs);
  }

  .tp-options {
    gap: 18px;
    padding: 16px;
  }

  .hub-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Small mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .tp-hero-title {
    font-size: 1.7rem;
  }
}