/* Golden Marketing Uganda — Responsive v3.0 */

/* Mobile-menu close button is hidden until the menu overlay is open */
.nav-close { display: none; }

/* ============================================================
   LAPTOP SCALE — render the big-screen layout, uniformly shrunk
   so it stays airy/clean instead of feeling crowded. Large
   monitors (>1750px) keep the full 100% scale.
   (Width-based; CSS zoom does not affect media-query evaluation.)
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1750px) { body { zoom: 0.92; } }
@media (min-width: 1025px) and (max-width: 1500px) { body { zoom: 0.87; } }
@media (min-width: 1025px) and (max-width: 1300px) { body { zoom: 0.83; } }

/* ============================================================
   TABLET ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .services-grid  { grid-template-columns: repeat(2,1fr); }
  .impact-layout  { grid-template-columns: 1fr; gap: 48px; }
  /* Keep the full desktop side-by-side hero (text + collage) on tablets/laptops */
  .hero-layout    { grid-template-columns: 1fr 1.12fr; gap: clamp(20px, 3.5vw, 44px); padding: 56px 0; }
  .hero-visual    { height: min(760px, calc(100vh - 120px)); }
  .hero-sub       { max-width: none; }
  .work-grid      { grid-template-columns: 1fr 1fr; }
  .pillars-grid   { grid-template-columns: 1fr 1fr; }
  .pillars-intro  { grid-template-columns: 1fr 1fr; }
  .pillars-heading { grid-column: 1 / -1; }
  .pillars-sub    { grid-column: 1 / -1; }
  .cta-band-inner { flex-direction: column; gap: 28px; }

  .about-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .timeline-grid  { grid-template-columns: 1fr 1fr; }
  .values-grid    { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-info-col { position: static; }
  .service-page-grid { grid-template-columns: 1fr; gap: 48px; }
  .service-sidebar { position: static; }
  .service-cta-card { position: relative; top: auto; }
  .related-services  { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ============================================================
   MOBILE ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  :root { --pad-section: 56px; }

  /* Hero collapses to single column with collage as a soft, clean backdrop */
  .hero-layout { grid-template-columns: 1fr; gap: 0; padding: 56px 0; position: relative; }
  .hero-visual {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin-right: 0;
    z-index: 0;
    opacity: 0.09;
    filter: grayscale(100%) contrast(65%) brightness(112%) blur(3px);
    pointer-events: none;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .hero-float-card { display: none !important; }
  /* Centered hero content on phones */
  .hero-content { position: relative; z-index: 2; text-align: center; }
  .hero-title { text-align: center; }
  .hero-sub { max-width: 460px; margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-micro-stats { justify-content: center; }

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  
  .desktop-only-cta {
    display: none !important;
  }
  .mobile-only-cta {
    display: inline-flex !important;
    margin-top: 24px;
    align-self: stretch;
    justify-content: center;
    text-align: center;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, var(--ink) 0%, #14141f 100%);
    z-index: 101;
    padding: 84px 24px 32px;
    gap: 2px;
    align-items: stretch;
    overflow-y: auto;
    animation: navOpen var(--duration-med) var(--ease-out);
  }
  /* Close (X) button injected into the overlay */
  .nav-close {
    position: absolute;
    top: 11px;
    right: 20px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .nav-close:hover { background: rgba(255,255,255,0.1); color: var(--gold); transform: rotate(90deg); }
  .nav-close:active { transform: rotate(90deg) scale(0.94); }

  .nav-links.open > li { width: 100%; }
  .nav-links.open .nav-link,
  .nav-links.open .nav-dropdown-trigger {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 16px 4px;
    border-radius: 0;
    width: 100%;
    color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav-links.open .nav-link.active { color: var(--gold); }
  .nav-links.open .nav-link:hover { background: none; color: var(--gold); }

  /* Dropdown as a collapsible accordion */
  .nav-links.open .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
  }
  .nav-links.open .nav-dropdown-trigger svg {
    display: block;
    transition: transform var(--duration-med) var(--ease-out);
  }
  .nav-links.open .nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav-links.open .nav-dropdown-trigger[aria-expanded="true"] { color: var(--gold); }
  .nav-links.open .nav-dropdown-panel {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,0.04);
    border-radius: var(--r-md);
    min-width: unset;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    padding: 0 8px;
    margin: 0;
    transition: max-height var(--duration-med) var(--ease-out), padding var(--duration-med) var(--ease-out), margin var(--duration-med) var(--ease-out);
  }
  .nav-links.open .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-panel {
    max-height: 520px;
    padding: 6px 8px;
    margin: 6px 0 8px;
  }
  .nav-links.open .nav-dropdown-panel a {
    font-size: 0.98rem;
    padding: 11px 14px;
    color: rgba(255,255,255,0.6);
    border-radius: var(--r-sm);
  }
  .nav-links.open .nav-dropdown-panel a:hover {
    background: rgba(255,255,255,0.07);
    color: var(--white);
  }
  /* Prominent CTA pinned to the bottom of the menu */
  .nav-links.open > li:last-child { margin-top: auto; padding-top: 20px; }
  .nav-links.open .mobile-only-cta {
    margin-top: 0;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 1rem;
  }

  /* Hamburger → X */
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg) translate(4px, -4px); }

  /* Grids */
  .services-grid  { grid-template-columns: 1fr; }
  .work-grid      { grid-template-columns: 1fr; }
  .pillars-grid   { grid-template-columns: 1fr; }
  .pillars-intro  { grid-template-columns: 1fr; }
  .pillars-heading { grid-column: 1; font-size: clamp(2rem, 8vw, 3rem); }
  .pillars-sub    { grid-column: 1; }
  .impact-stats   { grid-template-columns: 1fr 1fr; }
  .hero-micro-stats { flex-wrap: wrap; gap: 16px; }
  .footer-grid    { grid-template-columns: 1fr; gap: 32px; }
  .gallery-grid   { grid-template-columns: 1fr 1fr; }
  .careers-grid   { grid-template-columns: 1fr; }
  .related-services { grid-template-columns: 1fr; }
  .photo-gallery  { grid-template-columns: 1fr 1fr; }
  .form-row       { grid-template-columns: 1fr; }
  .timeline-grid  { grid-template-columns: 1fr 1fr; }
  .values-grid    { grid-template-columns: 1fr 1fr; }

  /* Typography scale */
  .hero-title    { font-size: clamp(2.4rem, 8vw, 3.5rem); }
  .section-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }

  /* Sections */
  .site-nav { height: 56px; }
  .page-hero { padding: 60px 0 48px; }
  .cta-band-inner { text-align: center; justify-content: center; }
  .cta-band-actions { justify-content: center; }
  .section-header-row { flex-direction: column; align-items: flex-start; gap: 16px; }

  .impact-stat { padding: 24px 20px; }
  .careers-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Careers */
  .careers-open-inner { flex-direction: column; align-items: flex-start; }
  .careers-open-apply { padding: 28px 24px; }

  /* Contact */
  .contact-detail { gap: 12px; }

  /* Process steps */
  .process-step { grid-template-columns: 44px 1fr; gap: 16px; }

  /* Photo gallery */
  .photo-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Page hero adjustments */
  .page-hero-title { font-size: clamp(2rem, 7vw, 2.8rem); }
  .page-hero-subtitle { font-size: 1rem; }
}

/* ============================================================
   SMALL MOBILE ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  /* Scale hero font so rotating phrases always fit on one line */
  :root { --text-hero: clamp(1.9rem, 8.5vw, 3rem); }

  .impact-stats     { grid-template-columns: 1fr; }
  .micro-divider    { display: none; }
  .hero-micro-stats { gap: 12px 24px; }
  .hero-ctas        { flex-direction: column; }
  .hero-ctas .btn   { width: 100%; justify-content: center; }
  .gallery-grid     { grid-template-columns: 1fr; }
  .photo-gallery    { grid-template-columns: 1fr; }
  .timeline-grid    { grid-template-columns: 1fr; }
  .values-grid      { grid-template-columns: 1fr; }
  .filter-bar       { gap: 6px; }
  .filter-btn       { padding: 8px 14px; font-size: 0.8rem; }
  .process-step { grid-template-columns: 1fr; gap: 8px; }
  .process-number { font-size: 1.5rem; }
  .related-services { grid-template-columns: 1fr; }
  .stat-number { font-size: 2rem; }
  .careers-grid { grid-template-columns: 1fr; }

  /* Service page */
  .service-page-grid { gap: 32px; }

  /* Featured work grid on small phones */
  .featured-grid { gap: 16px; }
}

/* ============================================================
   VERY SMALL MOBILE ≤ 360px
   ============================================================ */
@media (max-width: 360px) {
  :root {
    --text-hero: clamp(1.7rem, 9vw, 2.4rem);
    --pad-x: 16px;
  }

  .btn-lg { padding: 13px 24px; font-size: 0.95rem; }
  .pillars-grid { gap: 10px; }
  .pillar { padding: 28px 20px 24px; }
  .impact-stat { padding: 20px 14px; }
}