/**
 * Responsive Styles — Eco Balloon Stand Theme
 * Mobile-first breakpoints with per-component transitions
 *
 * Breakpoints:
 *   xs:  < 480px       (small phones)
 *   sm:  480–599px     (large phones)
 *   md:  600–767px     (small tablets / large phones landscape)
 *   lg:  768–899px     (tablets)
 *   xl:  900–1023px    (large tablets / small desktops)
 *   2xl: 1024–1279px   (small desktops)
 *   3xl: 1280–1439px   (laptops)
 *   4xl: 1440px+       (widescreen / large desktops)
 */

/* Sustainability — extra top spacing so the label/title clear the section edge on small screens */
@media (max-width: 599px) {
	.section.section--sustainability {
		padding-block-start: 3.5rem;
	}
}

@media (min-width: 600px) and (max-width: 899px) {
	.section.section--sustainability {
		padding-block-start: 4.5rem;
	}
}

/* ============================================================
   BASE MOBILE (< 480px) — small phones
   ============================================================ */

@media (max-width: 479px) {

	html, body {
		overflow-x: hidden;
		max-width: 100vw;
	}

	/* --- Sections --- */
	.section {
		padding-block: 2.5rem;
	}

	.section-header {
		margin-block-end: 1.5rem;
	}

	.section-title {
		font-size: clamp(1.4rem, 4.5vw, 1.75rem);
	}

	.section-label {
		font-size: 0.625rem;
	}

	/* --- Hero --- */
	.section--hero {
		padding-bottom: 2rem;
	}

	.section--hero .hero__content {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1rem;
		padding: 2rem var(--section-pad-x) 0;
		text-align: center;
	}

	.hero__badge {
		margin-inline: auto;
	}

	.hero__subline {
		margin-inline: auto;
		max-width: 100%;
		font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
	}

	.hero__product-img {
		max-width: 100%;
		max-height: none;
	}

	.hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 0.5rem 0.65rem;
	}

	.hero__ctas .wp-block-button {
		flex: 1 1 calc(50% - 0.35rem);
		max-width: calc(50% - 0.2rem);
		min-width: 0;
	}

	.hero__ctas .wp-block-button__link {
		width: 100%;
		max-width: none;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
	}

	.hero__trust {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.35rem 0.55rem;
	}

	.hero__trust .trust-item {
		flex: 0 1 auto;
		flex-direction: row;
		gap: 0.35rem;
		text-align: left;
	}

	/* --- Grids: all 1-col --- */
	.components-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.usp-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.applications-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.application-card--featured {
		grid-column: 1 / -1;
		grid-row: auto;
		grid-template-columns: 1fr !important;
	}

	.media-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}

	/* --- Two-column layouts: stack --- */
	.distributors-layout,
	.contact-layout {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}

	/* --- Assembly: compact on mobile --- */
	.assembly-showcase__stage {
		padding-top: 0.75rem;
	}

	.assembly-panel-card__body {
		padding: 0.75rem 1rem 1.25rem;
	}

	.assembly-panel-card__badge {
		padding: 0.65rem 1rem;
	}

	/* --- Product cards: compact body on mobile --- */
	.product-card__body {
		padding: 1.25rem;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.step-connector {
		display: none;
	}

	.step-item {
		flex-direction: row;
		align-items: flex-start;
		gap: 1rem;
		text-align: left;
	}

	/* --- Forms --- */
	.form-row--half {
		grid-template-columns: 1fr;
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: 1fr !important;
		gap: 2rem;
	}

	.footer-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-nav-grid {
		grid-template-columns: 1fr;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}

	.footer-legal-list {
		justify-content: center;
	}

	/* --- Mobile bottom nav --- */
	.mobile-bottom-nav {
		display: flex;
	}

	body {
		padding-bottom: 4rem;
	}

	/* --- WhatsApp --- */
	.whatsapp-button {
		bottom: 5.5rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
	}

	.whatsapp-button svg {
		width: 20px;
		height: 20px;
	}
}

/* ============================================================
   LARGE PHONES (480px – 599px)
   ============================================================ */

@media (min-width: 480px) and (max-width: 599px) {

	/* --- Sections --- */
	.section {
		padding-block: 3rem;
	}

	.section-header {
		margin-block-end: 1.75rem;
	}

	.section-title {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}

	/* --- Hero --- */
	.section--hero {
		padding-bottom: 2.5rem;
	}

	.section--hero .hero__content {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1rem;
		padding: 2.75rem var(--section-pad-x) 0;
		text-align: center;
	}

	.hero__badge {
		margin-inline: auto;
	}

	.hero__subline {
		margin-inline: auto;
		max-width: 36rem;
	}

	.hero__product-img {
		max-width: 100%;
		max-height: none;
	}

	.hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 0.5rem 0.75rem;
	}

	.hero__ctas .wp-block-button {
		flex: 1 1 calc(50% - 0.35rem);
		max-width: calc(50% - 0.2rem);
		min-width: 0;
	}

	.hero__ctas .wp-block-button__link {
		width: 100%;
		max-width: none;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
	}

	.hero__trust {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.35rem 0.65rem;
	}

	.hero__trust .trust-item {
		flex: 0 1 auto;
	}

	/* --- Grids --- */
	.components-grid {
		grid-template-columns: 1fr;
		gap: 1.125rem;
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.usp-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.applications-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.application-card--featured {
		grid-column: 1 / -1;
		grid-template-columns: 1fr !important;
	}

	.media-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}

	/* --- Two-column layouts: stack --- */
	.distributors-layout,
	.contact-layout {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}

	/* --- Assembly: compact --- */
	.assembly-showcase__stage {
		padding-top: 1rem;
	}

	.assembly-panel-card__body {
		padding: 0.75rem 1.25rem 1.5rem;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.step-connector {
		display: none;
	}

	/* --- Forms --- */
	.form-row--half {
		grid-template-columns: 1fr;
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 2rem;
	}

	.footer-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}

	.footer-legal-list {
		justify-content: center;
	}

	/* --- Mobile bottom nav --- */
	.mobile-bottom-nav {
		display: flex;
	}

	body {
		padding-bottom: 4rem;
	}

	/* --- WhatsApp --- */
	.whatsapp-button {
		bottom: 5.5rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
	}

	.whatsapp-button svg {
		width: 20px;
		height: 20px;
	}
}

/* ============================================================
   SMALL TABLETS / LANDSCAPE (600px – 767px)
   ============================================================ */

@media (min-width: 600px) and (max-width: 767px) {

	/* --- Sections --- */
	.section {
		padding-block: 3.5rem;
	}

	.section-header {
		margin-block-end: 2rem;
	}

	.section-title {
		font-size: clamp(1.6rem, 4vw, 2.25rem);
	}

	/* --- Hero --- */
	.section--hero {
		padding-bottom: 2.5rem;
	}

	.section--hero .hero__content {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1.25rem;
		padding: 3rem var(--section-pad-x) 0;
		text-align: center;
	}

	.hero__badge {
		margin-inline: auto;
	}

	.hero__subline {
		margin-inline: auto;
		max-width: 36rem;
	}

	.hero__product-img {
		max-width: 100%;
		max-height: none;
	}

	.hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 0.5rem 0.85rem;
	}

	.hero__ctas .wp-block-button {
		flex: 1 1 auto;
		min-width: min(12rem, 44%);
		max-width: calc(50% - 0.25rem);
	}

	.hero__ctas .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
	}

	.hero__trust {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.4rem 0.85rem;
	}

	.hero__trust .trust-item {
		flex: 0 1 auto;
	}

	/* --- Grids: 2-col where it fits --- */
	.components-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.125rem;
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	.usp-grid {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	.applications-grid {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	.application-card--featured {
		grid-column: 1 / -1;
		grid-template-columns: 1fr !important;
	}

	.media-grid {
		grid-template-columns: 1fr !important;
		gap: 1.1rem;
	}

	/* --- Two-column layouts: stack --- */
	.distributors-layout,
	.contact-layout {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}

	/* --- Assembly --- */
	.assembly-showcase__stage {
		padding-top: 2rem;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.step-connector {
		display: none;
	}

	/* --- Forms --- */
	.form-row--half {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 2rem;
	}

	.footer-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}

	.footer-legal-list {
		justify-content: center;
	}

	/* --- Mobile bottom nav --- */
	.mobile-bottom-nav {
		display: flex;
	}

	body {
		padding-bottom: 4rem;
	}

	/* --- WhatsApp --- */
	.whatsapp-button {
		bottom: 5.5rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
	}

	.whatsapp-button svg {
		width: 20px;
		height: 20px;
	}
}

/* ============================================================
   TABLETS (768px – 899px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 899px) {

	/* --- Sections --- */
	.section {
		padding-block: 4rem;
	}

	.section-header {
		margin-block-end: 2.5rem;
	}

	/* --- Hero: still stacked, larger image --- */
	.section--hero .hero__content {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1.35rem;
		padding: 3.25rem var(--section-pad-x) 0;
		text-align: center;
	}

	.hero__badge {
		margin-inline: auto;
	}

	.hero__subline {
		margin-inline: auto;
		max-width: 36rem;
	}

	.hero__product-img {
		max-width: min(24rem, 100%);
		max-height: none;
	}

	.hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 0.5rem 1rem;
	}

	.hero__ctas .wp-block-button {
		flex: 1 1 auto;
		min-width: min(12rem, 44%);
		max-width: calc(50% - 0.35rem);
	}

	.hero__ctas .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
	}

	.hero__trust {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.45rem 0.9rem;
	}

	.hero__trust .trust-item {
		flex: 0 1 auto;
	}

	/* --- Hide mobile nav --- */
	.mobile-bottom-nav {
		display: none;
	}

	body {
		padding-bottom: 0;
	}

	/* --- Header: show nav --- */
	.site-header__nav {
		display: flex;
	}

	.site-header__nav .nav-link {
		font-size: 0.8125rem;
	}

	/* --- Grids --- */
	.components-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.usp-grid {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.applications-grid {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.application-card--featured {
		grid-column: 1 / -1;
		grid-template-columns: 1fr !important;
	}

	.media-grid {
		grid-template-columns: 1fr !important;
		gap: 1.2rem;
	}

	/* --- Two-column layouts: still stacked --- */
	.distributors-layout,
	.contact-layout {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}

	/* --- Assembly: single column --- */
	.assembly-showcase__stage {
		padding-top: 2rem;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: row;
	}

	.step-connector {
		display: block;
	}

	/* --- Forms --- */
	.form-row--half {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 2.5rem;
	}

	.footer-inner {
		grid-template-columns: 1fr 2fr;
	}

	.footer-nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* --- WhatsApp --- */
	.whatsapp-button {
		bottom: 1.5rem;
		right: 1.5rem;
	}
}

/* ============================================================
   LARGE TABLETS (900px – 1023px)
   ============================================================ */

@media (min-width: 900px) and (max-width: 1023px) {

	/* --- Sections --- */
	.section {
		padding-block: 4.5rem;
	}

	/* --- Hero: 2-column --- */
	.section--hero .hero__content {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: clamp(1.25rem, 2vw, 2rem);
	}

	.hero__trust {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}

	/* --- Hide mobile nav --- */
	.mobile-bottom-nav {
		display: none;
	}

	body {
		padding-bottom: 0;
	}

	/* --- Header: show nav + CTA --- */
	.site-header__nav {
		display: flex;
	}

	.site-header__cta {
		display: flex;
	}

	/* --- Grids --- */
	.components-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}

	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.usp-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}

	.applications-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.application-card--featured {
		grid-column: 1 / -1;
	}

	.media-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* --- Two-column layouts: side by side --- */
	.distributors-layout,
	.contact-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
		gap: 2.5rem !important;
	}

	/* --- Assembly: 2-column sticky --- */
	.assembly-showcase__stage {
		padding-top: 3rem;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: row;
	}

	.step-connector {
		display: block;
	}

	/* --- Forms --- */
	.form-row--half {
		grid-template-columns: repeat(2, 1fr);
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 2.5rem;
	}

	.footer-inner {
		grid-template-columns: 1fr 3fr;
	}

	.footer-nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* --- WhatsApp --- */
	.whatsapp-button {
		bottom: 1.5rem;
		right: 1.5rem;
	}
}

/* ============================================================
   SMALL DESKTOPS (1024px – 1279px)
   ============================================================ */

@media (min-width: 1024px) and (max-width: 1279px) {

	/* --- Sections --- */
	.section {
		padding-block: 5rem;
	}

	/* --- Hide mobile nav --- */
	.mobile-bottom-nav {
		display: none;
	}

	body {
		padding-bottom: 0;
	}

	/* --- Header --- */
	.site-header__cta {
		display: flex;
	}

	/* --- Hero --- */
	.section--hero .hero__content {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.82fr);
		gap: clamp(1.35rem, 2vw, 2.25rem);
	}

	.hero__trust {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}

	/* --- Grids: all 3-col --- */
	.components-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.usp-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.applications-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.application-card--featured {
		grid-column: 1 / -1;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: row;
	}

	.step-connector {
		display: block;
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
	}

	.footer-inner {
		grid-template-columns: 1fr 3fr;
	}

	.footer-nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================
   LAPTOPS (1280px – 1439px)
   ============================================================ */

@media (min-width: 1280px) and (max-width: 1439px) {

	/* --- Hide mobile nav --- */
	.mobile-bottom-nav {
		display: none;
	}

	body {
		padding-bottom: 0;
	}

	/* --- Compact laptop padding — ~35px --- */
	:root {
		--section-pad-x: 2.2rem;
	}

	/* --- Header --- */
	.site-header__cta {
		display: flex;
	}

	.header-inner {
		padding-inline: 2.2rem;
	}

	/* --- Hero --- */
	.section--hero .hero__content {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.82fr);
		gap: clamp(1.5rem, 2vw, 2.5rem);
	}

	.hero__trust {
		display: flex;
		flex-wrap: wrap;
		gap: 0.65rem 1.1rem;
	}

	/* --- Grids: all 3-col --- */
	.components-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.usp-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.applications-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;
	}

	.application-card--featured {
		grid-column: 1 / -1;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: row;
	}

	.step-connector {
		display: block;
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
	}

	.footer-inner {
		grid-template-columns: 20rem 1fr;
		padding-inline: 2.2rem;
	}

	.footer-nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================
   LARGE DESKTOPS / WIDESCREEN (1440px+)
   ============================================================ */

@media (min-width: 1440px) {

	/* --- Hide mobile nav --- */
	.mobile-bottom-nav {
		display: none;
	}

	body {
		padding-bottom: 0;
	}

	/* --- Widescreen padding --- */
	:root {
		--section-pad-x: clamp(2.5rem, 3vw, 5rem);
	}

	/* --- Header --- */
	.site-header__cta {
		display: flex;
	}

	.header-inner {
		padding-inline: clamp(2.5rem, 3vw, 5rem);
	}

	/* --- Hero --- */
	.section--hero .hero__content {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.82fr);
		gap: clamp(1.5rem, 2vw, 2.5rem);
	}

	.hero__trust {
		display: flex;
		flex-wrap: wrap;
		gap: 0.65rem 1.1rem;
	}

	/* --- Grids: all 3-col --- */
	.components-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.usp-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.applications-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;
	}

	.application-card--featured {
		grid-column: 1 / -1;
	}

	/* --- Steps --- */
	.steps-timeline {
		flex-direction: row;
	}

	.step-connector {
		display: block;
	}

	/* --- Footer --- */
	.footer-top {
		grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
	}

	.footer-inner {
		grid-template-columns: 20rem 1fr;
		padding-inline: clamp(2.5rem, 3vw, 5rem);
	}

	.footer-nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================
   VERY NARROW PHONES — stack grids & CTAs only when needed
   ============================================================ */

@media (max-width: 379px) {
	.hero__ctas .wp-block-button {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

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

@media print {

	.site-header,
	.mobile-bottom-nav,
	.whatsapp-button,
	.section--hero .hero__ctas,
	.footer-bottom {
		display: none !important;
	}

	.section--hero .hero__bg {
		background-image: none !important;
	}

	.section--hero .hero__visual {
		display: block !important;
	}

	.section {
		page-break-inside: avoid;
		padding-block: 1.5rem;
	}

	body {
		color: #000;
		background: #fff;
		padding-bottom: 0;
	}
}