/* ==========================================================
   RESOURCES PAGE — hero, demo videos, guides, downloads,
   FAQ, social links. Markup: resources.html
   Depends on shared tokens + .wrap/.eyebrow/.btn/.cta-banner/
   .site-footer/.nav-dropdown already defined in products.css.
   ========================================================== */

/* ==========================================
   HERO — matches products-hero pattern
========================================== */

.resources-hero{
    position:relative;
    overflow:hidden;
    padding:120px 0 88px;
    background:
        linear-gradient(
            120deg,
            rgba(21,17,26,.94) 0%,
            rgba(21,17,26,.72) 45%,
            rgba(203,41,82,.42) 100%
        ),
        /* TEMP placeholder — reusing an existing clean image until a dedicated
       resources-hero-bg.jpg is supplied (see chat notes) */
    url("../assets/pillar-bg.jpg") center/cover no-repeat,
        var(--ink);
}

.resources-hero-inner{
    position:relative;
    z-index:1;
}

.resources-hero h1{
    color:var(--white);
    font-size:clamp(34px,4.4vw,50px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.08;
    max-width:720px;
    margin-bottom:20px;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:32px;
}

@media (max-width:980px){
    .resources-hero{
        padding:96px 0 64px;
    }
}

@media (max-width:620px){
    .resources-hero{
        padding:80px 0 52px;
    }
}

/* ==========================================
   SHARED SECTION SPACING
========================================== */

.videos-section,
.guides-section,
.downloads-section,
.faq-section,
.social-section{
    padding:72px 0;
}

.videos-section{
    background:var(--bg-alt);
}

.downloads-section{
    background:var(--bg-alt);
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.guides-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.videos-section h2,
.guides-section h2,
.downloads-section h2,
.faq-section h2,
.social-section h2{
    font-size:clamp(26px,3vw,34px);
    font-weight:800;
    letter-spacing:-.015em;
    color:var(--ink);
}

.section-lead{
    font-size:16px;
    color:var(--gray-700);
    max-width:560px;
    margin-top:8px;
    margin-bottom:40px;
}

.video-note{
    font-size:13px;
    color:var(--gray-500);
    margin-top:24px;
}

.video-note code{
    font-family:'JetBrains Mono', monospace;
    background:var(--gray-150);
    padding:2px 6px;
    border-radius:4px;
    font-size:12px;
}

.video-note a{
    color:var(--crimson);
    font-weight:700;
}

/* ==========================================
   VIDEO GRID
========================================== */

.video-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

/* .video-card is a <button> now (so it can open the lightbox instead of
   navigating) — reset default button chrome before re-applying the card look. */
.video-card{
    display:flex;
    flex-direction:column;
    width:100%;
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-md);
    overflow:hidden;
    padding:0;
    font:inherit;
    text-align:left;
    color:inherit;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.video-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px -20px rgba(21,17,26,.28);
    border-color:var(--crimson);
}

.video-card:focus-visible{
    outline:2px solid var(--crimson);
    outline-offset:3px;
}

.video-thumb{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:16/10;
    background:
        radial-gradient(circle at 30% 22%, var(--crimson-tint), transparent 60%),
        var(--bg-alt);
}

.video-icon{
    font-size:40px;
    color:var(--crimson);
    transition:transform .2s ease;
}

.video-card:hover .video-icon{
    transform:scale(1.08);
}

.play-badge{
    position:absolute;
    bottom:10px;
    right:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--crimson);
    color:var(--white);
    box-shadow:0 6px 16px -4px rgba(203,41,82,.6);
}

.video-copy{
    display:block;
    padding:16px 18px 20px;
}

.video-title-row{
    display:block;
    margin-bottom:10px;
}

.video-h{
    font-size:15.5px;
    font-weight:800;
    color:var(--ink);
}

.video-copy ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:6px;
}

.video-copy li{
    font-size:13px;
    color:var(--gray-700);
    padding-left:16px;
    position:relative;
}

.video-copy li::before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--crimson);
}

/* ==========================================
   VIDEO LIGHTBOX
========================================== */

.video-lightbox{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.video-lightbox[hidden]{
    display:none;
}

.video-lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,12,18,.82);
    backdrop-filter:blur(4px);
    animation:lightbox-fade .18s ease;
}

.video-lightbox-panel{
    position:relative;
    z-index:1;
    width:100%;
    max-width:880px;
    background:var(--ink);
    border-radius:var(--radius-lg);
    padding:16px;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
    animation:lightbox-pop .22s cubic-bezier(.2,.9,.3,1.2);
}

@keyframes lightbox-fade{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes lightbox-pop{
    from{ opacity:0; transform:scale(.96) translateY(8px); }
    to{ opacity:1; transform:scale(1) translateY(0); }
}

.video-lightbox-close{
    position:absolute;
    top:-14px;
    right:-14px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:var(--crimson);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
    transition:transform .15s ease;
}

.video-lightbox-close:hover{
    transform:scale(1.08);
}

.video-lightbox-close:focus-visible{
    outline:2px solid var(--white);
    outline-offset:2px;
}

.video-lightbox-title{
    color:var(--white);
    font-size:14.5px;
    font-weight:700;
    margin:6px 8px 12px;
}

.video-lightbox-frame{
    position:relative;
    aspect-ratio:16/9;
    border-radius:calc(var(--radius-lg) - 8px);
    overflow:hidden;
    background:#000;
}

.video-lightbox-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.video-lightbox-fallback{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    color:var(--white);
    padding:24px;
}

.video-lightbox-fallback[hidden]{
    display:none;
}

.video-lightbox-fallback i{
    font-size:40px;
    color:var(--crimson);
    margin-bottom:4px;
}

.video-lightbox-fallback p{
    font-size:14px;
    color:rgba(255,255,255,.72);
    max-width:320px;
}

@media (max-width:620px){
    .video-lightbox-panel{
        padding:12px;
    }
    .video-lightbox-close{
        top:-12px;
        right:-4px;
    }
}

/* ==========================================
   REQUEST DEMO STRIP
========================================== */

.request-demo-section{
    padding:56px 0;
}

.request-demo-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    background:var(--bg-alt);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-lg);
    padding:36px 40px;
}

.request-demo-inner h2{
    font-size:clamp(22px,2.6vw,28px);
    font-weight:800;
    color:var(--ink);
    margin:10px 0 10px;
    max-width:480px;
}

.request-demo-inner p{
    font-size:15px;
    color:var(--gray-700);
    max-width:460px;
}

/* ==========================================
   GUIDES GRID
========================================== */

.guides-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.guide-card{
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-md);
    padding:22px;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.guide-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px -20px rgba(21,17,26,.25);
    border-color:var(--crimson);
}

.guide-card-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.guide-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--crimson-tint);
    color:var(--crimson);
    font-size:16px;
    flex-shrink:0;
}

.guide-tag{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--crimson);
}

.guide-time{
    font-size:12px;
    color:var(--gray-500);
    margin-left:auto;
    white-space:nowrap;
}

.guide-card h3{
    font-size:16px;
    font-weight:800;
    color:var(--ink);
    margin-bottom:8px;
    line-height:1.35;
}

.guide-card p{
    font-size:14px;
    line-height:1.55;
    color:var(--gray-700);
    flex-grow:1;
}

.guide-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:16px;
    font-size:13px;
    font-weight:700;
    color:var(--crimson);
}

.guide-more i{
    font-size:12px;
    transition:transform .2s ease;
}

.guide-card:hover .guide-more i{
    transform:translateX(3px);
}

/* ==========================================
   DOWNLOADS GRID + SIDE IMAGES
========================================== */

.downloads-side{
    position:absolute;
    top:0;
    bottom:0;
    width:260px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:.5;
    z-index:0;
    pointer-events:none;
}

.downloads-side-left{
    left:0;
    background-image:url("../assets/slider/left1.png");
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.9) 0%, transparent 100%);
    mask-image:linear-gradient(to right, rgba(0,0,0,.9) 0%, transparent 100%);
}

.downloads-side-right{
    right:0;
    background-image:url("../assets/slider/right1.png");
    -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,.9) 0%, transparent 100%);
    mask-image:linear-gradient(to left, rgba(0,0,0,.9) 0%, transparent 100%);
}

.downloads-section .wrap{
    position:relative;
    z-index:1;
}

.guides-side{
    position:absolute;
    top:0;
    bottom:0;
    width:240px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:.4;
    z-index:0;
    pointer-events:none;
}

.guides-side-left{
    left:0;
    background-image:url("../assets/slider/left2.png");
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.85) 0%, transparent 100%);
    mask-image:linear-gradient(to right, rgba(0,0,0,.85) 0%, transparent 100%);
}

.guides-side-right{
    right:0;
    background-image:url("../assets/slider/right2.png");
    -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,.85) 0%, transparent 100%);
    mask-image:linear-gradient(to left, rgba(0,0,0,.85) 0%, transparent 100%);
}

.guides-section .wrap{
    position:relative;
    z-index:1;
}

.downloads-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.download-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-md);
    padding:18px 20px;
    box-shadow:0 1px 2px rgba(21,17,26,.04);
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.download-card:hover{
    border-color:var(--crimson);
    transform:translateY(-2px);
    box-shadow:0 14px 28px -18px rgba(21,17,26,.3);
}

.download-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:var(--radius-md);
    background:var(--bg-alt);
    color:var(--crimson);
    font-size:19px;
    flex-shrink:0;
}

.download-card h3{
    font-size:14.5px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:2px;
}

.download-meta{
    font-size:12px;
    font-weight:700;
    color:var(--crimson);
    text-transform:uppercase;
    letter-spacing:.04em;
}

.download-cta{
    margin-left:auto;
    color:var(--gray-500);
    font-size:16px;
    transition:color .2s ease, transform .2s ease;
}

.download-card:hover .download-cta{
    color:var(--crimson);
    transform:translateY(2px);
}

/* ==========================================
   FAQ (mirrors solutions.css so this page
   doesn't depend on loading that file too)
========================================== */

.faq-list{
    max-width:760px;
    border-top:1px solid var(--gray-150);
}

.faq-item{
    border-bottom:1px solid var(--gray-150);
}

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:none;
    border:none;
    padding:20px 0;
    font-size:15.5px;
    font-weight:700;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
}

.faq-toggle{
    flex-shrink:0;
    font-size:20px;
    font-weight:400;
    color:var(--crimson);
    transition:transform .2s ease;
}

.faq-question[aria-expanded="true"] .faq-toggle{
    transform:rotate(45deg);
}

.faq-answer{
    padding:0 0 20px;
    max-width:640px;
}

.faq-answer p{
    font-size:14.5px;
    line-height:1.6;
    color:var(--gray-700);
}

.faq-question:focus-visible{
    outline:2px solid var(--crimson);
    outline-offset:4px;
    border-radius:4px;
}

/* ==========================================
   SOCIAL GRID
========================================== */

.social-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.social-card{
    display:flex;
    align-items:center;
    gap:12px;
    justify-content:center;
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-pill);
    padding:16px 20px;
    font-size:14.5px;
    font-weight:700;
    color:var(--ink);
    transition:border-color .2s ease, color .2s ease, transform .2s ease;
}

.social-card:hover{
    border-color:var(--crimson);
    color:var(--crimson);
    transform:translateY(-2px);
}

.social-icon{
    font-size:18px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1200px){
    .downloads-side,
    .guides-side{
        display:none;
    }
}

@media (max-width:980px){

    .video-grid{
        grid-template-columns:1fr 1fr;
    }

    .guides-grid{
        grid-template-columns:1fr 1fr;
    }

    .downloads-grid{
        grid-template-columns:1fr 1fr;
    }

    .social-grid{
        grid-template-columns:1fr 1fr;
    }

    .request-demo-inner{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media (max-width:620px){

    .video-grid{
        grid-template-columns:1fr;
    }

    .guides-grid{
        grid-template-columns:1fr;
    }

    .downloads-grid{
        grid-template-columns:1fr;
    }

    .social-grid{
        grid-template-columns:1fr;
    }

    .request-demo-inner{
        padding:28px 24px;
    }

    .guide-card-head{
        flex-wrap:wrap;
    }

    .guide-time{
        margin-left:0;
    }

}