/* ============================================================
   page-bvi-activity.css
   D'Berg Travel Co. — Sprocket Design Co. — 8 May 2026 — v1.2

   Scope: body.dberg-activity-page  (added via body_class filter
                                     in functions.php to any page
                                     whose parent is "What to do
                                     in the BVI")

   Pairs with: functions.php v2.38

   v1.2 BUILD NOTES (8 May 2026):
   - GRADIENT FIX: hero ::before gradient stops re-tuned. v1.1
     had 0.20/0.55/0.97 from top → middle → bottom which left the
     entire upper half of the hero photo bright and only darkened
     the very bottom edge. Text sits in the bottom ~200px of a
     385px hero, so it was reading on a ~70% darkened band — not
     enough contrast against bright sea/sky photos.
     v1.2: 0.0 → 30% (photo clear), ramp to 0.88 by 65%, 0.97 at
     100%. The bottom 35% of the hero is now reliably dark enough
     to read white text against any photo.
   - CONTENT WIDTH FIX: rows other than the hero now constrain
     their inner content to 1400px to match the site header
     container width. Previously the species grid, inline CTA,
     related grid, and final CTA were all going edge-to-edge,
     which read as wider than the rest of the site. Layout reset
     in section 1 still strips Total's container constraint so
     the hero can break out, but each subsequent row's inner
     content is now centred at 1400px max.
   - Reading column inside .dberg-bva-article remains 672px —
     that's intentional for reading rhythm.

   v1.1 BUILD NOTES (8 May 2026):
   - Added .dberg-bva-index-grid + .dberg-bva-index-card styles
     for the parent /what-to-do-in-the-bvi/ page's dynamic grid.

   v1.0 BUILD NOTES (8 May 2026):
   - Initial build. All 7 activity child pages share this
     stylesheet. Each page's WPBakery shortcode provides its own
     hero copy, intro, sections, figures, related grid, final CTA.
   ============================================================ */


/* ============================================================
   1. LAYOUT RESET — DEFEAT TOTAL'S CONTAINER CONSTRAINT
   ============================================================
   Strips Total's wrapper constraints so individual rows below
   can break out to viewport width when needed. Each row then
   re-applies its own appropriate max-width via section-level
   rules below.
   ============================================================ */
body.dberg-activity-page #content-wrap.container,
body.dberg-activity-page #content-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.dberg-activity-page #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.dberg-activity-page #content {
    padding: 0 !important;
    margin: 0 !important;
}

body.dberg-activity-page #sidebar,
body.dberg-activity-page .sidebar-primary,
body.dberg-activity-page .post-edit,
body.dberg-activity-page .page-header {
    display: none !important;
}


/* ============================================================
   SITE CONTENT FRAME — 1400px to match #site-header-inner
   ============================================================
   Defined as a CSS variable for consistency. Every non-hero,
   non-final-band row constrains its inner column to this width.
   ============================================================ */
body.dberg-activity-page {
    --dberg-bva-site-frame: 1400px;
    --dberg-bva-side-gutter: 40px;
}


/* ============================================================
   2. HERO ROW (.dberg-bva-hero)
   ============================================================
   Full-bleed photo, navy gradient wash, content aligned to
   bottom. Eyebrow pill + Playfair h1 + back link.
   Hero deliberately breaks out of the 1400px frame.
   ============================================================ */
body.dberg-activity-page .dberg-bva-hero {
    position: relative !important;
    min-height: 62vh !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Navy gradient wash over hero photo for white-text contrast.
   Tuned to keep the top half of the hero photo bright while
   reliably darkening the bottom 35% where text sits. */
body.dberg-activity-page .dberg-bva-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom,
        rgba(12,27,46,0.00) 0%,
        rgba(12,27,46,0.00) 30%,
        rgba(12,27,46,0.55) 55%,
        rgba(12,27,46,0.88) 75%,
        rgba(12,27,46,0.97) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.dberg-activity-page .dberg-bva-hero > .vc_column_container,
body.dberg-activity-page .dberg-bva-hero > .vc_column_container > .vc_column-inner {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: var(--dberg-bva-site-frame) !important;
    margin: 0 auto !important;
    padding: 0 var(--dberg-bva-side-gutter) 56px !important;
}

body.dberg-activity-page .dberg-bva-hero,
body.dberg-activity-page .dberg-bva-hero > .vc_column_container,
body.dberg-activity-page .dberg-bva-hero > .vc_column_container > .vc_column-inner,
body.dberg-activity-page .dberg-bva-hero .wpb_wrapper,
body.dberg-activity-page .dberg-bva-hero h1,
body.dberg-activity-page .dberg-bva-hero .vcex-heading,
body.dberg-activity-page .dberg-bva-hero .vcex-heading-inner {
    text-align: left !important;
}

/* Back link "← Back to Activities" */
body.dberg-activity-page .dberg-bva-back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em !important;
    color: rgba(255,255,255,0.65) !important;
    margin-bottom: 20px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

body.dberg-activity-page .dberg-bva-back-link:hover {
    color: rgba(255,255,255,1) !important;
}

body.dberg-activity-page .dberg-bva-back-link svg {
    flex-shrink: 0 !important;
}

/* Hero category pill (e.g. "Beach Life") */
body.dberg-activity-page .dberg-bva-cat-pill {
    display: inline-block !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
    border-radius: 3px !important;
    background: rgba(196,163,90,0.28) !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    text-decoration: none !important;
}

/* Hero h1 title */
body.dberg-activity-page .dberg-bva-hero h1.dberg-bva-title .vcex-heading-inner,
body.dberg-activity-page .dberg-bva-title .vcex-heading-inner {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    display: block !important;
    max-width: 720px !important;
}

/* Hero tagline */
body.dberg-activity-page .dberg-bva-tagline .vcex-heading-inner {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.88) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: block !important;
    max-width: 720px !important;
}


/* ============================================================
   3. ARTICLE BODY (.dberg-bva-article)
   ============================================================
   Cream background, content column centred at 672px max-width
   for reading rhythm. Holds intro paragraph and prose.
   ============================================================ */
body.dberg-activity-page .dberg-bva-article {
    background: #FAF9F6 !important;
    padding: 64px 24px !important;
}

body.dberg-activity-page .dberg-bva-article > .vc_column_container,
body.dberg-activity-page .dberg-bva-article > .vc_column_container > .vc_column-inner {
    max-width: 672px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Intro paragraph — slightly larger, centred for breathing room */
body.dberg-activity-page .dberg-bva-article .dberg-bva-intro,
body.dberg-activity-page .dberg-bva-article .dberg-bva-intro p {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 1.08rem !important;
    color: #374151 !important;
    line-height: 1.85 !important;
    margin: 0 0 28px 0 !important;
    text-align: center !important;
}

/* Body paragraphs */
body.dberg-activity-page .dberg-bva-article p,
body.dberg-activity-page .dberg-bva-article .wpb_text_column p {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.975rem !important;
    color: #4b5563 !important;
    line-height: 1.85 !important;
    margin: 0 0 20px 0 !important;
}

/* Strong/bold inside body */
body.dberg-activity-page .dberg-bva-article strong {
    color: #0C1B2E !important;
    font-weight: 600 !important;
}

/* H2 section headings */
body.dberg-activity-page .dberg-bva-article h2,
body.dberg-activity-page .dberg-bva-article .dberg-bva-h2 .vcex-heading-inner {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: #0C1B2E !important;
    line-height: 1.2 !important;
    margin: 48px 0 18px 0 !important;
    display: block !important;
}

/* Figures (image + caption) — break out slightly wider than the
   text column for visual rhythm */
body.dberg-activity-page .dberg-bva-figure {
    margin: 32px -40px !important;
    padding: 0 !important;
}

body.dberg-activity-page .dberg-bva-figure img {
    width: 100% !important;
    max-height: 460px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}

body.dberg-activity-page .dberg-bva-figcaption {
    text-align: center !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    margin-top: 10px !important;
    padding: 0 40px !important;
    line-height: 1.6 !important;
}


/* ============================================================
   4. SPECIES / FEATURE GRID (.dberg-bva-species)
   ============================================================
   Cream background, eyebrow + h2 centred, then 3-up grid of
   image+title+body cards inside the 1400px site frame.
   ============================================================ */
body.dberg-activity-page .dberg-bva-species {
    background: #FAF9F6 !important;
    padding: 32px var(--dberg-bva-side-gutter) 64px !important;
}

body.dberg-activity-page .dberg-bva-species > .vc_column_container,
body.dberg-activity-page .dberg-bva-species > .vc_column_container > .vc_column-inner {
    max-width: var(--dberg-bva-site-frame) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

body.dberg-activity-page .dberg-bva-species-eyebrow .vcex-heading-inner {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #C4A35A !important;
}

body.dberg-activity-page .dberg-bva-species-title .vcex-heading-inner {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
    font-weight: 600 !important;
    color: #0C1B2E !important;
    line-height: 1.15 !important;
}

/* Inner row that holds 3 species columns */
body.dberg-activity-page .dberg-bva-species-grid {
    margin-bottom: 32px !important;
}

body.dberg-activity-page .dberg-bva-species-col {
    padding: 0 14px !important;
}

body.dberg-activity-page .dberg-bva-species-img {
    margin: 0 0 18px 0 !important;
}

body.dberg-activity-page .dberg-bva-species-img img,
body.dberg-activity-page .dberg-bva-species-col .vc_single_image-img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}

body.dberg-activity-page .dberg-bva-species-name .vcex-heading-inner {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #0C1B2E !important;
    line-height: 1.25 !important;
}

body.dberg-activity-page .dberg-bva-species-body,
body.dberg-activity-page .dberg-bva-species-body p {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.92rem !important;
    color: #4b5563 !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}


/* ============================================================
   5. INLINE CTA (.dberg-bva-inline-cta)
   ============================================================
   Mid-page navy box with title + body + gold button. Sits
   inside the article frame (cream bg, second .dberg-bva-article
   row). Constrained to 720px and centred.
   ============================================================ */
body.dberg-activity-page .dberg-bva-inline-cta {
    background: #0C1B2E !important;
    border-radius: 6px !important;
    padding: 36px 32px !important;
    text-align: center !important;
    margin: 0 auto 40px !important;
    max-width: 720px !important;
}

body.dberg-activity-page .dberg-bva-inline-cta-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
}

body.dberg-activity-page .dberg-bva-inline-cta-body {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.65) !important;
    line-height: 1.65 !important;
    margin: 0 0 22px 0 !important;
}

body.dberg-activity-page .dberg-bva-article-footer {
    border-top: 1px solid rgba(196,163,90,0.18) !important;
    padding-top: 24px !important;
    margin: 8px auto 0 !important;
    max-width: 720px !important;
    text-align: left !important;
}

body.dberg-activity-page .dberg-bva-article-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #C4A35A !important;
    text-decoration: none !important;
    transition: gap 0.2s !important;
}

body.dberg-activity-page .dberg-bva-article-back:hover {
    gap: 11px !important;
}

body.dberg-activity-page .dberg-bva-article-back svg {
    flex-shrink: 0 !important;
}


/* ============================================================
   6. RELATED ACTIVITIES (.dberg-bva-related)
   ============================================================
   White background section above final CTA. Inner content
   constrained to 1400px site frame.
   ============================================================ */
body.dberg-activity-page .dberg-bva-related {
    background: #ffffff !important;
    border-top: 1px solid rgba(196,163,90,0.18) !important;
    padding: 72px var(--dberg-bva-side-gutter) !important;
    text-align: center !important;
}

body.dberg-activity-page .dberg-bva-related > .vc_column_container,
body.dberg-activity-page .dberg-bva-related > .vc_column_container > .vc_column-inner {
    max-width: var(--dberg-bva-site-frame) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

body.dberg-activity-page .dberg-bva-related-eyebrow,
body.dberg-activity-page .dberg-bva-related-eyebrow .vcex-heading-inner {
    display: block !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #C4A35A !important;
    margin-bottom: 12px !important;
}

body.dberg-activity-page .dberg-bva-related-title,
body.dberg-activity-page .dberg-bva-related-title .vcex-heading-inner {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
    font-weight: 600 !important;
    color: #0C1B2E !important;
    margin: 0 0 40px 0 !important;
    display: block !important;
}

body.dberg-activity-page .dberg-bva-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    text-align: left !important;
}

body.dberg-activity-page .dberg-bva-rel-card {
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #FAF9F6 !important;
    border: 1px solid rgba(196,163,90,0.18) !important;
    transition: transform 0.22s, box-shadow 0.22s !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

body.dberg-activity-page .dberg-bva-rel-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(12,27,46,0.1) !important;
}

body.dberg-activity-page .dberg-bva-rel-img {
    height: 180px !important;
    overflow: hidden !important;
}

body.dberg-activity-page .dberg-bva-rel-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s !important;
    display: block !important;
}

body.dberg-activity-page .dberg-bva-rel-card:hover .dberg-bva-rel-img img {
    transform: scale(1.05) !important;
}

body.dberg-activity-page .dberg-bva-rel-body {
    padding: 18px !important;
}

body.dberg-activity-page .dberg-bva-rel-tag {
    display: inline-block !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    background: rgba(196,163,90,0.13) !important;
    color: #C4A35A !important;
    margin-bottom: 8px !important;
}

body.dberg-activity-page .dberg-bva-rel-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #0C1B2E !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}


/* ============================================================
   7. FINAL CTA (.dberg-bva-final-cta)
   ============================================================
   Full-bleed navy band, but inner content centred at 1400px
   to align with the rest of the site.
   ============================================================ */
body.dberg-activity-page .dberg-bva-final-cta {
    background: #0C1B2E !important;
    padding: 96px var(--dberg-bva-side-gutter) !important;
    text-align: center !important;
}

body.dberg-activity-page .dberg-bva-final-cta > .vc_column_container,
body.dberg-activity-page .dberg-bva-final-cta > .vc_column_container > .vc_column-inner {
    max-width: var(--dberg-bva-site-frame) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

body.dberg-activity-page .dberg-bva-final-cta-eyebrow,
body.dberg-activity-page .dberg-bva-final-cta-eyebrow .vcex-heading-inner {
    display: block !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #C4A35A !important;
    margin-bottom: 14px !important;
}

body.dberg-activity-page .dberg-bva-final-cta-title,
body.dberg-activity-page .dberg-bva-final-cta-title .vcex-heading-inner {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    margin: 0 0 14px 0 !important;
    display: block !important;
}

body.dberg-activity-page .dberg-bva-final-cta-body,
body.dberg-activity-page .dberg-bva-final-cta-body .wpb_wrapper p {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.95rem !important;
    color: rgba(255,255,255,0.65) !important;
    max-width: 460px !important;
    margin: 0 auto 32px !important;
    line-height: 1.7 !important;
    text-align: center !important;
}


/* ============================================================
   8. SHARED BUTTON STYLES (gold)
   ============================================================ */
body.dberg-activity-page .dberg-btn-gold {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #C4A35A !important;
    color: #0C1B2E !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
}

body.dberg-activity-page .dberg-btn-gold:hover {
    opacity: 0.88 !important;
    color: #0C1B2E !important;
}

body.dberg-activity-page .dberg-btn-gold svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}


/* ============================================================
   9. ACTIVITY INDEX GRID — parent page only
   ============================================================
   Used by [dberg_activity_index] shortcode on the parent
   /what-to-do-in-the-bvi/ page. Constrained to 1400px site
   frame, 3-col on desktop, 2-col tablet, 1-col mobile.
   ============================================================ */
body.dberg-activity-page .dberg-bva-index-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    max-width: var(--dberg-bva-site-frame) !important;
    margin: 0 auto !important;
    text-align: left !important;
}

body.dberg-activity-page .dberg-bva-index-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid rgba(196,163,90,0.18) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.22s, box-shadow 0.22s !important;
}

body.dberg-activity-page .dberg-bva-index-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 36px rgba(12,27,46,0.12) !important;
}

body.dberg-activity-page .dberg-bva-index-img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: #FAF9F6 !important;
}

body.dberg-activity-page .dberg-bva-index-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

body.dberg-activity-page .dberg-bva-index-card:hover .dberg-bva-index-img img {
    transform: scale(1.04) !important;
}

body.dberg-activity-page .dberg-bva-index-body {
    padding: 24px 26px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

body.dberg-activity-page .dberg-bva-index-tag {
    display: inline-block !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
    background: rgba(196,163,90,0.13) !important;
    color: #C4A35A !important;
    margin-bottom: 12px !important;
    align-self: flex-start !important;
}

body.dberg-activity-page .dberg-bva-index-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.32rem !important;
    font-weight: 600 !important;
    color: #0C1B2E !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
    transition: color 0.2s !important;
}

body.dberg-activity-page .dberg-bva-index-card:hover .dberg-bva-index-title {
    color: #1a4570 !important;
}

body.dberg-activity-page .dberg-bva-index-excerpt {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.875rem !important;
    color: #6b7a8d !important;
    line-height: 1.7 !important;
    margin: 0 0 18px 0 !important;
    flex: 1 !important;
}

body.dberg-activity-page .dberg-bva-index-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #C4A35A !important;
    transition: gap 0.2s !important;
}

body.dberg-activity-page .dberg-bva-index-card:hover .dberg-bva-index-link {
    gap: 11px !important;
}

body.dberg-activity-page .dberg-bva-index-link svg {
    flex-shrink: 0 !important;
}


/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    body.dberg-activity-page {
        --dberg-bva-side-gutter: 32px;
    }
    body.dberg-activity-page .dberg-bva-index-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }
}

@media (max-width: 860px) {
    body.dberg-activity-page {
        --dberg-bva-side-gutter: 24px;
    }
    body.dberg-activity-page .dberg-bva-figure {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    body.dberg-activity-page .dberg-bva-related-grid {
        grid-template-columns: 1fr !important;
    }
    body.dberg-activity-page .dberg-bva-species-grid {
        flex-direction: column !important;
    }
    body.dberg-activity-page .dberg-bva-species-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 32px !important;
    }
    body.dberg-activity-page .dberg-bva-related {
        padding: 56px var(--dberg-bva-side-gutter) !important;
    }
}

@media (max-width: 600px) {
    body.dberg-activity-page {
        --dberg-bva-side-gutter: 20px;
    }
    body.dberg-activity-page .dberg-bva-article {
        padding: 48px 20px !important;
    }
    body.dberg-activity-page .dberg-bva-figure {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.dberg-activity-page .dberg-bva-final-cta {
        padding: 72px var(--dberg-bva-side-gutter) !important;
    }
    body.dberg-activity-page .dberg-bva-index-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}


/* ============================================================
   END OF FILE — page-bvi-activity.css v1.2
   ============================================================ */