/* ============================================================
   MackaTech — RESPONSIVE CSS  (Ultra-Professional v2)
   Mobile-first breakpoints · Touch overrides · Reduced motion
   ============================================================ */

/* ── BREAKPOINTS ────────────────────────────────────────────
   xs  < 400px   — small phones (SE, Galaxy Fold)
   sm  ≥ 480px   — phones
   md  ≥ 768px   — tablets
   lg  ≥ 1024px  — laptops
   xl  ≥ 1280px  — desktops
   2xl ≥ 1600px  — large screens
   ────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   MOBILE BASE (default — no media query, < 480px)
═══════════════════════════════════════════════════════════ */

/* ── Navbar ── */
.navbar__links {
  display: none;
}

.navbar__hamburger {
  display: flex;
}

.nav-cta {
  display: none;
}

.navbar__logo-img {
  width: 38px;
  height: 38px;
}

.navbar__container {
  padding-inline: 16px;
}

/* Mobile menu link sizes handled in main.css */

/* ── Hero ── */
.hero {
  position: relative;
  overflow: hidden;
  /* Ensure massive watermark doesn't break page width */
}

.hero__content {
  padding-top: clamp(100px, 22vh, 160px);
  padding-bottom: var(--sp-8);
  grid-template-columns: 1fr;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero__text {
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero__visual {
  margin-top: var(--sp-6);
  width: 100%;
}

.hero__visual-img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.hero__eyebrow::before {
  display: none;
}

.hero__eyebrow {
  padding-left: 0;
  text-align: center;
}

.hero__headline {
  text-align: center;
  font-size: clamp(2.8rem, 12vw, 4rem);
}

.hero__sub {
  text-align: center;
  max-width: 100%;
}

.hero__cta-row {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero__cta-row .btn {
  width: 100%;
  max-width: 300px;
  justify-content: center;
}

.hero__scroll-indicator {
  display: none;
}

/* ── About ── */
.about__stats {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.about__slogan,
.portfolio__slogan {
  text-align: center;
  padding-left: 0;
  border-left: none;
  border-bottom: 2px solid #ccc;
  padding-bottom: var(--sp-2);
}

/* ── Services — Seamless repeating pillar layout on mobile ── */
.services__pillar {
  display: none !important;
  /* Hide structural desktop images */
}

.services__mobile-pillar {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 60vw, 350px);
  background-image: url('../assets/pillar-right.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  z-index: 0;
  opacity: 0.25;
}

/* ── Portfolio — reversed direction ltr on mobile ── */
.showcase-card--reversed {
  direction: ltr;
}

.showcase-card__number {
  font-size: clamp(2rem, 10vw, 3rem);
}

.showcase-card__desc {
  max-width: 100%;
}

/* ── Contact ── */
.contact__wa-block {
  align-items: center;
}

.contact__divider {
  flex-direction: row;
  gap: var(--sp-3);
}

.contact__divider::before,
.contact__divider::after {
  width: 60px;
  height: 1px;
  flex-shrink: 0;
}

.contact__info {
  align-items: center;
}

.contact__info-item {
  align-items: center;
}

.contact__hand {
  display: block;
  width: clamp(130px, 35vw, 240px);
  opacity: 1;
}

/* ── Footer ── */
.footer__content {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.footer__wordmark {
  font-size: clamp(1.8rem, 8vw, 3rem) !important;
  white-space: normal;
  word-break: break-word;
}

.footer__logo-right {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  align-self: center;
  margin-top: var(--sp-4);
}

.footer__logo-img {
  width: clamp(120px, 35vw, 200px) !important;
}

.footer__drip {
  display: none;
}

.footer__nav {
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.footer__nav a {
  font-size: 0.78rem;
}

.footer__bottom {
  text-align: left;
}

/* ── Floating buttons ── */
.wa-float {
  padding: 10px 12px;
  bottom: 16px;
  right: 16px;
}

.wa-float img {
  width: 20px;
  height: 20px;
}

.wa-float__text {
  display: none;
}

.go-up {
  width: 36px;
  height: 36px;
  bottom: 70px;
  right: 16px;
}

.go-up svg {
  width: 16px;
  height: 16px;
}

/* ── XS: < 400px — tiny phones ── */
@media (max-width: 399px) {
  :root {
    --cont-pad: 14px;
  }

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

  .hero__cta-row .btn {
    max-width: 100%;
    font-size: 0.72rem;
    padding: 12px 16px;
  }

  .hero__headline {
    font-size: clamp(2.2rem, 10vw, 2.6rem);
  }

  .stat-card {
    padding: var(--sp-2);
  }

  .stat-card__number {
    font-size: 1.4rem;
  }

  /* Extract every pixel from navbar for 320px width */
  .navbar__container {
    gap: 8px;
  }

  .navbar__logo {
    font-size: 1.1rem;
    gap: 6px;
  }

  .navbar__logo-img {
    width: 28px;
    height: 28px;
  }

  .lang-toggle {
    padding: 2px 4px;
    gap: 4px;
    font-size: 0.65rem;
  }

  .lang-toggle__flag {
    width: 14px;
    height: 10px;
  }

  .section__title,
  .section__title--dark {
    font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
  }

  .service-card__title {
    font-size: 0.95rem;
  }

  .service-card__desc {
    font-size: 0.75rem;
  }

  .contact__info-value {
    font-size: 0.82rem;
    word-break: break-all;
  }

  .footer__tagline,
  .footer__slogan {
    font-size: 0.7rem;
  }

  .mobile-menu__links a {
    font-size: 1.3rem;
  }

  .showcase-card__title {
    font-size: 1.1rem;
  }

  .btn--xl {
    font-size: 0.72rem;
    padding: 14px 20px;
  }

  .btn--lg {
    font-size: 0.72rem;
    padding: 12px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SM — ≥ 480px
═══════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .hero__cta-row .btn {
    width: auto;
    max-width: none;
  }

  .hero__cta-row {
    flex-direction: row;
    justify-content: center;
  }

  /* 2-column service grid */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .wa-float {
    padding: 12px 14px;
    bottom: 20px;
    right: 20px;
  }

  .go-up {
    width: 38px;
    height: 38px;
    bottom: 76px;
    right: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MD — ≥ 768px (Tablet)
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Loader: switch videos ── */
  .loader__video--desktop {
    display: block;
  }

  .loader__video--mobile {
    display: none;
  }

  /* ── Navbar ── */
  .navbar__hamburger {
    display: none;
  }

  .navbar__links {
    display: flex;
  }

  .nav-cta {
    display: inline-flex;
  }

  .navbar__logo-img {
    width: 48px;
    height: 48px;
  }

  /* ── Hero ── */
  .hero__headline {
    text-align: left;
  }

  .hero__sub {
    text-align: left;
    max-width: 520px;
  }

  .hero__eyebrow::before {
    display: block;
  }

  .hero__eyebrow {
    padding-left: var(--sp-4);
    text-align: left;
  }

  .hero__cta-row {
    flex-direction: row;
    justify-content: flex-start;
  }

  .hero__cta-row .btn {
    width: auto;
  }

  .hero__visual {
    opacity: 1;
  }

  .hero__scroll-indicator {
    display: flex;
  }

  /* ── About ── */
  .about__layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--sp-10) !important;
    align-items: center !important;
  }

  .about__slogan,
  .portfolio__slogan {
    text-align: left;
    padding-left: var(--sp-2);
    border-left: 2px solid #ccc;
    border-bottom: none;
    padding-bottom: 0;
  }

  /* ── Services ── */
  .services__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .services__pillar {
    display: block !important;
    opacity: 1;
    width: auto;
    height: 85%;
    top: 12% !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1;
  }

  .services__mobile-pillar {
    display: none !important;
  }

  .services__pillar--left {
    left: 0 !important;
    transform: translateX(-28%) !important;
  }

  .services__pillar--right {
    right: 0 !important;
    transform: translateX(28%) !important;
  }

  .service-card {
    aspect-ratio: 1 / 1;
    padding: var(--sp-6) var(--sp-4);
  }

  /* ── Portfolio ── */
  .showcase-card {
    grid-template-columns: 1.15fr 1fr !important;
    gap: clamp(24px, 4vw, 60px) !important;
  }

  .showcase-card--reversed {
    direction: rtl;
  }

  .showcase-card__desc {
    max-width: 400px;
  }

  /* ── Contact ── */
  .contact__layout {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    text-align: left !important;
    align-items: center !important;
    flex-direction: unset !important;
  }

  .contact__wa-block {
    align-items: flex-end;
    text-align: right;
    justify-self: end;
  }

  .contact__info {
    align-items: flex-start;
  }

  .contact__info-item {
    align-items: flex-start;
  }

  .contact__divider {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .contact__divider::before,
  .contact__divider::after {
    width: 1px;
    height: 60px;
  }

  .contact__hand {
    display: block;
    opacity: 1;
    width: clamp(160px, 20vw, 320px);
  }

  /* ── Footer ── */
  .footer__content {
    flex-direction: row !important;
    align-items: center !important;
  }

  .footer__logo-right {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    align-self: auto;
    margin-top: 0;
  }

  .footer__logo-img {
    width: clamp(180px, 25vw, 450px) !important;
  }

  .footer__wordmark {
    font-size: clamp(3rem, 7vw, 6.5rem) !important;
    white-space: nowrap;
    word-break: normal;
  }

  .footer__drip {
    display: block;
  }

  .footer__nav a {
    font-size: 0.82rem;
  }

  /* ── WA float text ── */
  .wa-float__text {
    display: inline;
  }

  /* ── Floating buttons ── */
  .wa-float {
    padding: 14px 18px;
    bottom: 32px;
    right: 32px;
  }

  .wa-float img {
    width: 26px;
    height: 26px;
  }

  .go-up {
    width: 44px;
    height: 44px;
    bottom: 100px;
    right: 32px;
  }

  .go-up svg {
    width: 20px;
    height: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LG — ≥ 1024px (Laptop)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Hero — 2-column */
  .hero__content {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    padding-top: clamp(120px, 15vh, 200px);
  }

  .hero__text {
    align-items: flex-start;
  }

  .hero__visual {
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    z-index: auto;
    pointer-events: auto;
    opacity: 1;
    animation: none;
  }

  .hero__visual-img {
    width: clamp(400px, 48vw, 850px);
  }

  /* Services: 3 columns */
  .services__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* About stats 2×2 */
  .about__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  .navbar__logo-img {
    width: 52px;
    height: 52px;
  }

  .contact__hand {
    width: clamp(180px, 22vw, 340px);
  }
}

/* ═══════════════════════════════════════════════════════════
   XL — ≥ 1280px (Desktop)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .navbar__links {
    gap: var(--sp-6);
  }

  .navbar__logo-img {
    width: 56px;
    height: 56px;
  }

  .contact__layout {
    max-width: 900px;
  }

  .footer__brand {
    max-width: 620px;
  }

  .showcase-card {
    gap: clamp(40px, 5vw, 80px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   2XL — ≥ 1600px
═══════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  :root {
    --cont-pad: 100px;
  }

  .hero__content {
    padding-top: clamp(160px, 18vh, 240px);
  }

  .contact__layout {
    max-width: 1000px;
  }

  .footer__logo-img {
    width: clamp(300px, 22vw, 500px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   3XL — ≥ 1920px (Ultra-wide)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root {
    --cont-pad: 140px;
  }

  .hero__content {
    max-width: 1600px;
  }

  .services .container {
    max-width: 1300px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero__content {
    padding-top: 80px;
    padding-bottom: var(--sp-6);
  }

  .hero {
    min-height: auto;
  }

  .hero__headline {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
  }

  .mobile-menu {
    padding-block: 70px 40px;
  }

  .mobile-menu__links a {
    font-size: 1.2rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH DEVICES
═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  *,
  *::before,
  *::after {
    cursor: auto !important;
  }

  .cursor {
    display: none !important;
  }

  [data-tilt] {
    transform: none !important;
  }

  .showcase-card__overlay {
    opacity: 0;
  }

  .showcase-card__media img {
    filter: none !important;
    transform: none !important;
  }

  .service-card:hover {
    transform: none;
  }

  .service-card:hover::before {
    animation: none;
    opacity: 0;
  }

  .wa-float {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }

  .btn,
  .lang-toggle,
  .navbar__hamburger {
    cursor: pointer !important;
  }

  .stat-card:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .chrome-text {
    animation: none !important;
    background-position: 0% center !important;
  }

  .loader {
    display: none !important;
  }

  .wa-float {
    animation: none !important;
    opacity: 1;
    transform: scale(1);
  }

  [data-gsap],
  .hero__line>span,
  .hero__eyebrow,
  .hero__sub,
  .hero__cta-row,
  .hero__scroll-indicator,
  .about__text p {
    opacity: 1 !important;
    transform: none !important;
  }

  .navbar {
    animation: none !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .service-card:hover::before {
    animation: none !important;
    opacity: 0.4 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════ */
@media print {

  .loader,
  .cursor,
  .wa-float,
  .go-up,
  .navbar,
  .hero__glow,
  .hero__visual,
  .services__bg-grid,
  .services__pillar,
  .contact__hand,
  .contact__glow-bg,
  .footer__divider,
  .footer__bottom-line,
  .footer__logo-right,
  .footer__drip {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .chrome-text {
    -webkit-text-fill-color: black;
    color: black;
    background: none;
    animation: none;
  }

  .section--light,
  .portfolio.section--light {
    background: white;
  }

  .showcase-card__media {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}