/* ============================================================ aiact_section5_responsive.css Tablet/mobile responsiveness for the EU AI Act obligations section (.how-to-setup5 using the aiact-* layout). This mirrors law25_section5_responsive.css, but targets the AI-Act collage classes: aiact-body / aiact-collage / aiact-img-1..3 / aiact-label-1..3 / aiact-badge / aiact-deco-*. Unlike the Law 25 page, these collage classes are NOT defined in law25_v2_desktop.css, so there is no stale-collage conflict to override on desktop — law_description.css keeps handling >=1201px. This file only adds the missing 769–1200px stacking plus the phone tweaks. ⚠ LOAD ORDER: add this as the LAST stylesheet in , with NO media attribute, AFTER law25_v2_desktop.css: ============================================================ */ /* ============================================================ TABLET + MOBILE (<=1200px) — STACK everything iPad Pro (1024), iPad Air (820), iPad mini (768), phones. ============================================================ */ @media (max-width: 1200px) { /* Big centered section title scales down */ .how-to-setup5 .assess-your-compliance-container { font-size: clamp(26px, 4.5vw, 40px) !important; line-height: 1.2 !important; } /* Stack the two columns */ .how-to-setup5 .aiact-body { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 40px !important; width: 100% !important; } .how-to-setup5 .aiact-obligations-col { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; } .how-to-setup5 .aiact-card { width: 100% !important; } .how-to-setup5 .iso27-col-title { font-size: clamp(22px, 4vw, 30px) !important; } .how-to-setup5 .iso27-col-subtitle { font-size: 15px !important; } .how-to-setup5 .iso27-tooltip { width: 190px !important; } /* -------- Collage: kill absolute layout, stack fluidly -------- */ .how-to-setup5 .aiact-collage { position: static !important; width: 100% !important; max-width: 560px !important; height: auto !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; flex: 0 0 auto !important; } /* Each label ABOVE the image it describes (DOM is image-first) */ .how-to-setup5 .aiact-label-1 { order: 1 !important; } .how-to-setup5 .aiact-img-1 { order: 2 !important; } .how-to-setup5 .aiact-label-2 { order: 3 !important; } .how-to-setup5 .aiact-img-2 { order: 4 !important; } .how-to-setup5 .aiact-label-3 { order: 5 !important; } .how-to-setup5 .aiact-img-3 { order: 6 !important; } /* Decorative shapes + logo badge only work in the absolute layout */ .how-to-setup5 .aiact-badge, .how-to-setup5 .aiact-deco-1, .how-to-setup5 .aiact-deco-2, .how-to-setup5 .aiact-deco-3 { display: none !important; } /* Labels: static, full width, heading spacing above each image */ .how-to-setup5 .aiact-label-1, .how-to-setup5 .aiact-label-2, .how-to-setup5 .aiact-label-3 { position: static !important; top: auto !important; left: auto !important; width: 100% !important; margin: 0 !important; padding: 24px 0 8px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #000319 !important; } .how-to-setup5 .aiact-label-1 { padding-top: 0 !important; } /* Images: static, full width, rounded */ .how-to-setup5 .aiact-img-1, .how-to-setup5 .aiact-img-2, .how-to-setup5 .aiact-img-3 { position: static !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; border-radius: 10px !important; object-fit: cover !important; } } /* ============================================================ PADDING for tablet / small-laptop range (phones <=768px keep the base file's tighter padding) ============================================================ */ @media (min-width: 769px) and (max-width: 1200px) { .how-to-setup5 { padding-left: 40px !important; padding-right: 40px !important; } } /* ============================================================ SMALL PHONES ============================================================ */ @media (max-width: 480px) { .how-to-setup5 { padding-left: 16px !important; padding-right: 16px !important; } .how-to-setup5 .iso27-col-title { font-size: 21px !important; } .how-to-setup5 .iso27-tooltip { width: 170px !important; } }