@charset "UTF-8";

/* =========================================================================
   MEMBERSHIP (593) — per-page styles (D34: this file only).
   Bands (baseline): title-bar → Why Join (white) → 3 Benefits (dark-teal,
   clipped) → Instagram feed (plugin) → Chapter Meeting Recordings (white).
   Shared tokens/classes owned by Mason (creda.css); referenced here.
   Layout units: vw + %. Type: clamp() with vw midpoints.
   ========================================================================= */

/* ----- S1  Why should you join (text-media 40/60) --------------------- */
.membership-why { padding: clamp(48px, 4.5vw, 70px) 3vw clamp(56px, 5vw, 80px); }
.membership-why .wp-block-columns { gap: 3vw; align-items: center; }
.membership-why h4 {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: var(--creda-secondary);
	font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.8125rem);
	line-height: 1.1;
	margin-bottom: 1.4vw;
}
.membership-why p {
	color: var(--creda-body);
	font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1rem);
	margin-bottom: 1.1em;
}
.membership-why a { color: var(--creda-secondary); font-weight: 600; }
.membership-why a:hover { text-decoration: underline; }
.membership-why strong { color: var(--creda-primary); }
/* Two stacked, left-aligned CTAs (Sign Up Online + CREDA Pittsburgh Dues) — matches live */
.membership-why .wp-block-buttons { margin-top: 1.4vw; display: flex; flex-direction: column; align-items: flex-start; gap: 1vw; }
.membership-why .wp-block-button__link {
	background: var(--creda-secondary); color: #fff; border-radius: 0;
	font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: .5px;
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.5625rem);
	padding: 0.7em 1.4em;
}
.membership-why figure.wp-block-image { margin: 0; }
.membership-why figure.wp-block-image img { width: 100%; height: auto; display: block; }

/* ----- S2  Three benefits (dark-teal, clipped corner) ----------------- */
.membership-benefits {
	background: var(--creda-primary);
	color: #fff;
	padding: clamp(70px, 6vw, 96px) 3vw clamp(96px, 9vw, 150px);
}
.membership-benefits .wp-block-columns { gap: 3vw; }
.membership-benefits h4 {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: var(--creda-pale-teal);
	font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.8125rem);
	line-height: 1.08;
	margin-bottom: 1.2vw;
}
.membership-benefits p {
	color: #fff;
	font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1rem);
}

/* ----- S3  Instagram feed (Smash Balloon plugin — kept as-is, D35) ---- */
.membership-ig { padding: clamp(56px, 5vw, 80px) 3vw; }

/* ----- S4  Chapter Meeting Recordings --------------------------------- */
.membership-recordings { padding: clamp(70px, 6vw, 100px) 3vw; }
.membership-recordings h4 {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: var(--creda-secondary);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.125rem);
	line-height: 1.1;
	margin-bottom: 2.2vw;
}
.membership-recordings .wp-block-columns { gap: 3vw; align-items: flex-start; }
.membership-recordings ul.wp-block-list {
	list-style: disc;
	padding-left: 1.1em;
	margin: 0;
}
.membership-recordings ul.wp-block-list li {
	color: var(--creda-body);
	font-size: clamp(0.9rem, 0.84rem + 0.2vw, 0.95rem);
	line-height: 1.5;
	margin-bottom: 1em;
	display: list-item;
}
.membership-recordings ul.wp-block-list li::marker { color: var(--creda-body); }
.membership-recordings a { color: var(--creda-secondary); font-weight: 500; }
.membership-recordings a:hover { text-decoration: underline; }
.membership-recordings .wp-block-buttons { margin-top: 2vw; }
.membership-recordings .wp-block-button__link {
	background: var(--creda-secondary); color: #fff; border-radius: 0;
	font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: .5px;
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.5625rem);
	padding: 0.7em 1.4em;
}

/* ----- Responsive ----------------------------------------------------- */
@media screen and (max-width: 980px) {
	.membership-why .wp-block-columns,
	.membership-benefits .wp-block-columns,
	.membership-recordings .wp-block-columns { flex-wrap: wrap; }
	.membership-why .wp-block-column,
	.membership-recordings .wp-block-column {
		flex-basis: 100% !important; max-width: 100% !important;
	}
	.membership-benefits .wp-block-column {
		flex-basis: 100% !important; max-width: 100% !important; margin-bottom: 7vw;
	}
	.membership-benefits .wp-block-column:last-child { margin-bottom: 0; }
	.membership-why .wp-block-column:first-child { margin-bottom: 6vw; }
	.membership-recordings .wp-block-column { margin-bottom: 4vw; }
}

/* =========================================================================
   INTERACTIONS (page-specific) — President polish. Global button/link
   hover defaults + on-scroll reveal handled in creda.css (don't duplicate);
   these are the Membership-specific accents. ~.2–.25s ease (D32: tasteful).
   ========================================================================= */
/* In-content teal links + recording links — smooth fade */
.membership-why a, .membership-recordings a { transition: color .2s ease, opacity .2s ease; }
.membership-why a:hover, .membership-recordings a:hover { opacity: .82; }
/* Recording list rows — subtle nudge on hover (reads as interactive) */
.membership-recordings ul.wp-block-list li { transition: transform .2s ease; }
.membership-recordings ul.wp-block-list li:hover { transform: translateX(3px); }
/* Teal CTA buttons — darken to mid-teal on hover (composes with global lift) */
.membership-why .wp-block-button__link,
.membership-recordings .wp-block-button__link { transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.membership-why .wp-block-button__link:hover,
.membership-recordings .wp-block-button__link:hover { background-color: var(--creda-tertiary); }

@media (prefers-reduced-motion: reduce) {
	.membership-recordings ul.wp-block-list li:hover { transform: none; }
}