/* Wildpack Hero Block v2.0.0 - Frontend
   All selectors scoped to .wp-hero-section with !important to prevent theme bleed */

/* -- Section ------------------------------------------------ */

.wp-hero-section {
    position: relative !important;
    background: #1e3b28 !important;
    overflow: hidden !important;
    padding: 80px 0 60px !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* -- Topographic background --------------------------------- */

.wp-hero-section .wp-hero-bg-shapes {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    opacity: 0.06 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M60 300c0-80 40-150 100-180s130-20 180 20 90 110 80 190-60 150-140 180-160 10-200-40-40-120-20-170z'/%3E%3Cpath d='M80 290c0-65 35-125 85-150s110-15 150 18 75 92 67 158-50 125-117 150-133 8-167-33-33-100-18-143z'/%3E%3Cpath d='M100 282c0-52 28-100 70-122s90-12 122 15 60 74 54 128-42 102-95 122-108 6-136-27-28-82-15-116z'/%3E%3Cpath d='M125 275c0-38 22-75 52-92s68-8 92 12 45 56 40 96-32 76-72 92-80 5-102-20-20-60-10-88z'/%3E%3Cpath d='M350 150c0-60 30-110 75-135s100-15 140 15 70 85 62 145-45 115-108 140-125 8-155-30-30-95-14-135z'/%3E%3Cpath d='M368 155c0-48 24-88 60-108s80-12 112 12 56 68 50 116-36 92-87 112-100 6-124-24-24-76-11-108z'/%3E%3Cpath d='M388 162c0-35 18-66 45-82s60-9 84 9 42 51 38 88-28 70-66 84-76 5-94-18-18-58-7-81z'/%3E%3Cpath d='M150 450c0-55 28-100 68-125s85-14 120 12 62 75 55 130-40 105-95 125-110 7-138-28-28-85-10-114z'/%3E%3Cpath d='M168 448c0-42 22-78 54-98s66-10 94 10 48 58 43 100-32 82-74 98-86 6-108-22-22-66-9-88z'/%3E%3Cpath d='M188 446c0-30 16-56 40-70s48-8 68 8 35 42 31 72-23 58-54 70-62 4-78-16-16-48-7-64z'/%3E%3Cpath d='M420 380c0-50 25-92 62-114s78-12 110 11 56 68 50 118-38 95-88 114-100 6-126-25-26-78-8-104z'/%3E%3Cpath d='M438 382c0-38 20-72 50-90s62-10 88 9 44 54 40 94-30 75-70 90-80 5-100-20-20-62-8-83z'/%3E%3Cpath d='M458 386c0-26 14-50 36-64s44-6 62 7 32 38 28 66-22 54-50 64-58 3-72-14-14-44-4-59z'/%3E%3Cpath d='M30 100c0-40 20-72 50-88s65-10 90 12 45 58 40 100-30 78-72 94-82 5-104-22-20-65-4-96z'/%3E%3Cpath d='M48 105c0-30 15-55 38-68s50-8 70 9 35 44 30 76-24 60-55 72-64 4-80-16-16-50-3-73z'/%3E%3Cpath d='M500 60c0-35 18-65 44-78s55-8 78 10 38 50 34 86-26 66-60 80-72 4-90-18-18-56-6-80z'/%3E%3Cpath d='M515 68c0-24 12-46 32-56s40-6 56 8 28 36 24 62-20 48-44 58-52 3-66-14-14-42-2-58z'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 600px 600px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* -- Layout ------------------------------------------------- */

.wp-hero-section .wp-hero-inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    border: none !important;
    box-shadow: none !important;
}

/* -- Left content ------------------------------------------- */

.wp-hero-section .wp-hero-content {
    color: #fff !important;
}

.wp-hero-section .wp-hero-title {
    font-family: 'Sora', sans-serif !important;
    font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    color: #fff !important;
    letter-spacing: -0.02em !important;
    border: none !important;
    text-transform: none !important;
}

.wp-hero-section .wp-hero-accent {
    color: #c76b2b !important;
    font-style: normal !important;
}

.wp-hero-section .wp-hero-copy {
    font-family: 'Sora', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    max-width: 480px !important;
    border: none !important;
    text-transform: none !important;
}

/* -- Buttons ------------------------------------------------ */

.wp-hero-section .wp-hero-buttons {
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 40px !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    border: none !important;
}

.wp-hero-section .wp-hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.wp-hero-section .wp-hero-btn:hover {
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.wp-hero-section .wp-hero-btn--primary,
.wp-hero-section .wp-hero-btn--primary:visited {
    background: #c76b2b !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(199, 107, 43, 0.35) !important;
}

.wp-hero-section .wp-hero-btn--primary:hover {
    background: #d4772f !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(199, 107, 43, 0.45) !important;
}

.wp-hero-section .wp-hero-btn--secondary,
.wp-hero-section .wp-hero-btn--secondary:visited {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
}

.wp-hero-section .wp-hero-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* -- Stats -------------------------------------------------- */

.wp-hero-section .wp-hero-stats {
    display: flex !important;
    gap: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    list-style: none !important;
}

.wp-hero-section .wp-hero-stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-hero-section .wp-hero-stat__number {
    font-family: 'Sora', sans-serif !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wp-hero-section .wp-hero-stat__label {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -- Right visual ------------------------------------------- */

.wp-hero-section .wp-hero-visual {
    position: relative !important;
}

.wp-hero-section .wp-hero-image-wrap {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.wp-hero-section .wp-hero-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    min-height: 320px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wp-hero-section .wp-hero-image-placeholder {
    width: 100% !important;
    height: 320px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
}

/* -- Cycling location card ---------------------------------- */

.wp-hero-section .wp-hero-card {
    position: absolute !important;
    bottom: -30px !important;
    left: -30px !important;
    width: 280px !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    z-index: 2 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-hero-section .wp-hero-card__slide {
    position: relative !important;
}

.wp-hero-section .wp-hero-card__badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: #1e3b28 !important;
    color: #fff !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    letter-spacing: 0.04em !important;
    z-index: 1 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    border: none !important;
}

.wp-hero-section .wp-hero-card__image-wrap {
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    overflow: hidden !important;
    background: #e8e0d6 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.wp-hero-section .wp-hero-card__image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wp-hero-section .wp-hero-card__body {
    padding: 14px 16px 16px !important;
    margin: 0 !important;
    border: none !important;
}

.wp-hero-section .wp-hero-card__name {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    border: none !important;
    text-transform: none !important;
}

.wp-hero-section .wp-hero-card__county {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.78rem !important;
    color: #888 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
}

.wp-hero-section .wp-hero-card__rating {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
}

.wp-hero-section .wp-hero-card__rating-label {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #444 !important;
}

.wp-hero-section .wp-hero-card__rating-score {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #c76b2b !important;
}

.wp-hero-section .wp-hero-card__rating-bar {
    flex: 1 !important;
    height: 6px !important;
    background: #e8e0d6 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.wp-hero-section .wp-hero-card__rating-fill {
    height: 100% !important;
    background: #c76b2b !important;
    border-radius: 3px !important;
}

.wp-hero-section .wp-hero-card__desc {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.78rem !important;
    color: #555 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    border: none !important;
    text-transform: none !important;
}

.wp-hero-section .wp-hero-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #f0ece7 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 10px 0 0 !important;
    margin: 0 !important;
}

.wp-hero-section .wp-hero-card__link,
.wp-hero-section .wp-hero-card__link:visited {
    font-family: 'Sora', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #c76b2b !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-hero-section .wp-hero-card__link:hover {
    color: #a85a22 !important;
    text-decoration: none !important;
}

.wp-hero-section .wp-hero-card__meta {
    display: flex !important;
    gap: 10px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 0.7rem !important;
    color: #999 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -- Card transition animation ------------------------------ */

@keyframes wpHeroCardFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}

@keyframes wpHeroCardFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Responsive --------------------------------------------- */

@media (max-width: 900px) {
    .wp-hero-section {
        padding: 50px 0 40px !important;
    }

    .wp-hero-section .wp-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .wp-hero-section .wp-hero-visual {
        max-width: 480px !important;
        margin: 0 auto !important;
    }

    .wp-hero-section .wp-hero-card {
        bottom: -20px !important;
        left: -10px !important;
        width: 240px !important;
    }

    .wp-hero-section .wp-hero-stats {
        gap: 28px !important;
    }
}

@media (max-width: 600px) {
    .wp-hero-section .wp-hero-title {
        font-size: 1.9rem !important;
    }

    .wp-hero-section .wp-hero-stats {
        gap: 20px !important;
    }

    .wp-hero-section .wp-hero-stat__number {
        font-size: 1.4rem !important;
    }

    .wp-hero-section .wp-hero-card {
        width: 210px !important;
    }

    .wp-hero-section .wp-hero-buttons {
        flex-direction: column !important;
    }

    .wp-hero-section .wp-hero-btn {
        text-align: center !important;
    }
}