/* ==========================================================================
   NOORAD DIGITAL — RESPONSIVE MEDIA QUERIES
   Breakpoints: Tablet (<= 1024px), Mobile (<= 768px), Small Mobile (<= 480px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
  }

  .hero-subtext-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-header-bar {
    grid-template-columns: 50px 1.2fr 1fr 36px;
    gap: 1rem;
  }

  .service-deliverables-grid {
    grid-template-columns: 1fr;
  }

  .works-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .works-grid-3 > .video-card-9-16:last-child {
    grid-column: span 2;
    max-width: 440px;
    margin: 0 auto;
  }

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

  .methodology-card:nth-child(2) {
    border-right: none;
  }

  .methodology-card:nth-child(1),
  .methodology-card:nth-child(2) {
    border-bottom: 1px solid var(--color-black-border);
  }

  .contact-layout-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .modal-content-wrapper {
    grid-template-columns: 1fr;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-video-preview {
    border-right: none;
    border-bottom: 1px solid var(--color-black-border);
    max-height: 45vh;
  }
}

/* --------------------------------------------------------------------------
   Mobile (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --space-3xl: 4.5rem;
  }

  /* Navigation Drawer Activation */
  .header-nav {
    display: none;
  }

  .header-status {
    display: none;
  }

  .header-right-group {
    display: none;
  }

  .brand-logo-img {
    height: 30px;
    max-width: 145px;
  }

  .floating-whatsapp-widget {
    bottom: 1.25rem;
    right: 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
  }

  .mobile-toggle {
    display: flex;
  }

  .grid-lines-overlay {
    display: none;
  }

  /* Hero Adjustments */
  .hero-section {
    padding-top: calc(var(--header-height) + 1.5rem);
    padding-bottom: 3.5rem;
    min-height: auto;
  }

  .hero-header-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .hero-floating-element {
    display: none; /* Hide floating absolute tags on small touch screens to prevent clutter */
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Cinematic Section Adjustments */
  .cinematic-reveal-track {
    height: 70vh;
  }

  .cinematic-reveal-portal {
    clip-path: circle(90px at 50% 50%);
  }

  .cinematic-portal-ring {
    width: 180px;
    height: 180px;
  }

  /* Services Table Stack */
  .service-header-bar {
    grid-template-columns: 40px 1fr auto;
    gap: 0.75rem;
  }

  .service-summary {
    display: none; /* Keep clean on mobile, expandable in drawer */
  }

  .service-row:hover {
    padding-left: 0;
    padding-right: 0;
  }

  /* Selected Works Stack */
  .works-grid-3 {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 2.5rem auto 0 auto;
  }

  .works-grid-3 > .video-card-9-16:last-child {
    grid-column: span 1;
    max-width: 100%;
  }

  /* Methodology Stack */
  .methodology-grid {
    grid-template-columns: 1fr;
  }

  .methodology-card {
    border-right: none;
    border-bottom: 1px solid var(--color-black-border);
  }

  .methodology-card:last-child {
    border-bottom: none;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Small Mobile (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .brand-logo-img {
    height: 26px;
    max-width: 130px;
  }

  .hero-headline {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .section-head-editorial {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .btn {
    padding: 0.95rem 1.5rem;
    font-size: var(--text-xs);
  }

  .modal-details {
    padding: 1.5rem;
  }
}