/*
 * The shared Design section: the section shell every HBD widget renders and the backgrounds the
 * Design select offers. Enqueued as `hbd-widget-design` by HBD_Widget_Base::initialize(), so it only
 * loads on pages that actually render an HBD widget.
 *
 * Padding presets (.hbd-row--pad-s/m/l), full-bleed (.hbd-row--full), the light-text scheme
 * (.hbd-on-dark) and the four backgrounds that already exist (sky, cream, grad-peach-sky,
 * grad-sky-rings) all come from assets/css/utilities.css — this file only adds what is missing.
 * Tokens only: every value is a var(--hbd-*).
 */

/* The section shell. Live sections are a 1280px content box with the page gutter outside it
   (measured on hormonesbydesign.com at 1440: content x=80…1360), which is why the inner box is
   capped at container + two gutters rather than at the container itself. */
.hbd-w { position: relative; }
.hbd-w__inner { max-width: calc(var(--hbd-container) + 2 * var(--hbd-gutter)); margin-inline: auto; padding-inline: var(--hbd-gutter); }

/* Backgrounds not already in utilities.css. */
.hbd-row--white { background: var(--hbd-white); }
.hbd-row--sky-2 { background: var(--hbd-sky-2); }
.hbd-row--sky-3 { background: var(--hbd-sky-3); }
/* The deeper sky /our-story/'s injection-model section is painted in (Task 5). */
.hbd-row--sky-deep { background: var(--hbd-sky-deep); }
.hbd-row--peach { background: var(--hbd-peach); }
.hbd-row--lavender { background: var(--hbd-lavender); }
.hbd-row--navy { background: var(--hbd-navy); }
/* Top-to-bottom sky → peach: /our-story/'s pull-quote block (Task 5). */
.hbd-row--grad-sky-peach { background: var(--hbd-grad-sky-peach); }
.hbd-row--grad-orange { background: var(--hbd-grad-orange); }
.hbd-row--grad-blue-dark { background: var(--hbd-grad-blue-dark); }
.hbd-row--grad-teal-orange { background: var(--hbd-grad-teal-orange); }
.hbd-row--grad-bhrt-wash { background: var(--hbd-grad-bhrt-wash); }

/* Image background: the file comes from the Design section's media field as an inline
   background-image, the overlay strength as the inline --hbd-overlay custom property (0–0.8), so no
   per-instance stylesheet is generated. */
.hbd-row--image { background-position: center; background-size: cover; background-repeat: no-repeat; }
.hbd-row--image::before { content: ""; position: absolute; inset: 0; background: var(--hbd-black); opacity: var(--hbd-overlay, 0); pointer-events: none; }
/* The overlay is a sibling of the content, so the inner box needs its own stacking position to sit
   above it. Scoped to the image background so nothing else gets an unexpected positioned ancestor. */
.hbd-row--image > .hbd-w__inner { position: relative; }

/* The keyless single-clinic map embed — `HBD_Locations_Map_Widget::embed_html()`. It is here rather
   than in that widget's own stylesheet because `hbd-location-details` draws the same block inside its
   detail card and should not have to load the whole map sheet for two rules.
   Measured: full column width, 224px tall at every width, 8px radius, no border
   (docs/audit/widgets/locations-map.md §5). */
.hbd-map-embed { display: block; }
.hbd-map-embed__frame { display: block; width: 100%; height: var(--hbd-map-embed-h); border: 0; border-radius: var(--hbd-map-embed-radius); }