/* ═══════════════════════════════════════════════════════════════
   IRIS EVENTS & ADVERTISING
   FILE: assets/css/responsive.css
   DESC: All @media query breakpoints for every page.
         No base styles here — responsive overrides only.
         Loaded last, after global.css, animations.css, pages.css.
   BREAKPOINTS:
         1024px — Tablet landscape
          768px — Tablet portrait / large mobile
          480px — Small mobile
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   SECTION A — GLOBAL SHARED (All Pages)
   ═══════════════════════════════════════════════════════════════ */

/* ── A1: Navbar ── */
@media (max-width: 1024px) {
  nav         { padding: 1.2rem 2rem; }
  nav.scrolled { padding: .9rem 2rem; }
  .container  { padding: 0 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger  { display: flex; }
  section     { padding: 4rem 0; }
  .container  { padding: 0 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
@media (max-width: 480px) {
  nav         { padding: 1rem 1.25rem; }
  nav.scrolled { padding: .8rem 1.25rem; }
  .nav-logo   { font-size: 1.6rem; }
}

/* ── A2: Page Hero (inner pages) ── */
@media (max-width: 768px) {
  .page-hero   { padding: 7rem 0 3rem; }
  .page-hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  /* FIX: hero subtitle was overlapping hero title on mobile —
     tightened top spacing and ensured it never sits flush against the h1 */
  .page-hero p { margin-top: 1.2rem; font-size: .95rem; }
}

/* ── A3: CTA Strip (shared, used by multiple pages) ── */
@media (max-width: 768px) {
  .cta-btns { flex-direction: column; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION B — index.html (Homepage)
   ═══════════════════════════════════════════════════════════════ */

/* ── B1: Hero Section ── */
@media (max-width: 768px) {
  .hero-title  { font-size: clamp(3.5rem, 15vw, 5rem); }
  .hero-sub    { font-size: 1rem; }
  /* FIX: hero-sub was sitting too close to the title on mobile.
     The eyebrow was overlapping the nav on small screens.
     Added breathing room via margin adjustments. */
  .hero-eyebrow { margin-bottom: 1rem; font-size: .65rem; }
  .hero-sub    { margin: 1rem 0 2rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline { width: 100%; max-width: 280px; text-align: center; }
}
@media (max-width: 480px) {
  .hero-title  { font-size: clamp(3rem, 18vw, 4.5rem); }
  .stage-light { display: none; }
  /* FIX: on very small screens the eyebrow text was colliding with nav */
  .hero-content { padding-top: 1.5rem; }
  .hero-eyebrow { display: none; }
}

/* ── B2: About Section (homepage snippet) ── */
@media (max-width: 1024px) {
  #about .about-inner { grid-template-columns: 1fr; }
  .about-visual       { height: 300px; }
}

/* ── B3: Services Grid (homepage 3-col) ── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .service-card  { padding: 2rem 1.5rem; }
}

/* ── B4: Showcase Grid ── */
@media (max-width: 768px) {
  .showcase-grid              { grid-template-columns: 1fr; grid-template-rows: auto; }
  .showcase-item:first-child  { grid-row: auto; }
  .showcase-item              { min-height: 200px; }
  .showcase-header            { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ── B5: Stats Grid (homepage) ── */
@media (max-width: 1024px) {
  .stats-grid                    { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .stat-item:nth-child(2)::after { display: none; }
}
@media (max-width: 768px) {
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .stat-item::after { display: none; }
}

/* ── B6: Gallery Grid (homepage) ── */
@media (max-width: 768px) {
  .gallery-grid                        { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gallery-item                        { height: 160px; }
  .gallery-item:nth-child(1)           { grid-column: span 2; height: 200px; }
  .gallery-item:nth-child(5)           { grid-column: span 2; }
}
@media (max-width: 480px) {
  .gallery-grid                        { grid-template-columns: 1fr; }
  .gallery-item                        { height: 150px; }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5)           { grid-column: span 1; height: 180px; }
}

/* ── B7: Testimonials Slider (homepage) ── */
@media (max-width: 768px) {
  .slider-nav          { display: none; }
  .testimonial-slide   { padding: 0 1rem; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION C — pages/about.html
   ═══════════════════════════════════════════════════════════════ */

/* ── C1: Story Two-Column ── */
@media (max-width: 1024px) {
  .story-inner       { grid-template-columns: 1fr; }
  .story-visual      { height: 320px; }
}
@media (max-width: 768px) {
  .story-img-main    { width: 100%; }
  .story-float       { bottom: -20px; }
}

/* ── C2: Values Grid ── */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ── C3: Team Grid ── */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .team-grid   { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .team-avatar { width: 90px; height: 90px; font-size: 2rem; }
}

/* ── C4: Timeline ── */
@media (max-width: 768px) {
  .timeline::before                        { left: 20px; }
  .timeline-item,
  .timeline-item:nth-child(even)           { flex-direction: column; padding-left: 3rem; }
  .timeline-item:nth-child(even)
  .timeline-content                        { text-align: left; }
  .timeline-dot                            { left: 20px; }
  .timeline-content                        { width: 100%; }
}

/* ── C5: Stats Strip (about page) ── */
@media (max-width: 1024px) {
  .stats-grid                    { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .stat-item:nth-child(2)::after { display: none; }
}
@media (max-width: 768px) {
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .stat-item::after { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION D — pages/services.html
   ═══════════════════════════════════════════════════════════════ */

/* ── D1: Service Detail Blocks ── */
@media (max-width: 1024px) {
  .service-block         { grid-template-columns: 1fr; gap: 3rem; }
  .service-block.reverse { direction: ltr; }
  .service-visual        { height: 280px; }
}
@media (max-width: 480px) {
  .service-visual        { height: 220px; }
  .service-visual-icon   { font-size: 5rem; }
}

/* ── D2: Service Tag Row ── */
@media (max-width: 768px) {
  .service-tag-row { gap: .4rem; }
}

/* ── D3: Process Steps ── */
@media (max-width: 1024px) {
  .process-steps        { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .process-steps::before { display: none; }
}
@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* ── D4: Services Stats Strip ── */
@media (max-width: 1024px) {
  .services-stats .sg                    { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .services-stats .si:nth-child(2)::after { display: none; }
}
@media (max-width: 768px) {
  .services-stats .sg       { grid-template-columns: repeat(2, 1fr); }
  .services-stats .si::after { display: none; }
}
@media (max-width: 480px) {
  .services-stats .sg { gap: 2rem; }
}

/* ── D5: Packages Grid ── */
@media (max-width: 1024px) {
  .packages-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .packages-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION E — pages/portfolio.html
   ═══════════════════════════════════════════════════════════════ */

/* ── E1: Filter Bar ── */
@media (max-width: 480px) {
  .filter-bar  { gap: .5rem; }
  .filter-btn  { padding: .4rem 1rem; font-size: .72rem; }
}

/* ── E2: Portfolio Grid ── */
@media (max-width: 1024px) {
  .portfolio-grid                  { grid-template-columns: repeat(2, 1fr); }
  .portfolio-card:first-child      { grid-column: span 2; }
}
@media (max-width: 768px) {
  .portfolio-grid                  { grid-template-columns: 1fr; }
  .portfolio-card:first-child      { grid-column: span 1; min-height: 240px; }
}

/* ── E3: Case Study ── */
@media (max-width: 1024px) {
  .case-inner  { grid-template-columns: 1fr; gap: 3rem; }
  .case-visual { height: 300px; }
}
@media (max-width: 768px) {
  .case-stats  { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  .case-badge  { right: 0; top: 1rem; }
}
@media (max-width: 480px) {
  .case-stats      { gap: .5rem; }
  .case-stat .num  { font-size: 1.5rem; }
}

/* ── E4: Gallery Strip ── */
@media (max-width: 1024px) {
  .gallery-strip-grid              { grid-template-columns: repeat(2, 1fr); }
  .g-strip-item:nth-child(1)       { grid-column: span 2; }
}
@media (max-width: 768px) {
  .gallery-strip-grid              { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .g-strip-item                    { height: 140px; }
  .g-strip-item:nth-child(1)       { grid-column: span 2; height: 200px; }
}

/* ── E5: Testimonials Slider (portfolio page) ── */
@media (max-width: 768px) {
  .pt-nav    { display: none; }
  .pt-slide  { padding: 0 1.5rem; }
  .pt-quote  { font-size: 1.05rem; }
}
@media (max-width: 480px) {
  .pt-slide  { padding: 0 .5rem; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION F — pages/contact.html
   ═══════════════════════════════════════════════════════════════ */

/* ── F1: Contact Two-Column Layout ── */
@media (max-width: 1024px) {
  .contact-inner { grid-template-columns: 1fr; gap: 3.5rem; }
}

/* ── F2: Contact Form ── */
@media (max-width: 768px) {
  .form-row           { grid-template-columns: 1fr; }
  .contact-form-wrap  { padding: 1.8rem 1.5rem; }
}
@media (max-width: 480px) {
  .contact-form-wrap  { padding: 1.5rem 1.2rem; }
  .faq-q              { font-size: .88rem; }
}

/* ── F3: Offices Grid ── */
@media (max-width: 1024px) {
  .offices-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .offices-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION G — pages/newsroom.html
   ═══════════════════════════════════════════════════════════════ */

/* ── G1: Featured Article Layout ── */
@media (max-width: 1024px) {
  .news-featured          { grid-template-columns: 1fr; }
  .news-featured-main     { height: 320px; }
  .news-featured-side     { flex-direction: row; }
  .news-featured-small    { min-height: 180px; }
}
@media (max-width: 768px) {
  .news-featured-side     { flex-direction: column; }
  .news-featured-main     { height: 260px; }
}

/* ── G2: News Grid ── */
@media (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ── G3: News Card Details ── */
@media (max-width: 480px) {
  .news-title.lg   { font-size: 1.5rem; }
  .news-card       { min-height: 200px; }
  .news-overlay    { padding: 1.2rem; }
}

/* ── G4: News Filter Bar ── */
@media (max-width: 768px) {
  .news-filter { gap: .5rem; }
}

/* ── G5: Press Grid ── */
@media (max-width: 1024px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .press-grid { grid-template-columns: 1fr; }
}

/* ── G6: Newsletter Form ── */
@media (max-width: 768px) {
  .newsletter-form { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION H — pages/clients.html
   ═══════════════════════════════════════════════════════════════ */

/* ── H1: Industries Grid ── */
@media (max-width: 1024px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .industries-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .industries-grid { grid-template-columns: 1fr; }
}

/* ── H2: Client Stories Grid ── */
@media (max-width: 768px) {
  .client-stories-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .client-stories-grid { grid-template-columns: 1fr; }
}

/* ── H3: Clients Stats Strip ── */
@media (max-width: 1024px) {
  .clients-stats .stats-grid                    { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .clients-stats .stat-item:nth-child(2)::after { display: none; }
}
@media (max-width: 768px) {
  .clients-stats .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .clients-stats .stat-item::after { display: none; }
}

/* ── H4: Partner Program ── */
@media (max-width: 1024px) {
  .partner-program { grid-template-columns: 1fr; gap: 3rem; }
  .pp-visual       { display: none; }
}

/* ── H5: CTA Inline Strip ── */
@media (max-width: 768px) {
  .cta-inline         { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}