/**
 * Fris Webdesign homepage — mobile layout (max 767px / tablet split at 1023px).
 */

@media (max-width: 1023px) {
	.fw3-split,
	.fw3-split-flip {
		grid-template-columns: minmax(0, 1fr) !important;
		direction: ltr !important;
		align-items: stretch !important;
		gap: clamp(1.25rem, 4vw, 2rem) !important;
	}

	.fw3-split-flip > * {
		direction: ltr !important;
	}

	.fw3-split-flip .fw3-split-copy,
	.fw3-split-flip .fw3-split-media {
		order: initial !important;
	}

	/* float-card tablet centering removed — pinned to photo */

	.fw3-real2-cta {
		text-align: left;
		margin-top: 1rem;
	}

	.fw3-footer-inner {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.75rem !important;
	}
}

@media (max-width: 767px) {
	.fw3-page {
		overflow-x: clip;
	}

	.fw3-top {
		display: none;
	}

	.fw3-wrap {
		width: min(100%, var(--fw3-max, 1180px));
	}

	.fw3-top-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 0.35rem;
	}

	.fw3-top-row > .oxy-container:first-child {
		display: flex;
		flex-flow: column wrap;
		align-items: center;
		gap: 0.2rem;
	}

	.fw3-hero-line {
		font-size: clamp(1.45rem, 6.5vw, 1.85rem) !important;
		line-height: 1.2;
	}

	.fw3-promises {
		gap: 0.55rem;
	}

	.fw3-promise {
		font-size: 0.95rem;
		line-height: 1.45;
	}

	.fw3-cta-row,
	.fw3-cta-stack {
		flex-flow: column !important;
		align-items: stretch !important;
		gap: 0.75rem !important;
	}

	.fw3-cta-row .fw3-btn,
	.fw3-cta-row .fw3-btn-ghost,
	.fw3-cta-row .fw3-link,
	.fw3-cta-row .oxy-container-link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.fw3-reasons,
	.fw3-quotes,
	.fw3-packages,
	.fw3-portfolio {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.fw3-portfolio .fw3-pin,
	.fw3-portfolio .fw3-portfolio-item {
		min-width: 0;
	}

	.fw3-pack-compare {
		display: none !important;
	}

	.fw3-pack-trust {
		flex-flow: column !important;
		align-items: stretch !important;
		gap: 0.65rem !important;
	}

	.fw3-overlap-row {
		flex-flow: column !important;
		align-items: stretch !important;
	}

	.fw3-overlap-a,
	.fw3-overlap-b,
	.fw3-overlap-c {
		flex: initial !important;
		width: 100%;
		position: relative;
	}

	.fw3-overlap-a {
		transform: rotate(-1.5deg) !important;
		z-index: 3;
	}

	.fw3-overlap-b {
		transform: rotate(1.5deg) !important;
		z-index: 2;
		margin-top: -0.85rem;
	}

	.fw3-overlap-c {
		transform: rotate(-1deg) !important;
		z-index: 1;
		margin-top: -0.85rem;
	}

	.fw3-footer-row {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1rem !important;
	}

	.fw3-footer-bar-inner {
		flex-flow: column !important;
		align-items: flex-start !important;
		gap: 0.75rem !important;
	}

	.esapp-booking-wrap {
		width: 100%;
		padding-inline: var(--fw3-pad, 1.25rem);
		box-sizing: border-box;
	}

	.esapp-booking--split {
		padding: 1.15rem 1rem 1.25rem;
	}

	.esapp-booking__workspace,
	.esapp-booking--split .esapp-picker {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.esapp-booking--split .esapp-slots {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
	}

	.esapp-booking-section-head__intro {
		max-width: none;
	}
}

@media (max-width: 479px) {
  .fw3-hero-media-wrap .fw3-float-card {
    left: 34% !important;
    bottom: 2% !important;
    width: min(15.5rem, 88%) !important;
  }
  .fw3-float-card {
    grid-template-columns: minmax(0, 1fr) !important;
    text-align: center;
    justify-items: center;
  }

	.esapp-booking--split .esapp-slots {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* FW3-HERO-ARC: convex down (bol naar beneden); wave SVG from fw3-section-waves.css */
@media (max-width: 767px) {
	.fw3-hero-wave {
		/* kept visible — styled globally */
	}

	.fw3-hero-media-wrap {
		position: relative;
		z-index: 4;
		top: 2rem;
	}

	.fw3-hero-media-wrap .fw3-float-card,
	.fw3-page .fw3-hero-media-wrap .fw3-float-card {
		position: absolute !important;
		left: 42% !important;
		bottom: -2% !important;
		top: auto !important;
		right: auto !important;
		z-index: 6 !important;
		width: min(16.5rem, 84%) !important;
		max-width: 22rem !important;
		margin: 0 !important;
	}

	.fw3-real2-grid {
		row-gap: 0.5rem !important;
	}
}

/* FW3-TRANSPARENT-HEADER: header overlays the hero and takes over its colour */
body:has(.fw3-hero) .fw3-site-header {
	position: absolute;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 0px);
	left: 0;
	right: 0;
}

body:has(.fw3-hero) .fw3-headband {
	background: transparent !important;
}

body:has(.fw3-hero) .fw3-top {
	background: rgba(12, 45, 68, 0.55) !important;
}

body:has(.fw3-hero) .fw3-hero {
	padding-top: calc(var(--fw3-header-h, 206px) + 1.25rem) !important;
}


/* ── Kruimelpad onderaan de hero ──
   De nav wordt door fw3_breadcrumb_move_into_hero() uit de header naar het
   einde van .fw3-hero verplaatst; hij houdt zijn eigen .fw3-wrap dus blijft
   in de gedeelde contentkolom staan. */
.fw3-hero > .fw3-crumb-bar.is-in-hero {
  position: relative;
  z-index: 6;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: 0;
  padding-bottom: 0;
}

/* zolang hij nog in de header staat niet laten flikkeren op hero-pagina's */
body:has(.fw3-hero) .fw3-crumb-bar:not(.is-in-hero) {
  visibility: hidden;
}

@media (max-width: 767px) {
  .fw3-hero > .fw3-crumb-bar.is-in-hero {
    margin-top: 1.5rem;
  }
}

/* linkerkant gelijk met de hero-titel; --fw3-crumb-pad wordt gezet door
   fw3_breadcrumb_move_into_hero() omdat elke hero-template een andere
   tekstkolombreedte heeft */
.fw3-crumb-bar.is-in-hero.has-align .fw3-wrap {
  padding-left: var(--fw3-crumb-pad, 2rem);
}