/* ==========================================================================
   Homepage Sections
   Loaded conditionally when .category-pills or .all-access-cta is detected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Category Chips

   sparklestock.com renders these as a plain inline row — app icon, then a
   14px label, no border and no background. They were outlined pills here,
   which read as buttons and invited a click they do not support.
   -------------------------------------------------------------------------- */

/*
 * Column gap is 1.25rem, not 1.5rem, and the 4px matters. Measured at a 1263px
 * viewport the eight LUTs chips total 1045px of content; at a 24px gap the row
 * needs 1213px against 1199px available, so it wrapped to three lines and added
 * ~43px to that section. At 20px it needs 1185px and sits on one line, as it
 * does on production.
 */
.category-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.5rem;
}

.category-pills > .wp-block-paragraph,
.category-pills > p {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
	margin: 0;
}

/* App icon injected before the label by f32_inject_category_chip_icons(). */
.category-pills .f32-chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	background: #1a1a2e;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Overflow — the row's own last chip is the reveal

   No media query hides this row, so it is drawn at every width. At 390px the
   eight LUTs chips wrap to six lines and cost 150px of a 844px screen, and not
   one of those pixels can be tapped. Below 1024px the row is therefore held to
   two lines and the chips that do not fit are folded away.

   NOTHING NEW ENTERS THE DESIGN TO DO IT. The row already ends in a chip that
   is not a format — the grey “and more” paragraph authored into page content
   — and it already sits exactly where a reveal control would go. So that chip
   is promoted to a button rather than joined by one. The promoting, the
   counting and the folding are in assets/js/category-chips.js; this file only
   says what the promoted chip looks like and how a folded one disappears.

   A ROW WITH NO SUCH CAPTION IS LEFT ALONE. Photoshop Add-ons carries three
   format chips and nothing else. There is nothing in it to promote, and
   inventing a control for it would be the new element this treatment exists to
   avoid; it keeps every chip and wraps, on the repaired row-gap.

   WITHOUT JAVASCRIPT the row is the row above with its row-gap repaired —
   every chip visible, none of them behind a control that cannot open.
   -------------------------------------------------------------------------- */

/*
 * `hidden` has to be restated. The chip rule above sets `display: inline-flex`
 * at one class plus one element, and the UA sheet's `[hidden] { display: none }`
 * is one attribute — so a folded chip would otherwise stay on screen.
 */
.category-pills > [hidden] {
	display: none;
}

/*
 * The promoted chip. It carries the chip metrics rather than inheriting them,
 * because it is a <button> and the rule above only reaches <p>.
 *
 * It is also the one thing in this row allowed to look tappable. The note at
 * the top of this file records that the chips were flattened out of pills
 * because they “read as buttons and invited a click they do not support”.
 * This one supports the click, so it says so in the site's action colour.
 */
.category-pills > .f32-chip-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--action);
	white-space: nowrap;
	cursor: pointer;
}

.category-pills > .f32-chip-more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Section CTA button

   The solid dark button closing each product section is now styled in
   theme.json, at styles.blocks.core/button.variations.section-cta. Nothing
   about it needs hand-written CSS: background, hover background, text colour,
   border, radius, padding, font size, weight and text-decoration are all block
   supports, so the block system can express every one of them.

   WordPress builds the selector itself — `.wp-block-button.is-style-section-cta
   .wp-block-button__link`, from core/button's own root selector — and scopes
   the emitted rule to a per-instance `is-style-section-cta--N` class in a
   stylesheet that depends on `global-styles`, so it lands after theme.json's
   `elements.button` and beats it on order rather than on specificity.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Product Sections — Spacing
   -------------------------------------------------------------------------- */

/*
 * 1.75rem, not 3rem. Measured: production's heading-to-heading pitch is
 * 474-475px; at 3rem staging sat at 493px for a single-line chip row. This is
 * the lever that actually moves, because the internal gaps below do not.
 */
.product-section + .product-section {
	margin-top: 1.75rem;
}

/*
 * Flow layout gives every child margin-block-start: var(--wp--style--block-gap)
 * — 24px, now declared by this theme.json as styles.spacing.blockGap rather than
 * inherited from core's default — and adjacent sibling margins collapse to the
 * larger of the two, so the margin-bottom values below are inert while that 24px
 * stands.
 *
 * This rule only wins on the FIRST child. Core emits its flow margin as
 * `.wp-container-core-group-is-layout-<hash> > *`, which is also one class of
 * specificity and is printed after the theme's stylesheet, so for every
 * subsequent child core wins the tie. Measured on staging: child 0 gets 0px,
 * children 1-3 keep 24px.
 *
 * Left in place rather than escalated with a doubled selector: the internal
 * rhythm at 24px matches production closely enough, and a specificity war with
 * core's layout engine is a bad trade for a few pixels.
 */
.product-section > * {
	margin-block-start: 0;
}

/*
 * 27px matches production's 27.02px measured at 1440px; the 0.02 is below the
 * threshold worth chasing. Set here rather than on the block because the h2 is a
 * plain wp:heading in page content, not a theme file.
 */
.product-section > .wp-block-heading {
	font-size: 1.6875rem;
	margin-bottom: 0.75rem;
}

/*
 * Two classes, deliberately. The chip row also carries core's `is-layout-flex`,
 * and core emits `:root :where(.is-layout-flex) { gap: 24px }` — which is also
 * one class of specificity and is printed after this stylesheet, so a
 * single-class `.category-pills` rule loses the tie and the gap stays 24px.
 * That is the difference between the eight LUTs chips needing 1213px (wraps to
 * three lines) and 1185px (one line, as production).
 *
 * BOTH GAPS HAVE TO BE HERE, and for a long time only one was. The shorthand
 * above declares `gap: 0.5rem 1.25rem`, so it loses the same tie twice — but
 * only column-gap was ever restated at two classes, and row-gap went on
 * computing to core's 24px. That is invisible on a desktop, where the row does
 * not wrap. On a 390px phone the eight LUTs chips wrap five times and the
 * theme is charged 24px for each of them instead of the 8px it asked for:
 * measured live, repairing this one line takes the row from 150px to 102px,
 * and the three Photoshop chips from 63px to 47px.
 */
.product-section > .category-pills {
	margin-bottom: 1rem;
	column-gap: 1.25rem;
	row-gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   All Access Pass CTA

   Every size, weight and colour below is measured from sparklestock.com at
   1440px. The markup for this section lives in page content in the database,
   not in a theme file, so nothing here can add an element or a class — the
   styling has to reach production's design through the classes that already
   exist.
   -------------------------------------------------------------------------- */

.all-access-cta {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

/* --------------------------------------------------------------------------
   The rail

   WHAT WAS HERE, AND WHY IT IS NOT ANY MORE. This section used to be a
   400-pixel billboard: "$7", "/month", "billed annually", an orange
   "Unlimited Downloads" pill, four checkmarks naming the four categories the
   shopper had just scrolled past, and a button reading "Get Started" that put
   an $84 product in the cart. Every one of those numbers was literal text in a
   database row, so none of them survived a second plan existing, and the page
   never once printed the figure the card is actually charged.

   It is a signpost now. The plans, both prices, the download cap and the
   renewal terms live on /all-access/, which is a page that can hold them; this
   is one line and a link, and it costs the homepage about 90 pixels instead of
   400.

   THE `all-access-cta` CLASS STAYS ON THE GROUP even though nothing here needs
   it any more, and dropping it would break two things silently:
   f32_maybe_enqueue_homepage_sections() strpos()es for that exact token to
   decide whether to load this file, and f32_hide_all_access_cta_for_pass_holders()
   matches it to remove the whole section for somebody already on the top plan.
   -------------------------------------------------------------------------- */

.all-access-cta--rail {
	border-radius: 0;
}

.all-access-cta__rail {
	gap: 1rem 1.5rem;
	align-items: center;
}

.all-access-cta__line {
	margin: 0;
	flex: 1 1 20rem;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--wp--preset--color--primary, #000);
}

/*
 * theme.json paints every button through
 * `:root :where(.wp-element-button, .wp-block-button__link)` - one class of
 * specificity. Naming the section, the buttons wrapper and both classes on the
 * link is four, which wins outright. Kept from the old band, which is the only
 * part of it that still applies: a 46px button rather than the 50px default.
 */
.all-access-cta .all-access-cta__cta .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--primary, #000);
	color: #fff;
	border: 0;
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	padding: 14px 24px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s;
}

.all-access-cta .all-access-cta__cta .wp-block-button__link.wp-element-button:hover {
	opacity: 0.9;
}

/* The decorative Memphis shapes that used to live here were 250 lines of
   gradients, borders and clip-paths approximating production's dot grids,
   stripe blocks, wireframe cubes and sparkles out of six empty divs.

   They are gone. The section carried a real generated background from the
   wp-memphis-background plugin instead - which also went with the rail: it
   pointed at an absolute staging.sparklestock.com URL, and a full-bleed
   generated artwork behind two lines of text was paying for nothing.

   Do not reintroduce CSS-drawn Memphis motifs. A second implementation of the
   same artwork is exactly what that replaced.

   NOTE ON BRICOLAGE GROTESQUE. `.all-access-cta__price` was the last live use
   of that family on the site; it is registered in theme.json and in the
   database font library (wp_font_family 405553, wp_font_face 405554-405562).
   Deleting it here would have orphaned the face. It moved rather than died:
   assets/css/all-access.css sets the price lockup on the pricing page in it,
   which is where a display face for a big number belongs. Do not deregister
   the font.  */

@media (max-width: 600px) {
	.all-access-cta__rail {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Home Hero — block spacing

   The 6rem top and bottom padding was serialized inline on the group by the
   block editor, which put it out of reach of every selector — and of the media
   query below, which is the one place that has a reason to change it. It lives
   here now, and the group in post 309068 carries only its left/right gutter
   padding.

   The gutter stays inline on purpose. The negative margin further down bleeds
   the video to the viewport edge by cancelling exactly that padding, so the two
   have to be the same value, and the block is what states it.

   One class is enough. Nothing inline competes for these two properties any
   more, which is the whole point of moving them.
   ========================================================================== */

.home-hero {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

/* ==========================================================================
   Home Hero — mobile order and full-bleed video

   Desktop is a two-column row: copy left, VideoPress embed right. Production
   inverts that below the tablet breakpoint — the video comes FIRST and runs
   edge to edge, and the copy sits under it. Everything here is that inversion,
   plus the top padding the section above hands over.

   781px, not 782px, because that is where CORE stacks the columns. Core's rule
   is `@media (max-width: 781px)` and it sets `flex-wrap: wrap` with
   `flex-basis: 100%` on each column — it does NOT change flex-direction. So
   `flex-direction: column-reverse` is the wrong tool: on a wrapping row it
   reinterprets the wrap axis and needs a height to resolve against. `order` on
   the two children reverses them without touching the layout mode at all.

   The negative margins carry three classes on purpose. Core emits
   `.is-layout-flex > :is(*, div) { margin: 0 }` at specificity 0,1,1, which
   beats any single-class rule; `.home-hero .wp-block-columns > .wp-block-column`
   is 0,3,0 and wins. See the flex-child margin landmine in BACKLOG.md.

   The pull is exactly the hero's own inline left/right padding — the block
   serializes `padding-left/right: var(--wp--preset--spacing--gutter)` — so the
   video lands on the viewport edge and not a pixel past it.
   ========================================================================== */

@media (max-width: 781px) {

	/*
	 * No top padding on a phone. The video is the first thing in the hero at
	 * this width, so those 96px are empty page between the site header and it -
	 * a sixth of a phone screen spent on nothing before the page has said
	 * anything. The bottom padding stays; it is all that separates the Explore
	 * button from the section under it.
	 */
	.home-hero {
		padding-top: 0;
	}

	/* Video column first, copy second. */
	.home-hero .wp-block-columns > .wp-block-column:first-child {
		order: 2;
	}

	.home-hero .wp-block-columns > .wp-block-column:last-child {
		order: 1;
		margin-inline: calc(-1 * var(--wp--preset--spacing--gutter));
	}

	/*
	 * Portrait Memphis for a portrait hero. The desktop SVG is a 2.6:1 strip
	 * with its motifs banked into the right-hand 42%, because that is the half
	 * the copy does not sit in; stretched over a phone by `cover` it crops to a
	 * near-empty middle. The mobile file is the same generator at 900x1000 with
	 * the BOTTOM 55% held clear instead, so the artwork sits behind the video
	 * and the copy underneath it stays on flat #f5f5f5.
	 *
	 * !important is not laziness here and cannot be avoided. WordPress's
	 * background block support does not serialize the image into the saved
	 * markup at all - wp_render_background_support() injects it into the
	 * wrapper's `style` attribute at render time, and an inline style beats
	 * every selector there is. Two classes would be enough against a stylesheet;
	 * against an inline declaration nothing but !important is.
	 *
	 * Both files are transparent, so the group's `subtle` colour is what shows
	 * between the motifs in either case.
	 *
	 * Root-relative, not relative to this file. From assets/css/ the uploads
	 * directory is four levels up, and a background URL that has to count
	 * directories correctly is one theme move away from silently resolving to
	 * nothing. /wp-content/uploads/ is true on staging and on production.
	 */
	.wp-block-group.home-hero {
		background-image: url("/wp-content/uploads/memphis-hero-mobile-9007.svg") !important;
	}
}