/* ============================================================
   responsive.css — Green Ad Solutions
   Mobile-first breakpoints for new 5-section homepage
   Breakpoints: 480 | 640 | 768 | 1024 | 1280 | 1440
   ============================================================ */


/* ── BASE MOBILE (default, no media query) ──────────────────── */

/* Nav */
.nav-links,
.nav-cta    { display: none; }
.nav-toggle { display: flex; }

/* Hero — mobile: single panel (video full width), works panel hidden */
.hero {
  display: block;       /* Stack instead of flex — only left panel visible */
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}

.hero-vpanel {
  height: 100vh;
  height: 100svh;
  clip-path: none;      /* No diagonal on mobile — square edge */
  width: 100%;
}

/* Text block padding on small screens */
.hero-text-block {
  padding: 2rem 1.25rem 2.5rem;
}

/* Headline sizes on small screens */
.hl-main,
.hl-close {
  font-size: clamp(2.25rem, 11.5vw, 3.5rem);
}

/* Buttons: stack on very small phones */
.hero-actions {
  flex-direction: column;
  gap: var(--sp-2);
}
.hero-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Hide work panel on mobile — only videos + text */
.hero-wpanel { display: none; }

/* Services Home — 2x2 becomes 1 column on mobile */
.services-home-head {
  flex-direction: column;
  align-items: flex-start;
}
.services-home-head-right { align-self: flex-start; }
.services-grid {
  grid-template-columns: 1fr;
  gap: 2px;
}
.service-block {
  aspect-ratio: 16/9;
}
/* Always show service info on mobile (no hover) */
.service-block-sub,
.service-block-link {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Clients strip */
.clients-track { gap: var(--sp-2); }
.client-badge  { min-width: 120px; padding: var(--sp-3) var(--sp-4); }

/* Portfolio — stack on mobile */
.portfolio-home-head {
  flex-direction: column;
  align-items: flex-start;
}
.portfolio-grid {
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.work-card:first-child {
  grid-column: span 1;
}
.work-card-inner,
.work-card:first-child .work-card-inner {
  aspect-ratio: 16/9;
}
/* Always show card info on mobile */
.work-card-meta  { opacity: 1; }
.work-card-body  { transform: translateY(0); }

/* Contact bar */
.contact-bar-inner {
  flex-direction: column;
  gap: var(--sp-6);
}
.contact-bar-links {
  flex-direction: column;
  width: 100%;
}
.contact-bar-link {
  justify-content: center;
}

/* Footer */
.footer-grid {
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}
.footer-bottom {
  flex-direction: column;
  text-align: center;
  gap: var(--sp-2);
}


/* ── 480px — Small phones ────────────────────────────────────── */
@media (min-width: 480px) {
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero-actions .btn { width: auto; }

  .contact-bar-links {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }
  .contact-bar-link { justify-content: flex-start; }
}


/* ── 600px — Large phones ────────────────────────────────────── */
@media (min-width: 600px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-block {
    aspect-ratio: 16/10;
  }

  /* Restore hover-only behaviour for pointer devices */
  @media (hover: hover) {
    .service-block-sub,
    .service-block-link {
      opacity: 0 !important;
      transform: translateY(10px) !important;
    }
    .service-block:hover .service-block-sub { opacity: 1 !important; transform: translateY(0) !important; }
    .service-block:hover .service-block-link { opacity: 1 !important; transform: translateY(0) !important; }
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .work-card:first-child {
    grid-column: span 2;
  }
  .work-card:first-child .work-card-inner {
    aspect-ratio: 16/7;
  }
}


/* ── 768px — Tablet ──────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Show desktop nav */
  .nav-toggle { display: none; }
  .nav-links  { display: flex; }
  .nav-cta    { display: block; }

  /* Hero: restore flex split-screen at tablet */
  .hero {
    display: flex;
    height: 100vh;
    height: 100svh;
    min-height: unset;
  }

  .hero-vpanel {
    flex: 0 0 62%;
    height: auto;
    /* Diagonal separator restored */
    clip-path: polygon(0 0, 100% 0, calc(100% - 3.5vw) 100%, 0 100%);
  }

  .hero-wpanel {
    display: block;
    flex: 1;
  }

  .hero-text-block {
    padding: 3rem 2rem 2.5rem;
  }

  .hl-main,
  .hl-close {
    /* Reset to fluid clamp */
    font-size: clamp(2.75rem, 6.2vw, 6.25rem);
  }

  .hero-actions {
    flex-direction: row;
  }
  .hero-actions .btn {
    width: auto;
  }

  .contact-bar-inner { flex-direction: row; }

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


/* ── 1024px — Laptop ─────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Hero: wider diagonal on large screens */
  .hero-vpanel {
    flex: 0 0 60%;
    clip-path: polygon(0 0, 100% 0, calc(100% - 4vw) 100%, 0 100%);
  }

  .hero-text-block {
    padding: 3rem clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 4vw, 3.5rem);
  }

  .services-home-head { flex-direction: row; align-items: flex-end; }

  .portfolio-home-head { flex-direction: row; align-items: flex-end; }
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
  .work-card:first-child { grid-column: span 3; }
  .work-card:first-child .work-card-inner { aspect-ratio: 16/6; }
  .work-card:not(:first-child) .work-card-inner { aspect-ratio: 4/3; }

  /* Restore hover states on laptop */
  @media (hover: hover) {
    .work-card-meta { opacity: 0; }
    .work-card:hover .work-card-meta { opacity: 1; }
    .work-card-body { transform: translateY(6px); }
    .work-card:hover .work-card-body { transform: translateY(0); }
  }

  .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.5fr; }
}


/* ── 1280px — Desktop ────────────────────────────────────────── */
@media (min-width: 1280px) {
  .hero-actions .btn { min-width: 160px; }
  .nav-links { gap: 0.25rem; }
}


/* ── 1440px+ — Large desktop ─────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --section-py: 9rem; }
}


/* ── Touch devices (no hover support) ───────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn              { min-height: 48px; }
  .nav-toggle       { min-width: 48px; min-height: 48px; }
  .contact-bar-link { min-height: 48px; }
  .footer-links a   { padding-block: var(--sp-2); }

  /* Service blocks: always show text on touch */
  .service-block-sub,
  .service-block-link {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Portfolio cards: always show metadata */
  .work-card-meta { opacity: 1 !important; }
  .work-card-body { transform: translateY(0) !important; }
}


/* ── Safe area (iPhone notch / Dynamic Island) ───────────────── */
@supports (padding: max(0px)) {
  .site-header {
    padding-left:  max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .nav-mobile {
    padding-left:   max(var(--container-pad), env(safe-area-inset-left));
    padding-right:  max(var(--container-pad), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-10), env(safe-area-inset-bottom));
  }
}