/* What-we-treat (condition) pages (post type what-we-treat): sections printed by inc/condition-sections.php and the
 * single-what-we-treat template (breadcrumbs, mobile booking bar shared with programs). On top of assets/css/program.css
 * (shared buttons, chips, checklists, fact tiles, tokens, motion) the same way assets/css/landing.css is. Loaded on
 * what-we-treat pages and in the editor. Resets scoped with :is(.entry-content, .is-root-container) so they outrank
 * the Kadence content spacing in style.css and still apply in the editor.
 *
 * "Clinical guide" design (18 Sept 2026): a doctor's written guide. Prose keeps a reading measure (--fc-read) and
 * figures, tracks, tiles and program cards break out to --fc-wide. Type: 15 / 16.5-17 body (1.8-1.85) / 20 h3 /
 * 28-34 h2 / 30-44 h1, nothing under 15px. Bands: 40px on phones, 72px from 768px. */

:root {
	--fc-read: min(72ch, 100%);
	--fc-wide: min(1100px, 100%);
	--fc-rule: #e2e5ea;
}

:is(.entry-content, .is-root-container) > .freesia-condition-section { margin-block: 0; }
:is(.entry-content, .is-root-container) .freesia-condition-section :is(h1, h2, h3, p, ul, figure) { margin-block: 0; }
.freesia-condition-section :is(.freesia-condition-hero__grid, .freesia-condition-intro__grid, .freesia-condition-signs__grid, .freesia-condition-treatment__grid, .freesia-condition-causes__grid, .freesia-condition-tips__grid) > * { margin-block: 0; }

.freesia-condition-section { box-sizing: border-box; padding-block: 40px; background: #fff; color: var(--fp-text); font-size: 16.5px; }
.freesia-condition-section.is-layout-constrained > :not(.alignfull) { box-sizing: border-box; max-width: var(--fc-wide); margin-inline: auto !important; }
.freesia-condition-section p { font-size: 16.5px; line-height: 1.8; }
.freesia-condition-section h2.wp-block-heading { max-width: 28ch; font-size: 28px; font-weight: 600; line-height: 1.35; color: var(--fp-brown); text-wrap: balance; }
.freesia-condition-section h3.wp-block-heading { font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--fp-ink); text-wrap: balance; }
.freesia-condition-section a:not(.wp-block-button__link) { color: var(--fp-blue); }
.freesia-condition-section a:not(.wp-block-button__link):hover { color: var(--fp-blue-deep); }
.freesia-condition-section :is(a, button):focus-visible { outline: 3px solid var(--fp-logo-blue); outline-offset: 3px; }
.freesia-condition-section :is(.freesia-condition-intro__text, .freesia-condition-treatment__head, .freesia-condition-treatment__closing) { max-width: var(--fc-read); }

/* ------------------------------------------------------------------
 * Hero: sand-50 ground, photo beside title, lead and booking button
 * ---------------------------------------------------------------- */
.freesia-condition-hero { background: var(--fp-sand-50); padding-block: 28px 44px; }
.freesia-condition-hero__grid { display: grid; gap: 28px; }
.freesia-condition-hero__grid.is-text-only { grid-template-columns: 1fr; }
.freesia-condition-hero__title { font-size: 30px; font-weight: 700; line-height: 1.32; color: var(--fp-ink); text-wrap: balance; }
.freesia-condition-hero__subtitle { margin-top: 0.5em !important; font: 500 18px/1.5 var(--fp-display); color: var(--fp-brown); }
.freesia-condition-hero__lead { max-width: 38em; }
.freesia-condition-hero__lead p { margin-top: 14px !important; }
.freesia-condition-hero__image img { border-radius: 20px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; aspect-ratio: 4/3; }
.freesia-condition-actions.wp-block-buttons { margin-top: 24px !important; }
/* ------------------------------------------------------------------
 * What it is: prose in the reading column, the figure across the width
 * ---------------------------------------------------------------- */
.freesia-condition-intro__grid { display: grid; gap: 2rem; }
.freesia-condition-intro__text p { margin-top: 1em !important; }
.freesia-condition-intro__figure { display: grid; justify-items: center; gap: 0.6rem; padding: 18px; border-radius: 20px; background: var(--fp-mist); }
.freesia-condition-intro__image { width: 100%; max-width: 520px; }
.freesia-condition-intro__image img { width: 100%; border-radius: 16px; }
.freesia-condition-intro__caption { max-width: 60ch; color: var(--fp-muted); font-size: 15px !important; text-align: center; }

/* ------------------------------------------------------------------
 * Causes: the heading, then one ruled entry per cause
 * ---------------------------------------------------------------- */
.freesia-condition-causes__title { margin-bottom: 1.5rem !important; }
.freesia-condition-causes__grid { display: grid; gap: 0; border-top: 1px solid var(--fc-rule); }
.freesia-condition-cause { padding-block: 22px; border-bottom: 1px solid var(--fc-rule); }
.freesia-condition-cause h3 { margin-bottom: 0.35em !important; }
.freesia-condition-cause p { max-width: 62ch; color: var(--fp-muted); }

/* ------------------------------------------------------------------
 * Symptoms / risk groups and warning signs
 * ---------------------------------------------------------------- */
.freesia-condition-signs__grid { display: grid; gap: 2.5rem; align-items: center; }
.freesia-condition-signs__image img { border-radius: 16px; width: 100%; }
.freesia-condition-signs__body h2 { margin-bottom: 0.6em !important; }
.freesia-condition-signs__body .wp-block-buttons { margin-top: 1.4rem !important; }
.freesia-condition-section .freesia-checklist .ili-text { font-size: 16px; line-height: 1.7; }
/* Feather icons are strokes: bloom fills every icon svg, which turns them into blobs. */
.freesia-condition-section .bloom-icon[class*="bloom-icon--fe_"] svg { fill: none; }

/* ------------------------------------------------------------------
 * Treatment: mist ground; what you do at home and what we do at the clinic as two tracks
 * ---------------------------------------------------------------- */
.freesia-condition-treatment { background: var(--fp-mist); }
.freesia-condition-treatment__head h2 { margin-bottom: 0.6em !important; }
.freesia-condition-treatment__head p + p { margin-top: 0.8em !important; }
.freesia-condition-treatment__grid { display: grid; gap: 2rem; margin-top: 2.5rem !important; }
.freesia-condition-treatment__track { padding-top: 20px; border-top: 2px solid var(--fp-mist-line, #b9d3ea); }
.freesia-condition-treatment__track h3 { margin-top: 1.4em !important; margin-bottom: 0.35em !important; }
.freesia-condition-treatment__track > :first-child { margin-top: 0 !important; }
.freesia-condition-treatment__track p { max-width: 58ch; }
.freesia-condition-treatment__image { margin-bottom: 1.4rem !important; }
.freesia-condition-treatment__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.freesia-condition-treatment__transition { color: var(--fp-muted); }
.freesia-condition-treatment__track .freesia-checklist { margin-top: 0.6em !important; }
.freesia-condition-treatment__closing { margin-top: 2.5rem !important; }
.freesia-condition-treatment__closing p + p { margin-top: 0.8em !important; }
/* One-paragraph treatment (636): the text beside one photo. */
.freesia-condition-treatment__media { display: grid; gap: 2rem; align-items: center; }
.freesia-condition-treatment__media .freesia-condition-treatment__image { margin: 0 !important; }
.freesia-condition-treatment .freesia-condition-actions.wp-block-buttons { margin-top: 2rem !important; }
.freesia-condition-treatment__column { max-width: var(--fc-read); }
.freesia-condition-treatment__column h2 { margin-bottom: 0.6em !important; }
.freesia-condition-treatment__column h3 { margin-top: 1.4em !important; margin-bottom: 0.35em !important; }
.freesia-condition-treatment__column .wp-block-buttons { margin-top: 1.6rem !important; }

/* ------------------------------------------------------------------
 * Prevention: one tile shape — photo or icon on top, then title and text
 * ---------------------------------------------------------------- */
.freesia-condition-tips__head { margin-bottom: 1.75rem !important; }
/* Both tile kinds are one shape: a 16:10 band on top (the photo, or the icon on mist), then title and text. */
.freesia-condition-tips__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.freesia-condition-tip { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--fc-rule); }
.freesia-condition-tip :is(.freesia-condition-tip__image, .ib-media) { margin: 0; }
.freesia-condition-tip--photo .freesia-condition-tip__image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* The icon tile's band is the photo's shape, so titles line up across a row: the icon large in a white disc on a soft
   mist wash, so it reads as a designed mark rather than a photo that failed to load. */
.freesia-condition-tip--icon .ib-media { box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 132px; background: radial-gradient(circle at 50% 45%, #fff 0, var(--fp-mist) 70%); }
.freesia-condition-tip--icon .ib-media .bloom-icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.55), 0 6px 18px rgb(31 76 130 / 0.12); }
.freesia-condition-tip--icon .ib-media .bloom-icon svg { width: 42px; height: 42px; color: var(--fp-blue); }
.freesia-condition-tip .ib-text:empty { display: none; }
.freesia-condition-tip :is(.freesia-condition-tip__body, .ib-content) { flex: 1; padding: 18px 20px 20px; }
.freesia-condition-tip :is(.freesia-condition-tip__body h3, .ib-title) { margin: 0 0 0.35em !important; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--fp-ink); }
.freesia-condition-tip :is(.freesia-condition-tip__body p, .ib-text) { margin: 0 !important; font-size: 16px; line-height: 1.75; color: var(--fp-muted); }

/* ------------------------------------------------------------------
 * Programs: a grid of six (no carousel, so nothing is cut off at the edge)
 * ---------------------------------------------------------------- */
.freesia-condition-programs h2 { margin-bottom: 1.75rem !important; }
.freesia-condition-programs .wp-block-buttons { margin-top: 2rem !important; }
.freesia-condition-programs .pg-title { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.freesia-condition-programs .pg-grid { gap: 20px; }

/* ------------------------------------------------------------------
 * The listing page (inc/conditions-listing.php): header, then the eight conditions as cards
 * ---------------------------------------------------------------- */
:is(.entry-content, .is-root-container) > .freesia-conditions-section { margin-block: 0; }
.freesia-conditions-section { box-sizing: border-box; padding-block: 40px; background: #fff; color: var(--fp-text); }
.freesia-conditions-section.is-layout-constrained > :not(.alignfull) { box-sizing: border-box; max-width: var(--fc-wide); margin-inline: auto !important; }
.freesia-conditions-header { padding-block: 24px 32px; background: var(--fp-sand-50); }
.freesia-conditions-header__title { margin: 0 !important; color: var(--fp-ink); font-size: 30px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.freesia-conditions-list { padding-top: 40px; }

/* The list is a directory, not a card kit: one wide row per condition, photo at the left, the name large beside it,
   a hairline between rows. The grid block's own card markup is restyled; the block attributes stay as they are. */
.wp-block-bloom-post-grid.freesia-conditions-grid.pg-grid { display: block; }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-card {
	display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 18px;
	padding-block: 20px; border-radius: 0; border-top: 1px solid var(--fc-rule); background: none;
}
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-card:last-child { border-bottom: 1px solid var(--fc-rule); }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-image { margin: 0; overflow: hidden; border-radius: 12px; background: var(--fp-mist); }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-img { transition: transform 0.4s var(--fp-ease); }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-card:hover .pg-img { transform: scale(1.04); }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-body { display: grid; gap: 4px; padding: 0; }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-title { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-title a { color: var(--fp-ink); text-decoration: none; }
.wp-block-bloom-post-grid.freesia-conditions-grid .pg-card:hover .pg-title a { color: var(--fp-blue); }
.freesia-conditions-card__line { margin: 0 !important; max-width: 68ch; color: var(--fp-muted); font-size: 16px; line-height: 1.7; }
.freesia-conditions-actions.wp-block-buttons { justify-content: center; margin-top: 40px !important; }

/* ------------------------------------------------------------------
 * Motion: same reveal-on-scroll language as program pages (assets/js/program.js selectors cover
 * body.single-what-we-treat too); off entirely with prefers-reduced-motion.
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	body.single-what-we-treat .freesia-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--fp-ease), transform 0.5s var(--fp-ease); }
}

@media (min-width: 600px) {
	.freesia-condition-tips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Side by side from here, so the band takes the photo's shape; stacked on phones it only needs to hold the disc. */
	.freesia-condition-tip--icon .ib-media { height: auto; aspect-ratio: 16 / 10; }
}

@media (min-width: 768px) {
	.freesia-conditions-section { padding-block: 64px; }
	.freesia-conditions-header { padding-block: 32px 44px; }
	.freesia-conditions-header__title { font-size: 40px; }
	.wp-block-bloom-post-grid.freesia-conditions-grid .pg-card { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding-block: 28px; }
	.wp-block-bloom-post-grid.freesia-conditions-grid .pg-image { border-radius: 14px; }
	.wp-block-bloom-post-grid.freesia-conditions-grid .pg-title { font-size: 28px; }
	.freesia-conditions-card__line { font-size: 17px; }
	.freesia-condition-section { padding-block: 72px; font-size: 17px; }
	.freesia-condition-section p { font-size: 17px; line-height: 1.85; }
	.freesia-condition-section h2.wp-block-heading { font-size: 34px; }
	.freesia-condition-intro__grid { gap: 2.5rem; }
	.freesia-condition-signs__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
	.freesia-condition-treatment__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
	.freesia-condition-causes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
	.freesia-condition-cause { padding-inline: 0; }
}

@media (min-width: 1024px) {
	.freesia-condition-hero { padding-block: 56px 80px; }
	.freesia-condition-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 64px; }
	.freesia-condition-hero__title { font-size: 44px; line-height: 1.28; }
	.freesia-condition-hero__subtitle { font-size: 20px; }
	.freesia-condition-tips__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Four tips as one row instead of three and a lone fourth; seven (neck) as four and three. */
	:is(.freesia-condition-tips__grid--4, .freesia-condition-tips__grid--7) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.freesia-condition-treatment__media { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4rem; }
}