/* format.css — structural scaffolding only. No colour, font-family, or radius. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* --- Full-width sections --- */
.section {
  position: relative;
  width: 100%;
  padding: 80px 6vw;
}
.section--hero { padding: 120px 6vw 140px; }
.section--compact { padding: 48px 6vw; }
.section--flush { padding: 0; }

@media (min-width: 1200px) {
  .section { padding: 120px 8vw; }
  .section--hero { padding: 160px 8vw 180px; }
  .section--compact { padding: 64px 8vw; }
}

/* --- Content measure --- */
.content-measure { max-width: 800px; }
.content-wide { max-width: 1200px; }

/* --- Grid utilities --- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

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

/* --- Stat band layout --- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
@media (min-width: 768px) {
  .stat-band { grid-template-columns: repeat(3, 1fr); }
}

/* --- Process steps (horizontal sequence) --- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  counter-reset: step;
}
@media (min-width: 768px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.process-step { counter-increment: step; position: relative; }

/* --- Picker grid --- */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 768px) {
  .picker-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .picker-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Columns --- */
.split-7-5 { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) {
  .split-7-5 { grid-template-columns: 7fr 5fr; }
}

/* --- Buttons layout --- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- FAQ --- */
.faq-group { margin-bottom: 48px; }
.faq-item { border-bottom: 1px solid; padding: 20px 0; }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

/* --- Footer layout --- */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Vehicle template --- */
.vehicle-hero { padding-bottom: 160px; }
.vehicle-meta-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* --- Torn edge (structural positioning) --- */
.torn-edge {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  margin-top: -1px;
}
@media (min-width: 1200px) {
  .torn-edge { height: 100px; }
}

/* --- Z-index layers --- */
.z-behind { z-index: 0; }
.z-content { z-index: 1; position: relative; }
.z-overlap { z-index: 2; position: relative; }
.z-top { z-index: 10; position: relative; }