/* =====================================================================
 * home.css — home hero + grouped service list.
 * Loaded only on index.php (after app.css, so these rules win).
 *
 * Family-native styling (paultan.org / research / used-cars idiom):
 * white 10px-radius cards on the #ededed ground, Arial, #a60f0f red,
 * pill buttons, 11px bold uppercase category labels. The hero is a
 * white card with the Carro mascot artwork on the right (the artwork
 * sits on a pure-white background, so it blends into the card).
 * ================================================================== */

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

.hero {
    margin: var(--space-3) 0 var(--space-5);
    background: var(--white);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(20px, 5vw, 36px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    overflow: hidden;
}

.hero__body {
    flex: 1 1 300px;
    min-width: 0;
}

/* Mascot artwork — a wide (~3:1) banner scene on a pure white background,
   so it blends into the card with no frame. It spans the full width of the
   hero card (its own row under the copy) so the scene reads large on desktop
   as well as mobile, rather than being squeezed into a narrow side column. */
.hero__media {
    flex: 1 1 100%;
    min-width: 0;
    /* Bleed to the card edges: cancel the .hero padding on left/right/bottom
       so the white-background scene runs flush to the rounded corners. */
    margin: 0 calc(clamp(20px, 5vw, 36px) * -1) calc(clamp(20px, 5vw, 36px) * -1);
}
.hero__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.hero__eyebrow {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
}

.hero__title {
    margin: 10px 0 0;
    font-size: var(--fs-hero);
    font-weight: bold;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.hero__line { display: inline; }
.hero__line--red { color: var(--red); }

.hero__subtitle {
    margin: 12px 0 0;
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--muted);
    max-width: 68ch;
}

/* At-a-glance chips — family chip idiom (#f4f4f5 pills, 12px bold). */
.hero__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.hero__specs li {
    font-size: var(--fs-xs);
    font-weight: bold;
    color: var(--ink);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--line-2);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.hero__actions .btn { width: auto; }

/* ---------------------------------------------------------------------
 * Body & Paint promo strip — compact clickable teaser directly under the
 * hero. Same solid-red idiom as .bp-promo on the body-paint page, but
 * one row tall. Copy lives in index.php (mirrors body-paint.php's
 * PROMO CONTROL block).
 * ------------------------------------------------------------------- */

.promo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    /* Tuck up under the hero: hero's 24px bottom margin reads too airy
       for a strip that belongs to it, so pull up to a 12px gap. */
    margin: calc(var(--space-3) - var(--space-5)) 0 var(--space-5);
    padding: 14px clamp(16px, 4vw, 22px);
    border-radius: var(--r-md);
    background: linear-gradient(118deg, var(--red-dark) 0%, var(--red) 60%);
    box-shadow: var(--shadow-sm);
    color: #fff;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.promo-strip:hover, .promo-strip:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.promo-strip__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-2xs);
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .25);
    padding: 6px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.promo-strip__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
    animation: stripPulse 1.6s ease-in-out infinite;
}
@keyframes stripPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.promo-strip__body { flex: 1 1 220px; min-width: 0; }
.promo-strip__headline {
    display: block;
    font-size: var(--fs-lg);
    font-weight: bold;
    line-height: 1.3;
}
.promo-strip__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .85);
}

.promo-strip__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: var(--red);
    font-size: var(--fs-sm);
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.promo-strip__cta svg { display: block; }

@media (prefers-reduced-motion: reduce) {
    .promo-strip__badge::before { animation: none; }
    .promo-strip:hover, .promo-strip:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------
 * Service list — grouped, information-scented rows
 * ------------------------------------------------------------------- */

.svc-list {
    display: block;
    margin: 0 0 var(--space-6);
}

/* Category label — family meta idiom: 11px bold uppercase, letterspaced. */
.svc-cat {
    margin: 22px 2px 10px;
    font-size: var(--fs-2xs);
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.svc-cat:first-child { margin-top: 0; }

.svc-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--white);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.svc-row:hover, .svc-row:focus-visible {
    box-shadow: var(--shadow-md);
    border-color: rgba(166, 15, 15, .25);
    text-decoration: none;
    color: var(--ink);
}

.svc-row__icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    background: var(--red-50);
}

.svc-row__body { flex: 1; min-width: 0; }
.svc-row__name {
    display: block;
    font-size: var(--fs-lg);
    font-weight: bold;
    line-height: 1.15;
    color: var(--ink);
}
.svc-row__teaser {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.3;
}

.svc-row__meta {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}
.svc-row__price {
    font-size: var(--fs-xs);
    font-weight: bold;
    color: var(--red);
    white-space: nowrap;
}
.svc-row__price.is-quote {
    color: var(--muted);
}
.svc-row__chev {
    color: var(--muted-2);
    display: flex;
    flex: none;
    transition: transform .15s ease;
}
.svc-row:hover .svc-row__chev,
.svc-row:focus-visible .svc-row__chev { transform: translateX(2px); color: var(--red); }

/* "Not sure what you need?" — WhatsApp helper for undecided visitors. */
.svc-help {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    margin-top: 16px;
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.svc-help:hover, .svc-help:focus-visible {
    border-color: rgba(37, 211, 102, .5);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--ink);
}
.svc-help__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wa-green);
    color: #fff;
}
.svc-help__body { flex: 1; min-width: 0; }
.svc-help__title { display: block; font-size: var(--fs-md); font-weight: bold; }
.svc-help__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.3;
}
.svc-help .svc-row__chev { color: var(--muted-2); }