/* ==========================================================================
   YASDER MARINE — Layout: container, grid, section rhythm, reveal system
   ========================================================================== */

.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.l-container--wide { max-width: 1560px; }

.l-section { padding-block: var(--section-y); }
.l-section--tight { padding-block: var(--section-y-tight); }
.l-section--flush-top { padding-top: 0; }

.l-band-paper { background: var(--paper); }
.l-band-paper-2 { background: var(--paper-2); }
.l-band-white { background: var(--white); }

/* ---- 12-column editorial grid ------------------------------------------ */
.l-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) clamp(1rem, 2vw, 2rem);
}

@media (max-width: 899px) {
  .l-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Column spans — desktop only; everything is full width below 900px. */
@media (min-width: 900px) {
  .l-col-3 { grid-column-end: span 3; }
  .l-col-4 { grid-column-end: span 4; }
  .l-col-5 { grid-column-end: span 5; }
  .l-col-6 { grid-column-end: span 6; }
  .l-col-7 { grid-column-end: span 7; }
  .l-col-8 { grid-column-end: span 8; }
  .l-col-9 { grid-column-end: span 9; }
  .l-col-12 { grid-column-end: span 12; }
  .l-start-2 { grid-column-start: 2; }
  .l-start-6 { grid-column-start: 6; }
  .l-start-7 { grid-column-start: 7; }
  .l-start-8 { grid-column-start: 8; }
}

@media (max-width: 899px) {
  [class*="l-col-"] { grid-column: 1 / -1; }
}

/* ---- Section head ------------------------------------------------------- */
.l-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 900px) {
  .l-head--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: var(--gutter);
  }
}

.l-head__lead {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 46ch;
}

.u-on-dark .l-head__lead { color: var(--on-dark-2); }

/* ---- Scroll reveal ------------------------------------------------------
   Elements opt in with [data-reveal]. JS adds .is-in once they enter view.
   Without JS the fallback below keeps everything visible.
   ------------------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}

.js [data-reveal="left"] { transform: translate3d(-22px, 0, 0); }
.js [data-reveal="scale"] { transform: none; }

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   <picture> is a wrapper,
not a box. Inside a fixed-ratio media frame it must
   fill the frame,
otherwise the image keeps its own ratio and leaves a gap.
   -------------------------------------------------------------------------- */
.c-feature__frame > picture,
.c-figure__frame > picture,
.c-band__media > picture,
.s-closeup__media > picture,
.s-pagehead__media > picture,
.s-banner__media > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.c-feature__frame > picture > img,
.c-figure__frame > picture > img,
.c-band__media > picture > img,
.s-closeup__media > picture > img,
.s-pagehead__media > picture > img,
.s-banner__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}