/* ============================================================
   WriteALine — Maintenance
   responsive.css · backgrounds por breakpoint + ajustes
   ============================================================ */

/* ---- Backgrounds ---- */

@media (max-width: 767px) {
  .stage {
    background-image: url("../img/mobile.webp");
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stage {
    background-image: url("../img/tablet.webp");
  }
}

@media (min-width: 1024px) {
  .stage {
    background-image: url("../img/desktop.webp");
  }
}

/* ---- Mobile (<768px) ---- */

@media (max-width: 767px) {
  .content {
    gap: 1.75rem;
    padding-top: clamp(3rem, 12vh, 5rem);
    padding-bottom: 2rem;
  }

  .content__main {
    justify-content: safe center;
  }

  .hero__typewriter {
    padding: 1.4rem 1.1rem;
  }

  .typewriter-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    opacity: 0.14;
  }

  .social {
    margin-top: 0.25rem;
  }
}

/* ---- Tablet (768–1023px) ---- */

@media (min-width: 768px) and (max-width: 1023px) {
  .content {
    gap: 2.75rem;
  }
}

/* ---- Landscape / short viewports ---- */

@media (max-height: 520px) and (orientation: landscape) {
  .content {
    min-height: 100vh;
    gap: 0.9rem;
    padding-block: 1.5rem;
  }

  .content__main {
    gap: 24px;
  }

  .hero__title {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }

  .hero__subtitle {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
  }

  .brand__logo {
    height: 1.9rem;
  }

  .social__link {
    width: 2.6rem;
    height: 2.6rem;
  }
}

/* ---- Large screens / 4K ---- */

@media (min-width: 1920px) {
  .content {
    max-width: 1200px;
  }

  .hero__title {
    font-size: 4.25rem;
  }

  .hero__subtitle {
    font-size: 1.35rem;
  }
}

@media (min-width: 2560px) {
  .content {
    max-width: 1320px;
  }

  .hero__title {
    font-size: 4.75rem;
  }

  .social__link {
    width: 3.75rem;
    height: 3.75rem;
  }
}

/* ---- Safe areas (notched devices) ---- */

@supports (padding: max(0px)) {
  .content {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-top: max(clamp(2.5rem, 6vw, 5rem), env(safe-area-inset-top));
    padding-bottom: max(clamp(2.5rem, 6vw, 5rem), env(safe-area-inset-bottom));
  }
}