/*
* Media & text block — frontend + editor styles.
* Every selector is scoped to the root class .wsc-media-text (three-way sync rule).
* Tokens only: theme.json presets (--wp--preset--*) plus theme customs. No !important.
*
* It applies .wsc-section and .wsc-container in render.php, so no padding or
* container-width rule belongs here — only the surface, the two-column grid and
* the CTA pill.
*
* From 1024px up it is two equal columns with an 80px gutter, matching the
* frame's 560/80/560 split of the 1200px container. Below that it collapses to
* one column, which the source order stacks image-then-content; on phones the
* media is ordered last so the copy leads. 1024 rather than the frame's implied
* 1200 because two 432px columns still read comfortably, and it is on the
* theme's canonical breakpoint scale.
*
* NOTE: the grid and image rules here are deliberately kept structurally
* identical to blocks/media-checklist/style.css. The two blocks draw the same
* component with different right-hand content, and were built as separate
* blocks by decision rather than by necessity — keeping the rules aligned makes
* a future merge mechanical instead of archaeological.
*/
.wsc-media-text {
background-color: var(--wp--preset--color--surface);
}
/*
* The frame stacks the columns and the CTA pill 80px apart and centres the pill,
* which is narrower than the container.
*/
.wsc-media-text__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wp--preset--spacing--90); /* 80px */
}
/* Columns ------------------------------------------------------------- */
.wsc-media-text__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--60); /* 40px stacked */
width: 100%;
}
@media (min-width: 1024px) {
.wsc-media-text__grid {
grid-template-columns: 1fr 1fr;
gap: 5rem; /* 80px */
align-items: center;
}
/*
* One side missing — a dropped image or an empty content column. Falling back
* to a single track stops the survivor being pinned to half the row with dead
* space beside it.
*/
.wsc-media-text__grid--single {
grid-template-columns: 1fr;
}
/*
* Image right. The DOM stays image-first, so the mobile stacking rules and the
* --single collapse are both untouched; only the desktop track assignment
* flips. Scoped inside this query because below it there is a single track,
* where order is inert and the stack order is owned by the mobile rules.
*
* RTL — measured, accepted, do not "fix" silently. Grid tracks already flip
* under direction: rtl, so an instance set to Right paints on the left in an
* RTL market. That is logical-layout behaviour and every other rule in this
* file behaves the same way; no market on the network is RTL today.
*
* Visual order ≠ DOM order here, so a screen reader reaches the image before
* the copy. Accepted for a decorative image beside its own copy — the same
* trade-off plan-highlights already ships (style.css:178).
*/
.wsc-media-text__grid--media-right .wsc-media-text__media {
order: 2;
}
}
.wsc-media-text__media {
margin: 0;
}
/*
* Only what every image ratio shares. The crop lives on the two cropping
* modifiers below rather than here, because a product shot is not a crop that
* needs undoing — no ratio may reach that element in the first place.
*/
.wsc-media-text__image {
display: block;
width: 100%;
height: auto;
border-radius: var(--wp--custom--radius--sm); /* 16px */
}
/*
* 4:3 from the frame's 560x420. object-fit centres the crop, so an image of any
* native ratio fills the frame without letterboxing.
*/
.wsc-media-text__image--landscape {
aspect-ratio: 4 / 3;
object-fit: cover;
}
/*
* The frame that carries a cover-details table draws the image 560x560 where
* the base frame draws 560x420 — the square is what balances the taller
* content column beside it.
*/
.wsc-media-text__image--square {
aspect-ratio: 1 / 1;
object-fit: cover;
}
/*
* Product-shot treatment — an app mockup or device shot rather than a
* photograph. Structurally identical to media-checklist's --device rule; the
* reasoning behind every line, including why this is box-shadow and not
* filter: drop-shadow, lives there. Read it before changing either.
*
* Neither a ratio nor an object-fit crop reaches this element — cropping a mockup
* to a ratio would slice the device, which is why the crop sits on the ratio
* modifiers rather than on the shared rule. The 380px cap is the measured width of
* the mock inside its 560px column (node 16424:8323), and capping rather than
* stretching is what lets a 2x export stay sharp and still paint at the drawn
* size.
*
* No Figma frame draws a product shot in THIS block — the treatment is here so
* both media blocks offer the same choice, not to match a specific node.
*/
.wsc-media-text__image--natural {
width: auto;
max-width: min(100%, 23.75rem); /* 380px */
margin-inline: auto;
border-radius: var(--wp--custom--radius--md); /* 24px */
box-shadow: var(--wp--custom--shadow--lifted);
}
/*
* 40px between the intro and the cover-details region, per the frame's content
* column. This was 16px when the column held a single group; `gap` applies only
* BETWEEN children, so an instance with no details region is unaffected by the
* change.
*/
.wsc-media-text__content {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--60); /* 40px */
}
.wsc-media-text__intro,
.wsc-media-text__details {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--30); /* 16px */
}
/*
* An h2 by document outline, at the frame's H3 metrics (24/28, no tracking).
* Same treatment as trust-logos: the level is semantic, the size is visual.
*/
.wsc-media-text__heading {
margin-block: 0;
font-size: 1.5rem; /* 24px */
line-height: 1.1667; /* 28/24 */
letter-spacing: 0;
}
/*
* The heading unit — a title with a subtitle beneath it, 8px apart, sitting as
* one item in the 16px column above. From node 16424:8177.
*
* Only rendered when a subtitle exists (render.php), so a heading on its own is
* still a bare in the column exactly as before.
*/
.wsc-media-text__headings {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--10); /* 8px */
}
/*
* A subtitle promotes the heading to the frame's real H2 metrics and hands the
* 24/28 face down to the line beneath it. ONE RULE, NOT TWO CONTROLS: the design
* draws exactly this pairing, so the promotion follows the subtitle rather than
* a size field an editor could set to a combination the design never shows.
*/
.wsc-media-text__heading--lg {
font-size: 2rem; /* 32px */
line-height: 1.125; /* 36/32 */
letter-spacing: -0.01em; /* -0.32px at 32px */
}
/*
* The subtitle carries the heading face by hand: it is the second half of one
* heading unit, not the head of a new subsection, so it is a
rather than an
*
. The block's real h3 is the details heading further down, which does head
* its own region.
*/
.wsc-media-text__subtitle {
margin-block: 0;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 1.5rem; /* 24px */
line-height: 1.1667; /* 28/24 */
letter-spacing: 0;
}
.wsc-media-text__body {
color: var(--wp--preset--color--ink-soft);
letter-spacing: -0.01em; /* -0.14px at the 14px body size */
}
/* The frame separates paragraphs by a blank 20px line; adjacent margins
collapse, so consecutive paragraphs sit 20px apart rather than 40px. */
.wsc-media-text__body > :where(p) {
margin-block: 1.25rem; /* 20px */
}
.wsc-media-text__body > :first-child {
margin-block-start: 0;
}
.wsc-media-text__body > :last-child {
margin-block-end: 0;
}
/* Cover details -------------------------------------------------------- */
/* Global h3 is already the frame's H3 size, so only the tracking and the
margins need restating. */
.wsc-media-text__details-heading {
margin-block: 0;
font-size: 1.5rem; /* 24px */
line-height: 1.1667; /* 28/24 */
letter-spacing: 0;
}
/*
* A rather than a table (see render.php). The 12px gap separates the
* headline figure from the breakdown; the breakdown's own rows sit 4px apart.
*/
.wsc-media-text__table {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--20); /* 12px */
margin-block: 0;
color: var(--wp--preset--color--ink-soft);
}
.wsc-media-text__table-total,
.wsc-media-text__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--20); /* 12px */
align-items: baseline;
}
/*
* The headline figure. Tracking is POSITIVE here and negative on the rows
* below — that sign flip is in the design, not a typo, and together with the
* weight it is the only thing separating the two row types.
*/
.wsc-media-text__table-total {
font-weight: 700;
letter-spacing: 0.01em; /* +0.14px at the 14px body size */
}
/* 4px — the spacing scale starts at 8px, so this one is a literal by
necessity rather than by preference. */
.wsc-media-text__rows {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.wsc-media-text__row {
letter-spacing: -0.01em; /* -0.14px at the 14px body size */
}
.wsc-media-text__term,
.wsc-media-text__desc {
margin: 0;
}
.wsc-media-text__desc {
text-align: right;
}
/* Inline CTA ----------------------------------------------------------- */
/*
* The button when the placement is inline. It is a child of __intro, so its 16px
* of separation from the body is that group's gap — the frame stacks heading,
* body and button in one 16px column (node 16424:8739) and this mirrors it.
*
* align-self because __intro is a stretch-aligned flex column: without it the
* pill spans the whole content column instead of hugging its label.
*/
.wsc-media-text__intro > .wsc-button {
align-self: flex-start;
}
/* CTA pill ------------------------------------------------------------ */
/*
* Auto-width in the frame — it hugs its content rather than spanning the
* container, and the parent centres it. max-width keeps it inside the container
* once a long title would otherwise overflow.
*/
.wsc-media-text__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--50); /* 32px */
max-width: 100%;
padding-block: var(--wp--preset--spacing--40); /* 24px */
padding-inline: var(--wp--preset--spacing--60); /* 40px */
border-radius: var(--wp--custom--radius--sm); /* 16px */
background-color: var(--wp--preset--color--ink-soft);
color: var(--wp--preset--color--bg);
text-align: center;
}
/*
* A prompt, not a section heading — the block's h2 is up in the content column,
* so this is a paragraph carrying the heading face by hand.
*/
.wsc-media-text__cta-title {
margin-block: 0;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 1.5rem; /* 24px */
line-height: 1.1667; /* 28/24 */
letter-spacing: 0;
}
/* Mobile --------------------------------------------------------------- */
@media (max-width: 767px) {
/* 80px between the columns and the pill is a desktop rhythm; on a phone it
reads as a gap in the section rather than as spacing. */
.wsc-media-text__inner {
gap: 2rem; /* 32px */
}
/*
* Copy first on phones: the heading has to be the first thing in view, so the
* image moves below it rather than pushing it a screen down. Ordering the one
* item keeps the DOM (and the desktop grid, where the image belongs on the
* left) untouched.
*/
.wsc-media-text__media {
order: 1;
}
/*
* The pill wraps to two rows on a phone, so the 40px side padding and the
* 32px gap between prompt and button both cost width the label needs. Even
* 24px on all four sides.
*/
.wsc-media-text__cta {
gap: var(--wp--preset--spacing--40); /* 24px */
padding: var(--wp--preset--spacing--40); /* 24px */
}
/* 24px at phone widths wraps the prompt over too many lines beside the
button. */
.wsc-media-text__cta-title {
font-size: 1.125rem; /* 18px */
}
/*
* Two equal halves strand a long label ("Mental health counseling") against
* a fixed 50% while the value sits in mostly empty space. Letting the value
* hug its content gives the label the slack instead. Inferred — the design
* has no mobile frame.
*/
.wsc-media-text__table-total,
.wsc-media-text__row {
grid-template-columns: 1fr auto;
}
}