/* ===========================================================================
   Asset allocation page (/allocation).

   The split section, the accordion and the features container come from
   css/marketing/sections.css. Page-specific here: the chat snippet in the
   split's right column, and the "go deeper" diversification panel.
   =========================================================================== */

/* --- Section header ------------------------------------------------------
   The mobile size only. Above 1024px this falls through to the user-agent
   default <h2> (24px/700, no margin) rather than the 20px/600 the home page
   uses; see the note in css/marketing/elements.css.
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .mz-section-header { font-size: 18px; }
}

/* ==========================================================================
   Chat snippet

   A decorative mock conversation over the split section's photograph: a
   question, Mezzi's answer, an allocation breakdown card, and a disabled
   reply bar. Each part rises into place in turn on scroll.
   ========================================================================== */

.allocation-chat {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  container-type: size;
}
.allocation-chat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.allocation-chat-snippet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sized from the photograph, not the viewport — see the note on
     .retirement-chat-snippet, which this mirrors. 16px on the design's 620px
     stage is 100cqmin/38.75, floored so the type never drops below 12px;
     every length below is an em of it. */
  font-size: clamp(12px, calc(100cqmin / 38.75), 16px);
  width: 25em;
  max-width: calc(100% - 32px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--mz-scrim-panel);
  padding: 1.75em 1.25em;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  align-items: flex-end;
}
.allocation-chat-question {
  background: var(--mz-lime);
  color: var(--mz-ink);
  font-size: 1em;
  font-weight: 600;
  padding: 0.75em;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.allocation-chat-response {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  padding-bottom: 0;
}
.allocation-chat-sender {
  font-size: 1em;
  font-weight: 600;
  color: var(--mz-white);
  margin-bottom: 0.375em;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.allocation-chat-answer {
  background: var(--mz-panel);
  border-radius: 1em;
  padding: 0.75em;
  font-size: 1em;
  font-weight: 400;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.allocation-chat-card {
  background: var(--mz-panel);
  border-radius: 1em;
  padding: 1em 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
}
.allocation-chat-card-title {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.allocation-chat-card-rows {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  border-radius: 1.25em;
  overflow: hidden;
}
.allocation-chat-card-row {
  background: var(--mz-panel);
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.5em 1em 0.5em 0.5em;
  border-radius: 0.75em;
}
.allocation-chat-card-icon {
  width: 2.25em;
  height: 2.25em;
  border-radius: 0.75em;
  overflow: hidden;
  flex-shrink: 0;
}
.allocation-chat-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.7);
}
.allocation-chat-card-name {
  flex: 1;
  min-width: 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.allocation-chat-card-name span {
  font-size: 0.75em;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.allocation-chat-card-pct {
  font-size: 1em;
  font-weight: 400;
  color: var(--mz-white);
  line-height: 1.28;
  white-space: nowrap;
  text-align: right;
  letter-spacing: -0.01em;
}
.allocation-chat-reply {
  width: 100%;
  height: 2.75em;
  background: var(--mz-panel);
  border-radius: 100px;
  display: flex;
  align-items: center;
  padding: 0.75em 0.5em 0.75em 0.75em;
  gap: 0.625em;
  opacity: 0.8;
}
.allocation-chat-reply-text {
  flex: 1;
  font-size: 1em;
  font-weight: 400;
  color: var(--mz-text-secondary);
  opacity: 0.6;
  letter-spacing: -0.01em;
}
.allocation-chat-reply-send {
  width: 2em;
  height: 2em;
  background: var(--mz-ink);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Figma's `arrow-up` at its drawn size: a 24px icon inset in the 32px
   button, i.e. 4px of padding all round. */
.allocation-chat-reply-send svg {
  width: 1.5em;
  height: 1.5em;
}
.allocation-chat-anim {
  opacity: 0;
  transform: translateY(0.75em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.allocation-chat-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   "Go deeper" diversification panel

   Two panels floating over a photograph: a holdings list on the left and a
   sector-exposure chart on the right. The chart contrasts two series — what
   is held directly (neon) against what is held indirectly through funds
   (grey) — which is the point the section is making.

   The panel is positioned by percentage against a fixed 1320/743 stage, so
   its internal offsets only hold at that ratio. Below 1024px it stops being
   an overlay and becomes a normal stacked block, and the holdings list is
   dropped entirely rather than squeezed.
   ========================================================================== */

.allocation-deeper {
  position: relative;
  width: 100%;
  aspect-ratio: 1320/743;
  overflow: visible;
}
.allocation-deeper-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.allocation-deeper-panels {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  /* 1px, not 0: Figma leaves a hairline between the two panels so the
     photograph shows through as the divider — same device as /retirement. */
  gap: 1px;
  max-width: calc(100% - 40px);
}
/* Left panel — asset class list */
.allocation-deeper-list {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--mz-scrim-panel);
  padding: 28px 20px;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
}
.allocation-deeper-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.allocation-deeper-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-lime);
  line-height: 1.28;
  letter-spacing: -0.16px;
}
.allocation-deeper-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  /* Design value is 48px on one 43px line, where Financier Display sets
     "Diversification x-ray" to exactly the 360px column. Georgia needs 424px
     at that size and wraps to two lines, which makes the panel 44px too tall
     and stops it matching the photograph's framing. 40px is the largest that
     holds one line (353px), and the line box stays pinned to the design's
     43px so the panel keeps its height regardless.

     REVERT to `font-size: 48px; line-height: 0.9;` when the real Financier
     Display files land. */
  font-size: 40px;
  line-height: 43px;
  color: var(--mz-white);
  letter-spacing: -0.48px;
}
.allocation-deeper-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.allocation-deeper-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border-radius: 20px;
  background: var(--mz-panel);
  /* Figma puts a 1px inside stroke on every row but the highlighted one. An
     inset shadow rather than a border, so the row stays exactly 52px tall. */
  box-shadow: none;
}
.allocation-deeper-row.is-highlight {
  background: var(--mz-lime);
  box-shadow: none;
}
.allocation-deeper-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--mz-panel);
}
.allocation-deeper-row.is-highlight .allocation-deeper-row-icon {
  background: var(--mz-ink);
}
.allocation-deeper-row-icon img {
  width: 24px;
  height: 24px;
}
.allocation-deeper-row-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.16px;
}
.allocation-deeper-row.is-highlight .allocation-deeper-row-name {
  color: var(--mz-ink);
}
.allocation-deeper-row-pct {
  font-size: 16px;
  font-weight: 400;
  color: var(--mz-white);
  line-height: 1.28;
  white-space: nowrap;
  text-align: right;
  letter-spacing: -0.16px;
}
.allocation-deeper-row.is-highlight .allocation-deeper-row-pct {
  color: var(--mz-ink);
}
/* Right panel — sector bar chart */
.allocation-deeper-graph {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--mz-scrim-panel);
  width: 421px;
  /* Figma positions this panel's two parts absolutely: the legend's top edge
     at 44 and the chart's at 120. 44 + 28 (legend) + 48 = 120. The panel is
     stretched to the list's height, so the 28px bottom padding is only a
     floor. */
  padding: 44px 23px 28px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.allocation-deeper-legend {
  display: flex;
  gap: 8px;
  align-items: center;
}
.allocation-deeper-legend-pill {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  padding: 4px 8px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: -0.16px;
}
.allocation-deeper-legend-pill.is-neon {
  background: var(--mz-lime);
  color: var(--mz-ink);
}
.allocation-deeper-legend-pill.is-gray {
  background: #e7e7e4;
  color: var(--mz-ink);
}
/* The dotted connector runs the whole way between the two pills. Its SVG is
   preserveAspectRatio="none", so growing it stretches the dash pattern rather
   than distorting anything. A fixed 40px left the pills bunched at the left of
   a 375px row; Figma has them at its two ends. */
.allocation-deeper-legend-line {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 1px;
}
.allocation-deeper-sectors {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.allocation-deeper-sector {
  display: flex;
  flex-direction: column;
  /* Revealed one after another when the sector chart scrolls in; see
     js/pages/allocation.js. */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.allocation-deeper-sector.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.allocation-deeper-sector-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.allocation-deeper-sector-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.16px;
}
.allocation-deeper-sector-pct {
  font-size: 16px;
  font-weight: 400;
  color: var(--mz-white);
  line-height: 1.28;
  text-align: right;
  letter-spacing: -0.16px;
}
.allocation-deeper-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  border-radius: 100px;
  overflow: hidden;
}
.allocation-deeper-bar-neon {
  height: 4px;
  background: var(--mz-lime);
  border-radius: 100px;
  flex-shrink: 0;
}
.allocation-deeper-bar-gray {
  height: 4px;
  background: #808073;
  border-radius: 100px;
  flex: 1;
  min-width: 1px;
}

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

@media (max-width: 1023px) {
  /* --- "Go deeper" panel ---------------------------------------------------
     Same treatment /retirement gets: the photograph stops being a stage, the
     two fixed-width panels become ordinary full-width blocks stacked one
     above the other, and 20px of padding keeps the photograph framing them
     instead of being covered edge to edge.

     Do not hide the list here. The "Allocation / Diversification x-ray"
     header lives inside that panel, so dropping it would leave mobile with an
     untitled chart as well as six missing asset rows.
     ------------------------------------------------------------------------- */
  /* Sticky scroll-stepper: photo stays pinned, panels swap as user scrolls */
  .allocation-deeper {
    aspect-ratio: auto;
    min-height: auto;
    height: 200vh;
    position: relative;
    overflow: clip;
  }
  .allocation-deeper-bg {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    object-fit: cover;
  }
  .allocation-deeper-panels {
    position: sticky;
    top: 0;
    height: 100vh;
    left: auto;
    transform: none;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    padding: 20px;
    margin-top: -100vh;
  }
  .allocation-deeper-list,
  .allocation-deeper-graph {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 40px);
    transition: opacity 0.4s ease;
  }
  .allocation-deeper-list {
    padding: 20px 16px; gap: 24px;
    opacity: 1;
  }
  .allocation-deeper-graph {
    padding: 20px 16px; gap: 24px;
    opacity: 0;
  }
  .allocation-deeper-list.is-panel-hidden { opacity: 0; }
  .allocation-deeper-graph.is-panel-visible { opacity: 1; }
  /* Free to wrap now that it has the full width, so the Lora cap that the
     desktop rule carries does not apply. */
  .allocation-deeper-title { font-size: 36px; line-height: 0.9; }
  /* The right-hand percentage must not be squeezed out by a long asset name. */
  .allocation-deeper-row { padding: 8px 12px 8px 8px; }
  .allocation-deeper-row-pct,
  .allocation-deeper-sector-pct { flex-shrink: 0; }

  .allocation-chat { aspect-ratio: auto; height: 440px; overflow: hidden; }
  img.allocation-chat-bg { position: absolute; inset: 0; height: 100%; }
  /* The grain reads as noise at this size, so it is dropped. */
  .allocation-chat > .mz-img-grain { display: none; }
}

/* The snippet reveal is decorative: with reduced motion requested it lands in
   its finished state instead of animating (see js/pages/allocation.js). */
@media (prefers-reduced-motion: reduce) {
  .allocation-chat-anim {
    transition: none;
  }
}