/* about-redesign.css
 * Redesigned About Us page — matches the "About Us page (2).png" mockup
 * from Monday.com Design Overhaul ticket.
 *
 * Layout: title banner → floral pattern hero → centered content card →
 *         newsletter (global) → footer (global).
 *
 * Uses brand tokens from poppsee-brand.css (:root --pop-* vars).
 * Loaded conditionally on the About page via functions.php.
 */

/* ============================================================ */
/* 0. Page-level reset — override legacy about_mid* styles       */
/* ============================================================ */

.about-redesign {
	background: var(--pop-cream, #f4ede4);
}

.about-redesign .banner,
.about-redesign .banner_about,
.about-redesign .about_mid1,
.about-redesign .about_mid2,
.about-redesign .about_mid3 {
	display: none !important;
}

/* ============================================================ */
/* 1. Title banner                                               */
/* ============================================================ */

.about-hero {
	width: 100%;
	text-align: center;
	padding: 48px 20px 24px;
	background: #fff;
}

.about-hero__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(28px, 4vw, 42px);
	color: var(--pop-ink, #1c3a39);
	margin: 0 0 12px;
	letter-spacing: 0;
}

.about-hero__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.about-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.about-hero__dot--teal    { background: #a2d8d6; }
.about-hero__dot--pink    { background: #f4a7b9; }
.about-hero__dot--orange  { background: #f5c28a; }
.about-hero__dot--green   { background: #8bbe8a; }

/* ============================================================ */
/* 2. Floral pattern banner                                      */
/* ============================================================ */

.about-floral {
	width: 100%;
	overflow: hidden;
	line-height: 0; /* kill inline-block gap */
}

.about-floral__img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	max-height: 420px;
}

/* ============================================================ */
/* 3. Content card                                               */
/* ============================================================ */

.about-content {
	width: 100%;
	background: var(--pop-cream, #f4ede4);
	padding: 60px 20px 80px;
}

.about-content__card {
	max-width: 780px;
	margin: 0 auto;
	background: #fff;
	border: 2px solid var(--pop-teal, #a2d8d6);
	border-radius: 4px;
	padding: 48px 52px;
	text-align: center;
}

.about-content__card p {
	font-family: 'Quicksand', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--pop-ink, #1c3a39);
	margin: 0 0 20px;
}

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

.about-content__card p strong,
.about-content__card p b {
	font-weight: 600;
}

/* Signature / welcome block at the end */
.about-content__welcome {
	margin-top: 28px;
	margin-bottom: 0;
	font-family: 'Quicksand', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--pop-ink, #1c3a39);
}

/* ============================================================ */
/* 4. Responsive                                                 */
/* ============================================================ */

@media (max-width: 768px) {
	.about-hero {
		padding: 36px 16px 18px;
	}

	.about-floral__img {
		max-height: 260px;
	}

	.about-content {
		padding: 40px 16px 60px;
	}

	.about-content__card {
		padding: 32px 24px;
	}

	.about-content__card p {
		font-size: 14px;
		line-height: 1.75;
	}
}

@media (max-width: 480px) {
	.about-hero__title {
		font-size: 26px;
	}

	.about-floral__img {
		max-height: 180px;
	}

	.about-content__card {
		padding: 24px 18px;
		border-width: 1.5px;
	}

	.about-content__card p {
		font-size: 13.5px;
		line-height: 1.7;
	}
}

/* ============================================================ */
/* 5. CTA button inside the intro card                           */
/* ============================================================ */
.about-content__cta {
	margin-top: 32px;
}

/* ============================================================ */
/* 6. Value props strip                                          */
/* ============================================================ */
.about-values {
	background: #fff;
	padding: 40px 20px;
	border-top: 1px solid #ece4d8;
	border-bottom: 1px solid #ece4d8;
}
.about-values__inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.about-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.about-value__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--pop-cream, #f4ede4);
	color: var(--pop-ink, #1c3a39);
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-value__icon svg { width: 26px; height: 26px; }
.about-value__label {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pop-ink, #1c3a39);
	max-width: 180px;
}

/* ============================================================ */
/* 7. How Poppsee works                                          */
/* ============================================================ */
.about-how {
	background: var(--pop-cream, #f4ede4);
	padding: 72px 20px;
}
.about-how__inner {
	max-width: 1140px;
	margin: 0 auto;
}
.about-how__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(26px, 3vw, 36px);
	color: var(--pop-ink, #1c3a39);
	text-align: center;
	margin: 0 0 48px;
}
.about-how__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.about-step {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.about-step__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--pop-teal, #a2d8d6);
	color: var(--pop-ink, #1c3a39);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.about-step__icon svg { width: 32px; height: 32px; }
.about-step__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 17px;
	color: var(--pop-ink, #1c3a39);
	margin: 0 0 10px;
}
.about-step__text {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.65;
	color: #5a5550;
	margin: 0;
	max-width: 240px;
}

/* ============================================================ */
/* 8. Closing CTA band                                           */
/* ============================================================ */
.about-cta {
	background: var(--pop-tan, #e7d9c8);
	padding: 64px 20px;
	text-align: center;
}
.about-cta__inner { max-width: 720px; margin: 0 auto; }
.about-cta__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(24px, 3vw, 34px);
	color: var(--pop-ink, #1c3a39);
	margin: 0 0 14px;
}
.about-cta__text {
	font-family: 'Quicksand', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #5a5550;
	margin: 0 0 28px;
}

/* ============================================================ */
/* 9. Responsive — new sections                                  */
/* ============================================================ */
@media (max-width: 900px) {
	.about-values__inner { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.about-how__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
	.about-how { padding: 56px 20px; }
}
@media (max-width: 520px) {
	.about-values__inner { grid-template-columns: 1fr 1fr; }
	.about-how__grid { grid-template-columns: 1fr; }
	.about-how__title { margin-bottom: 32px; }
}