/* ==========================================================================
   Cattle Expert — Homepage Styles
   Loaded only on the front page (conditional enqueue in inc/enqueue.php).
   Uses design tokens from custom-properties.css.

   All section layouts, backgrounds, and images are set natively via
   Impreza Page Builder. This file only adds hover effects, scroll
   animations, and social button styling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll Animations
   -------------------------------------------------------------------------- */

.ce-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.ce-animate.ce-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Product Cards — hover effects
   -------------------------------------------------------------------------- */

.ce-section-products .w-grid-item {
    transition: box-shadow var(--ce-transition-base), transform var(--ce-transition-base);
}

.ce-section-products .w-grid-item:hover {
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12), 0 2px 8px rgba(26, 26, 26, 0.06);
    transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   3. Configurator CTA — hover effects
   -------------------------------------------------------------------------- */

.ce-section-configurator .w-btn {
    transition: box-shadow var(--ce-transition-base), background-color var(--ce-transition-base), transform var(--ce-transition-base), border-color var(--ce-transition-base);
}

.ce-section-configurator .w-btn:hover {
    box-shadow: 0 0 20px rgba(139, 105, 20, 0.3);
    transform: translateY(-2px);
}

.ce-section-configurator .w-btn:active {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. Community Social Buttons
   -------------------------------------------------------------------------- */

.ce-social-grid .vc_column-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ce-social-btn.w-btn {
    transition: background-color var(--ce-transition-base), border-color var(--ce-transition-base), color var(--ce-transition-base);
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ce-social-telegram:hover {
    background-color: #26A5E4;
    border-color: #26A5E4;
}

.ce-social-vk:hover {
    background-color: #0077FF;
    border-color: #0077FF;
}

.ce-social-dzen:hover {
    background-color: #000;
    border-color: #FFE600;
    color: #FFE600;
}

.ce-social-max:hover {
    background-color: #7B2BFC;
    border-color: #7B2BFC;
}

/* --------------------------------------------------------------------------
   5. Blog Cards — hover effects
   -------------------------------------------------------------------------- */

.ce-section-blog .w-grid-item-h {
    border-radius: 1rem;
    overflow: hidden;
    transition: transform var(--ce-transition-base);
}

.ce-section-blog .w-grid-item-h:hover {
    transform: scale(1.02);
}

.ce-section-blog .w-grid-item-h img {
    transition: transform var(--ce-transition-base);
}

.ce-section-blog .w-grid-item-h:hover img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .ce-social-grid .vc_column-inner {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   7. Hero Slider — visual polish
   Spec: docs/superpowers/specs/2026-04-30-homepage-hero-slider.md
   Targets the first Section on the homepage (Content Carousel built in
   Live Builder). All selectors prefixed with body.home for specificity
   (0,2,1) to win over Impreza's default .w-content-carousel rules.
   -------------------------------------------------------------------------- */

/* Section: force edge-to-edge full width AND kill height_medium padding-top.
   Default height_medium adds ~100px top padding which centers content visually
   instead of leaving it at slide bottom. We want the section to BE the slide. */
body.home .l-section.us_custom_94f19e22 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    min-height: 500px !important;
    overflow: hidden;
}
body.home .l-section.us_custom_94f19e22 > .l-section-h {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    min-height: 500px;
}
/* DON'T force width on .owl-item — Owl uses calculated widths via JS for
   transform-based scrolling. Forcing width:100% breaks the carousel.
   Instead, only constrain the parent containers. */
body.home .l-section.us_custom_94f19e22 .w-content-carousel,
body.home .l-section.us_custom_94f19e22 .w-content-carousel .owl-carousel {
    max-width: 100% !important;
}

/* Slide row sizing only. Background images are managed PER-SLIDE
   in Live Builder (USBuilder → Row Settings → Background → Image).
   No image URL hardcoded here — Impreza-native image management. */
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row {
    position: relative;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 500px;
    height: 500px !important;
    overflow: hidden;
}

/* Per-slide background-position overrides. Live Builder injects the slide
   background as `background:url(...) !important` shorthand, which defaults
   background-position to 0% 0% but does NOT mark the sub-property as
   important — so a higher-specificity `background-position:... !important`
   from this file wins.
   - Slide 1 (Equipment): focus on cow + crush on the left.
   - Slide 2 (Configurator): focus on the full crush on the right.
   WPML duplicates the homepage as independent posts with their own
   us_custom_* class IDs. The two ID sets must be kept in sync:
     RU:    us_custom_a2ec5391, us_custom_0e30462f
     EN+SW: us_custom_970f0225, us_custom_5c38965a */
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row.us_custom_a2ec5391,
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row.us_custom_970f0225 {
    background-position: left center !important;
}
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row.us_custom_0e30462f,
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row.us_custom_5c38965a {
    background-position: 85% center !important;
}

/* Gradient overlay — transparent at top, dark at bottom (read-the-spec).
   Auto-applied to every slide via ::before, no Live Builder config needed. */
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.55) 75%,
        rgba(0, 0, 0, 0.75) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Lift content above the gradient. */
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row > .wpb_column {
    position: relative;
    z-index: 2;
}

/* Bottom-left content alignment in carousel slides (overrides Impreza's
   default vertical-center alignment in column-inner). */
body.home .us_custom_94f19e22 .w-content-carousel .g-cols .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    padding: 40px 60px 56px !important;
    text-align: left !important;
}
/* Force the inner wpb_column wrapper to also be flex (matches inner). */
body.home .us_custom_94f19e22 .w-content-carousel .g-cols.wpb_row > .wpb_column {
    display: flex !important;
    height: 500px !important;
    width: 100%;
}

/* Title — large white left-aligned, with text-shadow as belt-and-braces. */
body.home .us_custom_94f19e22 .w-content-carousel h1.w-text,
body.home .us_custom_94f19e22 .w-content-carousel h2.w-text {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: #fff !important;
    margin: 0 0 12px;
    text-align: left;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Subtitle (Text Block, not h1/h2). */
body.home .us_custom_94f19e22 .w-content-carousel .w-text:not(.w-text-h):not(h1):not(h2) {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 600px;
    margin: 0 0 22px;
    text-align: left;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Buttons — compact, inline row (no stacking). */
body.home .us_custom_94f19e22 .w-content-carousel .w-btn-wrapper {
    display: inline-flex;
    margin: 0 10px 0 0;
    align-items: center;
}
body.home .us_custom_94f19e22 .w-content-carousel .w-btn-wrapper:last-child {
    margin-right: 0;
}
body.home .us_custom_94f19e22 .w-content-carousel .w-btn {
    padding: 9px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    border-radius: 3px !important;
    line-height: 1.4;
    white-space: nowrap;
}

/* Owl carousel arrows — strip the circle, keep just the chevron. */
body.home .us_custom_94f19e22 .owl-carousel .owl-nav button.owl-prev,
body.home .us_custom_94f19e22 .owl-carousel .owl-nav button.owl-next {
    width: 32px;
    height: 56px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    opacity: 0.7;
    transition: opacity 200ms ease, transform 200ms ease;
}
body.home .us_custom_94f19e22 .owl-carousel .owl-nav button.owl-prev:hover,
body.home .us_custom_94f19e22 .owl-carousel .owl-nav button.owl-next:hover {
    opacity: 1;
    transform: scale(1.15);
    background: transparent !important;
}
body.home .us_custom_94f19e22 .owl-carousel .owl-nav button .w-btn-label {
    display: none;
}
body.home .us_custom_94f19e22 .owl-carousel .owl-nav button::before {
    font-size: 28px;
    line-height: 1;
}

/* Owl dots — pill shape on active. */
body.home .us_custom_94f19e22 .owl-carousel .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 200ms ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
body.home .us_custom_94f19e22 .owl-carousel .owl-dots .owl-dot.active span {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}

/* Mobile (≤767px): smaller padding, hide subtitle, compact arrows. */
@media (max-width: 767px) {
    body.home .us_custom_94f19e22 .w-content-carousel .g-cols .vc_column-inner {
        min-height: 420px;
        padding: 24px 20px 64px;
    }
    body.home .us_custom_94f19e22 .w-content-carousel h1.w-text,
    body.home .us_custom_94f19e22 .w-content-carousel h2.w-text {
        font-size: 1.35rem !important;
        line-height: 1.25;
        margin-bottom: 14px;
    }
    /* Hide subtitle on mobile — focus on title + CTAs. */
    body.home .us_custom_94f19e22 .w-content-carousel .w-text:not(.w-text-h):not(h1):not(h2) {
        display: none;
    }
    body.home .us_custom_94f19e22 .w-content-carousel .w-btn-wrapper {
        margin-right: 8px;
    }
    body.home .us_custom_94f19e22 .w-content-carousel .w-btn {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }
    body.home .us_custom_94f19e22 .owl-carousel .owl-nav button.owl-prev,
    body.home .us_custom_94f19e22 .owl-carousel .owl-nav button.owl-next {
        width: 24px;
        height: 44px;
    }
    body.home .us_custom_94f19e22 .owl-carousel .owl-nav button::before {
        font-size: 22px;
    }
}