/* =========================================================
   2A Service "What's Included" — icon-card grid variant.
   Used by interior-painting (2-col, 8 pills), bathroom-remodeling
   (2-col, 8 cards), and kitchen-remodeling (4-col, 8 cards).
   Lane 14 #6 — paired with Lane 9 #4 partial
                template-parts/service-included-grid.php.

   Mirrors Vercel pill pattern:
     flex items-center gap-3 p-3 rounded-lg bg-warm
     hover:bg-orange/10 transition-colors
   Icon: 20×20, brand orange (`text-orange w-5 h-5`).
   ========================================================= */

.twoa-included-grid {
    display: grid;
    grid-template-columns: 1fr;   /* mobile: single column */
    gap: 0.75rem;
    /* Vercel parity (interior-painting page.tsx:270): the pill <ul> is capped
       and centered — `max-w-2xl 3xl:max-w-3xl 4k:max-w-4xl mx-auto`. Without
       this the pills stretch the full container width (the reported bug). */
    max-width: 42rem;             /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
}
@media (min-width: 1920px) { .twoa-included-grid { max-width: 48rem; } } /* 3xl:max-w-3xl */
@media (min-width: 2560px) { .twoa-included-grid { max-width: 56rem; } } /* 4k:max-w-4xl */

/* Vercel parity: the icon-grid section header (label/H2/intro) is a plain
   text-center block with NO width cap — the intro spans the container and
   stays on one line. WP's shared `.heading-center` caps it at 48rem (which
   wrapped the intro to two lines), so widen it for this variant only. */
.twoa-included-grid-section--icon-grid .heading-center,
.twoa-included-grid-section--icon-grid .heading-center .section-subtitle {
    max-width: none;
}

/* ---------- Column-count variants (data-cols on wrapper) ---------- */
@media (min-width: 640px) {
    .twoa-included-grid--2,
    .twoa-included-grid--3,
    .twoa-included-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .twoa-included-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .twoa-included-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Pill / card ---------- */
.twoa-included-grid__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--twoa-warm, #f8f5f2);
    color: var(--color-text-primary, #1a1a1a);
    transition: background-color 200ms ease,
                transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms ease;
}

.twoa-included-grid__item:hover {
    background: rgba(235, 93, 29, 0.10);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Dark mode — swap to a card-like surface, keep orange-tinted hover.
   Vercel (interior-painting page.tsx:274): pill = dark:bg-dark-mid (#2a2a2a),
   label dark:text-white (#fff), dark:hover:bg-orange/10 (rgba .10). */
html.dark .twoa-included-grid__item,
[data-theme="dark"] .twoa-included-grid__item {
    background: var(--twoa-dark-mid, #2a2a2a); /* dark:bg-dark-mid (#2a2a2a), not bg-card #2d2d2d */
    color: #fff;                               /* dark:text-white (label uses #fff, not #ededed) */
}
html.dark .twoa-included-grid__item:hover,
[data-theme="dark"] .twoa-included-grid__item:hover {
    background: rgba(235, 93, 29, 0.10);       /* dark:hover:bg-orange/10 (was 0.18) */
}

/* ---------- Icon (20×20, brand orange) ---------- */
.twoa-included-grid__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--twoa-orange, #eb5d1d);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.twoa-included-grid__item:hover .twoa-included-grid__icon {
    transform: scale(1.10);
}

/* ---------- Label ---------- */
.twoa-included-grid__label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--twoa-font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

/* ---------- 4-col density tweak (kitchen) ---------- */
@media (min-width: 1024px) {
    .twoa-included-grid--4 .twoa-included-grid__item {
        padding: 0.625rem 0.75rem;
        gap: 0.625rem;
    }
    .twoa-included-grid--4 .twoa-included-grid__label {
        font-size: 0.875rem;
    }
}

/* =========================================================
   CARDS variant — kitchen / bathroom "What's Included".
   Vercel parity (kitchen page.tsx:472-501, bathroom 297-325):
     card:  bg-warm border border-transparent hover:border-orange
            dark:bg-dark-mid rounded-xl p-6 hover:shadow-lg
            transition-all hover:-translate-y-2 group
     icon-box: w-12 h-12 bg-orange/10 rounded-xl flex center mb-4
               group-hover:bg-orange group-hover:scale-110
     icon:  w-6 h-6 text-orange group-hover:text-white
     title: font-display font-bold text-lg mb-2 group-hover:text-orange
     desc:  text-text-mid dark:text-gray text-sm
   Grid: mobile 1, sm 2, lg --3 (bathroom) / --4 (kitchen).
   ========================================================= */
.twoa-included-cards {
    display: grid;
    grid-template-columns: 1fr;       /* mobile: single column */
    gap: 1.5rem;                      /* Vercel gap-6 */
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .twoa-included-cards--3,
    .twoa-included-cards--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .twoa-included-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .twoa-included-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.twoa-included-card {
    display: block;
    padding: 1.5rem;                  /* p-6 */
    border-radius: 0.75rem;           /* rounded-xl */
    background: var(--twoa-warm, #f8f5f2);
    border: 1px solid transparent;
    transition: transform 300ms ease,
                box-shadow 300ms ease,
                border-color 300ms ease;
}
.twoa-included-card:hover {
    border-color: var(--twoa-orange, #eb5d1d);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);  /* hover:shadow-lg */
    transform: translateY(-0.5rem);               /* hover:-translate-y-2 */
}
html.dark .twoa-included-card,
[data-theme="dark"] .twoa-included-card {
    background: var(--twoa-dark-mid, #2a2a2a);
}

/* ---------- Icon box (48×48, orange/10 → orange on hover) ---------- */
.twoa-included-card__icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;                      /* w-12 */
    height: 3rem;                     /* h-12 */
    margin-bottom: 1rem;              /* mb-4 */
    border-radius: 0.75rem;           /* rounded-xl */
    background: rgba(235, 93, 29, 0.10);          /* bg-orange/10 */
    transition: background-color 300ms ease,
                transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.twoa-included-card:hover .twoa-included-card__icon-box {
    background: var(--twoa-orange, #eb5d1d);      /* group-hover:bg-orange */
    transform: scale(1.10);                       /* group-hover:scale-110 */
}
.twoa-included-card__icon {
    width: 24px;                      /* w-6 */
    height: 24px;                     /* h-6 */
    color: var(--twoa-orange, #eb5d1d);           /* text-orange */
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 300ms ease;
}
.twoa-included-card:hover .twoa-included-card__icon {
    color: #fff;                      /* group-hover:text-white */
}

/* ---------- Title (h3, display, bold, →orange on hover) ---------- */
.twoa-included-card__title {
    margin: 0 0 0.5rem;               /* mb-2 */
    font-family: var(--twoa-font-display, 'Outfit', sans-serif);
    font-size: 1.125rem;              /* text-lg */
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary, #1a1a1a);
    transition: color 300ms ease;
}
html.dark .twoa-included-card__title,
[data-theme="dark"] .twoa-included-card__title {
    color: #fff;
}
.twoa-included-card:hover .twoa-included-card__title {
    color: var(--twoa-orange, #eb5d1d);
}

/* ---------- Description (text-mid, 0.875rem) ---------- */
.twoa-included-card__desc {
    margin: 0;
    font-family: var(--twoa-font-body, system-ui, sans-serif);
    font-size: 0.875rem;              /* text-sm */
    line-height: 1.6;
    color: var(--color-text-mid, #4a4a4a);
}
html.dark .twoa-included-card__desc,
[data-theme="dark"] .twoa-included-card__desc {
    color: var(--twoa-gray, #ededed); /* dark:text-gray (#ededed), not white/0.75 */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .twoa-included-grid__item,
    .twoa-included-grid__icon { transition: none; }
    .twoa-included-grid__item:hover { transform: none; }
    .twoa-included-grid__item:hover .twoa-included-grid__icon { transform: none; }

    .twoa-included-card,
    .twoa-included-card__icon-box,
    .twoa-included-card__icon { transition: none; }
    .twoa-included-card:hover { transform: none; }
    .twoa-included-card:hover .twoa-included-card__icon-box { transform: none; }
}