/* Veton x Cosentino v2 — scoped overrides.
 *
 * All rules are prefixed with .vxc-v2 (page wrapper class from
 * page-templates/veton-cosentino-v2.php) so nothing bleeds outside this
 * landing page. Consolidate into the SCSS toolchain (assets/styles/blocks/)
 * when the design is signed off.
 *
 * Brand tokens (theme):
 *   $primary-color #C49E60, $heading-color #2A2A2A, $text-color #656565,
 *   $bg-color #f1f1f1, Calibre.
 *
 * Body copy on this template follows the theme's global rule verbatim:
 *   font-family Calibre, font-size 1.1rem, font-weight 300, color #656565.
 * H2 on this template follows the alt_content pattern verbatim:
 *   fw-light (300), 24px mobile, 36px desktop, .title spacing utilities.
 */

/* ═══════════════════════════════════════════════════════════════════════
   Intro card — override the theme's shared .alt-content-intro rule which
   defaults to -15px on mobile (drags the card up into the hero). On this
   template we want the card to sit just below the hero on mobile (+12px)
   and only tuck under on desktop.
   ═══════════════════════════════════════════════════════════════════════ */

.vxc-v2 .alt-content-intro {
    margin-top: 12px !important;
}

@media (min-width: 576px) {
    .vxc-v2 .alt-content-intro {
        margin-top: -100px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Body copy — unified to brand default (weight + color + size). Applies
   to every p, li and the two ACF-body wrappers (swatches-body,
   contact-intro). The hero uses Bootstrap's .text-white on its parent to
   override color on dark backgrounds.
   ═══════════════════════════════════════════════════════════════════════ */

.vxc-v2 p,
.vxc-v2 li,
.vxc-v2 .swatches-body,
.vxc-v2 .contact-intro {
    color: #656565;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════
   Section headings — match .alternate-content-wrapper h2 (24px mobile,
   36px desktop, fw-light). The alt_content block already gets this from
   the theme SCSS; we replicate for swatches + CTA card + intro card so
   they read identically.
   ═══════════════════════════════════════════════════════════════════════ */

.vxc-v2 .alt-content-intro h2,
.vxc-v2 .swatches-block h2,
.vxc-v2 .vxc-v2-cta h2 {
    font-size: 24px;
    color: #2A2A2A;
}

@media (min-width: 992px) {
    .vxc-v2 .alt-content-intro h2,
    .vxc-v2 .swatches-block h2,
    .vxc-v2 .vxc-v2-cta h2 {
        font-size: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero — cobranded logo lockup above the h1
   ═══════════════════════════════════════════════════════════════════════ */

.vxc-v2 .vxc-v2-hero .vxc-v2-lockup {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
    opacity: 0.95;
}

.vxc-v2 .vxc-v2-hero .side-aligned .vxc-v2-lockup {
    justify-content: flex-start;
}

.vxc-v2 .vxc-v2-hero .center-aligned .vxc-v2-lockup {
    justify-content: center;
}

.vxc-v2 .vxc-v2-hero .vxc-v2-lockup img {
    height: 22px;
    width: auto;
    display: block;
}

.vxc-v2 .vxc-v2-hero .vxc-v2-lockup-partner {
    height: 20px;
}

.vxc-v2 .vxc-v2-hero .vxc-v2-lockup-x {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    letter-spacing: 0.15em;
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
}

/* Hero typography — h1 as statement (fw-semibold, generous scale).
 * Hero copy stays white via theme's .text-white on parent. */
.vxc-v2 .vxc-v2-hero h1.main-title {
    font-size: 32px;
    line-height: 1.15;
    font-weight: 600;
    text-align: inherit;
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .vxc-v2 .vxc-v2-hero h1.main-title {
        font-size: 48px;
        line-height: 1.1;
    }
}

.vxc-v2 .vxc-v2-hero p.text {
    text-align: inherit;
    max-width: 34em;
}

.vxc-v2 .vxc-v2-hero .overlay.dark-overlay {
    background-color: rgba(0, 0, 0, 0.75);
    background-image: none;
}

/* Mobile — the hero-image-mobile <img> is a landscape shot, so at 100%
 * width it renders too short (~250-300px) and the flex `align-items:
 * center` on the overlay pushes the lockup + h1 above the visible top.
 * Force a taller media wrapper on mobile and let the image cover it. */
@media (max-width: 991.98px) {
    .vxc-v2 .vxc-v2-hero.hero-compact .media-wrapper {
        max-height: none;
        min-height: 80vh;
    }

    .vxc-v2 .vxc-v2-hero .hero-image-mobile {
        width: 100%;
        min-height: 80vh;
        height: 100%;
        object-fit: cover;
    }
}

/* Button alignment — desktop keeps the .side-aligned left-align pattern,
 * so the CTA lines up with the copy. */
@media (min-width: 992px) {
    .vxc-v2 .vxc-v2-hero .button-group {
        text-align: left;
    }
}

/* Mobile — mirror the /load-balancing-energy-management/ pattern: hero
 * content centred (lockup, h1, copy, button). The container's flex
 * align-items-center keeps everything vertically balanced inside the
 * 80vh media wrapper. */
@media (max-width: 991.98px) {
    .vxc-v2 .vxc-v2-hero .vxc-v2-hero-inner {
        text-align: center;
    }

    .vxc-v2 .vxc-v2-hero .vxc-v2-lockup {
        justify-content: center;
    }

    .vxc-v2 .vxc-v2-hero h1.main-title,
    .vxc-v2 .vxc-v2-hero p.text {
        text-align: center;
    }

    .vxc-v2 .vxc-v2-hero .button-group {
        text-align: center;
    }

    /* Button drops toward the bottom of the hero (matches reference
     * mobile layout where the CTAs sit around 75-80% down). */
    .vxc-v2 .vxc-v2-hero .button-group {
        margin-top: 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Feature rows (block-alt_content) — bullet-list breathing room.
   ═══════════════════════════════════════════════════════════════════════ */

.vxc-v2 .alternate-content-wrapper ul {
    margin-top: 20px;
    padding-left: 1.2em;
}

.vxc-v2 .alternate-content-wrapper ul li {
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Swatches grid — $bg-color band with transparent tiles.
   ═══════════════════════════════════════════════════════════════════════ */

.vxc-v2 .swatches-block .swatches-body {
    max-width: 42em;
}

.vxc-v2 .swatches-block .swatches-body p {
    margin: 0;
}

/* Mirrors the homepage .model-cols .col-inner pattern: outer col keeps
 * Bootstrap's 24px gutter, inner card carries $bg-color. The visible
 * whitespace between cards is the standard row/col gutter — no custom
 * overrides. */
.vxc-v2 .swatches-block .swatches-grid .col-inner {
    background: #f1f1f1;
}

.vxc-v2 .swatches-block .swatch-name {
    font-size: 18px;
    color: #8C8C8C;
    font-weight: 300;
    letter-spacing: 0.01em;
    margin: 0;
}

.vxc-v2 .swatches-block .swatch-tile {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 3 / 8;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.vxc-v2 .swatches-block .swatch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA card — matches swatches band ($bg-color); button hugs its label.
   ═══════════════════════════════════════════════════════════════════════ */

/* Match the swatches above: put $bg-color on the inner card element (same
 * DOM depth as .swatches-block .col-inner), NOT the .row. That way both
 * bands share the same left/right edges — determined purely by Bootstrap
 * col padding. */
.vxc-v2 .vxc-v2-cta {
    background: transparent;
}

.vxc-v2 .vxc-v2-cta .col-inner {
    background: #f1f1f1;
}

.vxc-v2 .vxc-v2-cta .contact-intro {
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
}

.vxc-v2 .vxc-v2-cta .contact-intro p {
    margin: 0;
}

/* Button — theme default .btn.btn-primary is `display: flex !important`
 * so the button stretches to the parent column width. Force it back to
 * an inline hug-content button and rely on the parent's text-center for
 * horizontal placement. */
.vxc-v2 .vxc-v2-cta .btn.btn-primary {
    display: inline-flex !important;
    align-items: center;
}