/* Phase 2 composition. All colour/typography/spacing tokens remain from Phase 1. */
.syv-home-main { margin-block: 0; }
.syv-home-main > .wp-block-post-content { margin-block: 0; }
.syv-section {
	padding-block: var(--wp--preset--spacing--70);
	margin-block: 0;
	scroll-margin-block-start: 1rem;
}
.syv-section-inner > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.syv-section-inner { max-inline-size: var(--wp--style--global--wide-size); }
.syv-section :where(h1,h2) { max-inline-size: 24ch; text-wrap: balance; }
.syv-section :where(p) { max-inline-size: 66ch; }
.syv-section :where(h3) { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xl); font-weight: 600; }
.syv-lead { font-size: var(--wp--preset--font-size--lg); }
.syv-surface, .syv-home-footer { background: var(--wp--preset--color--cream); }
.syv-split, .syv-two, .syv-three, .syv-footer-grid { display: grid; gap: var(--wp--preset--spacing--60); }
.syv-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
.syv-hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr); }
.syv-portrait-grid { grid-template-columns: minmax(0,0.75fr) minmax(0,1.25fr); }
.syv-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.syv-three, .syv-footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.syv-split > *, .syv-two > *, .syv-three > *, .syv-footer-grid > * { min-inline-size: 0; margin-block: 0; }
.syv-hero h1 { max-inline-size: 12ch; }
.syv-hero-copy > * + *, .syv-split > div > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.syv-reassurance, .syv-session-line { font-weight: 600; font-size: var(--wp--preset--font-size--sm); }
.syv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.syv-actions > * { margin: 0; }
.syv-pending-action { display: inline-block; margin-block: 0.5rem; }
.syv-pending-action span { display: inline-block; padding: 0.7rem 1rem; border: 1px dashed currentColor; color: var(--wp--preset--color--muted); font-size: 1rem; }
.syv-dev-note, .syv-dev-label { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.syv-dev-label { font-weight: 600; }
.syv-asset-placeholder { display: flex; flex-direction: column; justify-content: center; padding: var(--wp--preset--spacing--50); border: 1px dashed var(--wp--preset--color--gold-dark); background: var(--wp--preset--color--ivory); min-block-size: 10rem; }
.syv-asset-placeholder p { margin-block: 0.5rem; }
.syv-placeholder-label { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--lg); }
.syv-hero-image { aspect-ratio: 4/3; }
.syv-hero-portrait { margin-inline-start: 30%; margin-block-start: 1rem; min-block-size: 6rem; }
.syv-portrait, .syv-diagram { aspect-ratio: 3/4; }
.syv-landscape { aspect-ratio: 4/3; }
.syv-transition { text-align: center; padding-block: var(--wp--preset--spacing--50); border-block: 1px solid var(--wp--preset--color--gold); }
.syv-transition-text { color: var(--wp--preset--color--gold-dark); font-size: var(--wp--preset--font-size--xs); }
.syv-concept, .syv-life-item { border-block-start: 1px solid var(--wp--preset--color--gold); padding-block-start: var(--wp--preset--spacing--40); }
.syv-system-number { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--2-xl); color: var(--wp--preset--color--gold-dark); margin: 0; }
.syv-system-list { display: grid; gap: 2rem; }
.syv-session-steps { padding-inline-start: 1.5rem; }
.syv-session-steps li { padding-inline-start: 0.5rem; margin-block: 0.75rem; }
.syv-centre { padding-block-start: var(--wp--preset--spacing--60); border-block-start: 1px solid var(--wp--preset--color--gold); margin-block-start: var(--wp--preset--spacing--60); }
.syv-section .wp-block-details { border-block-end: 1px solid var(--wp--preset--color--gold); padding-block: 1rem; }
.syv-section summary { cursor: pointer; min-block-size: 2.75rem; padding-block: 0.5rem; font-weight: 600; }
.syv-invitation { text-align: center; }
.syv-invitation :where(h2,p) { margin-inline: auto; }
.syv-invitation .syv-actions { justify-content: center; }
.syv-header { padding-block: 1rem; }
.syv-header-row { justify-content: space-between; flex-wrap: wrap; }
.syv-header-tools { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.syv-languages, .syv-language-status .syv-dev-note { margin-block: 0; font-size: 0.875rem; }
.syv-languages [aria-disabled] { color: var(--wp--preset--color--muted); }
.syv-nav-row { margin-block-start: 0.75rem; }
.syv-primary-navigation { font-size: 0.9375rem; }
.syv-primary-navigation .wp-block-navigation-item__content { padding-block: 0.5rem; }
.syv-home-footer { padding-block: var(--wp--preset--spacing--60); margin-block: 0; font-size: 1rem; }
.syv-footer-links { line-height: 2; }
@media (max-width: 64rem) {
	.syv-split, .syv-hero-grid, .syv-portrait-grid { gap: 2rem; }
	.syv-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.syv-footer-grid > :last-child { grid-column: 1/-1; }
}
@media (max-width: 48rem) {
	.syv-split, .syv-hero-grid, .syv-portrait-grid, .syv-three { grid-template-columns: minmax(0,1fr); }
	.syv-hero-visual { max-inline-size: 32rem; inline-size: 100%; }
	.syv-portrait { max-inline-size: 25rem; inline-size: 100%; }
	.syv-system-grid .syv-diagram { max-inline-size: 25rem; inline-size: 100%; }
	.syv-hero h1 { max-inline-size: 16ch; }
	.syv-header-tools { gap: 0.75rem; }
}
@media (max-width: 37.5rem) {
	.syv-two, .syv-footer-grid { grid-template-columns: minmax(0,1fr); }
	.syv-header-tools { inline-size: 100%; justify-content: space-between; }
	.syv-header-tools .wp-block-button__link { font-size: 0.875rem; padding-inline: 0.75rem; }
	.syv-nav-row { margin-block-start: 0.5rem; }
	.syv-actions { align-items: stretch; }
	.syv-actions > *, .syv-actions .wp-block-button { max-inline-size: 100%; }
	.syv-portrait, .syv-diagram { aspect-ratio: 1; }
}


/* v0.3.0: the complete educational image uses its own intrinsic ratio. */
.syv-subtle-system-visual { margin: 0; inline-size: 100%; max-inline-size: 100%; }
.syv-subtle-system-visual img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; aspect-ratio: 1374 / 1145; object-fit: contain; }
@media (max-width: 48rem) {
 .syv-system-grid .syv-subtle-system-visual { max-inline-size: 25rem; }
}
/* Retain controlled placeholders and editing records without visitor-facing development notes. */
.wp-site-blocks .syv-dev-note,
.wp-site-blocks .syv-dev-label,
.wp-site-blocks .syv-asset-placeholder .syv-placeholder-label { display: none; }

/* v0.3.1 asset presentation only: full composition, no crop or distortion. */
.syv-home-image { margin: 0; inline-size: 100%; max-inline-size: 100%; }
.syv-home-image img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; object-fit: contain; }
.syv-hero-art img, .syv-awareness-art img { aspect-ratio: 1671 / 941; }
.syv-home-portrait img, .syv-hero-portrait img { aspect-ratio: 7 / 5; }
.syv-collective-art img { aspect-ratio: 3 / 2; }
.syv-home-image.syv-hero-portrait { inline-size: 70%; margin-inline-start: 30%; margin-block-start: 1rem; }
@media (max-width: 48rem) {
 .syv-home-portrait { max-inline-size: 25rem; }
}

/* v0.3.2: distinct editorial roles for the approved homepage photographs. */
.syv-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.syv-hero-visual { align-self: center; }
.syv-home-image.syv-hero-portrait { inline-size: 100%; margin: 0; min-block-size: 0; }
.syv-hero-portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; }
#self-realization .syv-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
.syv-awareness-art img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.syv-portrait-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.syv-home-portrait { max-inline-size: 26rem; }
.syv-home-portrait img { aspect-ratio: 7 / 5; object-fit: contain; }
#collective .syv-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
.syv-collective-art { align-self: start; }
.syv-collective-art img { aspect-ratio: 3 / 2; object-fit: contain; }
.syv-centre { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--wp--preset--spacing--60); align-items: center; }
.syv-centre > * { min-inline-size: 0; margin-block: 0; }
.syv-centre-copy > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.syv-local-art { max-inline-size: 26rem; justify-self: end; }
.syv-local-art img { aspect-ratio: 1671 / 941; object-fit: contain; }
@media (max-width: 64rem) {
 .syv-centre { gap: 2rem; }
}
@media (max-width: 48rem) {
 .syv-hero-grid, #self-realization .syv-split, .syv-portrait-grid, #collective .syv-split, .syv-centre { grid-template-columns: minmax(0, 1fr); }
 .syv-hero-visual { max-inline-size: 26rem; justify-self: center; }
 .syv-hero-portrait img { aspect-ratio: 1; object-position: 40% 50%; }
 .syv-awareness-art { max-inline-size: 36rem; }
 .syv-awareness-art img { aspect-ratio: 1671 / 941; object-fit: contain; }
 .syv-home-portrait { max-inline-size: 24rem; }
 .syv-collective-art { max-inline-size: 36rem; }
 .syv-local-art { max-inline-size: 26rem; justify-self: start; }
}

/* v0.3.3: atmosphere belongs to the section, never to the photograph. */
.syv-hero {
 background-color: var(--wp--preset--color--ivory);
 background-image: radial-gradient(ellipse at 82% 42%, rgba(168, 138, 74, 0.09), transparent 65%), linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--ivory));
}
.syv-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; }
.syv-hero .syv-hero-visual { inline-size: 100%; max-inline-size: none; }
.syv-hero .syv-hero-portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; }
@media (max-width: 64rem) {
 .syv-hero-grid { grid-template-columns: minmax(0, 1fr); }
 .syv-hero .syv-hero-visual { max-inline-size: 32rem; justify-self: center; }
 .syv-hero .syv-hero-portrait img { aspect-ratio: 7 / 6; }
}
@media (max-width: 48rem) {
 .syv-hero .syv-hero-visual { max-inline-size: 28rem; }
 .syv-hero .syv-hero-portrait img { aspect-ratio: 7 / 5; object-fit: contain; }
}

/* v0.3.5: open-area atmosphere with protection attached to the text box. */
.syv-hero {
 position: relative;
 isolation: isolate;
 background-color: var(--wp--preset--color--cream);
 background-image: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--ivory));
}
.syv-hero::before, .syv-hero::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
}
.syv-hero::before {
 z-index: -2;
 background-image: url("../images/home/self-realization/thoughtless-awareness.png");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 opacity: 0.20;
}
.syv-hero::after {
 z-index: -1;
 background-image: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--cream) 45%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--cream) 45%, transparent) 65%, color-mix(in srgb, var(--wp--preset--color--cream) 65%, transparent) 100%), linear-gradient(0deg, var(--wp--preset--color--ivory), transparent 12%, transparent 88%, var(--wp--preset--color--cream));
}
/* The full text box has 80% additional cream; only the OUTSIDE 1rem feathers. */
.syv-hero-copy { position: relative; isolation: isolate; }
.syv-hero-copy::before {
 content: "";
 position: absolute;
 inset: -1rem;
 z-index: -1;
 pointer-events: none;
 background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--cream) 80%, transparent) 1rem, color-mix(in srgb, var(--wp--preset--color--cream) 80%, transparent) calc(100% - 1rem), transparent);
 mask-image: linear-gradient(180deg, transparent, black 1rem, black calc(100% - 1rem), transparent);
}
@media (max-width: 48rem) {
 .syv-hero::before { opacity: 0.10; }
}

/* v4.0: seamless directional feathering (approved HTML prototype v4.0) — Shri Mataji fades only on
   its right (text-facing) edge; the new Meditation photo fades only on its left (text-facing) edge.
   No curve, no clip-path. Removed below 48rem, where the layout stacks and "inward-facing" no longer
   applies — a clean sharp-edged rectangle instead, never a reintroduced curve. */
.syv-home-portrait img {
 -webkit-mask-image: linear-gradient(to right,#000 0%,#000 72%,transparent 100%);
 mask-image: linear-gradient(to right,#000 0%,#000 72%,transparent 100%);
}
.syv-meditation-photo img {
 -webkit-mask-image: linear-gradient(to right,transparent 0%,#000 28%,#000 100%);
 mask-image: linear-gradient(to right,transparent 0%,#000 28%,#000 100%);
}
@media (max-width: 48rem) {
 .syv-home-portrait img, .syv-meditation-photo img { -webkit-mask-image: none; mask-image: none; }
}

/* Meditation section layout: text left, photo right, ~50/50, matching the approved prototype. */
#meditation .syv-split.syv-meditation-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.syv-meditation-photo { margin: 0; inline-size: 100%; max-inline-size: 100%; align-self: start; }
.syv-meditation-photo img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; aspect-ratio: 743/492; object-fit: contain; }
.syv-session-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--wp--preset--spacing--40); margin-block: var(--wp--preset--spacing--40); }
.syv-session-fact { display: flex; gap: 0.625rem; align-items: flex-start; min-inline-size: 0; }
.syv-session-fact p { margin-block: 0; font-size: var(--wp--preset--font-size--sm); }
.syv-fact-icon { flex: 0 0 1.75rem; inline-size: 1.75rem; block-size: 2rem; color: var(--wp--preset--color--gold-dark); }
@media (max-width: 64rem) {
 .syv-session-facts { grid-template-columns: minmax(0,1fr); gap: 0.75rem; }
}
@media (max-width: 48rem) {
 #meditation .syv-split.syv-meditation-grid { grid-template-columns: minmax(0,1fr); }
 .syv-meditation-photo { max-inline-size: 36rem; justify-self: center; }
}

/* Restrained botanical decoration (lotus + leaf sprigs), 14-46% opacity, judged against rendered
   screenshots in the standalone HTML prototype rounds (see that project's CHANGELOG for the full
   visibility-tuning history: lower values proved imperceptible once layered under photo pixels).
   The section establishes the stacking context these absolute placements anchor to; the photo and
   text columns get an explicit z-index so decoration can never paint above readable content,
   regardless of geometric overlap. */
#shri-mataji, #meditation { position: relative; isolation: isolate; }
.syv-portrait-grid > .wp-block-group, .syv-meditation-grid > .wp-block-group { position: relative; z-index: 1; }
.syv-home-portrait, .syv-meditation-photo { position: relative; z-index: 1; }
.syv-leaf-decor { position: absolute; height: auto; z-index: 0; pointer-events: none; color: #a8b49a; opacity: .14; }
.syv-lotus-line { left: 0; top: 16%; width: clamp(110px,15%,200px); color: #c6a257; opacity: .46; }
.syv-branch-right { right: 1%; top: 8%; width: clamp(150px,19%,320px); color: #d9bd83; opacity: .2; transform: rotate(-7deg); }
.syv-leaf-gold-left { left: 1%; top: 8%; width: clamp(80px,11%,170px); color: #d9bd83; opacity: .18; transform: rotate(-5deg); }
.syv-leaf-accent-lower { left: 36%; top: 76%; width: clamp(55px,7.5%,120px); opacity: .15; transform: scaleX(-1) rotate(14deg); }
.syv-leaf-sage-center { left: 45%; top: 42%; width: clamp(55px,7.5%,120px); opacity: .14; transform: rotate(10deg); }
@media (max-width: 48rem) {
 .syv-leaf-decor { display: none; }
}

/* v4.1: visual-fidelity correction against the frozen HTML prototype v4.0, after a root-cause
   comparison of computed styles (see docs/phase-2-v4.1-visual-fidelity.md). Root causes found:
   (1) the section-inner wrapper was "alignwide" (capped at the 75rem global wideSize) — the
       prototype's photo+text row is full-bleed, so it was rendering noticeably narrower/smaller
       than approved. Fixed in the pattern markup (align="full") paired with the full-bleed rules
       below — only #shri-mataji/#meditation use .syv-portrait-grid/.syv-meditation-grid, so this
       cannot affect any other section.
   (2) a pre-existing `.syv-home-portrait { max-inline-size: 26rem }` rule (written for a different,
       smaller portrait treatment) was capping the photo far below its grid column's width.
   (3) the column split favoured text 60/40 (0.8fr/1.2fr); the prototype is close to even
       (0.94fr/1.06fr).
   (4) CTA buttons had no background: theme.json's global button element is charcoal, not the
       prototype's gold — rendering as a bare link until any button styling loads. Corrected here
       with a selector scoped to these two sections only, per instruction not to touch the global
       button default.
   (5) h2 used the theme's global 2xl clamp (max 3rem); the prototype's own clamp tops out higher
       (3.45rem) with a tighter line-height — reproduced verbatim, scoped to these two sections.
   (6) .syv-eyebrow (shared by 7 other sections) has no letter-spacing; the prototype's eyebrow
       labels use a distinct 0.16em tracking — added scoped to these two sections only. */
#shri-mataji .syv-section-inner, #meditation .syv-section-inner { max-inline-size: none; }
@media (min-width: 48.0625rem) {
 #shri-mataji .syv-split.syv-portrait-grid, #meditation .syv-split.syv-meditation-grid { gap: 0; }
 #shri-mataji .syv-portrait-grid { grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr); }
 #shri-mataji .syv-home-portrait { max-inline-size: none; inline-size: 100%; }
 #shri-mataji .syv-portrait-grid > div, #meditation .syv-meditation-grid > div {
  padding: clamp(1.5rem,4vw,2.75rem) clamp(1.5rem,5vw,5rem);
  align-self: center;
 }
}
#shri-mataji .wp-block-button__link, #meditation .wp-block-button__link {
 background: var(--wp--preset--color--gold-dark);
 border-color: var(--wp--preset--color--gold-dark);
 color: var(--wp--preset--color--ivory);
}
#shri-mataji .wp-block-button__link:hover, #meditation .wp-block-button__link:hover {
 background: var(--wp--preset--color--gold);
 border-color: var(--wp--preset--color--gold);
}
#shri-mataji h2, #meditation h2 { font-size: clamp(2rem,3.5vw,3.45rem); line-height: 1.08; }
#shri-mataji .syv-eyebrow, #meditation .syv-eyebrow { letter-spacing: 0.16em; font-size: 0.77rem; }
@media (max-width: 48rem) {
 /* The pre-existing 24rem/left-aligned mobile cap left lopsided whitespace beside a left-pinned
    photo; centered and enlarged to match the prototype's stacked-mobile treatment
    (max-width:640px, centered). Scoped to #shri-mataji — .syv-home-portrait has no other user. */
 #shri-mataji .syv-home-portrait { max-inline-size: 32rem; justify-self: center; }
}