/* ============================================================
   ZAHARI · responsive.css
   mobile-first overrides
   ============================================================ */

/* ============================================================
   LARGE DESKTOP  (>= 1280px)
   ============================================================ */
@media (min-width: 1280px) {
  .hero__content { padding-top: 160px; padding-bottom: 140px; }
}

/* ============================================================
   TABLET  (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; gap: 60px; }
  .about__sticker { width: 110px; height: 110px; right: -10px; bottom: -10px; }
  .contact__panel { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

/* ============================================================
   MOBILE  (max-width: 760px)
   ============================================================ */
@media (max-width: 760px) {
  /* Top bar */
  .top-bar__inner {
    flex-wrap: wrap;
    font-size: 0.7rem;
    gap: 8px;
    padding: 8px 16px;
  }
  .top-bar__phone { font-size: 0.75rem; }

  /* Nav */
  .nav__inner { padding: 12px 18px; gap: 14px; }
  .nav__menu { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__logo-text { font-size: 1rem; letter-spacing: 0.28em; }

  /* Hero */
  .hero { min-height: 88svh; }
  .hero__content { padding: 110px 22px 90px; }
  .hero__title { font-size: clamp(2.6rem, 11vw, 4rem); margin: 18px 0 22px; }
  .hero__sub { font-size: 0.98rem; margin-bottom: 30px; }
  .hero__actions { margin-bottom: 50px; }
  .hero__actions .btn { flex: 1; min-width: 0; }
  .hero__meta { gap: 18px; }
  .hero__meta-num { font-size: 1.7rem; }
  .hero__meta-label { font-size: 0.6rem; letter-spacing: 0.16em; }
  .hero__meta-divider { display: none; }
  .hero__scroll { display: none; }

  /* About */
  .about { padding: 60px 22px; gap: 40px; }
  .about__img { aspect-ratio: 4/5; max-height: 480px; }
  .about__sticker { width: 90px; height: 90px; right: 8px; bottom: 8px; }
  .about__sticker span { font-size: 0.55rem; }
  .about__sticker strong { font-size: 1.2rem; }
  .about__list li { font-size: 0.9rem; }

  /* Services */
  .services { padding: 40px 18px; }
  .services__head { margin-bottom: 26px; }
  .services__grid { grid-template-columns: 1fr; gap: 16px; }
  .card { border-radius: var(--radius-m); }
  .card__body { padding: 20px 20px 24px; }
  .card__title { font-size: 1.4rem; }
  .card__desc { font-size: 0.88rem; }
  .card__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .card__reveal, .card__whatsapp { width: 100%; padding: 14px; font-size: 0.78rem; justify-content: center; }
  .card__whatsapp { padding: 14px; }

  /* Why */
  .why { padding: 60px 18px; }
  .why__head { margin-bottom: 36px; }
  .why__grid { grid-template-columns: 1fr; gap: 14px; }
  .why__cell { padding: 28px 22px; text-align: left; display: flex; flex-direction: row; gap: 16px; align-items: flex-start; }
  .why__icon { width: 46px; height: 46px; margin: 0; flex-shrink: 0; }
  .why__cell h3 { margin-bottom: 4px; }
  .why__cell p { font-size: 0.85rem; }

  /* Contact */
  .contact { padding: 60px 18px; }
  .contact__panel { padding: 28px 22px; border-radius: var(--radius-l); }
  .contact__line { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0; }
  .contact__line-value { font-size: 1.05rem; }
  .contact__cta .btn { padding: 16px; }

  /* Footer */
  .foot { padding: 50px 22px 24px; }
  .foot__top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 24px; }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* WhatsApp float */
  .wa-float { right: 14px; bottom: 14px; }
  .wa-float__btn { width: 56px; height: 56px; }
  .wa-float__btn svg { width: 26px; height: 26px; }
  .wa-float__card {
    width: calc(100vw - 28px);
    max-width: 360px;
    right: -8px;
    bottom: 70px;
  }
  .wa-float__head { padding: 14px 16px; }
  .wa-float__body { max-height: 260px; }
}

/* ============================================================
   SMALL  (max-width: 420px)
   ============================================================ */
@media (max-width: 420px) {
  .hero__title { font-size: 2.4rem; }
  .display { font-size: 2rem; }
  .display em { display: inline; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .nav__logo-text { display: none; }
  .wa-float__card { width: calc(100vw - 20px); right: -10px; }
}

/* ============================================================
   HOVER-CAPABLE ONLY: hide hover price reveal on touch
   (we use media query that excludes hover for touch devices)
   ============================================================ */
@media (hover: none) {
  /* On touch devices, price reveal is click/tap-driven via JS */
  .card .card__price-label { opacity: 1; }
  .card .card__price-value { opacity: 0; transform: translateY(6px); }
  .card.is-active .card__price-label { opacity: 0; }
  .card.is-active .card__price-value { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 500px; }
  .hero__content { padding: 80px 22px 60px; }
  .hero__title { font-size: 2.4rem; margin: 12px 0 16px; }
  .hero__meta { margin-bottom: 30px; }
}