/* ═══════════════════════════════════════════════════════════
   Remote Hive — Core Values Section
   About Us page · Tilted-bar layout · Scroll-reveal
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (overridden via wp_add_inline_style) ── */
.rh-corevalues {
    --rh-corevalues-accent: #2EC4B6;
    --rh-corevalues-dark:   #1a1a1a;
    --rh-corevalues-bg:     #ffffff;
    --rh-corevalues-tilt:   -5deg;
}

/* ── Section Shell ── */
.rh-corevalues {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--rh-corevalues-bg);
    padding: 100px 0;
    font-family: 'Barlow', 'DM Sans', sans-serif;
}

/* Subtle noise texture overlay */
.rh-corevalues::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px;
    pointer-events: none;
    z-index: 1;
}

/* ── Skyline decoration ── */
.rh-corevalues-skyline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    color: var(--rh-corevalues-dark);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

/* ── Container ── */
.rh-corevalues-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 5;
}

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
.rh-corevalues-header {
    margin-bottom: 52px;
}

.rh-corevalues-title {
    font-family: 'Bebas Neue', 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 5px;
    line-height: 1.2;
    color: var(--rh-corevalues-dark);
    margin: 0;
    /* reveal animation */
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.rh-corevalues.rh-corevalues--visible .rh-corevalues-title {
    opacity: 1;
    transform: translateY(0);
}

.rh-corevalues-title-accent {
    color: var(--rh-corevalues-accent);
}

/* ══════════════════════════════════════
   VALUES LIST
   ══════════════════════════════════════ */
.rh-corevalues-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Individual Row (tilted bar) ── */
.rh-corevalues-row {
    display: flex;
    align-items: stretch;
    transform: rotate(var(--rh-corevalues-tilt));
    transform-origin: left center;
    /* stagger reveal */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.rh-corevalues.rh-corevalues--visible .rh-corevalues-row {
    opacity: 1;
}

/* Stagger delays set via JS data-index (fallback CSS for 1-8) */
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="1"] { transition-delay: 0.10s; }
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="2"] { transition-delay: 0.18s; }
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="3"] { transition-delay: 0.26s; }
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="4"] { transition-delay: 0.34s; }
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="5"] { transition-delay: 0.42s; }
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="6"] { transition-delay: 0.50s; }
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="7"] { transition-delay: 0.58s; }
.rh-corevalues.rh-corevalues--visible .rh-corevalues-row[data-index="8"] { transition-delay: 0.66s; }

/* ── Dark Block (value name) ── */
.rh-corevalues-dark {
    background: var(--rh-corevalues-dark);
    display: flex;
    align-items: center;
    padding: 18px 28px;
    min-width: 280px;
    flex-shrink: 0;
    position: relative;
}

/* Gloss overlay */
.rh-corevalues-dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    pointer-events: none;
}

.rh-corevalues-name {
    font-family: 'Bebas Neue', 'Sora', sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 4px;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* ── Accent Block (icon + description) ── */
.rh-corevalues-accent {
    background: var(--rh-corevalues-accent);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 24px;
    flex: 1;
    position: relative;
    color: #fff;
}

/* Gloss overlay */
.rh-corevalues-accent::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    pointer-events: none;
}

.rh-corevalues-icon {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rh-corevalues-icon svg {
    width: 30px;
    height: 30px;
}

.rh-corevalues-desc {
    font-family: 'Barlow', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.3;
    color: #fff;
    position: relative;
    z-index: 2;
}

/* ══════════════════════════════════════
   RESPONSIVE — Laptop (1024–1279)
   ══════════════════════════════════════ */
@media (max-width: 1279px) {
    .rh-corevalues {
        padding: 88px 0;
    }
    .rh-corevalues-title {
        font-size: 42px;
    }
    .rh-corevalues-name {
        font-size: 32px;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE — Tablet (768–1023)
   ══════════════════════════════════════ */
@media (max-width: 1023px) {
    .rh-corevalues {
        padding: 72px 0;
    }
    .rh-corevalues-title {
        font-size: 36px;
        letter-spacing: 4px;
    }
    .rh-corevalues-header {
        margin-bottom: 40px;
    }
    .rh-corevalues-dark {
        min-width: 210px;
        padding: 15px 22px;
    }
    .rh-corevalues-name {
        font-size: 28px;
        letter-spacing: 3px;
    }
    .rh-corevalues-accent {
        padding: 11px 18px;
        gap: 12px;
    }
    .rh-corevalues-icon svg {
        width: 24px;
        height: 24px;
    }
    .rh-corevalues-desc {
        font-size: 13px;
    }
    .rh-corevalues-list {
        gap: 8px;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE — Mobile Large (480–767)
   ══════════════════════════════════════ */
@media (max-width: 767px) {
    .rh-corevalues {
        padding: 56px 0;
    }
    .rh-corevalues-container {
        padding: 0 16px;
    }
    .rh-corevalues-title {
        font-size: 30px;
        letter-spacing: 3px;
    }
    .rh-corevalues-header {
        margin-bottom: 32px;
    }

    /* Reduce tilt on smaller screens */
    .rh-corevalues-row {
        transform: rotate(-3deg);
    }

    .rh-corevalues-dark {
        min-width: 160px;
        padding: 13px 16px;
    }
    .rh-corevalues-name {
        font-size: 22px;
        letter-spacing: 2px;
    }
    .rh-corevalues-accent {
        padding: 10px 14px;
        gap: 8px;
    }
    .rh-corevalues-icon svg {
        width: 20px;
        height: 20px;
    }
    .rh-corevalues-desc {
        font-size: 11px;
    }
    .rh-corevalues-list {
        gap: 7px;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE — Mobile Small (<480)
   ══════════════════════════════════════ */
@media (max-width: 479px) {
    .rh-corevalues {
        padding: 40px 0;
    }
    .rh-corevalues-container {
        padding: 0 10px;
    }
    .rh-corevalues-title {
        font-size: 26px;
        letter-spacing: 2px;
    }
    .rh-corevalues-header {
        margin-bottom: 24px;
    }

    .rh-corevalues-row {
        transform: rotate(-2.5deg);
    }

    .rh-corevalues-dark {
        min-width: 120px;
        padding: 10px 10px;
    }
    .rh-corevalues-name {
        font-size: 17px;
        letter-spacing: 1.5px;
    }
    .rh-corevalues-accent {
        padding: 8px 8px;
        gap: 6px;
    }
    .rh-corevalues-icon svg {
        width: 16px;
        height: 16px;
    }
    .rh-corevalues-desc {
        font-size: 9.5px;
    }
    .rh-corevalues-list {
        gap: 5px;
    }
}