/**
 * The visual system: image placeholder, duotone treatment, container-stack
 * texture, and the seven section patterns from Section 4 of the spec.
 * Every pattern here is proven standalone on /styleguide before it's used
 * on a real page. No box-shadow anywhere — depth comes from overlap and
 * colour blocking only.
 */

/* --- Base image element -------------------------------------------------- */
.site-img { background-color: var(--gm-line); }
.img-duotone { filter: url(#duotone-forest); }

/* --- Placeholder (branded, used whenever a source file is missing) ------- */
.img-placeholder {
  position: relative;
  background-color: var(--gm-canopy);
  overflow: hidden;
  width: 100%;
}
.img-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/graphics/container-pattern.svg");
  background-repeat: repeat;
  opacity: 0.16;
}

/* --- Container-stack texture, for dark bands (4-6% opacity per spec) ----- */
.textured-band { position: relative; background: var(--gm-forest); color: var(--gm-white); }
.textured-band--canopy { background: var(--gm-canopy); }
.textured-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/graphics/container-pattern.svg");
  background-repeat: repeat;
  opacity: 0.035;
  pointer-events: none;
}
.textured-band > .wrap { position: relative; z-index: 1; }
.textured-band h2, .textured-band h3 { color: var(--gm-white); }
.textured-band p { color: rgba(255, 255, 255, 0.78); }

/* =========================================================================
   1. Split feature — media one side, content the other, alternating.
   ========================================================================= */
.split-feature { padding: 0; }
.split-feature__grid { display: grid; grid-template-columns: 1fr; }
.split-feature__media { width: 100%; }
.split-feature__media .site-img,
.split-feature__media .img-placeholder { height: 100%; min-height: 240px; }
.split-feature__content { padding: var(--space-8) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.split-feature__content > *:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .split-feature__grid { grid-template-columns: 1fr 1fr; min-height: 480px; }
  .split-feature__content { padding: var(--space-12) var(--space-16); max-width: 52ch; }
  .split-feature--reverse .split-feature__grid { direction: rtl; }
  .split-feature--reverse .split-feature__grid > * { direction: ltr; }
}

/* =========================================================================
   2. Full-bleed band — edge-to-edge photo, content in a contained column.
   ========================================================================= */
.full-bleed-band { position: relative; min-height: 420px; display: flex; align-items: center; color: var(--gm-white); overflow: hidden; }
.full-bleed-band__media { position: absolute; inset: 0; z-index: 0; }
.full-bleed-band__media .site-img,
.full-bleed-band__media .img-placeholder { width: 100%; height: 100%; }
.full-bleed-band__content { position: relative; z-index: 2; padding-block: var(--space-16); }
.full-bleed-band__content h1, .full-bleed-band__content h2 { color: var(--gm-white); max-width: 22ch; }
.full-bleed-band__content p { color: rgba(255, 255, 255, 0.85); max-width: 48ch; }

/* Last-resort legibility aid: a directional gradient from one edge only —
   never a flat scrim across the whole frame. Must paint above the photo
   (z-index 1, photo is 0) and below the text (z-index 2). */
.full-bleed-band--scrim-left::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10, 23, 18, 0.82) 0%, rgba(10, 23, 18, 0.5) 40%, rgba(10, 23, 18, 0) 72%);
}
.full-bleed-band--scrim-bottom::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(10, 23, 18, 0.85) 0%, rgba(10, 23, 18, 0.35) 45%, rgba(10, 23, 18, 0) 75%);
}

/* =========================================================================
   3. Offset overlap panel — signature treatment. Solid panel + photo
      overlapping by a controlled amount. Depth without shadow.
   ========================================================================= */
.overlap-panel__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.overlap-panel__media .site-img,
.overlap-panel__media .img-placeholder { border-radius: var(--radius-media); }
.overlap-panel__panel {
  background: var(--gm-forest);
  color: var(--gm-white);
  padding: var(--space-8);
  position: relative;
  margin-top: calc(var(--space-6) * -1);
  z-index: 1;
}
.overlap-panel__panel h1, .overlap-panel__panel h2, .overlap-panel__panel h3 { color: var(--gm-white); }
.overlap-panel__panel p { color: rgba(255, 255, 255, 0.82); }

@media (min-width: 1024px) {
  .overlap-panel__grid { grid-template-columns: 7fr 6fr; align-items: center; gap: 0; }
  .overlap-panel__media { grid-column: 1; grid-row: 1; }
  .overlap-panel__panel { grid-column: 2; grid-row: 1; margin-top: 0; margin-left: -72px; padding: var(--space-12); }
  .overlap-panel--reverse .overlap-panel__grid { grid-template-columns: 6fr 7fr; }
  .overlap-panel--reverse .overlap-panel__media { grid-column: 2; }
  .overlap-panel--reverse .overlap-panel__panel { grid-column: 1; margin-left: 0; margin-right: -72px; }
}

/* =========================================================================
   4. Ruled photo grid — contact-sheet grid, hairline rules, mono captions.
   ========================================================================= */
.ruled-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gm-line);
  border: 1px solid var(--gm-line);
}
.ruled-grid__item { background: var(--gm-paper); padding: var(--space-4); margin: 0; }
.ruled-grid__media { margin-bottom: var(--space-3); }
.ruled-grid__media--diagram {
  background: var(--gm-canopy);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-media);
  position: relative; overflow: hidden;
}
.ruled-grid__media--diagram::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../img/graphics/container-pattern.svg");
  background-repeat: repeat; opacity: 0.1;
}
.ruled-grid__media--diagram .vehicle-icon { position: relative; z-index: 1; width: 60%; }
.ruled-grid__media--diagram .icon { position: relative; z-index: 1; color: var(--gm-white); }
.ruled-grid__media .site-img,
.ruled-grid__media .img-placeholder { border-radius: var(--radius-media); }
.ruled-grid figcaption { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }

@media (min-width: 640px) { .ruled-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
  .ruled-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ruled-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .ruled-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   5. Textured dark band — see .textured-band above. Holds stats/quotes/CTA.
   ========================================================================= */
.textured-band { padding-block: var(--space-16); }
.stat-band { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.stat-band__figure { font-family: var(--font-mono); font-size: var(--text-3xl); color: var(--gm-white); display: block; }
.stat-band__label { color: rgba(255, 255, 255, 0.7); font-size: var(--text-sm); }
@media (min-width: 768px) { .stat-band { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   6. Diagram panel — paper background, generated SVG, supporting text.
      No photography. Stacked by default; --row places figure beside text.
   ========================================================================= */
.diagram-panel { background: var(--gm-paper); }
.diagram-panel__figure { display: flex; justify-content: center; margin-bottom: var(--space-8); }
.diagram-panel__figure svg { max-width: 100%; height: auto; }
.diagram-panel__content { max-width: 640px; }

@media (min-width: 1024px) {
  .diagram-panel--row .diagram-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
  .diagram-panel--row .diagram-panel__figure { margin-bottom: 0; }
  .diagram-panel--row .diagram-panel__content { max-width: none; }
}

/* =========================================================================
   7. Inset media card — image inset with visible padding, not bled to edge.
   ========================================================================= */
.inset-card { background: var(--gm-white); border: var(--hairline); padding: var(--space-5); height: 100%; display: flex; flex-direction: column; }
.inset-card__media { margin-bottom: var(--space-4); }
.inset-card__media .site-img,
.inset-card__media .img-placeholder { border-radius: var(--radius-media); }
.inset-card__body { flex-grow: 1; }
.inset-card__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); }

/* =========================================================================
   Generated-graphic components (Tier 2): process diagram, vehicle icons.
   ========================================================================= */
/* Below desktop the flow reads top to bottom: number beside the text, a
   short arrow under each number, so five steps don't fill five screens. */
.process-diagram { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.process-diagram__node { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-4); }
.process-diagram__num { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--gm-green); color: var(--gm-green); }
.process-diagram__node h3 { margin: 2px 0 var(--space-1); font-size: var(--text-md); }
.process-diagram__node p { margin: 0; }
.process-diagram__connector { display: flex; justify-content: center; width: 28px; margin-block: var(--space-2); align-self: flex-start; transform: rotate(90deg); }

@media (min-width: 1024px) {
  .process-diagram { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
  .process-diagram__node { flex: 1 1 0; display: block; }
  .process-diagram__num { margin-bottom: var(--space-2); }
  .process-diagram__node h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
  .process-diagram__connector { width: 32px; margin-block: 10px 0; transform: none; align-self: center; }
}

.vehicle-icon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (min-width: 768px) { .vehicle-icon-row { grid-template-columns: repeat(6, 1fr); } }

.listing-table__vehicle { width: 90px; }
.listing-table__vehicle .vehicle-icon { width: 72px; }
@media (max-width: 767px) { .listing-table__vehicle { display: flex !important; align-items: center; gap: var(--space-3); } .listing-table__vehicle .vehicle-icon { width: 56px; } }

.bar-chart { display: flex; flex-direction: column; gap: var(--space-4); }
.bar-chart__row { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: var(--space-3); }
.bar-chart__label { font-size: var(--text-sm); }
.bar-chart__track { height: 8px; background: var(--gm-line); position: relative; }
.bar-chart__fill { display: block; height: 100%; background: var(--gm-green); }
.bar-chart__value { font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; }
@media (min-width: 640px) { .bar-chart__row { grid-template-columns: 140px 1fr 56px; } }

.feature-row { display: flex; gap: var(--space-5); align-items: flex-start; }
.feature-row__icon {
  flex-shrink: 0; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gm-green); color: var(--gm-green);
}

.insight-cover { margin-bottom: var(--space-10); }

/* --- Avatars / circular portrait frames (fully round, per Section 4) ----- */
.avatar-frame { border-radius: var(--radius-round); overflow: hidden; }
.avatar-frame .site-img,
.avatar-frame .img-placeholder { border-radius: var(--radius-round); }