/**
 * Yodha Fuel — About Us page styles.
 *
 * WHAT THIS FILE DOES NOT DO: it does not render or contain any of the
 * page's actual copy. The About Us page is a normal WordPress Page, built
 * entirely from core Gutenberg blocks in wp-admin, rendered through the
 * theme's existing page.php + template-parts/content-page.php (both
 * completely unmodified). This file only styles that editor-built content
 * — section rhythm, the hero/training/final-CTA full-bleed treatments,
 * the mindset/values card grids, the product facts list, and an adapter
 * that makes core Gutenberg's own Button block match the site's existing
 * button look. Every class below is meant to be typed into a block's
 * "Additional CSS class(es)" field in the editor's Advanced panel — see
 * the About Us setup documentation for the full list and a worked
 * example of the recommended block structure.
 *
 * Loaded ONLY on the About Us page (see inc/enqueue.php's conditional,
 * gated on yodha_fuel_is_about_page() from inc/about.php), so nothing
 * here can affect Homepage / Shop / Product / Cart / Checkout / My
 * Account / Thank You — none of them load this file at all. Classes are
 * still namespaced `.yf-about-*` as a second, belt-and-suspenders layer,
 * matching the `.yf-hero-slider` / `.yf-shop-*` / `.yf-product-*`
 * per-page naming convention already used by home.css / shop.css /
 * single-product.css.
 *
 * Reuses the existing design system throughout: --yodha-orange /
 * --warrior-dark / --space-* / --radius-* / --shadow-card* / --fs-* /
 * --container-max tokens (variables.css), the global .yf-container /
 * .yf-section / .yf-section--alt layout classes (layout.css), and
 * heading typography that already comes free from base.css's global
 * h1–h6 rules and global a:focus-visible outline — no second design
 * system, no duplicate button system, no new JavaScript.
 *
 * Mobile-first: base rules are the 375px default; this file uses the
 * same shared 480 / 768 / 1024 / 1280px breakpoints as the rest of the
 * theme.
 */

/* ============================================================
   PAGE-LEVEL OVERRIDES — scoped to body.yf-about-page only (added by
   yodha_fuel_about_body_class() in inc/about.php). Three generic,
   shared-name page-template rules need adjusting for a wide, full-bleed
   landing page, same as account.css/cart.css already do (their own
   .yf-page__content max-width override) and thank-you.css already does
   (hiding .yf-page__header) — this is the same established, scoped
   pattern, not a modification of any shared file.
   ============================================================ */

/* 1) The default static-page title band (template-parts/content-page.php
   always prints the WP page title as an <h1>) is hidden here so this
   page's ONE real H1 can instead be the hero's own heading, visually
   integrated with the hero image/background rather than sitting above it
   as a plain generic title bar. The admin still types a normal WP page
   Title (used for the browser tab / SEO plugin) — it's just not the
   heading rendered on the page itself. Exactly the same technique
   thank-you.css already uses for the Order Received page, scoped there
   by a body class the same way it's scoped here. */
body.yf-about-page .yf-page__header {
	display: none;
}

/* 2) .yf-page__content's site-wide default is a 72ch reading-width cap
   (right for a plain text page) — far too narrow for full-bleed section
   blocks. Freed here the same way account.css/cart.css already widen it
   for their own pages. */
body.yf-about-page .yf-page__content {
	max-width: none;
	margin: 0;
}

/* 3) Storefront's own parent style.css gives #primary.content-area a
   73.913%-width float at 768px+ as part of its two-column content+
   sidebar layout (page.php/single.php deliberately keep this literal
   class for that reason — see the long-form note on .yf-container in
   this file documenting the earlier, unrelated .content-area naming
   collision this project already hit once). A plain WordPress Page
   still carries that class, so without this override the About page
   would render squeezed into ~74% width with an empty gap on the right
   at tablet/desktop sizes. Scoped to this page only — every WooCommerce
   page already avoids this some other way (their own templates), so
   nothing else needs it. */
body.yf-about-page #primary.content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}

/* Doubling-padding fix for .yf-section > .yf-container, same fix already
   applied (for the same reason) in home.css / shop.css / single-
   product.css: both classes carry their own top/bottom padding, so
   nesting them — exactly as recommended for every section below —
   would otherwise double the visible gap above/below each section.

   Uses a descendant combinator (not ">") on purpose: confirmed live that
   a Group block on this install always renders its own extra
   .wp-block-group__inner-container wrapper div around its content, so
   .yf-container actually sits one level deeper than a direct child of
   .yf-section — the original ">" version of this rule never matched
   anything, so every section's bottom padding was silently doubled
   (confirmed on Our Story: removing this extra padding closed roughly
   half of the "too much space before the next paragraph" gap reported
   live). The same inner-container wrapper is also why the hero/
   training/final-cta rules above target ".wp-block-group__inner-
   container" explicitly rather than using "> *". */
.yf-about-page .yf-section .yf-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* Safety net: body.yf-about-page's .yf-page__content has its reading-width
   cap removed further up this file (max-width: none) so the documented
   .yf-section/.yf-container/.yf-about-hero/etc. wrappers can go full-
   bleed. That also means any block an admin adds or pastes directly into
   the page WITHOUT wrapping it in one of those (a stray Paragraph/Heading/
   Image typed straight into the page, not inside a Group with the
   documented class) would otherwise render edge-to-edge with zero side
   gutter — confirmed live on this exact mistake (new "Our Story" copy
   pasted as plain paragraphs after the existing Group, instead of inside
   it). This rule gives any such stray top-level block a sensible default
   reading width and side padding instead, so content always has a usable
   gutter even if the documented class/grouping step gets skipped. It never
   touches the page's real full-bleed sections since those all carry one of
   the excluded classes below. */
.yf-about-page .yf-page__content > :not(.yf-section):not(.yf-about-hero):not(.yf-about-training):not(.yf-about-final-cta) {
	max-width: var(--container-max-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding-mobile);
	padding-right: var(--container-padding-mobile);
}

@media (min-width: 768px) {
	.yf-about-page .yf-page__content > :not(.yf-section):not(.yf-about-hero):not(.yf-about-training):not(.yf-about-final-cta) {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}

/* ============================================================
   SHARED HELPERS
   ============================================================ */

/* Optional class "yf-about-split" for a Columns block that pairs a photo
   with text (e.g. Our Story's founder photo next to the story copy).
   WordPress's core Columns block top-aligns each column by default
   (it does NOT stretch them to match), so whichever column is shorter —
   usually the photo, sometimes the text — leaves visible dead space
   below itself while the other column (and the row as a whole) keeps
   going. A fixed image height doesn't fix this either: the text length
   varies per section/edit, so a hard-coded height is right for one
   amount of copy and wrong for the next. The fix that actually holds up
   under any amount of text: stretch both columns to match the row's
   height (whichever column is naturally taller), then have the image
   fill its own column completely with height:100% + object-fit:cover.
   The photo and the text box are then ALWAYS the same height, with zero
   gap under either one, however much copy the text column holds.
   Confirmed live on the actual page before shipping. Apply by selecting
   the Columns block in the editor (click its outer edge, not inside the
   text) and adding "yf-about-split" under Advanced → Additional CSS
   Class(es). */
.yf-about-split {
	align-items: stretch;
}

.yf-about-split .wp-block-post-featured-image,
.yf-about-split > .wp-block-column > figure {
	height: 100%;
}

.yf-about-split img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

/* A narrower reading column for editorial prose (Our Story). Apply to an
   inner Group alongside, or instead of, .yf-container. */
.yf-about-prose {
	max-width: var(--container-max-narrow);
	margin: 0 auto;
}

.yf-about-prose p {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* ============================================================
   BUTTON ADAPTER — makes core Gutenberg's own Button block match the
   site's existing CTA look, using the same tokens .yf-btn already uses
   in components.css (not a second button system — just applying the
   same brand values to a different block's markup). No custom class
   needed: use the Button block's own built-in Style switcher in the
   block toolbar — "Fill" (default) for the solid orange primary look
   used throughout this page, "Outline" for the outline look.
   ============================================================ */
.yf-about-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-height-lg);
	padding: 0 var(--btn-padding-x-lg);
	border: var(--btn-border-width) solid var(--yodha-orange);
	border-radius: var(--btn-radius);
	background-color: var(--yodha-orange);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-button);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.yf-about-page .wp-block-button__link:hover,
.yf-about-page .wp-block-button__link:focus {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	color: var(--white);
}

/* "Outline" style (block toolbar → Styles → Outline). Dark text/border
   for use on light section backgrounds. */
.yf-about-page .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--warrior-dark);
	color: var(--warrior-dark);
}

.yf-about-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
.yf-about-page .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--warrior-dark);
	color: var(--white);
}

/* Modifier for an outline button sitting on a DARK section (hero,
   training, final CTA) — add alongside the core "Outline" style class,
   e.g. "is-style-outline yf-about-btn-inverse". */
.yf-about-page .wp-block-button.is-style-outline.yf-about-btn-inverse .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--white);
}

.yf-about-page .wp-block-button.is-style-outline.yf-about-btn-inverse .wp-block-button__link:hover,
.yf-about-page .wp-block-button.is-style-outline.yf-about-btn-inverse .wp-block-button__link:focus {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--warrior-dark);
}

/* ============================================================
   HERO — class "yf-about-hero". Works on either a core Cover block (for
   a full-bleed background photo — a Cover block with no image already
   just shows its own background color, never a broken image) OR a
   plainer core Group block with a background color set (simpler, no
   image required at all) — both are documented as options in the About
   Us setup guide. The dark fallback color below only applies when the
   admin hasn't picked one in the block's own color picker, so the hero
   looks intentional either way.

   IMPORTANT (confirmed by live inspection of this install): a Group
   block with a constrained layout — which is what the starter content
   uses — still renders its own wrapper div, .wp-block-group__inner-
   container, around its contents, exactly like a Cover block's
   .wp-block-cover__inner-container. The background-color above MUST
   stay on the OUTER .yf-about-hero element (so the full-bleed band
   spans edge to edge via its "alignfull" class) while max-width/
   padding/centering and the inverse text color below are applied to
   that INNER wrapper instead — never to the outer element itself.
   Putting the max-width on the same element as the background (an
   earlier version of this file did) visibly shrinks the colored band
   to a centered box with white space on both sides, which is the "not
   full width" bug this comment is here to prevent regressing.
   ============================================================ */
.wp-block-cover.yf-about-hero,
.wp-block-group.yf-about-hero {
	background-color: var(--warrior-dark);
}

.wp-block-cover.yf-about-hero .wp-block-cover__inner-container,
.wp-block-group.yf-about-hero .wp-block-group__inner-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-2xl) var(--container-padding-mobile);
}

.wp-block-cover.yf-about-hero .wp-block-cover__inner-container {
	padding-top: 0;
	padding-bottom: 0;
}

.yf-about-hero .wp-block-cover__inner-container > *,
.yf-about-hero .wp-block-group__inner-container > * {
	color: var(--color-text-inverse);
}

.yf-about-hero__eyebrow {
	color: var(--yodha-orange);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-size: var(--fs-label);
}

.yf-about-hero h1 {
	color: var(--color-text-inverse);
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
}

.yf-about-hero__subtitle {
	color: var(--color-text-inverse-muted);
	max-width: 48ch;
	font-size: var(--fs-body);
}

@media (min-width: 768px) {
	.wp-block-cover.yf-about-hero .wp-block-cover__inner-container,
	.wp-block-group.yf-about-hero .wp-block-group__inner-container {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}

@media (min-width: 1024px) {
	.wp-block-cover.yf-about-hero .wp-block-cover__inner-container,
	.wp-block-group.yf-about-hero .wp-block-group__inner-container {
		padding-left: var(--container-padding-desktop);
		padding-right: var(--container-padding-desktop);
	}
}

/* ============================================================
   THE YODHA MINDSET / WHAT WE STAND FOR — both use the same card grid:
   a core Columns block, class "yf-about-cards"; each inner Column block,
   class "yf-about-card". Core Columns already stacks to one column on
   mobile and lays out side-by-side above ~600px on its own — this file
   only adds the visual card treatment.
   ============================================================ */
.yf-about-cards.wp-block-columns {
	gap: var(--space-md);
}

.yf-about-card.wp-block-column {
	padding: var(--space-lg);
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.yf-about-card.wp-block-column:hover {
	border-color: var(--yodha-orange);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.yf-about-card h3 {
	font-size: var(--fs-body);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
}

.yf-about-card p {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: 0;
}

/* ============================================================
   OUR FIRST PRODUCT — a core Columns block, class "yf-about-product"
   (image column + copy column; stacks on mobile like any Columns
   block). The facts list is a core List block, class
   "yf-about-product__facts".
   ============================================================ */
.yf-about-product.wp-block-columns {
	align-items: center;
	gap: var(--space-xl);
}

.yf-about-product__facts {
	margin: var(--space-md) 0 var(--space-lg);
	padding: 0;
	list-style: none;
}

.yf-about-product__facts li {
	position: relative;
	padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
	border-bottom: var(--border-width) solid var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-small);
}

.yf-about-product__facts li:last-child {
	border-bottom: none;
}

.yf-about-product__facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1em;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--yodha-orange);
}

.yf-about-product figure.wp-block-image img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

/* ============================================================
   BUILT FOR REAL TRAINING — class "yf-about-training". Same Cover-or-
   Group flexibility and graceful fallback as the hero above, and the
   same inner-wrapper rule applies: background-color stays on the OUTER
   element (full-bleed band), max-width/padding/centering and the
   inverse text color go on the INNER .wp-block-cover__inner-container /
   .wp-block-group__inner-container wrapper — see the long comment on
   the hero section above for why.
   ============================================================ */
.wp-block-cover.yf-about-training,
.wp-block-group.yf-about-training {
	background-color: var(--warrior-dark-soft);
}

.wp-block-cover.yf-about-training .wp-block-cover__inner-container,
.wp-block-group.yf-about-training .wp-block-group__inner-container {
	width: 100%;
	max-width: var(--container-max-narrow);
	margin: 0 auto;
	padding: var(--space-2xl) var(--container-padding-mobile);
	text-align: center;
}

.wp-block-cover.yf-about-training .wp-block-cover__inner-container {
	padding-top: 0;
	padding-bottom: 0;
}

.yf-about-training .wp-block-cover__inner-container > *,
.yf-about-training .wp-block-group__inner-container > * {
	color: var(--color-text-inverse);
}

.yf-about-training p {
	color: var(--color-text-inverse-muted);
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.wp-block-cover.yf-about-training .wp-block-cover__inner-container,
	.wp-block-group.yf-about-training .wp-block-group__inner-container {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}

/* ============================================================
   FINAL CTA — class "yf-about-final-cta". Same pattern as the
   Homepage's own Final CTA section (home.css's .yf-final-cta), kept
   separate here since home.css never loads on this page. Same inner-
   wrapper rule as hero/training above: background-color stays on the
   OUTER element, max-width/padding/centering and inverse text color go
   on the INNER .wp-block-cover__inner-container / .wp-block-group__
   inner-container wrapper.
   ============================================================ */
.wp-block-cover.yf-about-final-cta,
.wp-block-group.yf-about-final-cta {
	background-color: var(--color-bg-dark);
}

.wp-block-cover.yf-about-final-cta .wp-block-cover__inner-container,
.wp-block-group.yf-about-final-cta .wp-block-group__inner-container {
	width: 100%;
	max-width: var(--container-max-narrow);
	margin: 0 auto;
	padding: var(--space-2xl) var(--container-padding-mobile);
	text-align: center;
}

.wp-block-cover.yf-about-final-cta .wp-block-cover__inner-container {
	padding-top: 0;
	padding-bottom: 0;
}

.yf-about-final-cta .wp-block-cover__inner-container > *,
.yf-about-final-cta .wp-block-group__inner-container > * {
	color: var(--color-text-inverse);
}

.yf-about-final-cta p {
	color: var(--color-text-inverse-muted);
	max-width: 48ch;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.wp-block-cover.yf-about-final-cta .wp-block-cover__inner-container,
	.wp-block-group.yf-about-final-cta .wp-block-group__inner-container {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}