/* ============================================================
   Landing Page — Shared styles used by page-landing.php
   and page-storage-solutions.php
   ============================================================ */

/* ---- Section scaffolding ---- */
.lp-section-head { max-width: 700px; margin-left: auto; margin-right: auto; }

.lp-section-label {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    border-left: 3px solid var(--color-primary);
    padding-left: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.lp-section-label--light {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.4);
}

.lp-section-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-headings);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

.lp-section-sub {
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    margin: 0;
}

/* ---- Badge ---- */
.lp-badge {
    display: inline-block;
    background: rgba(207, 27, 36, 0.15);
    border: 1px solid rgba(207, 27, 36, 0.4);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: var(--spacing-md);
}

/* ---- Buttons ---- */
.lp-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-whatsapp);
    border: 2px solid var(--color-whatsapp);
    color: #fff !important;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    border-radius: var(--border-radius-sm);
    transition: var(--btn-transition);
    text-decoration: none;
}
.lp-btn-whatsapp:hover { background-color: var(--color-whatsapp-dark); border-color: var(--color-whatsapp-dark); color: #fff !important; }

.lp-btn-call {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-call);
    border: 2px solid var(--color-call);
    color: #fff !important;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    border-radius: var(--border-radius-sm);
    transition: var(--btn-transition);
    text-decoration: none;
}
.lp-btn-call:hover { background-color: var(--color-call-dark); border-color: var(--color-call-dark); color: #fff !important; }

.lp-btn-xl { padding: 14px 28px; font-size: var(--font-size-md); }

.lp-btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff !important;
}

/* ---- Hero ---- */
.lp-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-headings) 0%, #2c2c2c 100%);
    overflow: hidden;
}

.lp-hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(207,27,36,0.12) 0%, transparent 65%);
    pointer-events: none;
}

.lp-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-3xl);
}

.lp-hero__content { max-width: 680px; }

.lp-hero__title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    color: #fff;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
}

.lp-hero__sub {
    font-size: var(--font-size-md);
    color: rgba(255,255,255,0.75);
    margin-bottom: var(--spacing-xl);
    line-height: var(--line-height-relaxed);
}

.lp-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

.lp-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

.lp-proof-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: rgba(255,255,255,0.85);
    font-size: var(--font-size-sm);
}
.lp-proof-item i { color: var(--color-primary); font-size: var(--font-size-md); }

.lp-proof-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.2); }

/* ---- Trust strip ---- */
.lp-trust {
    background: var(--color-bg);
    padding: var(--spacing-3xl) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.lp-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
}

.lp-trust__item { text-align: center; padding: var(--spacing-lg); }

.lp-trust__icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: var(--spacing-md); }

.lp-trust__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-headings);
    margin-bottom: var(--spacing-sm);
}

.lp-trust__text { font-size: var(--font-size-sm); color: var(--color-text-light); margin: 0; line-height: var(--line-height-relaxed); }

/* ---- Filter section ---- */
.lp-filter { background: var(--color-bg-light); padding: var(--spacing-3xl) 0; }

/* ---- Cars grid ---- */
.lp-cars { background: var(--color-bg); padding: var(--spacing-3xl) 0; }

/* ---- Finance section ---- */
.lp-finance { background: var(--color-bg-light); padding: var(--spacing-3xl) 0; }

.lp-finance__text { font-size: var(--font-size-md); color: var(--color-text-light); margin-bottom: var(--spacing-lg); }

.lp-finance__list { list-style: none; padding: 0; margin: 0; }
.lp-finance__list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-md);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
}
.lp-finance__list li:last-child { border-bottom: none; }
.lp-finance__list i { color: var(--color-primary); font-size: var(--font-size-lg); flex-shrink: 0; }

.lp-finance__banks {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
}

.lp-finance__banks-label {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
}

.lp-banks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); }

.lp-bank-item {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-headings);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lp-bank-item:hover { border-color: var(--color-primary); background: var(--color-primary-lighter); }

/* ---- Sell section ---- */
.lp-sell { background: var(--color-headings); padding: var(--spacing-3xl) 0; }

.lp-sell__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.lp-sell__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #fff;
    margin-bottom: var(--spacing-sm);
}

.lp-sell__sub { color: rgba(255,255,255,0.65); font-size: var(--font-size-md); margin-bottom: var(--spacing-lg); }

.lp-sell__steps { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); }

.lp-sell__step {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: rgba(255,255,255,0.85);
    font-size: var(--font-size-sm);
}

.lp-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.lp-sell__cta { display: flex; flex-direction: column; gap: var(--spacing-md); flex-shrink: 0; }

/* ---- Lead form ---- */
.lp-lead { background: var(--color-bg-light); padding: var(--spacing-3xl) 0; }

.lp-input {
    height: 50px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast);
}
.lp-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(207,27,36,0.1); outline: none; }
textarea.lp-input { height: auto; resize: vertical; }

/* Search form selects match lp-input height */
select.lp-input { padding-top: 0; padding-bottom: 0; }

.lp-submit-btn { min-height: 52px; font-size: var(--font-size-md); }

.lp-form__privacy { font-size: var(--font-size-xs); color: var(--color-text-lighter); margin: 0; }
.lp-form__privacy i { color: var(--color-success); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .lp-trust__grid { grid-template-columns: repeat(2, 1fr); }
    .lp-banks-grid  { grid-template-columns: repeat(3, 1fr); }
    .lp-sell__inner { flex-direction: column; text-align: center; }
    .lp-sell__steps { justify-content: center; }
    .lp-sell__cta   { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 576px) {
    .lp-hero        { min-height: 100svh; }
    .lp-hero__cta   { flex-direction: column; }
    .lp-proof-divider { display: none; }
    .lp-trust__grid { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .lp-banks-grid  { grid-template-columns: repeat(2, 1fr); }
    .lp-sell__cta   { flex-direction: column; width: 100%; }
    .lp-btn-xl      { width: 100%; justify-content: center; }
}