/* WordPress adjustments. The block editor wraps the design's elements in its
   own block classes; these rules make them render exactly like the approved
   static preview. */

/* Images: the design's own .shot / .g / .strip rules style the figures. */
.wp-block-image img { box-sizing: content-box; vertical-align: top; }

/* Hero photos fill their column; focal points from the static site. */
.wp-block-image.hero-img { margin: 0; position: relative; overflow: hidden; background: var(--card); }
.wp-block-image.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.hp-hero-recording img { object-position: 50% 55%; }
.hp-hero-mixing img { object-position: 42% 55%; }
.hp-hero-mastering img { object-position: 64% 50%; }
.hp-hero-about img { object-fit: contain !important; background: #0b0b0b; }

/* Columns blocks used as the design's two- and three-up layouts. */
.wp-block-columns.duo, .wp-block-columns.statement, .wp-block-columns.ways, .wp-block-columns.pair {
  display: grid; flex-wrap: initial; margin-bottom: 0; }
.wp-block-columns.duo > .wp-block-column, .wp-block-columns.statement > .wp-block-column,
.wp-block-columns.ways > .wp-block-column, .wp-block-columns.pair > .wp-block-column {
  flex-basis: auto; min-width: 0; }
.wp-block-columns.duo { gap: clamp(28px,5vw,72px); align-items: center !important; }
.wp-block-columns.duo--note, .wp-block-columns.duo--atmos { align-items: start !important; }
.wp-block-columns.duo .duo-photo .shot { margin: 0; }
.wp-block-columns.duo--note .duo-photo { margin-top: clamp(0px,6vw,90px); }
.wp-block-columns.duo--atmos .duo-photo { position: sticky; top: 24px; margin-top: 6px; }
.wp-block-columns.duo--flip > .duo-text { order: 2; }
@media (max-width: 760px) {
  .wp-block-columns.duo { grid-template-columns: 1fr; }
  .wp-block-columns.duo--flip > .duo-text { order: 0; }
  .wp-block-columns.duo--atmos .duo-photo { position: static; }
}
.wp-block-columns.statement { gap: clamp(26px,4vw,56px); align-items: center !important; }
.wp-block-columns.statement .shot img { width: 100%; height: auto; }
.wp-block-columns.ways { gap: clamp(24px,3.5vw,48px); }
.wp-block-columns.ways .shot { margin: 0 0 22px; }
.wp-block-columns.ways .shot img { aspect-ratio: 3/2; object-fit: cover; }
@media (min-width: 901px) { .wp-block-columns.ways .shot figcaption { min-height: 3.1em; } }
.wp-block-columns.ways > .wp-block-column { container-type: inline-size; }
.wp-block-columns.pair { gap: clamp(24px,4vw,56px); }
.wp-block-columns.pair .shot { margin: 0 0 18px; }
.wp-block-columns.pair p { margin: 0; }
.wp-block-columns.pair p + p { margin-top: 14px; }

/* Photos sitting directly in a full-width row get the design's figure margin. */
.wp-block-columns.wrap.duo .duo-photo > .shot { margin: 38px 0 34px; max-width: 560px; }

/* Rows of the About page. */
.band--rows .wp-block-columns.duo + .wp-block-columns.duo,
.band--rows .strip + .wp-block-columns.duo { margin-top: clamp(64px,9vw,120px); }

/* Early-photos strip and photo gallery as groups of image blocks. */
.strip.wp-block-group { display: flex; }
.strip .wp-block-image img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.gallery.wp-block-group { display: block; columns: 3 300px; column-gap: clamp(14px,2vw,24px); }
.gallery .wp-block-image { break-inside: avoid; margin: 0 0 clamp(14px,2vw,24px); }

/* "Budgeting your time" list, written as paragraphs so it stays editable. */
.note.wp-block-group { counter-reset: n; max-width: var(--measure); margin: 4px 0 0; }
.note.wp-block-group > p { counter-increment: n; position: relative; padding-left: 52px; margin-bottom: 18px; }
.note.wp-block-group > p::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 3px;
  font-family: 'DM Mono', monospace; font-size: 15px; letter-spacing: .1em; color: var(--mark); }

/* Groups that the design lays out itself. */
.steps.wp-block-group { display: grid; }
.svc.wp-block-group { display: grid; }
.vids.wp-block-group { display: grid; }
.hero-split.wp-block-group { display: grid; }
.hero-type.wp-block-group > .wp-block-heading { margin: 0; }

/* Form error message. */
.form-error { border: 1px solid var(--mark); color: var(--ink); padding: 14px 16px; margin-bottom: 24px; }

/* Admin bar on the front end shouldn't push the sticky hero type around. */
.admin-bar .hero-split .hero-type { top: 32px; }

/* Inline styles from the static pages, as classes. */
.pt-60 { padding-top: 60px; }
.h-thanks { font-size: clamp(44px,9vw,92px); }

/* A button on its own line is wrapped in a paragraph by the editor; drop the
   paragraph's bottom margin so spacing matches the design. */
p:has(> a.btn:only-child):last-child { margin-bottom: 0; }