/* ==========================================================================
   responsive.css — breakpoint overrides
   Mobile-first base lives in the other files; these are the step-downs.
   Breakpoints: 1440 / 1024 / 768 / 360 (CLAUDE.md §5)

   Note on the 1024 tier: the horizontal nav collapses to the off-canvas menu
   here rather than at 768. The Spanish labels ("Presupuesto Gratis", "Por Qué")
   are long enough that the desktop header row overruns the logo at 1024px, and
   a header that only fits in one language is not really bilingual. The sticky
   call bar is raised to the same breakpoint so the phone number is still one
   tap away whenever the nav is behind the hamburger.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1440px and up — a touch more air
   -------------------------------------------------------------------------- */
@media (min-width: 90rem) {
  :root {
    --container-max: 84rem;
  }

  .hero__wedge {
    width: 70%;
  }
}


/* --------------------------------------------------------------------------
   1024px–1300px — the horizontal nav still fits, but not with everything.
   Tighten it and fold away the header "Free Estimate" button; the phone number
   stays, since that is the primary conversion path (CLAUDE.md §7) and the hero
   plus every section below still carry an estimate CTA.
   -------------------------------------------------------------------------- */
@media (min-width: 64.01rem) and (max-width: 81.25rem) {
  .nav {
    gap: var(--spacing-md);
  }

  .nav__list {
    gap: var(--spacing-sm);
  }

  .nav__link {
    font-size: var(--fs-100);
  }

  .nav__actions .btn {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   1024px and below — tablets. Nav goes off-canvas, call bar appears.
   The bound is inclusive of 1024 (iPad landscape) on purpose.
   -------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  body {
    /* room for the sticky call bar */
    padding-bottom: 4.25rem;
  }

  .hamburger {
    display: flex;
  }

  /* Off-canvas menu */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-mobile-nav);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-lg);
    width: min(22rem, 84vw);
    padding: var(--spacing-2xl) var(--spacing-lg);
    background-color: rgba(0, 0, 0, 0.98);
    border-left: var(--hairline) solid var(--color-black-700);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--duration-base) var(--ease-out-expo),
      visibility var(--duration-base) linear;
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    width: 100%;
  }

  .nav__link {
    font-size: var(--fs-500);
    letter-spacing: 0.1em;
  }

  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-top: var(--spacing-md);
    border-top: var(--hairline) solid var(--border-hairline);
  }

  .nav__phone {
    font-size: var(--fs-500);
  }

  .callbar {
    display: block;
  }

  /* Tablet layout */
  .hero__wedge {
    inset: -8% auto -8% -24%;
    width: 92%;
    --diagonal-angle: -8deg;
  }

  .intro__grid,
  .about__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .about__mark {
    max-width: 11rem;
  }

  .features__grid,
  .why__grid,
  .services__grid,
  .work__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .work__item--wide {
    grid-column: span 2;
  }

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

  .intro__badge {
    right: var(--spacing-md);
  }
}


/* --------------------------------------------------------------------------
   Below 768px — phones. The diagonal wedge becomes a full-width vertical
   scrim and everything stacks to one column.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  :root {
    /* The desktop floor of --fs-900 is wider than a phone viewport */
    --fs-900: clamp(1.9rem, 8.4vw, 2.6rem);
  }

  html {
    scroll-padding-top: 5rem;
  }

  /* Trim the logo lockup so the hamburger always has room beside it */
  .header__inner {
    gap: var(--spacing-2xs);
  }

  .logo__mark {
    width: 2.5rem;
  }

  .logo__name {
    font-size: 1.2rem;
    letter-spacing: 0.22em;
  }

  .logo__sub {
    font-size: 0.5rem;
    letter-spacing: 0.16em;
  }

  /* Language toggle shrinks to "ES"/"EN" so it still fits beside the burger */
  .lang {
    padding: 0.5rem 0.6rem;
    gap: 0.3rem;
  }

  .lang__long {
    display: none;
  }

  .lang__short {
    display: inline;
  }

  /* Hero */
  .hero {
    min-height: 92svh;
    padding-top: 6rem;
    padding-bottom: clamp(7rem, 20vw, 9rem);
    align-items: flex-end;
  }

  /* The diagonal cut reads badly at phone widths — swap it for a full-bleed
     vertical scrim, keeping one angled edge along the top for continuity. */
  .hero__wedge {
    inset: auto 0 0 0;
    width: 100%;
    height: 82%;
    transform: none;
    border-right: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.72) 26%,
      rgba(0, 0, 0, 0.93) 62%,
      rgba(0, 0, 0, 0.97) 100%
    );
    box-shadow: none;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    animation: none;
  }

  .hero__wedge::after {
    inset: auto 0 auto 0;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(124, 181, 24, 0.15), var(--color-green-400));
    /* follows the clip edge */
    top: 12%;
    transform: rotate(-6.8deg);
    transform-origin: right center;
  }

  .hero__inner {
    align-content: end;
  }

  .hero__copy {
    max-width: none;
  }

  .hero__lead {
    font-size: var(--fs-400);
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__controls {
    left: var(--gutter);
    right: auto;
    bottom: calc(var(--cut-height) + 1.25rem);
  }

  .hero__cue {
    display: none;
  }

  /* At phone widths the scrim covers most of the frame and the copy runs the
     full width — there is no uncluttered photo left for the map to sit on. */
  .hero__map {
    display: none;
  }

  /* Sections */
  .features__grid,
  .why__grid,
  .services__grid,
  .work__grid {
    grid-template-columns: 1fr;
  }

  .work__item--wide {
    grid-column: span 1;
  }

  /* Tile copy is always visible on touch — there is no hover to reveal it */
  .tile__text {
    max-height: none;
    margin-top: var(--spacing-3xs);
    opacity: 1;
    overflow: visible;
  }

  .tile {
    min-height: 21rem;
  }

  .tile__media::before {
    opacity: 1;
    transform: translateY(0);
  }

  .intro__stats {
    gap: var(--spacing-md);
  }

  .stat {
    flex: 1 1 7rem;
  }

  .intro__media::before {
    display: none;
  }

  .intro__badge {
    position: static;
    max-width: none;
    margin-top: var(--spacing-sm);
  }

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

  .contact__value--action {
    font-size: 1.6rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .footer__bar-inner {
    flex-direction: column;
    text-align: center;
  }

  .lightbox__close {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }
}


/* --------------------------------------------------------------------------
   Below 360px — small phones
   -------------------------------------------------------------------------- */
@media (max-width: 22.5rem) {
  :root {
    --fs-900: 2rem;
  }

  .logo__mark {
    width: 2.1rem;
  }

  .logo__name {
    font-size: 1.05rem;
    letter-spacing: 0.18em;
  }

  .logo__sub {
    font-size: 0.45rem;
    letter-spacing: 0.14em;
  }

  .btn--lg {
    padding: 0.9rem 1.25rem;
    font-size: var(--fs-200);
  }

  .chip span {
    font-size: 0.6875rem;
    padding: 0.45rem 0.7rem;
  }
}


/* --------------------------------------------------------------------------
   Landscape phones — the hero should not eat the whole screen
   -------------------------------------------------------------------------- */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero {
    min-height: 34rem;
  }

  .hero__cue {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   Coarse pointers: no hover-dependent content anywhere
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .tile__text {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }

  /* No captions to reveal, so the hover overlay has nothing to say on touch —
     show the photographs undimmed instead. */
  .work__btn img {
    filter: none;
  }
}


/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .callbar,
  .hero__controls,
  .hero__cue,
  .divider,
  .map__frame,
  .lightbox {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .hero {
    min-height: auto;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}