
.apa-empty{
    padding:1rem 1.25rem;
    border:1px dashed rgba(0,0,0,.15);
    border-radius:14px;
    background:rgba(0,0,0,.02)
}

.apa-section{
    --apa-columns: 3;
    --apa-eyebrow-accent: var(--wp--preset--color--accent, #4DA3FF);
    --apa-motion-stagger: 70ms;
    --apa-hover-lift: 4px;
    --apa-hover-overlay-opacity: .10;
    --apa-title-underline-width: 38%;

    position: relative;
    overflow: hidden;
    padding: 72px 32px;
}

.apa-section::before{
    content:"";
    position:absolute;
    left:-8%;
    right:-8%;
    bottom:10%;
    height:18%;
    background: color-mix(in srgb, var(--wp--preset--color--accent, #4DA3FF) 76%, transparent);
    opacity:.08;
    transform:skewY(-4deg);
    transform-origin:left bottom;
    pointer-events:none;
    z-index:0;
}

.apa-section > *{
    position:relative;
    z-index:1;
}

.apa-section-header{
    max-width:860px;
    margin:0 auto 34px;
    text-align:center;
}

.apa-section-eyebrow{
    margin:0 0 12px;
    color: var(--apa-eyebrow-accent);
    font-size:.82rem;
    line-height:1.2;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.apa-section-heading{
    margin:0;
    font-family: var(--wp--preset--font-family--heading, inherit);
    font-size: clamp(2.3rem, 5vw, 4.8rem);
    line-height:.96;
    letter-spacing:-.035em;
    text-wrap: balance;
}

.apa-section-intro{
    max-width:42ch;
    margin:16px auto 0;
    line-height:1.72;
    opacity:.82;
}

.apa-grid{
    display:grid;
    gap:18px;
}

.apa-grid.columns-1{ grid-template-columns:1fr; }
.apa-grid.columns-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.apa-grid.columns-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.apa-grid.columns-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.apa-card{
    position:relative;
    overflow:hidden;
}

.apa-card-link{
    display:block;
    text-decoration:none;
}

.apa-card-media{
    position:relative;
    min-height: 420px;
    background-size:cover;
    background-position:center;
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 12%, transparent);
    border-radius: 10px;
    overflow: hidden;
    transition:
        transform .55s cubic-bezier(.25,.1,.25,1),
        filter .35s ease,
        box-shadow .35s ease;
}

.apa-card-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,
            rgba(9,10,13,.10) 0%,
            rgba(9,10,13,.28) 38%,
            rgba(9,10,13,.78) 100%);
    transition: opacity .35s ease, background .35s ease;
}

.apa-card::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wp--preset--color--base, #fff) 0%, transparent) 0%,
        color-mix(in srgb, var(--wp--preset--color--accent, #4DA3FF) 10%, transparent) 100%
    );
    opacity:0;
    border-radius:10px;
    pointer-events:none;
    transition: opacity .35s ease;
}

.apa-card-content{
    position:absolute;
    inset:auto 0 0 0;
    padding: 24px 22px 22px;
    color: var(--wp--preset--color--base, #fff);
}

.apa-card-head{
    margin-bottom:10px;
}

.apa-card-title{
    margin:0;
    font-family: var(--wp--preset--font-family--heading, inherit);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height:1.02;
    letter-spacing:-.025em;
    color: inherit;
}

.apa-card-title::after{
    content:"";
    display:block;
    width:0;
    height:2px;
    background: currentColor;
    margin-top:12px;
    opacity:.9;
    transition: width .32s ease;
}

.apa-card-hover{
    max-width: 30ch;
}

.apa-card-summary{
    margin:0;
    line-height:1.72;
    opacity:.82;
    transition: opacity .35s ease, transform .35s ease;
}

/* figma-like hover */
.apa-card-link:hover .apa-card-media,
.apa-card-link:focus .apa-card-media{
    transform: translateY(calc(var(--apa-hover-lift) * -1)) scale(1.02);
    filter: saturate(1.04);
}

.apa-card-link:hover .apa-card::after,
.apa-card-link:focus .apa-card::after{
    opacity: var(--apa-hover-overlay-opacity);
}

.apa-card-link:hover .apa-card-overlay,
.apa-card-link:focus .apa-card-overlay{
    background:
        linear-gradient(180deg,
            rgba(9,10,13,.08) 0%,
            rgba(9,10,13,.20) 32%,
            rgba(9,10,13,.86) 100%);
}

.apa-card-link:hover .apa-card-title::after,
.apa-card-link:focus .apa-card-title::after{
    width: var(--apa-title-underline-width);
}

.apa-card-link:hover .apa-card-summary,
.apa-card-link:focus .apa-card-summary{
    opacity:.94;
    transform: translateY(-1px);
}

/* shared motion language */
.apa-figma-motion .apa-section-header,
.apa-figma-motion .apa-card{
    opacity:0;
    transition:
        opacity .9s cubic-bezier(.25,.1,.25,1),
        transform .9s cubic-bezier(.25,.1,.25,1),
        background .35s ease;
}

.apa-figma-motion.motion-rise .apa-section-header,
.apa-figma-motion.motion-rise .apa-card{
    transform: translateY(24px);
}

.apa-figma-motion.motion-zoom .apa-section-header,
.apa-figma-motion.motion-zoom .apa-card{
    transform: translateY(18px) scale(.985);
}

.apa-figma-motion.motion-fade .apa-section-header,
.apa-figma-motion.motion-fade .apa-card{
    transform:none;
}

.apa-figma-motion.is-visible .apa-section-header,
.apa-figma-motion.is-visible .apa-card{
    opacity:1;
    transform: translateY(0) scale(1);
}

.apa-figma-motion.is-visible .apa-section-header{
    transition-delay:.03s;
}

.apa-figma-motion.is-visible .apa-card:nth-of-type(1){ transition-delay: calc(var(--apa-motion-stagger) * 1); }
.apa-figma-motion.is-visible .apa-card:nth-of-type(2){ transition-delay: calc(var(--apa-motion-stagger) * 2); }
.apa-figma-motion.is-visible .apa-card:nth-of-type(3){ transition-delay: calc(var(--apa-motion-stagger) * 3); }
.apa-figma-motion.is-visible .apa-card:nth-of-type(4){ transition-delay: calc(var(--apa-motion-stagger) * 4); }
.apa-figma-motion.is-visible .apa-card:nth-of-type(5){ transition-delay: calc(var(--apa-motion-stagger) * 5); }
.apa-figma-motion.is-visible .apa-card:nth-of-type(6){ transition-delay: calc(var(--apa-motion-stagger) * 6); }

.apa-motion-off .apa-section-header,
.apa-motion-off .apa-card{
    opacity:1 !important;
    transform:none !important;
}

@media (max-width:1024px){
    .apa-grid.columns-3,
    .apa-grid.columns-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:900px){
    .apa-section-header{ margin-bottom:26px; }
    .apa-grid{ gap:14px; }
    .apa-card-media{
        min-height: 360px;
        border-radius: 8px;
    }
    .apa-card::after{
        border-radius: 8px;
    }
}

@media (max-width:640px){
    .apa-section{ padding:56px 24px; }
    .apa-grid.columns-2,
    .apa-grid.columns-3,
    .apa-grid.columns-4{
        grid-template-columns:1fr;
    }
    .apa-card-media{
        min-height: 320px;
    }
}


/* v3.0.1 hover polish */
.apa-card{
    border-radius: 10px;
}

.apa-card-link{
    border-radius: inherit;
}

.apa-card-title::after{
    background: var(--wp--preset--color--accent, #4DA3FF);
}

.apa-card-media{
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
}

.apa-card-overlay{
    border-radius: inherit;
}

.apa-card::after{
    border-radius: inherit;
}

.apa-card-link:hover .apa-card-media,
.apa-card-link:focus .apa-card-media{
    border-radius: 10px;
}

/* description only on hover */
.apa-card-hover{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition:
        max-height .4s cubic-bezier(.25,.1,.25,1),
        opacity .35s ease,
        transform .35s ease;
}

.apa-card-link:hover .apa-card-hover,
.apa-card-link:focus .apa-card-hover{
    max-height: 180px;
    opacity: 1;
    transform: translateY(0);
}

.apa-card-summary{
    opacity: .88;
    transform: none;
}

.apa-card-link:hover .apa-card-summary,
.apa-card-link:focus .apa-card-summary{
    opacity: .94;
    transform: none;
}

@media (max-width: 900px){
    .apa-card,
    .apa-card-link,
    .apa-card-media,
    .apa-card-overlay,
    .apa-card::after{
        border-radius: 8px;
    }
}


/* v3.1.1 rebuilt section container controls */
.apa-section{
    --apa-content-max: 1280px;
    --apa-section-pad: 72px;
    position: relative;
    overflow: hidden;
    padding: var(--apa-section-pad) 0;
}
.apa-section.bg-full-bleed{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
}
.apa-section.bg-contained{
    width: 100%;
    max-width: 100%;
}
.apa-inner{
    width: min(var(--apa-content-max), calc(100vw - 64px));
    max-width: var(--apa-content-max);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}
.apa-section-header,
.apa-grid{
    width: 100%;
}
.apa-section-eyebrow{
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}
.apa-section-eyebrow::before{
    content: "";
    width: 36px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: .95;
    flex: 0 0 auto;
}
@media (max-width: 900px){
    .apa-inner{
        width: min(calc(100vw - 24px), var(--apa-content-max));
    }
}
