/* Bands and block styles.

   Replaces the earlier fixed homepage rules from home.css. The
   homepage now consists of core blocks that are inserted through block
   patterns. This sheet gives the blocks surface, grid and typography;
   order, column widths and content come from the editor.

   Band heights from the Figma frame "Homepage - Desktop" of 21.09.2026:
     Hero 490, teaching 435, retreat 630, location 467, more 370.
   They are deliberately no longer fixed but result from padding and
   content, so that text changes cut nothing off. */

/* ---------------------------------------------------------------
   Homepage canvas
   --------------------------------------------------------------- */
.hv-typ-home .hv-main { padding: 0; }
/* The homepage builds its own bands across the full canvas. The
   content area would otherwise limit children to 885px, which does not
   apply here. */
.hv-home > * { margin-block: 0; max-width: none; }
.hv-home__hinweis { padding: var(--hv-gap-block) var(--hv-rand); }

/* ---------------------------------------------------------------
   Band: full width of the 1400 canvas, content centred
   --------------------------------------------------------------- */
.hv-band {
  padding-block: var(--hv-gap-block);
  padding-inline: var(--hv-rand);
}

/* The surface colours are block styles, switchable in the editor under Styles. */
.hv-band.is-style-band-creme { background: var(--hv-creme); }
.hv-band.is-style-band-sand  { background: var(--hv-sand); }
.hv-band.is-style-band-weiss { background: var(--hv-flaeche); }
.hv-band.is-style-band-rot {
  background: var(--hv-tempelrot);
  border-top: var(--hv-goldkante) solid var(--hv-gold);
  border-bottom: var(--hv-goldkante) solid var(--hv-gold);
  color: #fff;
}
.hv-band.is-style-band-rot :where(h1, h2, h3, h4, h5, h6, p, li) { color: #fff; }

/* Clipped ornament at the right edge of the band. */
.hv-band--ornament { position: relative; overflow: hidden; }
.hv-band__ornament {
  position: absolute;
  top: 50%;
  right: -170px;
  width: 436px;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

/* Content lies above the ornament. */
.hv-band--ornament > .wp-block-columns { position: relative; z-index: 1; }

/* Columns in the band follow the gutter of the grid. */
.hv-band .wp-block-columns { gap: var(--hv-rinne); margin-block: 0; }
.hv-band .wp-block-column > *:first-child { margin-top: 0; }
.hv-band .wp-block-column > *:last-child  { margin-bottom: 0; }

/* Since 22.09.2026 the homepage hero sits in the content as an HTML
   block, no longer as a block pattern. Its rules live in
   startseite.css so that they can be changed there. The earlier
   .hv-hero rules were in the way and have been dropped. */

/* ---------------------------------------------------------------
   Typography in blocks (design system section 02)
   --------------------------------------------------------------- */
.is-style-hv-hero {
  font-size: var(--hv-fs-hero);
  line-height: var(--hv-lh-hero);
  letter-spacing: var(--hv-ls-display);
  font-weight: 400;
}

.hv-band h2.wp-block-heading,
.hv-home h2.wp-block-heading {
  font-size: var(--hv-fs-h2);
  line-height: var(--hv-lh-hero);
  letter-spacing: var(--hv-ls-display);
  font-weight: 400;
  margin: 0 0 var(--hv-gap-innen);
}

/* Image caption. Also applies to the caption of core/image. */
.is-style-hv-legende,
.hv-band figcaption.wp-element-caption {
  font-size: var(--hv-fs-legende);
  line-height: var(--hv-lh-text);
  margin: 8px 0 0;
  text-align: left;
}

/* Heading of a link list, for example "Explore:". */
.is-style-hv-eyebrow {
  font-size: var(--hv-fs-legende);
  letter-spacing: var(--hv-ls-eyebrow);
  text-transform: none;
  margin: 0 0 18px;
}

/* ---------------------------------------------------------------
   Arrow as a mask so that it inherits the text colour
   --------------------------------------------------------------- */
:root {
  --hv-pfeil-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M 0 5.679 L 0 7.321 L 9.091 7.321 L 4.924 11.835 L 6 13 L 12 6.5 L 6 0 L 4.924 1.165 L 9.091 5.679 L 0 5.679 Z'/%3E%3C/svg%3E");
}

.is-style-hv-link a::after,
.is-style-hv-pfeilliste a::after {
  content: "";
  display: inline-block;
  width: var(--hv-pfeil-b);
  height: var(--hv-pfeil-h);
  margin-left: var(--hv-pfeil-gap);
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: var(--hv-pfeil-maske) no-repeat center / contain;
  mask: var(--hv-pfeil-maske) no-repeat center / contain;
}

/* Link with arrow and underline (section 04). */
.is-style-hv-link { margin: 0; }
.is-style-hv-link a {
  display: inline-flex;
  align-items: center;
  color: var(--hv-anthrazit);
  text-decoration: none;
  border-bottom: 2px solid var(--hv-signalrot);
  padding-bottom: 4px;
}
.is-style-hv-link a:hover,
.is-style-hv-link a:focus { border-bottom-color: transparent; }

.is-style-band-rot .is-style-hv-link a {
  color: #fff;
  border-bottom-color: var(--hv-gold);
}

/* Arrow list: rows with a separator as in the design. */
.is-style-hv-pfeilliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.is-style-hv-pfeilliste li { margin: 0; }
.is-style-hv-pfeilliste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-pfeil-gap);
  padding: 14px 0;
  color: var(--hv-anthrazit);
  text-decoration: none;
  border-bottom: 1px solid var(--hv-sandlinie);
}
.is-style-hv-pfeilliste li:first-child a { border-top: 1px solid var(--hv-sandlinie); }
.is-style-hv-pfeilliste a:hover,
.is-style-hv-pfeilliste a:focus { color: var(--hv-tempelrot); }

/* Image with gold outline (section 07). */
.is-style-hv-goldrahmen img { border: var(--hv-goldkante) solid var(--hv-gold); }

/* ---------------------------------------------------------------
   Mobile: one column, hero full-bleed
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .hv-band { padding-inline: var(--hv-rand); }

  .hv-band .wp-block-columns { flex-direction: column; }
  .hv-band .wp-block-column { flex-basis: 100% !important; }

  .hv-band__ornament { display: none; }
}