/*
 * Paula Griffiths Counselling — Animations & Custom Styles
 * ========================================================
 */

/* ──────────────────────────────────────────
   Ken Burns — subtle zoom on hero images
   ────────────────────────────────────────── */
.hero-ken-burns .wp-block-cover__image-background {
	animation: ken-burns 14s ease-out both;
}

@keyframes ken-burns {
	0%   { transform: scale(1.06); }
	100% { transform: scale(1); }
}

/* ──────────────────────────────────────────
   Gentle float — decorative blob movement
   ────────────────────────────────────────── */
.float-a { animation: gentle-float 9s ease-in-out infinite; }
.float-b { animation: gentle-float-alt 7s ease-in-out infinite; }

@keyframes gentle-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-16px) rotate(2deg); }
}

@keyframes gentle-float-alt {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-12px) rotate(-2.5deg); }
}

/* ──────────────────────────────────────────
   Hero entrance — staggered rise
   ────────────────────────────────────────── */
.hero-rise {
	animation: hero-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-rise-1 { animation-delay: 0.15s; }
.hero-rise-2 { animation-delay: 0.35s; }
.hero-rise-3 { animation-delay: 0.55s; }

@keyframes hero-rise {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────
   Hero layout — flex to push content down
   ────────────────────────────────────────── */
.hero-layout {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 80vh;
	padding: 0 clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 5vh, 4rem);
}

/* ──────────────────────────────────────────
   Decorative line grow
   ────────────────────────────────────────── */
.line-grow {
	animation: line-grow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
	transform-origin: left;
}

@keyframes line-grow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ──────────────────────────────────────────
   Sticky header — backdrop blur + fade-in
   ────────────────────────────────────────── */
.site-header {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(250, 248, 245, 0.8) !important;
	z-index: 50;
	animation: fade-down 0.8s ease both;
}

@keyframes fade-down {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────
   Organic image shapes
   ────────────────────────────────────────── */
.organic-shape-1,
.organic-shape-1 img {
	border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
	overflow: hidden;
}

.organic-shape-2,
.organic-shape-2 img {
	border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%;
	overflow: hidden;
}

/* ──────────────────────────────────────────
   Blog post prose
   ────────────────────────────────────────── */
.entry-content p {
	color: rgba(45, 59, 45, 0.65);
	line-height: 2;
	margin-bottom: 1.5rem;
}

.entry-content h2 {
	font-family: 'Playfair Display', serif;
	color: #2D3B2D;
	font-weight: 500;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	line-height: 1.3;
}

.entry-content blockquote {
	border-left: 3px solid #5B7553;
	padding-left: 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	font-family: 'Playfair Display', serif;
	font-size: 1.25rem;
	line-height: 1.7;
	color: rgba(45, 59, 45, 0.75);
}

/* ──────────────────────────────────────────
   Session cards — equal height + hover
   ────────────────────────────────────────── */
.session-columns .wp-block-column {
	display: flex;
	flex-direction: column;
}

.session-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: all 0.5s ease;
}

.session-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.session-card:hover {
	box-shadow: 0 20px 40px rgba(91, 117, 83, 0.08);
}

.session-card img,
.session-card .wp-block-cover__image-background {
	transition: transform 0.7s ease;
}

.session-card:hover img,
.session-card:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* ──────────────────────────────────────────
   Single post — card above cover overlay
   ────────────────────────────────────────── */
.single-post-card {
	position: relative;
	z-index: 10;
}

/* ──────────────────────────────────────────
   Services grid — hover & equal height
   ────────────────────────────────────────── */
.service-item {
	transition: all 0.4s ease;
	height: 100%;
}

.service-item:hover {
	border-color: rgba(91, 117, 83, 0.25) !important;
	box-shadow: 0 8px 24px rgba(91, 117, 83, 0.06);
	transform: translateY(-2px);
}

.services-grid .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* ──────────────────────────────────────────
   Blog / post cards — hover effects
   ────────────────────────────────────────── */
.post-card {
	transition: all 0.5s ease;
	border: 1px solid #E8DFD0;
}

.post-card:hover {
	box-shadow: 0 20px 40px rgba(91, 117, 83, 0.08);
	border-color: rgba(91, 117, 83, 0.15);
}

.post-card img {
	transition: transform 0.7s ease;
}

.post-card:hover img {
	transform: scale(1.05);
}

.featured-post {
	transition: all 0.5s ease;
}

.featured-post:hover {
	box-shadow: 0 20px 40px rgba(91, 117, 83, 0.05);
}

.featured-post img {
	transition: transform 0.7s ease;
}

.featured-post:hover img {
	transform: scale(1.05);
}

/* ──────────────────────────────────────────
   Grain texture pseudo-element
   ────────────────────────────────────────── */
.grain-overlay {
	position: relative;
}

.grain-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
}

/* ──────────────────────────────────────────
   Pricing cards
   ────────────────────────────────────────── */
.pricing-card-primary {
	background: #5B7553;
	color: #FAF8F5;
	border-radius: 1.5rem;
	overflow: hidden;
}

.pricing-card-primary a {
	color: #FAF8F5;
}

.pricing-card-secondary {
	border: 2px solid #E8DFD0;
	border-radius: 1.5rem;
	overflow: hidden;
}

/* ──────────────────────────────────────────
   Scroll cue (bottom-right of hero)
   ────────────────────────────────────────── */
.scroll-cue {
	position: absolute;
	bottom: 2rem;
	right: 1.5rem;
	text-align: right;
}

.scroll-cue::before {
	content: '';
	display: block;
	width: 1px;
	height: 2.5rem;
	background: rgba(250, 248, 245, 0.15);
	margin-left: auto;
	margin-bottom: 0.5rem;
}


/* ══════════════════════════════════════════
   MOBILE RESPONSIVE  (<= 781px)
   WordPress stacks columns at this breakpoint
   ══════════════════════════════════════════ */
@media (max-width: 781px) {

	/* ── Section padding: tighter on mobile ── */
	.section-padding {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	/* ── Hero: centered text on mobile ── */
	.hero-layout {
		text-align: center;
		align-items: center;
		padding: 0 1.25rem 2rem;
		min-height: 70vh;
	}

	.hero-layout .wp-block-separator {
		margin-left: auto;
		margin-right: auto;
	}

	.hero-layout .wp-block-buttons {
		justify-content: center;
	}

	/* ── Session cards: full width stacked ── */
	.session-columns .wp-block-column {
		flex-basis: 100% !important;
	}

	.session-card-image .wp-block-cover {
		min-height: 180px !important;
	}

	/* ── Pricing cards: equal height not needed when stacked ── */
	.pricing-card-primary,
	.pricing-card-secondary {
		padding: 2rem 1.5rem !important;
	}

	/* ── Contact image: hidden on mobile ── */
	.hide-mobile {
		display: none !important;
	}

	/* ── Cover blocks: reduce min-height on mobile ── */
	.wp-block-cover.alignfull {
		min-height: 60vh !important;
	}

	/* ── Hero cover override — still full height ── */
	.hero-ken-burns {
		min-height: 100vh !important;
	}

	/* ── Header: tighter padding ── */
	.site-header .wp-block-group {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}


/* ══════════════════════════════════════════
   SMALL MOBILE  (<= 480px)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {

	/* ── Even tighter section spacing ── */
	.section-padding {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* ── Hero: smaller bottom padding ── */
	.hero-layout {
		padding-bottom: 1.5rem;
		min-height: 65vh;
	}

	/* ── Card padding: compact ── */
	.session-card-body {
		padding: 1.25rem !important;
	}

	.pricing-card-primary,
	.pricing-card-secondary {
		padding: 1.75rem 1.25rem !important;
	}
}


/* ══════════════════════════════════════════
   DESKTOP ENHANCEMENTS  (> 781px)
   ══════════════════════════════════════════ */
@media (min-width: 782px) {

	/* ── Session cards: equal heights via stretch ── */
	.session-columns {
		align-items: stretch;
	}

	.session-columns .wp-block-column {
		display: flex;
	}

	.session-columns .session-card {
		flex: 1;
	}

	.hide-desktop {
		display: none !important;
	}
}