/**
 * Styles for the fund page sections (CTA, documents, performance chart,
 * videos).
 *
 * Hand-written plain CSS, loaded separately from dist/styles/main.css rather
 * than compiled into it. The theme is Sage 9 on webpack with node-sass, which
 * cannot currently be built on a modern machine -- dist/ is committed and
 * effectively frozen. Adding rules to main.scss would therefore never reach the
 * browser. Serving from resources/assets/ matches how the theme already serves
 * its images.
 *
 * Colours are taken from resources/assets/styles/common/_variables.scss:
 *   $blue #003057   $yellow #fac85a   $lightgrey #f6f5f4   $brown #85714d
 */

/* ---------- Merkitse rahastoa (CTA) ---------- */

.fund-cta .container {
  text-align: center;
}

.fund-cta__title {
  margin-bottom: 0.4em;
}

.fund-cta .lead {
  margin: 0 auto 1.75em;
  max-width: 46rem;
}

.fund-cta__actions {
  margin: 0;
}

.fund-cta__button {
  font-size: 1.125em;
  padding: 0.7em 2.2em;
  text-decoration: none;
}

/* main.css carries `.section p a { color: #003057 }`, which outweighs
   `.button { color: #fac85a }` and rendered the label blue on a blue button --
   invisible until :hover happened to be specific enough to win. The button is
   no longer wrapped in a <p>, but pin the colour here as well so it cannot
   regress if the markup ever changes back. */
.section .fund-cta__button,
.section .fund-cta__button:hover,
.section .fund-cta__button:focus,
.fund-cta__button:hover,
.fund-cta__button:focus {
  color: #fac85a;
  text-decoration: none;
}

/* ---------- Rotated section titles ---------- */

/* .rotate-header positions the vertical heading absolutely, so it adds no
   height of its own; when a section's content is shorter than the title, the
   title runs past the bottom and `.section { overflow: hidden }` clips it.
   Floor the container height against the real title instead of a fixed guess a
   longer heading would outgrow -- the template publishes the character count as
   --fund-title-chars. Roughly 2.5em per character tracks the 4.5em heading with
   a little headroom. Only applies from the breakpoint where the theme actually
   rotates the title. */
@media (min-width: 700px) {
  .fund-docs .container,
  .fund-chart .container,
  .fund-videos .container {
    min-height: calc(var(--fund-title-chars, 0) * 2.5em);
  }
}

/* ---------- Dokumentit ---------- */

.fund-docs__list {
  margin: 2em 0 0;
  padding: 0;
  list-style: none;
}

.fund-docs__item {
  border-top: 1px solid rgba(0, 48, 87, 0.15);
}

.fund-docs__item:last-child {
  border-bottom: 1px solid rgba(0, 48, 87, 0.15);
}

.fund-docs__link {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 1.1em 0.25em;
  color: #03080b;
  text-decoration: none;
  transition: 0.2s ease-in-out color, 0.2s ease-in-out background-color;
}

.fund-docs__link:hover,
.fund-docs__link:focus {
  color: #003057;
  background-color: rgba(0, 48, 87, 0.04);
  text-decoration: none;
}

.fund-docs__icon {
  flex: 0 0 auto;
  width: 1.6em;
  height: auto;
}

.fund-docs__name {
  flex: 1 1 auto;
}

/* Reads as a link on its own, so it stays legible next to the file name. */
.fund-docs__action {
  flex: 0 0 auto;
  color: #003057;
  font-size: 0.875em;
  text-decoration: underline;
  white-space: nowrap;
}

.fund-docs__desc {
  margin: -0.4em 0 1.1em;
  padding-left: calc(1.6em + 0.9em);
  font-size: 0.9em;
  opacity: 0.75;
}

/* ---------- Tuottokehitys ---------- */

.fund-chart__figure {
  margin: 2em 0 0;
}

.fund-chart__image {
  display: block;
  width: 100%;
  height: auto;
}

.fund-chart__plot {
  position: relative;
  padding-left: 3.5em;
}

.fund-chart__svg {
  display: block;
  width: 100%;
  height: 320px;
  overflow: visible;
}

.fund-chart__area {
  fill: rgba(0, 48, 87, 0.08);
}

.fund-chart__line {
  fill: none;
  stroke: #003057;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The high/low readings sit outside the stretched viewBox so they are not
   distorted along with it. */
.fund-chart__scale {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.8em;
  opacity: 0.6;
}

.fund-chart__labels {
  display: flex;
  justify-content: space-between;
  margin: 0.75em 0 0;
  padding-left: 3.5em;
  list-style: none;
  font-size: 0.8em;
  opacity: 0.6;
}

.fund-chart__labels li {
  flex: 0 1 auto;
}

.fund-chart__note {
  margin-top: 1.5em;
  font-size: 0.85em;
  opacity: 0.7;
}

/* ---------- Videot ---------- */

.fund-videos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  margin-top: 2em;
}

@media (min-width: 700px) {
  .fund-videos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fund-videos__item {
  margin: 0;
}

.fund-videos__caption {
  display: block;
  margin-top: 0.75em;
}

.fund-videos__title {
  display: block;
  font-family: "Bembo", serif;
  font-size: 1.15em;
}

.fund-videos__desc {
  display: block;
  font-size: 0.9em;
  opacity: 0.75;
}

/* Also defined inline by the document bank template; kept identical here so
   the fund page does not depend on that partial being rendered. */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}