/* Homepage uses core Group/Columns/Image blocks. These classes add shared
   section rhythm and consistent image crops in both editor and front end. */
/* Native source order: introduction, photograph, actions, supporting paragraph. */
.outloud-editorial-hero .outloud-home-hero-layout {
 display: grid;
 grid-template-columns: minmax(0, min(48%, var(--wp--custom--hero--copy-max-width))) minmax(0, 1fr);
 grid-template-rows: auto 1fr auto;
 gap: var(--wp--custom--hero--text-gap) var(--wp--custom--spacing--columns);
}
.outloud-home-hero-layout > * { min-width: 0; margin: 0; }
.outloud-home-hero-layout > .outloud-hero-card-copy { grid-column: 1; grid-row: 1; }
.outloud-home-hero-layout > .outloud-home-hero-media { grid-column: 2; grid-row: 1 / 4; position: relative; min-width: 0; aspect-ratio: 2 / 1; }
.outloud-editorial-hero .outloud-home-hero-layout > .outloud-editorial-actions { grid-column: 1; grid-row: 3; margin: 0; }
.outloud-editorial-hero .outloud-home-hero-layout > p { grid-column: 1; grid-row: 2; margin: 0; }
@media (max-width: 64rem) {
 .outloud-editorial-hero .outloud-home-hero-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  gap: var(--wp--custom--hero--text-gap);
 }
 .outloud-editorial-hero .outloud-home-hero-layout > :is(.wp-block-group, p) { grid-column: auto; grid-row: auto; }
 .outloud-home-hero-layout > .outloud-home-hero-media { aspect-ratio: auto; width: 100%; }
 .outloud-home-hero-media .outloud-hero-card-image { width: 100%; max-width: none; }
 .outloud-home-hero-media .outloud-hero-card-image img { width: 100%; height: auto; }
}
.outloud-home-section > .wp-block-columns { margin-block-end: 0; gap: var(--wp--custom--spacing--columns); }
.outloud-home-hero { align-items: center; }
.outloud-home-hero-image img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: .75rem; }
.outloud-home-card-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .5rem; }
.outloud-home-contain img { object-fit: contain; }
.outloud-home-panel { padding: var(--wp--custom--spacing--card); border-radius: var(--wp--custom--radius--card); }
.outloud-home-contact { color: var(--wp--preset--color--auris-navy); }
/* Stack before long Finnish service text becomes cramped between 782–960px. */
@media (min-width: 782px) and (max-width: 60rem) {
	.outloud-home-hero, .outloud-home-cards { flex-direction: column; }
	.outloud-home-hero > .wp-block-column, .outloud-home-cards > .wp-block-column { width: 100%; }
}

/* Scoped styles for the homepage's native groups and service cards. */
.outloud-services-heading {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 gap: var(--wp--preset--spacing--30);
}
.outloud-services-heading > * { margin: 0; }
/* Section actions use the shared compact button size. */
.outloud-services-heading .wp-block-button__link {
 padding: var(--wp--custom--button--compact--padding-block) var(--wp--custom--button--compact--padding-inline);
 min-height: var(--wp--custom--button--compact--min-height);
 font-size: var(--wp--custom--button--compact--font-size);
}
.outloud-home-about,
.outloud-home-contact {
 padding: var(--wp--custom--spacing--card);
 border-radius: var(--wp--custom--radius--card);
}
.outloud-home-materials h2,
.outloud-home-about h2,
.outloud-home-contact h2 { margin-block-start: 0; }
.wp-block-group.outloud-home-about {
 /* Keep the native green Group choice, but resolve its surface through the shared card role. */
 background-color: var(--wp--custom--card--green--background) !important;
 border: var(--wp--custom--card--border-width) solid var(--wp--custom--card--green--border);
}
.outloud-material-card {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 14rem;
 align-items: start;
 gap: var(--wp--custom--spacing--columns);
}
.outloud-home-materials { padding: 0; border-radius: 0; }
.outloud-home-materials > .wp-block-columns.outloud-content-columns {
 max-width: none;
 margin-block-start: var(--wp--custom--spacing--subsection);
 gap: var(--wp--custom--spacing--subsection) var(--wp--custom--spacing--columns);
}
.outloud-home-materials .outloud-material-card { grid-template-columns: minmax(0, 1fr) min(28%, 10rem); gap: 1.5rem; }
.outloud-home-materials .wp-block-column { margin: 0; }
.outloud-material-copy p { max-width: 60ch; }
.outloud-material-card h3 { margin-block-start: 0; }
.outloud-material-card .outloud-material-image { margin: 0; align-self: center; }
.outloud-material-images {
 display: grid;
 align-self: center;
 gap: var(--wp--preset--spacing--30);
}
.outloud-material-images img { display: block; width: 100%; height: auto; }
.outloud-home-current .wp-block-query-no-results {
 padding: var(--wp--custom--spacing--card);
 background: var(--wp--preset--color--outloud-surface);
 border: 1px solid var(--wp--preset--color--auris-mist);
 border-radius: var(--wp--custom--radius--card);
}
.outloud-home-current .wp-block-query-no-results > :first-child { margin-block-start: 0; }
.outloud-home-current .wp-block-query-no-results > :last-child { margin-block-end: 0; }
.outloud-home-current .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 64rem) {
 .outloud-home-current .wp-block-post-template { grid-template-columns: 1fr; }
 /* Separate stacked topics: the shop images belong to the preceding copy. */
 .outloud-home-materials > .outloud-content-columns > .wp-block-column + .wp-block-column {
  border-block-start: var(--wp--custom--card--border-width) solid var(--wp--custom--card--border);
  padding-block-start: var(--wp--custom--spacing--subsection);
 }
}
@media (max-width: 30rem) {
 .outloud-home-materials .outloud-material-card { grid-template-columns: 1fr; }
 .outloud-material-card .outloud-material-image { width: 9rem; }
 .outloud-material-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .outloud-material-images .outloud-material-image { max-width: 100%; }
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
 .outloud-material-card { grid-template-columns: minmax(0, 1fr) 8rem; gap: 1.5rem; }
}

/* Mobile homepage services: full-width landscape media above the copy. */
@media (max-width: 48.875rem) {
 /* Centre actions within their own content column, including wrapped rows. */
 .outloud-home-section .wp-block-buttons {
  width: 100%;
  justify-content: center;
  justify-self: stretch;
  align-self: stretch;
 }
 .outloud-home-section .outloud-home-hero-layout > .outloud-editorial-actions { justify-content: center; }
 .outloud-home-section :where(.outloud-editorial-actions) > .wp-block-buttons { width: auto; }
 .outloud-home-section .outloud-card-actions {
  align-self: stretch;
  align-items: center;
 }
 .outloud-home-section .outloud-card-body > .wp-block-read-more { align-self: center; }
 .outloud-home-services .wp-block-columns.outloud-service-cards > .wp-block-column {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
 }
 .outloud-home-services .outloud-service-cards > .wp-block-column > .wp-block-image {
  grid-row: auto;
  width: 100%;
 }
 .outloud-home-services .outloud-service-cards > .wp-block-column > :not(.wp-block-image) { grid-column: 1; }
 .outloud-home-services .wp-block-columns.outloud-service-cards > .wp-block-column > .wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
 }
}