/* assets/css/components/front-page.css
 * @layer components — Homepage shared utilities
 *
 * Split into dedicated files (loaded in parallel):
 *   front-hero.css         Hero section (static + Splide)
 *   front-quick-links.css  Quick links overlay bar
 *   front-testimonials.css Testimonial Splide slider
 *   front-spotlight.css    About spotlight (image + text)
 *   front-bento.css        Bento grids (sectors, services, credentials, FAQ+contact)
 *   about.css              About page + sector page layout
 *   cta-banner.css         CTA banner component
 *   section-header.css     Section header component
 */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     SECTION HEADING COLOUR — teal on all non-dark homepage sections
     ════════════════════════════════════════════════════════════════════ */

  .front-sectors .section-header__title,
  .front-services .section-header__title,
  .front-spotlight .section-header__title,
  .front-stats .section-header__title,
  .front-accreditations .section-header__title,
  .front-locations .section-header__title,
  .front-case-studies .section-header__title,
  .front-testimonials .section-header__title,
  .front-cta .section-header__title {
    color: var(--text-accent);
  }


  /* ════════════════════════════════════════════════════════════════════
     CTA STRIP
     ════════════════════════════════════════════════════════════════════ */

  .front-cta__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    max-inline-size: 64ch;
  }

  .front-cta__heading,
  .front-cta__subheading {
    margin: 0;
  }

  .front-cta__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
  }

  .front-cta__subheading {
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .front-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  /* ── V2 contact form constraint ── */
  .front-contact-form .container {
    max-inline-size: var(--content-width-narrow);
  }


  /* ════════════════════════════════════════════════════════════════════
     REDUCED MOTION
     ════════════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {
    .front-hero::before,
    .bento-sectors__image,
    .bento-services__card,
    .bento-services__link,
    .front-testimonials__splide .splide__pagination__page,
    .front-quick-links__link,
    .front-quick-links__item::before,
    .front-quick-links__link::before,
    .front-quick-links__label::after {
      transition: none;
      animation: none;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     GLOBAL FOCUS & HOVER — Accessibility & UX polish
     ════════════════════════════════════════════════════════════════════ */

  /* ── Focus-visible ring on ALL interactive card/link components ── */
  .bento-sectors__card:focus-visible,
  .bento-services__card:focus-visible,
  .bento-services__link:focus-visible,
  .bento-credentials__card:focus-visible,
  .front-spotlight__link:focus-visible,
  .about-mv-card:focus-visible,
  .about-value-card:focus-visible,
  .sector-sidebar__link:focus-visible,
  .sector-sidebar__social-link:focus-visible,
  .sector-sidebar__cta-btn:focus-visible,
  .cta-banner .btn:focus-visible,
  .splide__arrow:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ── Card hover effects — subtle lift + shadow ── */
  .bento-sectors__card,
  .bento-services__card,
  .about-mv-card,
  .about-value-card {
    transition:
      transform var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  .bento-sectors__card:hover {
    transform: scale(1.03);
  }

  .bento-services__card:hover,
  .about-value-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
  }

  .about-mv-card:hover {
    box-shadow: var(--shadow-m);
  }

  /* ── Sector card focus within (keyboard) ── */
  .bento-sectors__card:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

}