﻿/* ============================================================
   AUGESTO â€” RESPONSIVE
   Breakpoints: 1200px (lg), 900px (md), 600px (sm)
   Mobile-first only where it simplifies; desktop-first otherwise
   since the design is desktop-led.
   ============================================================ */

/* â”€â”€ Large (1200px and below) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 1200px) {
  .hero__inner {
    gap: var(--sp-12);
  }

  .about__inner {
    gap: var(--sp-12);
  }

  .work__grid {
    gap: var(--sp-4);
  }
}

/* â”€â”€ Medium (900px and below) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 900px) {
  /* Hero stack */
  .hero__inner {
    grid-template-columns: 1fr;
    padding-block: var(--sp-16);
    text-align: center;
  }

  .hero__sub,
  .hero__actions {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__visual {
    display: none; /* Hide visual panel on mobile */
  }

  .hero__scroll-hint {
    display: none;
  }

  /* Services */
  .service__row {
    grid-template-columns: 2.5rem 1fr auto;
    gap: var(--sp-4);
  }

  .service__title {
    font-size: var(--fs-md);
  }

  .service__body {
    padding-left: calc(2.5rem + var(--sp-4));
  }

  /* Work */
  .work__grid {
    grid-template-columns: 1fr;
  }

  .work__item:first-child {
    grid-column: 1;
  }

  .work__item:first-child .work__item-media {
    aspect-ratio: 4/3;
  }

  /* About */
  .about__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .about__stats-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  /* Section header split */
  .section__header--split {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
  }

  /* Footer */
  .footer__bottom-inner {
    flex-direction: column;
    gap: var(--sp-8);
  }

  .footer__nav-list {
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
}

/* â”€â”€ Small (600px and below) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 600px) {
  /* Typography scale down */
  :root {
    --fs-hero: clamp(2.8rem, 14vw, 4rem);
    --fs-2xl:  clamp(2rem,   10vw, 2.5rem);
  }

  .section__title {
    font-size: var(--fs-xl);
  }

  /* Stats */
  .about__stats-col {
    grid-template-columns: 1fr;
  }

  /* Testimonials */
  .testimonial__card {
    width: calc(100vw - 3rem);
  }

  /* CTA */
  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-banner__actions .btn {
    justify-content: center;
  }

  /* Service item */
  .service__row {
    grid-template-columns: 1fr auto;
  }
  .service__number {
    display: none;
  }

  /* Footer top CTA */
  .footer__cta-link {
    font-size: var(--fs-h3);
  }
}

/* â”€â”€ Print â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media print {
  .site-header,
  .cursor,
  .nav__hamburger {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}
