/**
 * Season Cars — polish layer for the Elementor home page.
 *
 * Styles NATIVE, fully-editable Elementor widgets (via the CSS Classes you'll
 * see on each element) so the Stats, Reviews, FAQ and Blog blocks match the
 * original hand-coded design — without turning them into shortcodes.
 *
 * Colour tokens (--sc-*) come from season-home.css, which loads alongside this.
 * Fallback literals are included so this file is safe on its own too.
 */

/* ───────── Theme-wrapper override (THE width fix) ─────────
   The season21 default page template wraps Elementor content in a Bootstrap
   .container.container-sm capped at max-width:1300px, which clamps every section
   ~170px narrower than the original full-bleed front-page.php. Strip it on any
   Elementor-built page so sections go edge-to-edge; gutters then come only from
   the section's own 6vw padding — matching the live site exactly. */
.elementor-page .ctn--content > .container.container-sm,
.elementor-page .container.container-sm {
    max-width: 100% !important; width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
}
.elementor-page .container.container-sm > .row { margin-left: 0 !important; margin-right: 0 !important; }

/* ───────── Full-width content (kill Elementor's 1140px boxed cap) ───────── */
.scx-section > .elementor-container,
.elementor-page .elementor-section > .elementor-container { max-width: 100% !important; }

/* ───────── Hero layout: fill viewport, content centred, no overlap ───────── */
.scx-hero { min-height: 86vh; }
.scx-hero > .elementor-container { align-items: center !important; }
.scx-hero .sc-quote-card { margin-left: auto; }   /* hold form to the right of its column */
@media (max-width: 1024px){ .scx-hero { min-height: 0; } }

/* ───────── STATS ───────── */
.scx-stats__row { background: rgba(255,255,255,0.07); }            /* divider colour shows through 1px gaps */
.scx-stat > .elementor-element-populated,
.scx-stat > .elementor-widget-wrap {
    background: #0b1020;
    padding: 36px 24px !important;
    text-align: center;
    align-content: flex-start;
    height: 100%;
    transition: background .28s ease;
}
.scx-stat:hover > .elementor-element-populated,
.scx-stat:hover > .elementor-widget-wrap { background: #0d1422; }
.scx-stat .elementor-widget { width: 100%; text-align: center; }
.scx-stat__icon .elementor-icon-wrapper,
.scx-stat__icon .elementor-widget-container { display: flex; justify-content: center; }
.scx-stat__icon .elementor-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(195,169,117,0.12);
    border: 1px solid rgba(195,169,117,0.20);
    display: inline-flex; align-items: center; justify-content: center;
    color: #c3a975 !important;
}
.scx-stat__icon .elementor-icon i,
.scx-stat__icon .elementor-icon svg { font-size: 17px; width: 17px; height: 17px; color: #c3a975 !important; fill: #c3a975 !important; }
.scx-stat__icon { margin-bottom: 22px !important; }
.scx-stat__num .elementor-heading-title {
    font-family: 'the-seasons-light','Cormorant Garamond',Georgia,serif !important;
    font-size: 48px !important; font-weight: 700 !important; color: #fff !important; line-height: 1 !important;
}
.scx-stat__num { margin-bottom: 8px !important; }
.scx-stat__label .elementor-heading-title { font-size: 13px !important; font-weight: 600 !important; color: #fff !important; }
.scx-stat__label { margin-bottom: 4px !important; }
.scx-stat__sub p { font-size: 13px !important; color: #7a8499 !important; font-weight: 300 !important; margin: 0 !important; }

/* ───────── REVIEWS ───────── */
.scx-review > .elementor-element-populated {
    background: #0d1422;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 32px 28px !important;
    height: 100%;
    transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.scx-review:hover > .elementor-element-populated {
    border-color: rgba(195,169,117,0.25);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.scx-review__stars .elementor-heading-title { color: #c3a975 !important; font-size: 16px !important; letter-spacing: 4px; line-height: 1; }
.scx-review__stars { margin-bottom: 18px !important; }
.scx-review__quote p { font-size: 14px !important; color: #a8b4c8 !important; line-height: 1.75 !important; font-weight: 300 !important; margin: 0 0 24px !important; }
.scx-review__name .elementor-heading-title { font-size: 13px !important; font-weight: 600 !important; color: #fff !important; }
.scx-review__name { margin-top: 4px !important; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 20px !important; }
.scx-review__role p { font-size: 12px !important; color: #7a8499 !important; font-weight: 300 !important; margin: 2px 0 0 !important; }

/* ───────── FAQ (Elementor accordion restyle) ───────── */
.scx-faq .elementor-accordion-item { border: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; background: transparent !important; }
.scx-faq .elementor-tab-title,
.scx-faq .elementor-tab-title a,
.scx-faq .elementor-accordion-title {
    font-family: 'Montserrat',sans-serif !important;
    font-size: 14px !important; font-weight: 500 !important; color: #fff !important;
    background: transparent !important; border: none !important; padding: 20px 0 !important;
}
.scx-faq .elementor-tab-title.elementor-active,
.scx-faq .elementor-tab-title.elementor-active a,
.scx-faq .elementor-tab-title:hover,
.scx-faq .elementor-tab-title:hover a { color: #c3a975 !important; }
.scx-faq .elementor-tab-content {
    background: transparent !important; border: none !important;
    padding: 0 0 20px !important; font-size: 13px !important; color: #7a8499 !important;
    line-height: 1.75 !important; font-weight: 300 !important;
}
.scx-faq .elementor-accordion-icon,
.scx-faq .elementor-accordion-icon i,
.scx-faq .elementor-accordion-icon svg { color: #c3a975 !important; fill: #c3a975 !important; }
.scx-faq .elementor-accordion-icon svg { width: 14px; height: 14px; }

/* ───────── BLOG cards ───────── */
.scx-blog > .elementor-element-populated {
    background: #0d1422;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    overflow: hidden;
    padding: 0 !important;
    height: 100%;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.scx-blog:hover > .elementor-element-populated {
    transform: translateY(-5px);
    border-color: rgba(195,169,117,0.30);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.scx-blog__img, .scx-blog__img .elementor-widget-container { margin: 0 !important; }
.scx-blog__img img { width: 100% !important; height: 190px !important; object-fit: cover !important; display: block; border-radius: 0 !important; }
.scx-blog__date .elementor-widget-container,
.scx-blog__title .elementor-widget-container,
.scx-blog__read .elementor-widget-container { padding-left: 20px !important; padding-right: 20px !important; }
.scx-blog__date { margin-top: 16px !important; }
.scx-blog__date p { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #c3a975 !important; margin: 0 !important; }
.scx-blog__title .elementor-heading-title { font-family: 'the-seasons-light','Cormorant Garamond',Georgia,serif !important; font-size: 18px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.3 !important; }
.scx-blog__title { margin: 9px 0 12px !important; }
.scx-blog:hover .scx-blog__title .elementor-heading-title { color: #c3a975 !important; }
.scx-blog__read { margin-bottom: 22px !important; }
.scx-blog__read a, .scx-blog__read .elementor-button {
    color: #c3a975 !important; background: transparent !important; padding: 0 !important;
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important;
}

/* ───────── Buttons (match .sc-btn) ───────── */
.scx-btn-outline .elementor-button {
    background: transparent !important; color: #c3a975 !important;
    border: 1px solid rgba(195,169,117,0.5) !important; border-radius: 8px !important;
}
.scx-btn-outline .elementor-button:hover { background: rgba(195,169,117,0.10) !important; }
.scx-link .elementor-button {
    background: transparent !important; color: #c3a975 !important; padding: 6px 0 !important;
    border: none !important; letter-spacing: 0.08em !important;
}

/* stat dividers (Elementor columns, gap:none) */
.scx-stat + .scx-stat > .elementor-element-populated { border-left: 1px solid rgba(255,255,255,0.07); }
@media (max-width: 800px){ .scx-stat + .scx-stat > .elementor-element-populated { border-left: none; } }

/* ════════════════════════════════════════════════════════════════
   v4 — exact typography + spacing match (measured off live site)
   ════════════════════════════════════════════════════════════════ */

/* Display headings → the-seasons-light, exact sizes from the live page */
.scx-hero-h .elementor-heading-title{
    font-family:'the-seasons-light','Cormorant Garamond',Georgia,serif !important;
    font-size:82px !important; font-weight:700 !important; line-height:0.98 !important; color:#fff !important; margin:0 !important;
}
.scx-sec-h .elementor-heading-title{
    font-family:'the-seasons-light','Cormorant Garamond',Georgia,serif !important;
    font-size:54px !important; font-weight:600 !important; line-height:1.08 !important; color:#fff !important; margin:0 !important;
}
.scx-cta-h .elementor-heading-title{
    font-family:'the-seasons-light','Cormorant Garamond',Georgia,serif !important;
    font-size:58px !important; font-weight:700 !important; line-height:1.05 !important; color:#fff !important; margin:0 !important;
}
@media (max-width:1024px){
    .scx-hero-h .elementor-heading-title{font-size:60px !important}
    .scx-sec-h .elementor-heading-title{font-size:40px !important}
    .scx-cta-h .elementor-heading-title{font-size:42px !important}
}
@media (max-width:600px){
    .scx-hero-h .elementor-heading-title{font-size:44px !important}
    .scx-sec-h .elementor-heading-title{font-size:32px !important}
    .scx-cta-h .elementor-heading-title{font-size:34px !important}
}

/* Eyebrow label */
.scx-eyebrow .elementor-heading-title{
    font-family:'Montserrat',sans-serif !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:2.16px !important; text-transform:uppercase !important; color:#c3a975 !important; margin:0 !important;
}
.scx-eyebrow{margin-bottom:14px !important;}

/* Intro / lead paragraph */
.scx-lead p{font-size:14px !important; color:#a8b4c8 !important; line-height:1.75 !important; font-weight:300 !important; margin:0 !important;}
.scx-lead{max-width:720px; margin:0 !important;}

/* Hero model + sub */
.scx-hero-model p{font-size:11px !important; font-weight:600 !important; letter-spacing:1.5px !important; text-transform:uppercase !important; color:#a8b4c8 !important; margin:0 !important;}
.scx-hero-sub p{font-size:15px !important; color:#a8b4c8 !important; margin:0 !important;}

/* Heading → next-element rhythm (matches live header margins) */
.scx-hero-h{margin-bottom:24px !important;}
.scx-hero-model{margin-bottom:8px !important;}
.scx-sec-h{margin-bottom:18px !important;}
.scx-grid{margin-top:40px !important;}            /* gap from header to card grid */

/* stat card padding → match .sc-stat-card (36px 32px) */
.scx-stat > .elementor-element-populated,
.scx-stat > .elementor-widget-wrap{ padding:36px 32px !important; }

/* CTA inset rounded banner (overlay clips to radius) */
.scx-cta-banner{ border-radius:16px !important; overflow:hidden !important; }
.scx-cta-banner > .elementor-background-overlay{ border-radius:16px !important; }

/* ════════════════════════════════════════════════════════════════
   v6 — column styling via :has()
   Elementor drops COLUMN-level CSS classes (scx-stat / scx-review /
   scx-blog) on import, so the card backgrounds + dividers never hooked
   on. The child WIDGET classes (scx-stat__num, scx-review__stars,
   scx-blog__img) DO survive — so target the column through them.
   Scoped to .elementor-inner-column so the section's outer column
   (heading + intro) is never banded.
   ════════════════════════════════════════════════════════════════ */

/* Stats — subtle band + 1px dividers between the four cards */
.elementor-inner-column:has(.scx-stat__num) > .elementor-element-populated{
    background:#0b1020 !important; padding:36px 24px !important; height:100% !important;
}
.elementor-inner-column:has(.scx-stat__num) + .elementor-inner-column:has(.scx-stat__num) > .elementor-element-populated{
    border-left:1px solid rgba(255,255,255,0.08) !important;
}
@media (max-width:800px){
    .elementor-inner-column:has(.scx-stat__num) + .elementor-inner-column:has(.scx-stat__num) > .elementor-element-populated{ border-left:none !important; }
}

/* Review cards */
.elementor-inner-column:has(.scx-review__stars) > .elementor-element-populated{
    background:#0d1422 !important; border:1px solid rgba(255,255,255,0.07) !important;
    border-radius:12px !important; padding:32px 28px !important; height:100% !important;
}

/* Blog cards */
.elementor-inner-column:has(.scx-blog__img) > .elementor-element-populated{
    background:#0d1422 !important; border:1px solid rgba(255,255,255,0.07) !important;
    border-radius:12px !important; overflow:hidden !important; padding:0 0 4px !important; height:100% !important;
}

/* ════════════════════════════════════════════════════════════════
   v7 — hero top-space + image dim; card spacing, hover, avatars
   (targeted via :has()/widget classes since column classes don't
    survive Elementor import)
   ════════════════════════════════════════════════════════════════ */

/* 1+2. Hero: trim top padding so it fits one view; dim the bg image
   (inset wash — Elementor's own overlay rule out-specifies us) */
.elementor-section:has(.scx-hero-h){
    min-height: auto !important;
    padding-top: 26px !important;
    padding-bottom: 44px !important;
    box-shadow: inset 0 0 0 2000px rgba(8,12,20,0.30) !important;
}
.elementor-section:has(.scx-hero-h) > .elementor-container{ align-items: center !important; }

/* 3+4. Gutter spacing between review & blog cards */
.elementor-inner-column:has(.scx-review__stars),
.elementor-inner-column:has(.scx-blog__img){ padding-left: 12px !important; padding-right: 12px !important; }

/* Card hover lift */
.elementor-inner-column:has(.scx-review__stars):hover > .elementor-element-populated{
    border-color: rgba(195,169,117,0.28) !important; transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
.elementor-inner-column:has(.scx-blog__img):hover > .elementor-element-populated{
    border-color: rgba(195,169,117,0.30) !important; transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
}
.elementor-inner-column:has(.scx-blog__img):hover .scx-blog__title .elementor-heading-title{ color: #c3a975 !important; }

/* 3. Review avatar — gold circle with the client's initial */
.scx-review__name .elementor-heading-title{ display: flex !important; align-items: center; gap: 12px; }
.scx-review__name .elementor-heading-title::before{
    content: ""; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(195,169,117,0.15); border: 1px solid rgba(195,169,117,0.3);
    color: #c3a975; display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
}
.elementor-inner-column:nth-child(1):has(.scx-review__stars) .scx-review__name .elementor-heading-title::before{ content: "V"; }
.elementor-inner-column:nth-child(2):has(.scx-review__stars) .scx-review__name .elementor-heading-title::before{ content: "C"; }
.elementor-inner-column:nth-child(3):has(.scx-review__stars) .scx-review__name .elementor-heading-title::before{ content: "J"; }

/* ════════════════════════════════════════════════════════════════
   v7.1 — smoother card hover + tighter hero top
   ════════════════════════════════════════════════════════════════ */

/* Less top padding on hero */
.elementor-section:has(.scx-hero-h){ padding-top: 10px !important; }

/* Declare the transition on the BASE card so the hover eases in AND out
   (the jerk was a transform with no transition defined on the resting state) */
.elementor-inner-column:has(.scx-review__stars) > .elementor-element-populated,
.elementor-inner-column:has(.scx-blog__img) > .elementor-element-populated{
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease !important;
    will-change: transform;
}
.scx-blog__title .elementor-heading-title{ transition: color .3s ease !important; }

/* ════════════════════════════════════════════════════════════════
   v7.2 — kill the theme wrapper's top padding (the REAL hero gap)
   The season21 .ctn--content wrapper applies `padding: 45px 0` at
   ≥768px, which pushed the hero down. Zero it on Elementor pages.
   ════════════════════════════════════════════════════════════════ */
.elementor-page .ctn.ctn--content,
.elementor-page .ctn--content { padding-top: 0 !important; }

/* ════════════════════════════════════════════════════════════════
   v7.3 — vertical spacing between stacked cards on tablet/mobile
   (desktop uses side gutters; when columns stack they had no gap)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
    .elementor-inner-column:has(.scx-review__stars),
    .elementor-inner-column:has(.scx-blog__img){ margin-bottom: 28px !important; }
}