/* Base styles target 360px and up. Breakpoints below adjust upward. */

/* Tightened primary-nav spacing — the 6-item nav (Home/About/Services/
   Security Cameras/Deals/Contact) plus the branding plate and the
   "Llame para una Cotización Gratis" CTA button no longer fit the default
   40px gaps between roughly 1024px and 1365px, most visibly on Spanish
   pages where the labels run longer: the CTA button was pushed past the
   viewport edge. This doesn't touch the sub-1023px hamburger breakpoint
   below, which still applies on top of this one. */
@media (max-width: 1365px) {
	.sss-primary-row__inner {
		gap: var(--sss-space-4);
	}

	.sss-nav-menu {
		gap: var(--sss-space-3);
	}

	.sss-nav-menu a {
		font-size: 0.9375rem;
	}

	.sss-primary-row__cta .sss-btn--primary {
		padding-inline: 18px;
		font-size: 0.875rem;
	}
}

/* Gutter system: 32px desktop (default), 28px tablet, 20px mobile —
   applied here rather than baked into .sss-container so it works for
   every content-width variant. */
@media (max-width: 1023px) {
	.sss-container,
	.sss-container--default,
	.sss-container--reading,
	.sss-container--full {
		padding-inline: var(--sss-gutter-tablet);
	}

	.sss-hero--video-bg {
		padding-block: 104px 72px;
	}

	.sss-nav-menu {
		display: none;
	}

	.sss-nav-toggle {
		display: inline-flex;
	}

	.sss-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sss-container,
	.sss-container--default,
	.sss-container--reading,
	.sss-container--full {
		padding-inline: var(--sss-gutter-mobile);
	}

	.sss-primary-row__cta .sss-btn--primary {
		display: none;
	}

	/* Logo + toggle must fit one row at 360-767px: cap the logo and let the
	   plate shrink with it so the menu button never leaves the viewport. */
	/* Its menu is already hidden below 1024px; the empty flex:1 box would
	   only eat a gap's worth of row width. */
	.sss-primary-nav {
		display: none;
	}

	.sss-branding {
		min-width: 0;
	}

	.sss-branding__link,
	.sss-branding__plate {
		min-width: 0;
		max-width: 100%;
	}

	.sss-branding__logo {
		width: auto;
		height: auto;
		min-width: 0;
		max-width: min(250px, 100%);
	}

	.sss-nav-promo__cta {
		display: none;
	}

	.sss-nav-promo__text {
		max-width: 46vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sss-nav-promo__lang {
		padding: 3px 7px;
	}

	.sss-hero--video-bg {
		padding-block: 72px 48px;
	}

	.sss-page-hero {
		padding-block: 56px 64px;
	}

	/* Single column below tablet width — the 2-column footer (still used
	   at 768–1023px) was previously only dropping to 1 column under 390px,
	   so most phones (390–767px, which is most current devices) showed a
	   cramped 2-column footer instead. */
	.sss-footer__inner {
		grid-template-columns: 1fr;
	}

	/* Footer columns are left-aligned by default; centered here to match
	   the single-column mobile layout above instead of every column's
	   text sitting flush against the left edge underneath the others. */
	.sss-footer__brand,
	.sss-footer__hours,
	.sss-footer__legal {
		text-align: center;
	}

	.sss-footer__logo,
	.sss-footer__brand .custom-logo {
		margin-inline: auto;
	}

	.sss-footer__list,
	.sss-footer__contact,
	.sss-footer__hours {
		align-items: center;
	}

	.sss-footer__social,
	.sss-footer__legal {
		justify-content: center;
	}

	/* Center content on mobile (client direction) — these are the site's
	   repeated "heading + lede" section-intro blocks (desktop default is
	   left-aligned per the design system), plus the hero message. Centering
	   the wrapper alone isn't enough where the heading/paragraph inside
	   carries its own max-width/ch cap (that box would stay left-anchored
	   within the now-centered wrapper), so those get margin-inline:auto too.
	   Card/grid content below each intro is left as-is — those already have
	   their own layout logic and aren't part of this. */
	.sss-hero__message,
	.sss-hs-detail__band-inner,
	.sss-bs-detail__band-inner,
	.sss-config__intro,
	.sss-solutions__intro,
	.sss-deals-packages__intro,
	.sss-deals-more__intro,
	.sss-services-hero__text,
	.sss-bs-types__intro {
		text-align: center;
		margin-inline: auto;
	}

	.sss-hero__message h1,
	.sss-hero__message .sss-hero__body,
	.sss-hs-detail__band-inner h2,
	.sss-bs-detail__band-inner h2,
	.sss-config__intro h2,
	.sss-solutions__intro h2,
	.sss-deals-packages__intro h2,
	.sss-deals-more__intro h2,
	.sss-services-hero__text h1,
	.sss-bs-types__intro h2 {
		margin-inline: auto;
	}

	.sss-hero__actions {
		justify-content: center;
	}
}

@media (max-width: 479px) {
	.sss-nav-promo__phone {
		display: none;
	}

	.sss-nav-promo__text {
		max-width: 40vw;
	}
}

@media (max-width: 389px) {
	.sss-branding__logo {
		height: auto;
		max-width: min(220px, 100%);
	}

	.sss-nav-promo .sss-icon {
		display: none;
	}
}