/* =========================================================
   Vital Aesthetics — Responsive Styles
   File: css/responsive.css
   Purpose: Tablet and mobile behavior for layout, typography,
   navigation, cards, forms, and footer.
   ========================================================= */

/* -----------------------------
   Large Tablets / Small Laptops
----------------------------- */
@media (max-width: 1180px) {
  :root {
    --container: 1040px;
    --space-3xl: 5.8rem;
  }

  .site-nav {
    gap: 0.82rem;
    font-size: 0.84rem;
  }

  .hero-grid,
  .split-section {
    gap: 3rem;
  }

  .service-card {
    grid-template-columns: 1fr;
  }

  .service-card img {
    min-height: 300px;
    aspect-ratio: 16 / 10;
  }

  .service-card > div {
    padding: 0.75rem 0.35rem 0.35rem;
  }

  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -----------------------------
   Tablets
----------------------------- */
@media (max-width: 960px) {
  :root {
    --header-height: 76px;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
  }

  .header-inner {
    min-height: var(--header-height);
  }

  .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-height) 1rem auto 1rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem;
    background: rgba(247, 245, 242, 0.98);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a:not(.btn) {
    padding: 0.9rem 0.8rem;
    border-bottom: 1px solid rgba(51, 51, 51, 0.08);
  }

  .site-nav .btn {
    margin-top: 0.8rem;
    width: 100%;
  }

  .hero {
    min-height: auto;
    padding: 5rem 0;
  }

  .hero-grid,
  .split-section,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 780px;
  }

  .hero-image img,
  .split-image img {
    aspect-ratio: 16 / 11;
  }

  .hero-image::after {
    display: none;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-grid div:nth-child(2) {
    border-right: 0;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .service-grid article:last-child:nth-child(odd) {
    grid-column: auto;
  }

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

  .split-section.reverse .split-copy,
  .split-section.reverse .split-image {
    order: initial;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* -----------------------------
   Mobile
----------------------------- */
@media (max-width: 640px) {
  :root {
    --space-xl: 2.4rem;
    --space-2xl: 3.2rem;
    --space-3xl: 4rem;
  }

  html {
    font-size: 15px;
  }

  .container,
  .narrow {
    width: min(100% - 1.25rem, var(--container));
  }

  .brand-text {
    font-size: 1.1rem;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .hero {
    padding: 4rem 0;
  }

  .hero-centered {
    min-height: auto;
  }

  h1 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  h3 {
    font-size: 1.42rem;
  }

  .button-row {
    flex-direction: column;
  }

  .button-row .btn,
  .hero .btn,
  .cta-banner .btn {
    width: 100%;
  }

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

  .trust-grid div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(247, 245, 242, 0.16);
  }

  .trust-grid div:last-child {
    border-bottom: 0;
  }

  .feature-grid,
  .timeline,
  .mini-grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .timeline-step,
  .testimonial-card,
  .contact-card {
    padding: 1.3rem;
  }

  .service-card {
    padding: 0.8rem;
  }

  .service-card img {
    min-height: 220px;
    aspect-ratio: 4 / 3;
  }

  .service-card .btn {
    width: 100%;
  }

  .split-image img {
    aspect-ratio: 4 / 3;
  }

  .faq-layout {
    gap: 2rem;
  }

  .contact-form {
    padding: 1.2rem;
  }

  .contact-form button {
    width: 100%;
  }

  .cta-banner {
    padding: 4rem 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer {
    padding-top: 3.5rem;
  }

  .footer-bottom {
    gap: 0.75rem;
  }
}

/* -----------------------------
   Very Small Screens
----------------------------- */
@media (max-width: 420px) {
  .container,
  .narrow {
    width: min(100% - 1rem, var(--container));
  }

  .site-nav {
    inset-inline: 0.5rem;
  }

  .brand {
    gap: 0.5rem;
  }

  .brand-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero {
    padding: 3.25rem 0;
  }

  .section {
    padding: 3.5rem 0;
  }

  .btn {
    min-height: 50px;
    padding-inline: 1rem;
  }
}

/* -----------------------------
   Reduced Motion
----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------
   Print
----------------------------- */
@media print {
  .site-header,
  .site-footer,
  .cta-banner,
  .button-row,
  .btn,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .section,
  .hero {
    padding: 1rem 0;
  }

  a {
    text-decoration: underline;
  }
}