/*
Theme Name: Life
Theme URI: https://life.aicycle.cc
Author: zhenhe AI LLC
Author URI: https://life.aicycle.cc
Description: Brand child theme for Life — a calm, premium night-sky reading site combining Western astrology, Human Design, Zi Wei Dou Shu, Bazi and Tarot.
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: life-theme
*/

.life-section {
	max-width: 1360px;
	margin-inline: auto;
	padding: clamp(1.25rem, 6vw, 4.5rem) 1rem;
}

.life-section--narrow {
	max-width: 760px;
}

.life-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 782px) {
	.life-grid {
		grid-template-columns: 1fr;
	}
}

.life-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: linear-gradient(135deg, rgba(26, 35, 43, 0.9), rgba(12, 17, 23, 0.9));
	border: 1px solid rgba(199, 162, 74, 0.28);
	border-radius: 8px;
	padding: 1.5rem;
}

.life-card__cta {
	margin-top: auto;
}

/* Card image flush with the card's top edge (cancels the card padding). Decorative: alt="". */
.life-card__media {
	margin: -1.5rem -1.5rem 0.25rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}

.life-card__media img,
.life-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.life-banner {
	max-width: 1360px;
	margin: 0 auto clamp(1rem, 4vw, 2rem);
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid rgba(199, 162, 74, 0.28);
}

/* Hero photo under a dark gradient so the headline keeps its contrast (measured, see the audit doc). */
.life-hero {
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(9, 13, 18, 0.55), rgba(9, 13, 18, 0.9)), var(--life-hero-image) center / cover no-repeat;
	padding-block: clamp(3rem, 12vw, 8rem);
}

.life-card h3,
.life-card h4,
.life-card p,
.life-card .life-price {
	/* .life-card is a flex column with its own gap; a heading/paragraph's own
	   UA/block-editor margin would stack on top of that gap instead of
	   replacing it, producing the ~70px title-to-price gap on the pricing
	   page. The flex gap is the single source of spacing here. */
	margin: 0;
}

.life-card h3,
.life-card h4 {
	text-wrap: balance;
}

.life-card p {
	text-wrap: pretty;
}

h1, h2, h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.life-price {
	color: var(--wp--preset--color--life-action);
	font-size: 1.5rem;
	font-weight: 600;
}

.life-faq details {
	border-bottom: 1px solid rgba(199, 162, 74, 0.28);
	padding-block: 1rem;
}

.life-faq summary {
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--life-ink);
}

@media (prefers-reduced-motion: no-preference) {
	.life-reveal {
		animation: life-fade-in 0.4s ease-out both;
	}
}

@keyframes life-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* No-JS / no-motion fallback: never leave anything stuck invisible. */
.life-reveal {
	opacity: 1;
}

/* Legal pages: long-form reading width and readable tables on the dark theme. */
.life-legal { max-width: 760px; margin-inline: auto; line-height: 1.8; }
.life-legal h2 { margin-top: 2.5rem; }
.life-legal table { width: 100%; border-collapse: collapse; font-size: 0.9rem; display: block; overflow-x: auto; }
.life-legal th, .life-legal td { border: 1px solid rgba(199, 162, 74, 0.28); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.life-legal th { background: var(--wp--preset--color--life-bg-soft); }

/* Language switcher: native <select> (life-delivery Life_I18n_Routing::switcher_html) on the dark header. */
.life-lang-switcher select {
	background: var(--wp--preset--color--life-bg);
	color: var(--wp--preset--color--life-ink);
	border: 1px solid rgba(199, 162, 74, 0.45);
	border-radius: 6px;
	padding: 0 0.5rem;
	font: inherit;
}
.life-lang-switcher noscript a {
	color: var(--wp--preset--color--life-ink);
}