/* Homepage-specific layout. Each section here has a distinct structure on
   purpose (Development Master Prompt §11) — hero, a bordered stat/value
   list, a card grid, two asymmetric editorial sections, and a closing
   panel. No repeated "hero → cards → cards → CTA" pattern. */

/* ---------- Hero ---------- */

.hero {
    padding-top: var(--space-8);
    padding-bottom: 0;
    overflow: hidden;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
    align-items: center;
    padding-bottom: var(--space-8);
}

.hero__waveform {
    width: 11rem;
    height: auto;
    color: var(--color-accent-tint);
    margin-bottom: var(--space-5);
}

.hero__content .eyebrow {
    margin-bottom: var(--space-4);
    display: block;
}

.hero__content .display {
    margin-bottom: var(--space-5);
}

.hero__lead {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    max-width: 34rem;
    margin-bottom: var(--space-6);
}

.hero__actions {
    margin-bottom: var(--space-2);
}

.hero__media .media,
.hero__media .media-placeholder {
    border: 1px solid var(--color-line-on-dark);
}

.hero__stats-row {
    border-top: 1px solid var(--color-line-on-dark);
}

@media (max-width: 1024px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }
    .hero__media {
        max-width: 26rem;
    }
}

@media (max-width: 640px) {
    .spec-plate__field {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--color-line-on-dark);
        margin-right: 0;
    }
    .spec-plate__field:last-child {
        border-bottom: 0;
    }
}

/* ---------- Value props ---------- */

.value-props {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .value-props { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .value-props { grid-template-columns: 1fr; }
}

/* ---------- Category grid ---------- */

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1024px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .category-grid { grid-template-columns: 1fr; }
}

/* ---------- Editorial (asymmetric image + text) ---------- */

.editorial {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-8);
    align-items: center;
}

.editorial--reverse .editorial__media {
    order: 2;
}

.editorial__body {
    max-width: 34rem;
}

.editorial__facts {
    display: flex;
    flex-direction: column;
    margin-block: var(--space-5);
}

.editorial__facts li {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-line);
}

.editorial__facts strong {
    color: var(--color-text);
    font-weight: var(--font-semibold);
}

@media (max-width: 900px) {
    .editorial,
    .editorial--reverse .editorial__media {
        grid-template-columns: 1fr;
        order: initial;
    }
}

/* ---------- Reference strip (Unternehmen teaser) ---------- */

.reference-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-8);
    margin-top: var(--space-6);
}

.reference-list li {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line-on-dark);
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
}

.reference-list strong {
    display: block;
    color: var(--color-text-inverse);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-1);
}

@media (max-width: 640px) {
    .reference-list { grid-template-columns: 1fr; }
}

/* ---------- Fleet showcase (single large editorial image) ---------- */

.showcase__caption {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
}

/* ---------- Closing CTA panel ---------- */

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-8);
    background: var(--color-ink-900);
    color: var(--color-text-inverse);
}

.cta-panel__body {
    max-width: 34rem;
}

.cta-panel__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

.cta-panel__lead {
    color: var(--color-text-inverse-muted);
}

.cta-panel__actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.cta-panel__phone {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: var(--font-medium);
}

@media (max-width: 640px) {
    .cta-panel { padding: var(--space-6) var(--space-5); }
}