/* Configurable hero properties (hero-config.json). Every rule is keyed to one data-hero-* attribute so a
   board comparison can change exactly one property. Loaded by the homepage candidate and, through it,
   by every current board preview (decision-board/preview.html). */

.page--fashion .fashion-hero[data-hero-config] .fashion-hero__image { overflow: hidden; }
.page--fashion .fashion-hero[data-hero-config] .fashion-hero__image img {
  object-position: var(--hero-photo-x, 50%) var(--hero-photo-y, 25%);
  transform-origin: var(--hero-photo-x, 50%) var(--hero-photo-y, 25%);
}
@media (max-width: 760px) {
  .page--fashion .fashion-hero[data-hero-config] .fashion-hero__image img {
    object-position: var(--hero-photo-mx, 50%) var(--hero-photo-my, 25%);
    transform-origin: var(--hero-photo-mx, 50%) var(--hero-photo-my, 25%);
  }
}

/* Crop: closer framing on the faces (same photograph, same focal point). */
.page--fashion .fashion-hero[data-hero-crop="closer"] .fashion-hero__image img { transform: scale(var(--hero-zoom, 1.18)); }

/* Height: reveal the next section on desktop. */
@media (min-width: 761px) {
  .page--fashion .fashion-hero[data-hero-height="reveal"] { min-height: max(560px, 70svh); }
  .page--fashion .fashion-hero[data-hero-height="reveal"] .fashion-hero__image { min-height: calc(max(560px, 70svh) - var(--fashion-header-height)); }
}
/* Height: taller phone photo window (formerly bundled with the B tone review). */
@media (max-width: 760px) {
  .page--fashion .fashion-hero--editorial[data-hero-height="mobile-tall"] .fashion-hero__image { height: 47svh; }
}

/* Tone: refined colour for photograph B only (filter and restrained shading; no layout change). */
.page--fashion .fashion-hero[data-hero-tone="refined"] .fashion-hero__image img { filter: brightness(1.2) contrast(1.06) saturate(.72); }
.page--fashion .fashion-hero[data-hero-tone="refined"] .fashion-hero__image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, #05060745 0%, transparent 28%), linear-gradient(180deg, #0506071f 0%, transparent 24%), linear-gradient(270deg, #05060729 0%, transparent 20%);
}

/* CTA C2: both outlined; hierarchy from size and placement (labels and order unchanged). */
.page--fashion .fashion-hero[data-hero-cta="c2"] .fashion-hero__actions .fashion-cta--primary {
  background: transparent; color: var(--paper); border: 1px solid var(--paper);
}
.page--fashion .fashion-hero[data-hero-cta="c2"] .fashion-hero__actions .fashion-cta--primary:hover { background: var(--paper); color: var(--black); }
.page--fashion .fashion-hero--editorial[data-hero-cta="c2"] .fashion-hero__actions .fashion-cta--text {
  background: transparent; color: var(--paper);
  border: 1px solid #f7f7f58c; min-height: 48px; padding: 0 1.25rem; align-items: center;
}