/* =====================================================
   ALMAROOF DESIGNS — responsive.css
   Desktop 1440+ / 1200 / 1024 · Tablet 768 · Mobile 480 / 390 / 360
===================================================== */

/* ===============================
   LARGE DESKTOP — 1440+
================================ */
@media (min-width: 1440px) {
  :root {
    --nav-h: 68px;
  }

  .hero__portrait {
    max-width: 800px;
  }
}

/* ===============================
   DESKTOP — ≤1200
================================ */
@media (max-width: 1200px) {
  .nav__list {
    gap: 22px;
  }

  .nav__link {
    font-size: 0.875rem;
  }

  .service {
    grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr) 52px;
  }

  .about__aside {
    grid-column: 1 / span 4;
  }

  .about__body {
    grid-column: 6 / -1;
  }

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

/* ===============================
   SMALL DESKTOP / LARGE TABLET — ≤1024
================================ */
@media (max-width: 1024px) {
  /* Navigation collapses into the menu button */
  .nav__list {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .header-wrap {
    padding-left: 16px;
    padding-right: 8px;
  }

  .section-title {
    grid-column: 1 / -1;
  }

  .section-head__text {
    grid-column: 1 / span 8;
  }

  .about__aside,
  .about__body {
    grid-column: 1 / -1;
  }

  .about__aside {
    gap: 32px;
  }

  .about__grid-art {
    max-width: 360px;
  }

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

  .contact__info {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .form {
    grid-column: 1 / -1;
  }

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

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ===============================
   TABLET — ≤900 (hero stacks)
================================ */
@media (max-width: 900px) {
  .hero {
    padding-top: calc(var(--nav-top) + var(--nav-h) + 56px);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__title {
    font-size: clamp(2.4rem, 8.4vw, 4.5rem);
  }

  .hero__media {
    width: min(100%, 520px);
    justify-self: center;
  }

  .hero__footer .hero__available {
    display: none;
  }
}

/* ===============================
   TABLET — ≤768
================================ */
@media (max-width: 768px) {
  :root {
    --nav-top: 16px;
    --nav-h: 60px;
  }

  .site-header.is-scrolled .header-wrap {
    top: 10px;
  }

  .header-wrap {
    width: calc(100% - 32px);
  }

  .section-head__text {
    grid-column: 1 / -1;
  }

  /* Numbers: 2 × 2 */
  .numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .numbers__item {
    padding: 28px 0 32px 20px;
  }

  .numbers__item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .numbers__item:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .numbers__value {
    font-size: clamp(3.5rem, 16vw, 6.5rem);
  }

  /* Services: description drops under the title */
  .service {
    grid-template-columns: 36px minmax(0, 1fr) 44px;
    column-gap: 16px;
    row-gap: 10px;
    padding-inline: 0;
  }

  .service__desc {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .service__arrow {
    width: 44px;
    height: 44px;
  }

  html:not(.has-custom-cursor) .service:hover .service__title,
  .service.is-hover .service__title {
    transform: translateX(6px);
  }

  /* Work: stacked cards, image above details (no zig-zag) */
  .work__stack {
    --stack-top: calc(var(--nav-top) + var(--nav-h) + 12px);
    --stack-step: 10px;
    gap: 56px;
  }

  .project__card,
  .project:nth-of-type(even) .project__card {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "info";
    gap: 4px;
    height: auto;
    padding: 8px;
    border-radius: 16px;
  }

  .project__media {
    aspect-ratio: 16 / 11;
    border-radius: 10px;
  }

  .project__info {
    gap: 20px;
    padding: 18px 12px 12px;
  }

  .project__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  /* Experience: stacked timeline rows */
  .exp {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .exp__years,
  .exp__company {
    padding-top: 0;
  }

  .exp__company {
    justify-self: start;
    text-align: left;
    margin-top: 4px;
  }

  /* Testimonials: narrower cards so one fits comfortably on screen */
  .quote {
    width: min(78vw, 340px);
  }

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

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

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

/* ===============================
   LARGE MOBILE — ≤600
================================ */
@media (max-width: 600px) {
  .header-cta {
    display: none;
  }

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

  .hero__footer {
    font-size: 0.75rem;
  }

  .footer__wordmark {
    line-height: 0.88;
  }
}

/* ===============================
   MOBILE — ≤480
================================ */
@media (max-width: 480px) {
  :root {
    --gutter: 20px;
    --section-space: 4rem;
  }

  .header-wrap {
    width: calc(100% - 24px);
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__footer {
    padding-top: 20px;
  }

  .project__desc {
    font-size: 0.875rem;
  }

  .project__placeholder-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .project__placeholder-path {
    text-align: left;
  }

  .form__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form__footer .btn {
    width: 100%;
  }

  .choice span {
    padding: 9px 15px;
    font-size: 0.875rem;
  }

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

  .footer__col:last-child {
    grid-column: 1 / -1;
  }

  .footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .mobile-menu__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===============================
   MOBILE — ≤390
================================ */
@media (max-width: 390px) {
  .hero__title {
    font-size: 2.3rem;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .nav__toggle {
    padding: 0 14px;
  }

  .btn {
    padding: 14px 24px;
  }
}

/* ===============================
   SMALL MOBILE — ≤360
================================ */
@media (max-width: 360px) {
  :root {
    --gutter: 16px;
  }

  .hero__title {
    font-size: 2.05rem;
  }

  .nav__toggle-label {
    display: none;
  }

  .mobile-menu__link {
    font-size: 2.1rem;
  }

  .numbers__item {
    padding-left: 14px;
  }
}

/* ===============================
   SHORT SCREENS (e.g. phones in landscape) — cards can't fit pinned,
   so they simply scroll as a list
================================ */
@media (max-height: 560px) {
  .project {
    position: relative;
    top: auto;
  }

  .project__card {
    height: auto;
    min-height: 420px;
  }
}

/* ===============================
   TOUCH DEVICES — no hover-only affordances
================================ */
@media (hover: none) {
  html:not(.has-custom-cursor) .service:hover .service__title,
  .service.is-hover .service__title,
  html:not(.has-custom-cursor) .exp:hover .exp__role,
  .exp.is-hover .exp__role {
    transform: none;
  }
}