/* SecurityTalent 1.7.0 — mobile experience (below 768px). */
:root { --st-mobile-gutter: 16px; }
html, body { overflow-x: hidden; }
body { min-width: 320px; -webkit-text-size-adjust: 100%; }
.container, .sppb-row-container { width: 100%; max-width: none !important; padding-inline: var(--st-mobile-gutter); }
.row { --bs-gutter-x: 1rem; }

/* Compact brand header and a single, reliable navigation trigger. */
#sp-top-bar { min-height: 68px; padding: 8px 0; }
#sp-top-bar .container, #sp-top-bar .container-inner { padding-inline: var(--st-mobile-gutter); }
#sp-top-bar .st-top-logo-module img, #sp-top-bar img.sclogo, #sp-top-bar .custom img { width: auto !important; max-width: 148px !important; max-height: 52px !important; object-fit: contain; }
#sp-top-bar .st-top-slogan, #sp-top-bar .st-logo-slogan { display: none !important; }
#sp-header { min-height: 60px; height: auto; }
#sp-header .logo, #sp-header .logo-image { max-width: 142px; height: auto; }
.sp-megamenu-parent { display: none !important; }
.st-header-auth { display: none !important; }
#offcanvas-toggler { display: inline-flex !important; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin-left: auto; }
.offcanvas-menu { width: min(88vw, 360px) !important; }
.offcanvas-menu .offcanvas-inner { padding: 24px 20px; }
.offcanvas-menu .menu > li > a, .offcanvas-menu .menu > li > span { display: flex; align-items: center; min-height: 48px; padding-block: 11px; font-size: 1rem; }
.offcanvas-menu .menu-child { padding-left: 14px; }
.st-responsive-auth { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); }
.st-responsive-auth > *, .st-responsive-auth a, .st-responsive-auth button { width: 100%; min-height: 48px; justify-content: center; text-align: center; }

/* Mobile type, spacing, and tap targets. */
body { font-size: 16px; line-height: 1.6; }
h1, .h1 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.08; }
h2, .h2 { font-size: clamp(1.65rem, 7vw, 2.15rem); line-height: 1.15; }
h3, .h3 { font-size: clamp(1.3rem, 5.5vw, 1.65rem); }
.btn, button, input[type="button"], input[type="submit"], input[type="reset"], select { min-height: 48px; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select { width: 100%; font-size: 16px; }
a, button { overflow-wrap: anywhere; }

/* Stack feature, profile and marketing sections without losing hierarchy. */
.st-grid, .st-card-grid, .st-contact-channels, .st-footer-nav .row, #sp-bottom .row { display: grid !important; grid-template-columns: 1fr !important; }
.st-profile-benefit-tab .row, .st-profile-benefit-tab [class*="sppb-row"], .st-contact-hero { display: grid !important; grid-template-columns: 1fr !important; }
.st-profile-benefit-tab [class*="col-"], .st-profile-benefit-tab [class*="sppb-col-"] { width: 100% !important; max-width: none !important; }
.st-profile-benefit-tab img { width: 100%; max-height: 340px; object-fit: cover; }
.st-profile-tabs-shell, .st-guest-access-panel, .st-founding-plan-notice { padding: 26px 18px !important; border-radius: 18px; }
.st-profile-tabs-heading { text-align: left; }
.st-profile-tabs-list, .st-journey-tabs { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding: 2px 0 10px; scrollbar-width: thin; }
.st-profile-tabs-list [role="tab"], .st-journey-tabs [role="tab"] { flex: 0 0 auto; min-height: 48px; scroll-snap-align: start; }
.st-guest-access-actions, .st-contact-primary-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; }
.st-guest-access-actions .btn, .st-contact-primary-actions .btn, .st-guest-signin { width: 100%; text-align: center; }

/* Hero images stay cinematic, while content remains visible and operable. */
.slideshow, .st-native-hero, [data-st-carousel] { min-height: 520px; }
.slideshow .swiper-slide, .st-native-hero [data-st-slide] { min-height: 520px; background-position: 64% center; }
.slideshow .item-content, .slideshow .slide-content, .st-native-hero .item-content { width: calc(100% - 32px) !important; max-width: none !important; margin: 0 16px; padding: 24px 18px !important; }
.slideshow .swiper-button-prev, .slideshow .swiper-button-next { width: 48px; height: 48px; }
.st-securitytalent-spotlight .owl-carousel > *, .st-member-journey .owl-carousel > * { min-width: 88%; scroll-snap-align: start; }
.st-spotlight-controls button, .st-journey-controls button { min-width: 48px; min-height: 48px; }

/* Joomla and StackIdeas applications: one readable column on phones. */
.es-container, .eb-container, .ed-container { display: block !important; }
.es-sidebar, .eb-sidebar, .ed-sidebar, .es-content, .eb-content, .ed-content { width: 100% !important; max-width: none !important; margin: 0 0 18px !important; }
.es-toolbar, .eb-toolbar, .ed-toolbar, [data-fd-toolbar], .o-toolbar { max-width: 100%; overflow-x: auto; white-space: nowrap; overscroll-behavior-inline: contain; }
.es-card, .eb-card, .ed-card, .o-card { border-radius: 14px; }
.st-policy-notice-host, .st-guest-access-panel--in-content { width: 100%; margin-inline: 0 !important; }
.st-subcategory-grid { grid-template-columns: 1fr !important; }

/* Footer and wide data remain contained. */
.st-footer-nav [class*="col-"], #sp-bottom [class*="col-"] { width: 100% !important; max-width: none !important; padding: 22px var(--st-mobile-gutter) !important; }
img, video, iframe { max-width: 100%; height: auto; }
table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.modal-dialog { width: calc(100% - 24px); margin: 12px auto; }

@media (max-width: 575.98px) {
  :root { --st-mobile-gutter: 14px; }
  #sp-top-bar { min-height: 62px; }
  #sp-top-bar .st-top-logo-module img, #sp-top-bar img.sclogo, #sp-top-bar .custom img { max-width: 132px !important; max-height: 46px !important; }
  .slideshow, .st-native-hero, [data-st-carousel], .slideshow .swiper-slide, .st-native-hero [data-st-slide] { min-height: 500px; }
  .st-securitytalent-spotlight .owl-carousel > *, .st-member-journey .owl-carousel > * { min-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}