/* ==========================================================================
   SUMA MATERIALS — responsive.css
   --------------------------------------------------------------------------
   Breakpoints (all driven by tokens so Elementor settings still apply):
     ≤ 1200px  large desktop tweaks
     ≤ var(--suma-mobile-break, 1000px)  tablet: mobile menu, single columns
     ≤ 700px   phone: tighter type, stacked grids
     ≤ 400px   very small phones
   Plus: print styles and prefers-reduced-motion.
   ========================================================================== */


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (max-width: 1200px) {

	.suma-intro-grid,
	.suma-project-heading,
	.suma-supply-top,
	.suma-rfq-heading,
	.suma-faq-grid {
		gap: 60px;
	}

	.suma-reference-grid {
		gap: 60px;
	}

	.suma-nav {
		gap: 20px;
		margin-right: 16px;
	}

	.suma-quality-content {
		padding-left: 48px;
	}
}


/* ==========================================================================
   TABLET (mobile navigation kicks in)
   ========================================================================== */

@media (max-width: 1000px) {

	.suma-nav {
		display: none;
	}

	.suma-menu-toggle {
		display: inline-flex;
	}

	.suma-header-cta {
		display: none;
	}

	.suma-hero-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-bottom: 130px;
	}

	.suma-hero-location {
		order: 2;
	}

	.suma-hero-content {
		order: 1;
	}

	.suma-intro-grid,
	.suma-project-heading,
	.suma-supply-top,
	.suma-reference-grid,
	.suma-rfq-heading,
	.suma-faq-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.suma-intro h2 {
		max-width: 20ch;
	}

	.suma-project-heading p,
	.suma-supply-top p,
	.suma-rfq-intro {
		align-self: start;
		max-width: 62ch;
	}

	.suma-material-layout {
		grid-template-columns: 1fr;
		min-height: 0;
		border-bottom: 0;
	}

	.suma-material-visual {
		min-height: 520px;
		order: 1;
		border-bottom: 1px solid var(--suma-line);
	}

	.suma-material-list {
		order: 2;
	}

	.suma-project-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 300px;
	}

	.suma-span-large,
	.suma-span-wide,
	.suma-span-half,
	.suma-span-third,
	.suma-span-full {
		grid-column: span 1;
		grid-row: span 1;
	}

	.suma-span-large {
		grid-column: span 2;
	}

	.suma-process {
		grid-template-columns: repeat(2, 1fr);
	}

	.suma-quality {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.suma-quality-image {
		min-height: 460px;
		order: 1;
	}

	.suma-quality-content {
		order: 2;
		padding: 70px max(var(--suma-gutter), 24px);
	}

	.suma-route {
		min-height: 560px;
	}

	.suma-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.suma-testimonial-grid {
		grid-template-columns: 1fr;
	}

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

	.suma-footer-brand {
		grid-column: 1 / -1;
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

	.suma {
		--suma-gutter: 20px;
	}

	.suma-header {
		top: calc(var(--suma-header-top-m, 10px) + var(--suma-adminbar));
		height: var(--suma-header-h-m, 58px);
		width: calc(100% - 20px);
		padding: 0 12px 0 16px;
		gap: 10px;
	}

	.suma-logo {
		font-size: 15px;
	}

	.suma-logo small {
		font-size: 7px;
	}

	.suma-logo-image {
		height: 26px;
	}

	.suma-project-button {
		display: none;
	}

	.suma-hero {
		min-height: var(--suma-hero-min-mobile, 760px);
	}

	.suma-hero-grid {
		width: calc(100% - 40px);
		padding-bottom: 130px;
		gap: 18px;
	}

	body.suma-header-sticky .suma-hero-grid {
		padding-top: calc(var(--suma-header-h-m, 58px) + 40px);
	}

	.suma-hero-title,
	.suma h1.suma-hero-title {
		font-size: clamp(42px, 13.5vw, 72px);
		margin-bottom: 20px;
	}

	.suma-hero-text {
		font-size: 14px;
		margin-bottom: 26px;
	}

	.suma-hero-actions .suma-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.suma-hero-bottom {
		grid-template-columns: repeat(2, 1fr);
		min-height: 0;
	}

	.suma-hero-bottom > div {
		min-height: 46px;
		padding: 10px;
		font-size: 7.5px;
		border-bottom: 1px solid rgba(255, 255, 255, .16);
	}

	.suma-hero-bottom > div:nth-child(even) {
		border-right: 0;
	}

	.suma-hero-bottom > div:nth-last-child(-n+2) {
		border-bottom: 0;
	}

	.suma-section {
		width: calc(100% - 40px);
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.suma-projects,
	.suma-supply {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	.suma-section-label {
		margin-bottom: 28px;
	}

	.suma h2 {
		font-size: clamp(38px, 12vw, 62px);
	}

	.suma-lead {
		font-size: 18px;
	}

	.suma-material-visual {
		min-height: 420px;
	}

	.suma-material-item {
		padding: 19px 0;
		grid-template-columns: 36px 1fr 20px;
	}

	.suma-material-item strong {
		font-size: 13px;
	}

	.suma-material-caption {
		left: 14px;
		right: 14px;
		bottom: 14px;
		padding: 14px;
		gap: 12px;
	}

	.suma-material-caption strong {
		font-size: 11px;
	}

	.suma-material-caption small {
		font-size: 10px;
	}

	.suma-material-link {
		display: none;
	}

	.suma-project-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 260px;
	}

	.suma-span-large {
		grid-column: span 1;
		grid-row: span 1;
		min-height: 320px;
	}

	.suma-project-card-content > a {
		opacity: 1;
		transform: none;
	}

	.suma-process {
		grid-template-columns: 1fr;
	}

	.suma-process-item {
		min-height: 200px;
		padding: 24px;
	}

	.suma-process-item > span {
		padding-bottom: 34px;
	}

	.suma-route {
		min-height: 520px;
		padding: 90px 0;
	}

	.suma-route-content {
		width: calc(100% - 40px);
	}

	.suma-route-title {
		font-size: clamp(56px, 22vw, 110px);
	}

	.suma-route-text {
		margin: 26px auto 40px;
		font-size: 14px;
	}

	.suma-route-line {
		flex-wrap: wrap;
		gap: 10px;
	}

	.suma-route-line i {
		width: 22px;
	}

	.suma-upload {
		min-height: 78px;
	}

	.suma-quality-image {
		min-height: 380px;
	}

	.suma-quality-content {
		padding: 70px 20px;
	}

	.suma-quality-points {
		margin-top: 40px;
	}

	.suma-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.suma-field-wide {
		grid-column: auto;
	}

	.suma-field label {
		padding: 20px 0;
	}

	.suma-form-bottom {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.suma-submit {
		width: 100%;
		justify-content: space-between;
	}

	.suma-form-bottom small {
		max-width: none;
	}

	.suma-final {
		min-height: 520px;
		padding: 80px 22px;
	}

	.suma-final h2 {
		font-size: clamp(42px, 14vw, 76px);
		margin-bottom: 34px;
	}

	.suma-footer {
		padding: 60px 20px 26px;
	}

	.suma-footer-top {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-bottom: 40px;
	}

	.suma-footer-bottom {
		flex-direction: column;
		gap: 10px;
	}

	.suma-stats-grid {
		grid-template-columns: 1fr;
	}

	.suma-stat,
	.suma-stats-head {
		padding: 26px 22px;
	}

	.suma-faq-item summary {
		padding-right: 34px;
		font-size: 15px;
	}

	.suma-faq-answer {
		padding-right: 0;
	}

	.suma-testimonial {
		padding: 26px;
	}

	body.suma-header-sticky .suma-archive {
		padding-top: calc(var(--suma-header-h-m, 58px) + 60px);
	}

	body.suma-header-sticky .suma-single {
		padding-top: calc(var(--suma-header-h-m, 58px) + 50px);
	}

	body.suma-header-sticky .suma-error404 {
		padding-top: calc(var(--suma-header-h-m, 58px) + 90px);
	}

	.suma-post-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.suma-drawer {
		width: 100%;
	}

	.suma-floating {
		right: 14px;
		bottom: 14px;
	}

	.suma-floating a span {
		display: none;
	}

	.suma-floating a {
		width: 52px;
		height: 52px;
		min-height: 0;
		padding: 0;
		justify-content: center;
	}
}


/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 400px) {

	.suma-hero-title,
	.suma h1.suma-hero-title {
		font-size: clamp(34px, 11vw, 44px);
	}

	.suma h2 {
		font-size: clamp(32px, 10.5vw, 44px);
	}

	.suma-btn {
		min-height: 46px;
		padding: 0 16px;
		font-size: 9px;
	}

	.suma-header-actions {
		gap: 6px;
	}
}


/* ==========================================================================
   LARGE SCREENS
   ========================================================================== */

@media (min-width: 1800px) {

	.suma-hero-title,
	.suma h1.suma-hero-title {
		font-size: 118px;
	}
}


/* ==========================================================================
   TOUCH DEVICES — no hover states that "stick"
   ========================================================================== */

@media (hover: none) {

	.suma-project-card-content > a {
		opacity: 1;
		transform: none;
	}

	.suma-project-card:hover .suma-project-media {
		transform: none;
	}

	.suma-process-item:hover {
		transform: none;
		background: transparent;
	}

	.suma-card:hover {
		transform: none;
		box-shadow: none;
	}

	.suma-btn:hover,
	.suma-submit:hover {
		transform: none;
	}
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.suma *,
	.suma *::before,
	.suma *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	.suma-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.suma-hero:hover .suma-hero-image {
		transform: none;
	}
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

	.suma-header,
	.suma-mobile-menu,
	.suma-drawer,
	.suma-drawer-overlay,
	.suma-floating,
	.suma-hero-bottom,
	.suma-form-bottom .suma-submit {
		display: none !important;
	}

	.suma {
		background: #fff;
		color: #000;
	}

	.suma-hero {
		min-height: 0;
		color: #000;
	}

	.suma-hero-image,
	.suma-hero-overlay,
	.suma-route-bg,
	.suma-route-overlay,
	.suma-quality-image {
		display: none !important;
	}

	.suma-section {
		padding: 24px 0;
		width: 100%;
	}
}