/* =====================================================
   BRAND LANDING PAGES — Modern Framework
   Used by: ariston, bosch, lg, kiriazi, daewoo, etc.
   Loaded after: main.css + device.css
===================================================== */

/* ===== Map brand vars to device vars so device.css components inherit ===== */
[data-brand] {
    --device-color: var(--brand-color, var(--primary));
    --device-color-dark: var(--brand-color-dark, var(--primary-dark));
    --device-color-soft: var(--brand-color-soft, var(--primary-light));
    --device-gradient: var(--brand-gradient, linear-gradient(135deg, var(--primary), var(--primary-dark)));
}

/* ===== Per-brand color identity (per user's spec) =====
   Red:    ariston, bosch, fagor, glemgas, olympic, tecnogas
   Green:  clage, daewoo, icook, unionaire
   Blue:   elba, universal, westinghouse
   Gray:   gorenje, siemens, vaillant
   Yellow: kiriazi
   Pink:   lg
*/
[data-brand="ariston"],
[data-brand="bosch"],
[data-brand="fagor"],
[data-brand="glemgas"],
[data-brand="olympic"],
[data-brand="tecnogas"] {
    --brand-color: #c70a26;
    --brand-color-dark: #7a0617;
    --brand-color-soft: #fdecee;
    --brand-gradient: linear-gradient(135deg, #ed2939, #7a0617);
}

[data-brand="clage"],
[data-brand="daewoo"],
[data-brand="icook"],
[data-brand="unionaire"] {
    --brand-color: #1d8649;
    --brand-color-dark: #0e4a26;
    --brand-color-soft: #e3f3ea;
    --brand-gradient: linear-gradient(135deg, #27a85b, #0e4a26);
}

[data-brand="elba"],
[data-brand="universal"],
[data-brand="westinghouse"] {
    --brand-color: #003c71;
    --brand-color-dark: #001e3d;
    --brand-color-soft: #e3eaf3;
    --brand-gradient: linear-gradient(135deg, #0058a5, #001e3d);
}

[data-brand="gorenje"],
[data-brand="siemens"],
[data-brand="simenes"],
[data-brand="vaillant"] {
    --brand-color: #4a5568;
    --brand-color-dark: #2d3748;
    --brand-color-soft: #edf0f5;
    --brand-gradient: linear-gradient(135deg, #718096, #2d3748);
}

[data-brand="kiriazi"] {
    --brand-color: #c89c00;
    --brand-color-dark: #5e4400;
    --brand-color-soft: #fdf2cc;
    --brand-gradient: linear-gradient(135deg, #e0b400, #5e4400);
}

[data-brand="lg"] {
    --brand-color: #d72660;
    --brand-color-dark: #8a0e3a;
    --brand-color-soft: #fde6ee;
    --brand-gradient: linear-gradient(135deg, #ec407a, #8a0e3a);
}

/* =====================================================
   BRAND HERO — Brand badge
===================================================== */
.brand-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
    margin-bottom: 22px;
}
.brand-hero-badge .brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--brand-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
    flex-shrink: 0;
    letter-spacing: -1px;
}
.brand-hero-badge .brand-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.brand-hero-badge .brand-meta small {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}
.brand-hero-badge .brand-meta strong {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 800;
}

/* =====================================================
   SERVICE CATEGORIES — Devices we service for this brand
===================================================== */
.service-cats-section {
    padding: 80px 0;
    background: #fff;
}
.service-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 48px;
}

/* Centered grid for specialty brands (1-2 services) */
.service-cats-grid.compact {
    max-width: 720px;
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.service-cats-grid.single {
    max-width: 480px;
    margin-inline: auto;
    grid-template-columns: 1fr;
}

.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 22px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1.5px solid #eef1f7;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    overflow: hidden;
    min-height: 200px;
}
.cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}
.cat-card > * { position: relative; z-index: 1; }
.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.12);
    border-color: transparent;
    color: #fff;
}
.cat-card:hover::after { opacity: 1; }
.cat-card:hover .cat-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.cat-card:hover .cat-arrow { background: rgba(255, 255, 255, 0.2); color: #fff; }

.cat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--brand-color-soft);
    color: var(--brand-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: var(--transition);
}
.cat-card h5 {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin: 0;
    transition: color 0.3s;
}
.cat-card:hover h5 { color: #fff; }
.cat-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    transition: color 0.3s;
}
.cat-card:hover p { color: rgba(255, 255, 255, 0.9); }
.cat-arrow {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--brand-color-soft);
    color: var(--brand-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition);
    align-self: flex-end;
    margin-top: auto;
}

/* =====================================================
   WHY US — Lighter, horizontal 3 points
===================================================== */
.why-us-strip {
    padding: 70px 0;
    background: var(--bg-light);
}
.why-us-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 44px;
}
.why-point {
    text-align: center;
    padding: 32px 24px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1.5px solid #eef1f7;
    transition: var(--transition);
}
.why-point:hover {
    transform: translateY(-4px);
    border-color: var(--brand-color);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
}
.why-point-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
}
.why-point h5 {
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 1.1rem;
}
.why-point p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
}

/* =====================================================
   BRAND HERO VISUAL — replaces device circle
===================================================== */
[data-brand] .hero-visual-circle {
    background: linear-gradient(135deg, #fff 0%, var(--brand-color-soft) 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.7);
}
[data-brand] .hero-visual-circle::before {
    border-color: var(--brand-color);
    opacity: 0.3;
}
[data-brand] .hero-visual-circle i {
    color: var(--brand-color);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.08));
}

/* Brand identity card inside the hero circle */
.brand-identity-card {
    position: absolute;
    bottom: 12%;
    right: 50%;
    transform: translateX(50%);
    background: #fff;
    padding: 14px 22px;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    text-align: center;
    z-index: 2;
    min-width: 200px;
}
.brand-identity-card .name {
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--brand-color-dark);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.brand-identity-card .label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .brand-identity-card { display: none; }
}