/* ==========================================================
   Carvill V284 - Hero Content Card Mobile/Tablet Tuning
   Desktop/PC is intentionally untouched.
   ========================================================== */

/* Mobile phones: move the hero content card higher */
@media (max-width: 767px) {
  body :is(
    .hero-content-card,
    .hero-card,
    .hero-content,
    .hero-copy,
    .hero-copy-card,
    .hero-text-card,
    .hero-panel,
    .hero-intro-card,
    .home-hero-card,
    .home-hero-content,
    .subpage-hero-card,
    .subpage-hero-content,
    .subpage-hero-panel,
    .page-hero-card,
    .page-hero-content,
    .carvill-hero-card,
    .cnf-hero-card
  ) {
    margin-top: 18px !important;
    margin-bottom: 24px !important;
    align-self: flex-start !important;
    transform: none !important;
  }

  body :is(.hero, .home-hero, .page-hero, .subpage-hero, .carvill-hero, .cnf-hero) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body :is(.hero, .home-hero, .page-hero, .subpage-hero, .carvill-hero, .cnf-hero) > :is(
    .hero-content-card,
    .hero-card,
    .hero-content,
    .hero-copy,
    .hero-copy-card,
    .hero-text-card,
    .hero-panel,
    .hero-intro-card,
    .home-hero-card,
    .home-hero-content,
    .subpage-hero-card,
    .subpage-hero-content,
    .subpage-hero-panel,
    .page-hero-card,
    .page-hero-content,
    .carvill-hero-card,
    .cnf-hero-card
  ) {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
  }
}

/* Tablets / 11-inch style screens: reduce hero card visual size only */
@media (min-width: 768px) and (max-width: 1180px) {
  body :is(
    .hero-content-card,
    .hero-card,
    .hero-content,
    .hero-copy,
    .hero-copy-card,
    .hero-text-card,
    .hero-panel,
    .hero-intro-card,
    .home-hero-card,
    .home-hero-content,
    .subpage-hero-card,
    .subpage-hero-content,
    .subpage-hero-panel,
    .page-hero-card,
    .page-hero-content,
    .carvill-hero-card,
    .cnf-hero-card
  ) {
    max-width: min(50vw, 560px) !important;
    width: min(50vw, 560px) !important;
    padding: clamp(18px, 2.4vw, 30px) !important;
    border-radius: 32px !important;
  }

  body :is(
    .hero-content-card,
    .hero-card,
    .hero-content,
    .hero-copy,
    .hero-copy-card,
    .hero-text-card,
    .hero-panel,
    .hero-intro-card,
    .home-hero-card,
    .home-hero-content,
    .subpage-hero-card,
    .subpage-hero-content,
    .subpage-hero-panel,
    .page-hero-card,
    .page-hero-content,
    .carvill-hero-card,
    .cnf-hero-card
  ) :is(h1, .hero-title, .subpage-hero-title) {
    font-size: clamp(2.1rem, 4vw, 3.6rem) !important;
    line-height: .95 !important;
  }

  body :is(
    .hero-content-card,
    .hero-card,
    .hero-content,
    .hero-copy,
    .hero-copy-card,
    .hero-text-card,
    .hero-panel,
    .hero-intro-card,
    .home-hero-card,
    .home-hero-content,
    .subpage-hero-card,
    .subpage-hero-content,
    .subpage-hero-panel,
    .page-hero-card,
    .page-hero-content,
    .carvill-hero-card,
    .cnf-hero-card
  ) :is(p, .hero-text, .hero-description, .subpage-hero-text) {
    font-size: clamp(.95rem, 1.7vw, 1.15rem) !important;
    line-height: 1.55 !important;
  }

  body :is(
    .hero-badge,
    .hero-eyebrow,
    .eyebrow,
    .pill,
    .pill-label,
    .subpage-hero-badge
  ) {
    font-size: clamp(.72rem, 1.15vw, .9rem) !important;
    padding: 14px 22px !important;
    letter-spacing: .16em !important;
  }
}