/* Load on the homepage only, after theme.css. Responsive component variants. */
@media (max-width: 1180px) {
  .home-case-section { padding-bottom: 48px !important; }
}
@media not all and (min-width: 768px) {
  #scene.hero { padding-bottom: 32px !important; }
  #scene.hero + section.client { padding-top: 40px !important; }
  .home-build-section { padding-bottom: 48px; }
  .home-case-section { padding-bottom: 32px !important; }
  .home-case-section .text-center > h2 { word-break: keep-all; overflow-wrap: break-word; }

  .home-faq-section > .container > .grid > div:first-child > br { display: none; }
  .home-faq-section > .container > .grid > div:first-child > h2 { word-break: keep-all; overflow-wrap: break-word; }
  .home-faq-section > .container > .grid > div:first-child > a.btn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    max-width: 100%; min-height: 44px; margin-top: 24px; padding: 12px 20px;
    text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: break-word; line-height: 1.4;
  }
  .home-project-showcase { padding-top: 48px !important; padding-bottom: 40px !important; }
  .home-project-showcase__cta { margin-top: 12px; }
  .home-blog-section { padding-bottom: 40px !important; }
  .home-blog-section .container > .text-center { margin-bottom: 32px !important; }
  .home-blog-section .container > .text-center > p.mt-6 { margin-top: 16px; }
  .home-final-cta { padding-top: 48px !important; padding-bottom: 48px !important; }
  .home-final-cta .container > .text-center > p { margin-bottom: 24px; }
}

@media (max-width: 359px) {
  .home-termino-section .home-termino-content h2 { font-size: clamp(27px, 8.75vw, 31px); word-break: keep-all; overflow-wrap: break-word; }
}

@media (min-width: 600px) and (max-width: 1180px) {
  .home-termino-content .btn-outline { display: inline-flex; width: auto; max-width: 100%; }
}

/* On touch screens, expose the established hover colors without requiring hover. */
@media not all and (min-width: 768px), (hover: none) and (pointer: coarse) {
  #main-content .btn-outline { color: #fff; }
  #main-content .btn-outline::before { transform: scaleX(1); }
  .dark #main-content .btn-outline { color: #18181b; }
  #main-content .btn::before { transform: scaleX(1); }
  #main-content .hero-download-button { border-color: #96c32f; background: #b1e346; color: #1a1d21; }
  #main-content .home-blog-card__cta,
  #main-content .home-project-card__link,
  .dark #main-content .home-blog-card__cta,
  .dark #main-content .home-project-card__link { border-color: #b1e346; background: #b1e346; color: #18181b; }
}

/* Template arrows are aria-hidden; link names and hit areas stay intact. */
.home-project-card__link > span[aria-hidden="true"],
.home-blog-card__cta > i.fa-arrow-right[aria-hidden="true"] { display: none; }