/* Homepage, Holy Vajrasana
   ------------------------------------------------------------------
   Styles of the homepage sections. The markup lives in the repo under
   homepage/*.html, one HTML block per section.

   Loaded by functions.php on the front page and on pages with the
   full-bleed template, after all other theme stylesheets so that these
   rules win ties. It used to be pasted into the Customizer, but that
   field is stored per theme, is lost silently on a theme switch and is
   run through kses for users without unfiltered_html, which turns the
   child selector ">" into ">".

   Colour and size variables come from the theme (tokens.css) and are
   available on every page. To change a value permanently, change it
   there, not here.

   Structure: first the shared scaffolding, then the building blocks
   that appear in several bands, then the five sections in page order,
   and finally the mobile block.
   ------------------------------------------------------------------ */


/* === Shared scaffolding of all sections ========================== */

/* A section spans the full 1400px canvas. */
.hv-sec {
  position: relative;
}

/* Content that should only span columns 3 to 10: 885px, centred.
   Arithmetically this is exactly the content width of the subpages. */
.hv-sec__inner {
  max-width: var(--hv-inhalt);
  margin-inline: auto;
}

/* Surface colours of the bands. */
.hv-sec--creme { background: var(--hv-creme); }
.hv-sec--sand  { background: var(--hv-sand); }
.hv-sec--rot {
  background: var(--hv-tempelrot);
  border-top: var(--hv-goldkante) solid var(--hv-gold);
  border-bottom: var(--hv-goldkante) solid var(--hv-gold);
  /* Cream instead of white, on request from 22.09.2026. The main menu in
     the header is unaffected, it is a different component
     (.hv-nav a in layout.css). */
  color: var(--hv-creme);
}
.hv-sec--rot :where(h1, h2, h3, p, li, a) { color: var(--hv-creme); }

/* Bands 2 to 5 share the same padding at the top and bottom. The band
   heights from the frame (435, 630, 467, 370) are deliberately not set
   fixed: they result from padding and content, so that longer text
   never gets cut off. */
.hv-sec--band {
  padding-block: var(--hv-gap-block);
  padding-inline: var(--hv-rand);
}

/* The grid inside the content area: 8 grid columns, 24px gutter.
   8 x 89.7 plus 7 x 24 gives the 885 of the content width. Spans are
   set on the columns, never as a fixed pixel width. */
.hv-raster {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: var(--hv-rinne);
  align-items: start;
}

/* First and last child of a column without outer margin, otherwise the
   distance to the band edge is off. */
.hv-raster > * > *:first-child { margin-top: 0; }
.hv-raster > * > *:last-child  { margin-bottom: 0; }


/* === Building blocks ============================================ */

/* Band headings. The hero has its own size. */
.hv-sec h2 {
  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);
}

.hv-sec p {
  margin: 0 0 var(--hv-gap-innen);
  line-height: var(--hv-lh-text);
}

/* Image caption, identical everywhere. */
.hv-sec .hv-legende {
  font-size: var(--hv-fs-legende);
  line-height: var(--hv-lh-text);
  margin: 8px 0 0;
  text-align: left;
}

/* Arrow as a mask so that it inherits the text colour. Own name so that
   the homepage does not depend on bloecke.css; that stylesheet loses
   its homepage rules section by section. */
.hv-sec {
  --hv-home-pfeil: 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");
}

.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-home-pfeil) no-repeat center / contain;
  mask: var(--hv-home-pfeil) no-repeat center / contain;
}

/* The link button is the theme component from layout.css: the class
   hv-link sits on the a itself, the underline lies on the a. On a red
   background the link additionally carries hv-link--auf-rot. There is
   deliberately no version of its own here, otherwise paragraph and link
   each get an underline.

   Only the arrow differs from the theme markup: it is not an inline SVG
   but a CSS mask on ::after, so the section markup contains no <svg>.
   WordPress strips SVG from post content on save when the user lacks
   the unfiltered_html capability, and the arrows would silently vanish.
   As a flex item of .hv-link the pseudo-element is spaced by the gap
   the theme already sets, so it needs no margin of its own. */
.hv-sec .hv-link::after {
  content: "";
  flex-shrink: 0;
  width: var(--hv-pfeil-b);
  height: var(--hv-pfeil-h);
  background-color: currentColor;
  -webkit-mask: var(--hv-home-pfeil) no-repeat center / contain;
  mask: var(--hv-home-pfeil) no-repeat center / contain;
}

/* Letter-spaced line above a link list, for example "Explore:". */
.hv-sec .hv-eyebrow {
  font-size: var(--hv-fs-legende);
  letter-spacing: var(--hv-ls-eyebrow);
  margin: 0 0 18px;
}

/* Link list with a rule above and below and an arrow on the right. */
.hv-pfeilliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hv-pfeilliste li { margin: 0; }
/* The arrow sits directly after the label, not at the right edge. The
   row stays as wide as the column so that the rules run through.
   Row pitch 64px from the Figma export: 18 padding, 26 row height,
   2 rule. */
.hv-pfeilliste a {
  display: flex;
  align-items: center;
  padding: 18px 0;
  font-size: var(--hv-fs-link);
  color: var(--hv-anthrazit);
  text-decoration: none;
  border-bottom: var(--hv-linie) solid var(--hv-sandlinie);
}
.hv-pfeilliste li:first-child a { border-top: var(--hv-linie) solid var(--hv-sandlinie); }
.hv-pfeilliste a:hover,
.hv-pfeilliste a:focus { color: var(--hv-tempelrot); }

/* Image with a fixed crop. The aspect ratio is set on the respective
   class, the file is only cropped, never distorted. */
.hv-bild { margin: 0; }
.hv-bild img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hv-bild--317 img { aspect-ratio: 317 / 238; }
.hv-bild--545 img { aspect-ratio: 545 / 321; }
.hv-bild--431 img { aspect-ratio: 431 / 323; }

/* Gold outline (design system section 07). The 2px lie inside so that
   the outer edge stays flush with the grid. */
.hv-bild--goldrahmen img {
  box-sizing: border-box;
  border: var(--hv-goldkante) solid var(--hv-gold);
}


/* === 1. Hero, 490px ============================================= */

/* Image 802px full-bleed at the left edge, text area on the right on
   sand. The 802 come from the Figma frame, the rest fills the area. */
.hv-hero {
  display: flex;
  align-items: stretch;
}

.hv-hero__bild {
  flex: 0 0 802px;
  max-width: 802px;
  margin: 0;
}

.hv-hero__bild img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 802 / 490;
  object-fit: cover;
}

.hv-hero__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--hv-sand);
  /* Only 10px at the bottom so that the caption sits close to the band
     edge. The block spacing still applies at the top and the sides. */
  padding: var(--hv-gap-block) var(--hv-rand) 10px;
}

.hv-hero__text > * {
  margin: 0 0 var(--hv-gap-innen);
}

.hv-hero__text h1 {
  font-size: var(--hv-fs-hero);
  line-height: var(--hv-lh-hero);
  letter-spacing: var(--hv-ls-display);
  font-weight: 400;
}

/* The caption sits at the foot of the area, not directly below the
   text. Its distance to the bottom edge is the 10px of padding. */
.hv-hero__text > .hv-legende {
  margin-top: auto;
  margin-bottom: 0;
}


/* === 2. Buddhist teaching and practice, 435px =================== */

/* Three columns: ornament 2, title and text 3, link list 3.
   In the frame all three are centred in the band, not at the top. The
   band height is set by the ornament, it is the tallest of the three
   columns. */
.hv-lehre__raster { align-items: center; }

.hv-lehre__raster > .hv-lehre__ornament { grid-column: span 2; }
.hv-lehre__raster > .hv-lehre__text     { grid-column: span 3; }
.hv-lehre__raster > .hv-lehre__liste    { grid-column: span 3; }

/* The ornament is narrower than its grid column and centred in it. In
   the frame its centre is at x 360, the centre of columns 3 and 4 at
   359. */
.hv-lehre__ornament { margin: 0; }
.hv-lehre__ornament img {
  display: block;
  width: 137px;
  height: auto;
  margin-inline: auto;
  opacity: 0.6;
}

/* The vertical line belongs to the text block and sits at its right
   edge. Its height is therefore the height of the text block, not that
   of the list. In the frame it lies at x 799 to 801, the column ends
   at 802. Colour like the separators of the list. */
.hv-lehre__text {
  border-right: var(--hv-linie) solid var(--hv-sandlinie);
  /* In the export the text ends at x 779, one gutter before the line.
     Without this space the heading would run into the line. */
  padding-right: var(--hv-rinne);
}


/* === 3. The rhythm of retreat, 630px ============================ */

/* Two columns: title with image 3, image with text and link 5. */
.hv-retreat__raster > .hv-retreat__links  { grid-column: span 3; }
.hv-retreat__raster > .hv-retreat__rechts { grid-column: span 5; }

/* The top edge of the right image lies on the top edge of the
   heading, so both columns start at the same height. */

/* Distance from the caption to the text. The block spacing would be
   too large here, the inner spacing too small. */
.hv-retreat__rechts > .hv-bild { margin-bottom: 40px; }


/* === 4. Near the Sierra Nevada, 467px =========================== */

/* Red band with gold edge, content in two halves of 4 columns each.
   The cloud ornament runs off the canvas on the right and sits behind
   the content. */
.hv-lage { overflow: hidden; }

.hv-lage__ornament {
  position: absolute;
  top: 50%;
  right: -170px;
  width: var(--hv-wolke-w);
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.hv-lage__raster {
  position: relative;
  z-index: 1;
}

.hv-lage__raster > .hv-lage__text { grid-column: span 4; }
.hv-lage__raster > .hv-lage__bild { grid-column: span 4; }

/* From the top edge of the band to the top edge of the image it is
   69px, of which the padding accounts for 50. */
.hv-lage__bild { padding-top: 19px; }

/* In the frame the text is not at the top but centred to the image. */
.hv-lage__text { align-self: center; }


/* === 5. Blog and seminary, 370px ================================ */

/* Two columns of equal width, 4 grid columns each. */
.hv-weiter__raster > .hv-weiter__spalte { grid-column: span 4; }


/* === Mobile ===================================================== */

@media (max-width: 767px) {

  /* Every grid becomes a single column. The row gap equals the spacing
     between blocks. */
  .hv-raster {
    grid-template-columns: 1fr;
    row-gap: var(--hv-gap-block);
  }

  /* The column spans of the desktop version must go, they are not
     meaningful in a single column. A "span 3" in a one-column grid
     creates two implicit tracks, and the gutters between them are taken
     from the width of the one real column. Since the spans differ
     between the items of a section (retreat: 3 and 5), the items came
     out at different widths, and the altar image was 48px narrower than
     the content. Same specificity as the desktop rules, so this block
     wins by coming later. */
  .hv-sec .hv-raster > * { grid-column: auto; }

  /* The offset of the desktop version is dropped. */
  .hv-lage__bild { padding-top: 0; }

  .hv-retreat__rechts > .hv-bild { margin-bottom: var(--hv-gap-innen); }

  /* The vertical line is dropped, it makes no sense without a
     neighbouring column, and so is the space in front of it. */
  .hv-lehre__text {
    border-right: 0;
    padding-right: 0;
  }

  /* The floral ornament is not in the mobile frame. */
  .hv-lehre__ornament { display: none; }

  /* The ornament does not come along on mobile. */
  .hv-lage__ornament { display: none; }

  .hv-hero {
    flex-direction: column;
  }

  .hv-hero__bild {
    flex: 1 1 auto;
    max-width: none;
  }

  .hv-hero__bild img {
    aspect-ratio: 390 / 294;
  }

  /* On mobile the bottom holds text instead of the caption, so the full
     block spacing applies again. */
  .hv-hero__text {
    padding: var(--hv-gap-block) var(--hv-rand);
  }

  /* From here on the caption sits directly below the image and above
     the heading. That is how it is in the "Homepage - Mobile" frame. */
  .hv-hero__text > .hv-legende {
    order: -1;
    margin: 0 0 var(--hv-gap-innen);
  }

}