/* =============================================================================
   design-system.css — Panthera Pavers Experts
   Namespaced component layer (.ds-*) — additive, never collides with
   main.css / pages-common.css. Inherits brand tokens from main.css :root.

   Aesthetic: Caterpillar Yellow (#FFCD11) + Black, light theme, industrial.
   Typography: Playfair Display (display) + DM Sans (body).
   ============================================================================= */

/* =============================================================================
   1. SECTION LAYOUT
   ============================================================================= */
.ds-section            { padding: var(--space-4xl) 0; }
.ds-section--tight     { padding: var(--space-3xl) 0; }
.ds-section--wide      { padding: var(--space-5xl) 0; }
.ds-section--muted     { background: var(--color-dark-2); }   /* light gray surface */
.ds-section--surface   { background: var(--surface); }
.ds-section--dark      { background: var(--color-black); color: var(--on-dark); }

.ds-container-narrow   { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-lg); }

/* =============================================================================
   2. EYEBROW / LABEL
   ============================================================================= */
.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-md);
}
.ds-eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    background: var(--color-primary);
}
.ds-section--dark .ds-eyebrow { color: var(--color-primary); }

/* =============================================================================
   3. HEADINGS
   ============================================================================= */
.ds-h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4vw, var(--fs-4xl));
    font-weight: var(--fw-bold);
    line-height: 1.12;
    color: var(--color-light);
    margin: 0 0 var(--space-md);
}
.ds-h2 .ds-accent { color: var(--color-primary-dark); }      /* readable yellow on light */
.ds-section--dark .ds-h2 { color: #fff; }
.ds-section--dark .ds-h2 .ds-accent { color: var(--color-primary); }

.ds-section-head        { max-width: 760px; margin: 0 0 var(--space-3xl); }
.ds-section-head--center{ text-align: center; margin-left: auto; margin-right: auto; }

.ds-lead {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-muted);
}
.ds-section--dark .ds-lead { color: var(--on-dark); }

.ds-rule {
    width: 56px;
    height: 3px;
    background: var(--color-primary);
    border: 0;
    margin: var(--space-md) 0 0;
}
.ds-section-head--center .ds-rule { margin-left: auto; margin-right: auto; }

/* =============================================================================
   4. BUTTONS (pill) — complement to main.css .btn-*
   ============================================================================= */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 15px 30px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1;
}
.ds-btn svg { width: 18px; height: 18px; }
.ds-btn--lg { padding: 18px 38px; font-size: var(--fs-base); }

.ds-btn--primary { background: var(--color-primary); color: var(--color-dark); border-color: var(--color-primary); }
.ds-btn--primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-dark); transform: translateY(-2px); box-shadow: var(--shadow-gold); }

.ds-btn--outline { background: transparent; color: var(--color-light); border-color: var(--color-light); }
.ds-btn--outline:hover { background: var(--color-light); color: #fff; transform: translateY(-2px); }

.ds-btn--ghost { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.55); }
.ds-btn--ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; transform: translateY(-2px); }

/* =============================================================================
   5. GRID
   ============================================================================= */
.ds-grid { display: grid; gap: var(--space-xl); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } .ds-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: 1fr; } }

/* =============================================================================
   6. CARDS
   ============================================================================= */
.ds-card {
    background: var(--surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.ds-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}
.ds-card--feature { border-top: 4px solid var(--color-primary); }
.ds-section--dark .ds-card { background: #141414; border-color: rgba(255,255,255,0.10); }

.ds-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}
.ds-card__icon svg { width: 26px; height: 26px; }

.ds-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-light);
    margin: 0 0 var(--space-sm);
}
.ds-section--dark .ds-card__title { color: #fff; }
.ds-card__text { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-muted); margin: 0; }

/* =============================================================================
   7. STATS
   ============================================================================= */
.ds-stats { display: flex; align-items: stretch; gap: var(--space-xl); }
.ds-stat { flex: 1; text-align: center; }
.ds-stat__divider { width: 1px; background: var(--color-dark-border); align-self: stretch; }
.ds-stat__value {
    font-family: var(--font-heading);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: var(--color-light);
}
.ds-stat__value .ds-suffix { color: var(--color-primary-dark); }
.ds-section--dark .ds-stat__value { color: #fff; }
.ds-section--dark .ds-stat__value .ds-suffix { color: var(--color-primary); }
.ds-stat__label {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
@media (max-width: 768px) {
    .ds-stats { flex-direction: column; gap: var(--space-lg); }
    .ds-stat__divider { width: 70%; height: 1px; align-self: center; }
}

/* =============================================================================
   8. CHIP / BADGE
   ============================================================================= */
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.45);
    border-radius: var(--radius-full);
}
.ds-chip svg { width: 14px; height: 14px; color: var(--color-primary-dark); }
.ds-section--dark .ds-chip { color: var(--color-primary); }
.ds-section--dark .ds-chip svg { color: var(--color-primary); }

/* =============================================================================
   9. MEDIA
   ============================================================================= */
.ds-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.ds-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-media--tall { aspect-ratio: 3 / 4; }
.ds-media--wide { aspect-ratio: 4 / 3; }

/* =============================================================================
   10. PROCESS STEPS
   ============================================================================= */
.ds-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); counter-reset: ds-step; }
@media (max-width: 1024px) { .ds-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ds-steps { grid-template-columns: 1fr; } }
.ds-step { position: relative; padding-top: var(--space-lg); }
.ds-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-dark);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-md);
    border: 2px solid var(--color-primary);
}
.ds-step__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-light); margin: 0 0 6px; }
.ds-section--dark .ds-step__title { color: #fff; }
.ds-step__text { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-muted); margin: 0; }