/* Default hero: one native white card; copy precedes media or information. */
.outloud-editorial-hero {
 display: block;
 padding: 0;
 background: transparent;
}
.outloud-editorial-hero > .outloud-hero-copy {
 margin: 0;
 padding: var(--wp--custom--hero--card-padding-block) var(--wp--custom--spacing--hero);
 border-radius: var(--wp--custom--radius--card);
 align-self: stretch;
 display: flex;
 flex-direction: column;
 background: var(--wp--preset--color--auris-white);
 text-align: left;
}
.outloud-editorial-hero .outloud-editorial-heading {
 max-width: none;
 color: var(--wp--preset--color--outloud-orange-text);
 letter-spacing: -.025em;
 text-wrap: balance;
 margin-block: 0 var(--wp--preset--spacing--40);
}
.outloud-editorial-hero .outloud-editorial-intro {
 max-width: 48ch;
 margin: 0 0 var(--wp--preset--spacing--30);
 font-size: var(--wp--preset--font-size--medium);
 text-wrap: pretty;
}
/* Match the navigation's crisp lower edge and strength in the hero palette. */
.outloud-editorial-hero > .outloud-hero-copy {
 box-shadow: 0 .375rem 0 color-mix(in srgb, var(--outloud-wave-color, var(--wp--preset--color--outloud-hero-surface)) 80%, var(--wp--preset--color--auris-navy));
}
.outloud-editorial-hero .outloud-editorial-actions {
 justify-content: flex-start;
 gap: .75rem 1rem;
 margin-block-start: var(--wp--preset--spacing--40);
}
.outloud-editorial-actions > .wp-block-buttons,
.outloud-editorial-actions > p { margin-block: 0; }
/* Information replaces the photograph without creating a second card. */
.outloud-editorial-hero .outloud-hero-resources { gap: 1.5rem; }
.outloud-hero-resources > * { margin-block: 0; }
.outloud-hero-resources > p { max-width: 58ch; }
.outloud-hero-resources .wp-block-buttons { gap: .75rem 1rem; }
.outloud-company-details { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--30); }
.outloud-company-details > * { margin: 0; }
.outloud-company-identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20); }
.outloud-company-identity > * { margin: 0; }
/* Commerce shares the hero surface; only its native content layout differs. */
.outloud-editorial-hero :is(.outloud-product-hero-layout, .outloud-hero-card-layout) {
 display: grid;
 align-items: center;
 gap: var(--wp--custom--spacing--columns);
 margin: 0;
}
/* Product source order stays title, cover, description and actions at every size. */
.outloud-editorial-hero .outloud-product-hero-layout {
 grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
 grid-template-rows: auto 1fr;
 align-items: start;
 row-gap: var(--wp--custom--hero--text-gap);
}
.outloud-editorial-hero .outloud-product-hero-layout > * { min-width: 0; margin-block: 0; }
.outloud-product-hero-layout > .outloud-editorial-heading { grid-column: 1; grid-row: 1; }
.outloud-product-hero-layout > .outloud-product-media { grid-column: 2; grid-row: 1 / 3; }
.outloud-product-hero-layout > .outloud-product-copy { grid-column: 1; grid-row: 2; }
/* Keep a short introduction at a readable width; the photo takes the rest. */
.outloud-hero-card-layout {
 grid-template-columns: minmax(0, min(48%, var(--wp--custom--hero--copy-max-width))) minmax(0, 1fr);
}
:is(.outloud-product-hero-layout, .outloud-hero-card-layout) > .wp-block-column { min-width: 0; }
:is(.outloud-product-copy, .outloud-hero-card-copy) { align-self: center; }
/* This native introduction column owns its rhythm once, through the hero role.
   Preset font-size classes keep the lead and supporting text at separate levels. */
.outloud-editorial-hero :is(.outloud-hero-card-copy, .outloud-hero-card-resources, .outloud-product-copy) {
 align-self: start;
 display: flex;
 flex-direction: column;
 gap: var(--wp--custom--hero--text-gap);
}
.outloud-editorial-hero :is(.outloud-hero-card-copy, .outloud-hero-card-resources, .outloud-product-copy) > * { margin-block: 0; }
.outloud-hero-card-resources > p { max-width: 58ch; }
.outloud-hero-card-resources > .outloud-hero-resources { display: flex; flex-direction: column; }
.outloud-hero-card-image { margin: 0; }
.outloud-hero-card-image img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: var(--wp--custom--radius--image);
}
/* Let a growing photo retain its shape instead of becoming a shallow strip.
   Longer copy can still grow the row. Product covers remain uncropped. */
@media (min-width: 64.001rem) {
 .outloud-editorial-hero :is(.outloud-hero-card-copy, .outloud-hero-card-resources) { align-self: stretch; }
 .outloud-editorial-hero :is(.outloud-hero-card-copy, .outloud-hero-card-resources) > .outloud-editorial-actions { margin-block-start: auto; }
 .outloud-hero-card-media { position: relative; align-self: stretch; width: 100%; min-width: 0; aspect-ratio: 2 / 1; }
 .outloud-hero-card-image { position: absolute; inset: 0; }
 .outloud-hero-card-image img { height: 100%; object-fit: cover; }
}
/* A page without a featured photograph never leaves an empty media track. */
.outloud-hero-card-media:not(:has(.outloud-hero-card-image)) { display: none; }
.outloud-hero-card-layout:not(:has(.outloud-hero-card-image, .outloud-hero-card-resources)) .outloud-hero-card-copy {
 grid-column: 1 / -1;
 max-width: var(--wp--custom--hero--copy-max-width);
}
.outloud-product-copy .wp-block-post-content { max-width: 68ch; }
.outloud-product-copy .wp-block-post-content > :first-child { margin-block-start: 0; }
.outloud-product-copy .wp-block-post-content > :last-child { margin-block-end: 0; }
.outloud-product-media .outloud-product-image { max-width: 30rem; margin: 0 auto; }
.outloud-product-image img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: var(--wp--custom--radius--image);
}
.outloud-product-media:not(:has(.outloud-product-image)) { display: none; }
.outloud-editorial-hero .outloud-product-hero-layout:not(:has(.outloud-product-image)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 64rem) {
 .outloud-editorial-hero {
  --wp--custom--hero--card-padding-block: var(--wp--custom--hero--compact-card-padding-block);
  --wp--custom--hero--text-gap: var(--wp--custom--hero--compact-text-gap);
 }
 .outloud-editorial-hero :is(.outloud-product-hero-layout, .outloud-hero-card-layout) {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--wp--custom--hero--stack-gap);
 }
 .outloud-editorial-hero .outloud-product-hero-layout { grid-template-rows: auto; }
 .outloud-product-hero-layout > :is(.outloud-editorial-heading, .outloud-product-media, .outloud-product-copy) {
  grid-column: auto;
  grid-row: auto;
 }
}
/* A promotional aside has its own compact rhythm; its action follows the copy. */
.outloud-editorial-hero .outloud-hero-promotion {
 width: 100%;
 max-width: calc(var(--wp--custom--hero--promotion-max-width) + 2 * var(--wp--custom--card--padding));
 justify-self: center;
 align-self: center;
 padding: var(--wp--custom--card--padding);
 gap: var(--wp--custom--card--text-gap);
 border: var(--wp--custom--card--border-width) solid var(--wp--custom--card--green--border);
 border-radius: var(--wp--custom--radius--inset);
 background: var(--wp--custom--card--green--background);
}
.outloud-editorial-hero .outloud-hero-promotion > .outloud-editorial-actions {
 margin-block-start: var(--wp--preset--spacing--20);
}
.outloud-hero-card-layout:has(> .outloud-hero-promotion) > .outloud-hero-card-copy { align-self: center; }
@media (max-width: 64rem) {
 .outloud-editorial-hero .outloud-hero-promotion {
  width: calc(100% + 2 * var(--wp--custom--spacing--hero));
  max-width: none;
  margin-inline: calc(-1 * var(--wp--custom--spacing--hero));
  margin-block-end: calc(-1 * var(--wp--custom--hero--card-padding-block));
  padding: var(--wp--custom--hero--card-padding-block) var(--wp--custom--spacing--hero);
  border-radius: 0 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card);
 }
}
/* Company and address columns respond to their available space, not the page. */
.outloud-editorial-hero .outloud-company-layout {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
 align-items: stretch;
 flex: 1;
 margin: 0;
 gap: var(--wp--preset--spacing--50);
}
.outloud-company-layout > .wp-block-column { display: flex; flex-direction: column; }
.outloud-company-identities { display: flex; flex: 1; flex-direction: column; margin: 0; gap: var(--wp--preset--spacing--50); }
.outloud-company-identities > * { margin: 0; }
/* Keep secondary links on the final row of each card. */
.outloud-company-identities > .outloud-hero-text-links {
 margin-block-start: auto;
}
.outloud-editorial-hero .outloud-contact-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }
.outloud-contact-actions > p { margin: 0; }
.outloud-contact-actions a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Secondary destinations remain ordinary, underlined links with roomy targets. */
.outloud-editorial-hero .outloud-hero-text-links { gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); }
.outloud-hero-text-links > p { margin: 0; }
.outloud-hero-text-links a {
 display: inline-flex;
 align-items: center;
 min-height: var(--wp--custom--button--compact--min-height);
}
/* Portrait phones keep a readable lead without turning it into a tall column.
   Copy and images retain their native source order and unrestricted height. */
@media (max-width: 30rem) {
 .outloud-hero-band {
  --wp--custom--hero--compact-band-padding: var(--wp--custom--hero--phone--band-padding);
 }
 .outloud-editorial-hero {
  --wp--custom--hero--card-padding-block: var(--wp--custom--hero--phone--card-padding);
  --wp--custom--hero--text-gap: var(--wp--custom--hero--phone--text-gap);
  --wp--custom--hero--stack-gap: var(--wp--preset--spacing--40);
 }
 .outloud-editorial-hero .outloud-hero-card-copy > p.has-large-font-size {
  /* The native preset utility is !important; this is its bounded mobile role. */
  font-size: var(--wp--custom--hero--phone--lead-size) !important;
 }
 .outloud-editorial-hero .outloud-editorial-actions > :is(.wp-block-buttons, .wp-block-button),
 .outloud-editorial-hero .outloud-editorial-actions > .wp-block-buttons > .wp-block-button {
  width: 100%;
 }
 .outloud-editorial-hero .outloud-editorial-actions .wp-block-button > .wp-block-button__link {
  width: 100%;
 }
}