/* ============================================================
   MIAMI ABOUT US
   Styles for WPBakeryShortCode_miami_about_us_slider (shortcodes/
   miami_about_us_slider.php): icon, title, intro (first paragraph),
   a framed image gallery slider, and body text (the rest of the
   paragraphs). Figma "Hostess" design, node 181:3652 (desktop),
   292:1145 (tablet), 298:2364 (mobile).
   ============================================================ */

.about-slider-wrap {
	position: relative;
	background: var(--cream);
	padding: 160px 0;
	overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.about-slider-wrap {
		padding: 128px 0;
	}
}

@media (max-width: 767px) {
	.about-slider-wrap {
		padding: 64px 0;
	}
	.about-slider-wrap .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.about-slider-wrap .container {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* --- layout grid: photo / head (icon+title+intro) / body (rest of the text) --- */

/* Two empty 1fr spacer rows sandwich the head/body rows, rather than
   relying on align-content to center them. This works around a CSS Grid
   quirk: .about-slide__photo spans multiple rows, and per the track-sizing
   algorithm a spanning item's extra size gets redistributed across ALL the
   intrinsic ("auto"-family) tracks it spans — even ones already sized
   correctly by their own (non-spanning) content — which was shoving the
   "body" row down with a large gap below the intro paragraph. min-content,
   and even minmax(0, auto), still count as eligible intrinsic tracks for
   that redistribution, so neither stopped it. Flexible (fr) tracks are
   preferred for absorbing that surplus instead, so giving the surplus
   somewhere to go (these spacer rows) leaves "head"/"body" sized purely to
   their own content, matching Figma's vertically-centered text column
   (node 314:544). */
.about-slide__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		"photo ."
		"photo head"
		"photo body"
		"photo .";
	align-items: center;
	column-gap: 31px;
}

@media (max-width: 1199px) {
	.about-slide__grid {
		column-gap: 30px;
	}
}

@media (max-width: 1024px) {
	.about-slide__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas: "head" "photo" "body";
		align-content: normal;
		row-gap: 32px;
		text-align: center;
	}

	.about-slide__head,
	.about-slide__body {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.about-slide__head,
	.about-slide__body {
		text-align: left;
	}
}

/* min-width:0 breaks the CSS Grid "auto min-size" feedback loop: without it, the
   swiper JS measuring/setting an explicit pixel width on .swiper-wrapper can push
   this grid item's intrinsic content size, which grows the grid track, which the JS
   then re-measures as a (now bigger) container on the next reflow — runaway growth. */
.about-slide__photo { grid-area: photo; min-width: 0; }
.about-slide__head  { grid-area: head; }
.about-slide__body  { grid-area: body; }

.about-slide__photo .swiper-container {
	max-width: 531px;
	margin: 0 auto;
}

@media (max-width: 1024px) {
	.about-slide__photo .swiper-container {
		max-width: 737px;
	}
}

.about-slide__photo .pagination {
	display: none;
}

/* --- framed photo, gallery slider lives inside — Figma node 298:2373/2374 --- */

.about-slide__frame {
	position: relative;
	max-width: 531px;
	margin: 0 auto;
	padding: 16px;
	overflow: hidden; /* the badge below is position:absolute against this — clip it to the frame instead of letting it bleed out if it's ever wider than expected */
	isolation: isolate; /* keep the blend modes contained to this element */
}

/* tablet 292:1145: wider frame, still 16px border. mobile 298:2374: fluid width, 8px border. */
@media (max-width: 1024px) {
	.about-slide__frame {
		max-width: 737px;
	}
}

@media (max-width: 767px) {
	.about-slide__frame {
		max-width: 100%;
		padding: 8px;
	}
}

.about-slide__frame::before,
.about-slide__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* colors sampled directly off the rendered Figma frame — the fill is a warm gold radial highlight, not a flat border color */
.about-slide__frame::before {
	background: radial-gradient(
		140% 130% at 14% 0%,
		#fff8ee 0%,
		#e7c48f 18%,
		#cfa568 34%,
		#a67d3f 55%,
		#835d1c 78%,
		#835d1c 100%
	);
	z-index: 0;
}

.about-slide__frame::after {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.35) 0%,
		rgba(255, 255, 255, 0) 45%
	);
	mix-blend-mode: overlay;
	z-index: 1;
}

.about-slide__img {
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	height: auto;
}

/* --- "N years" badge overlaid on the frame's bottom-left edge, desktop
   only — Figma node 314:533/314:301. Absent from the tablet (292:1145) and
   mobile (298:2364) frames, so hidden below 1025px.
   Figma's own layout reserves a wide empty gutter to the left of the frame
   for the badge to bleed into (a -12px offset) before the section's nav
   arrows begin further out; our frame sits flush with much less gutter, so
   the badge is inset from the frame's edge instead of bleeding past it, to
   clear the arrow button. */
.about-slide__badge {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.about-slide__badge-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 20px 9px;
	background-color: var(--chocolate);
	opacity: 0.88;
}

.about-slide__badge-logo img {
	display: block;
	width: 133px;
	height: auto;
}

.about-slide__badge-text {
	margin: 14px 0 0 12px;
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 0.9;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--chocolate);
}

@media (max-width: 1024px) {
	.about-slide__badge {
		display: none;
	}
}

.about-slide__photo .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --- head: icon + title + intro (first paragraph) — Figma node 298:2367/2370/2371 --- */

.about-slide__icon {
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
}

@media (max-width: 1024px) {
	.about-slide__icon {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767px) {
	.about-slide__icon {
		width: 32px;
		height: 32px;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 16px;
	}
}

.about-slide__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.about-slide__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 40px;
	line-height: 0.9;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--chocolate);
	margin: 0 0 24px;
}

@media (max-width: 767px) {
	.about-slide__title {
		font-size: 20px;
	}
}

.about-slide__intro {
	color: var(--black);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	margin: 0;
}

/* mobile 298:2371: intro switches to chocolate, lighter weight — desktop 181:3672 keeps it black/bold */
@media (max-width: 767px) {
	.about-slide__intro {
		color: var(--chocolate);
		font-weight: 600;
		font-size: 16px;
		letter-spacing: -0.3px;
	}
}

/* --- body: the rest of the text (everything after the first paragraph) — Figma node 298:2382 --- */

.about-slide__text {
	color: var(--black);
}

.about-slide__text p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.3px;
	margin: 0 0 16px;
}

.about-slide__text p:last-child {
	margin-bottom: 0;
}

/* mobile 298:2382: tighter tracking than desktop 181:3673 (-0.2px vs -0.3px) */
@media (max-width: 767px) {
	.about-slide__text p {
		letter-spacing: -0.2px;
	}
}

/* tablet only: body paragraphs split into 2 columns, Figma node 292:1163 */
@media (min-width: 768px) and (max-width: 1024px) {
	.about-slide__text {
		column-count: 2;
		column-gap: 16px;
		text-align: left;
	}
}

/* --- gallery arrows/pagination, same box/line/chevron construction as
   .gallery-slider-wrap .swiper-arrow in style.css "GALLERY SLIDER" --- */

.about-slide__photo .swiper-arrow {
	position: absolute;
	top: calc(50% + 0.5px);
	transform: translateY(-50%);
	background-color: var(--cream-dark);
	width: 60px;
	height: 44px;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	z-index: 2;
}

.about-slide__photo .swiper-arrow:hover {
	background-color: var(--mocha);
}

/* Slider is non-looping (data-loop="0"), so the edge arrows go inert
   instead of wrapping around — toggled by js/miami-about-slider.js. */
.about-slide__photo .swiper-arrow.is-disabled {
	background-color: var(--cream-dark);
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.about-slide__photo .swiper-arrow:before {
	position: absolute;
	content: '';
	width: 26px;
	height: 2px;
	top: 21px;
	left: 17px;
	background: var(--black);
}

.about-slide__photo .swiper-arrow-left {
	left: 30px;
}

.about-slide__photo .swiper-arrow-right {
	right: 30px;
}

.about-slide__photo .swiper-arrow-left:after,
.about-slide__photo .swiper-arrow-right:after {
	position: absolute;
	content: '';
	width: 15px;
	height: 15px;
	top: 50%;
	border-left: 2px solid var(--black);
	border-top: 2px solid var(--black);
	box-sizing: border-box;
}

.about-slide__photo .swiper-arrow-left:after {
	left: 17px;
	transform: translateY(-50%) rotate(-45deg);
}

.about-slide__photo .swiper-arrow-right:after {
	right: 17px;
	transform: translateY(-50%) rotate(135deg);
}

/* mobile only: arrows drop below the photo as a static pair instead of floating
   over/beside it — Figma node 298:2375/2376/2379. Tablet keeps them at the
   slider's edges (see the position:relative override on .about-slide__photo above). */
@media (max-width: 767px) {
	/* .about-slide__photo .swiper-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	} */

	.about-slide__photo .swiper-wrapper {
		flex: 0 0 100%;
		order: 1;
	}

	.about-slide__photo .pagination {
		order: 3;
		flex: 0 0 100%;
	}

	.about-slide__photo .swiper-container {
		padding-bottom: 58px;
	}

	.about-slide__photo .swiper-arrow {
		bottom: 0;
        top: unset;
	}

	.about-slide__photo .swiper-arrow-left {
		left: 49%;
        right: unset;
        transform: translateX(-100%);
	}

	.about-slide__photo .swiper-arrow-right {
		right: 49%;
        left: unset;
        transform: translateX(100%);
	}

	.about-slide__photo .swiper-arrow {
		width: 46px;
		height: 34px;
		border-radius: 2px;
	}

	.about-slide__photo .swiper-arrow:before {
		width: 20px;
		top: 16px;
		left: 13px;
	}

	.about-slide__photo .swiper-arrow-left:after,
	.about-slide__photo .swiper-arrow-right:after {
		width: 11px;
		height: 11px;
		border-width: 1.5px;
	}

	.about-slide__photo .swiper-arrow-left:after {
		left: 11px;
	}

	.about-slide__photo .swiper-arrow-right:after {
		right: 11px;
	}
}