/* ==========================================================================
   WCA Story Split Widget — Prefixed Custom CSS
   Prefix: .wca-ss
   ========================================================================== */

.wca-ss {
    position: relative;
    background-color: #111111;
    color: #FDF6E3;
    padding: 7rem 0;
    overflow: hidden;
    font-family: var(--wca-font-body, 'Montserrat', Arial, sans-serif);
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    .wca-ss { padding: 9rem 0; }
}

.wca-ss *,
.wca-ss *::before,
.wca-ss *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Glows */
.wca-ss__glow {
    pointer-events: none;
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    z-index: 0;
}
.wca-ss__glow--tr {
    top: -10rem;
    right: -8rem;
    height: 32.5rem;
    width: 32.5rem;
    background-color: rgba(218, 165, 32, 0.1);
}
.wca-ss__glow--bl {
    bottom: -8rem;
    left: -10rem;
    height: 26.25rem;
    width: 26.25rem;
    background-color: rgba(245, 230, 216, 0.1);
}

.wca-ss__container {
    position: relative;
    z-index: 10;
    margin: 0 auto;
    max-width: 120rem;
    padding: 0 1.5rem;
}

/* Grid */
.wca-ss__grid {
    display: grid;
    gap: 3rem;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .wca-ss__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5rem;
    }
}

/* Image Column */
.wca-ss__img-col {
    display: flex;
    order: 2;
}
@media (min-width: 1024px) {
    .wca-ss__img-col { order: 1; }
}

.wca-ss__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: rgba(17, 17, 17, 0.4);
}
@media (min-width: 1024px) {
    .wca-ss__img-wrap {
        min-height: 40rem;
        aspect-ratio: auto;
    }
    /* Home: the framed-collage art is near-square; the default stretch-height
       makes object-fit:cover crop it top and bottom, leaving the bottom frames
       nearly touching the caption plaque (and shaving the top frames). Match
       the wrap to the image's own ratio so the full collage shows and clear
       space opens between the lowest frames and the caption. */
    .home .wca-ss__img-wrap {
        aspect-ratio: 1336 / 1323;
        min-height: 0;
    }
}

.wca-ss__img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Frame Corners */
.wca-ss__cf-bl,
.wca-ss__cf-br {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(218, 165, 32, 0.4);
    z-index: 10;
}
.wca-ss__cf-bl {
    bottom: 1rem;
    left: 1rem;
    border-top: none;
    border-right: none;
}
.wca-ss__cf-br {
    bottom: 1rem;
    right: 1rem;
    border-top: none;
    border-left: none;
}

/* Caption */
.wca-ss__caption {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background-color: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(218, 165, 32, 0.3);
    padding: 1rem 1.25rem;
    z-index: 20;
}
.wca-ss__caption-tag {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #DAA520;
    margin: 0 !important;
}
.wca-ss__caption-title {
    font-family: var(--wca-font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.25rem;
    color: #FDF6E3;
    margin: 0.25rem 0 0 0 !important;
    font-weight: 400;
}
/* Mobile (stacked layout): the image is short at 4:3 and the overlaid caption
   covers a third of it (obscures the framed-collage art), so let the wrap size
   itself from the flow and place the caption BELOW the image as an attached
   plaque instead of over it. */
@media (max-width: 1023px) {
    .wca-ss__img-wrap {
        aspect-ratio: auto;
    }
    .wca-ss__img {
        position: static;
        width: 100%;
        height: auto;
        display: block;
    }
    .wca-ss__caption {
        position: static;
        margin: 0;
        border-top: 0;
    }
}

/* Text Column */
.wca-ss__text-col {
    order: 1;
    text-align: center;
}
@media (min-width: 1024px) {
    .wca-ss__text-col {
        order: 2;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Subtitle */
.wca-ss__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #DAA520;
    margin: 0;
}
@media (min-width: 1024px) {
    .wca-ss__subtitle { justify-content: flex-start; }
}
.wca-ss__subtitle-line {
    height: 1px;
    width: 2.5rem;
    background-color: rgba(218, 165, 32, 0.5);
}

/* Heading */
.wca-ss__heading {
    margin-top: 1.25rem;
    font-family: var(--wca-font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 2.25rem;
    line-height: 1.05;
    color: #FDF6E3;
    font-weight: 400;
}
@media (min-width: 640px) {
    .wca-ss__heading { font-size: 3rem; }
}
@media (min-width: 1024px) {
    .wca-ss__heading { font-size: 3.5rem; }
}

.wca-ss__heading em {
    font-style: italic;
    background: linear-gradient(to right, #DAA520, #FDF6E3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Divider */
.wca-ss__divider {
    margin: 1.5rem auto 0 auto;
    height: 1px;
    width: 3.5rem;
    background-color: rgba(218, 165, 32, 0.6);
}
@media (min-width: 1024px) {
    .wca-ss__divider { margin: 1.5rem 0 0 0; }
}

/* Description */
.wca-ss__desc {
    margin-top: 1.75rem;
    color: rgba(253, 246, 227, 0.75);
    line-height: 1.7;
    font-size: 16px;
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1024px) {
    .wca-ss__desc { margin-left: 0; margin-right: 0; }
}
.wca-ss__desc p { margin-bottom: 1rem; }
.wca-ss__desc p:last-child { margin-bottom: 0; }

/* Stats */
.wca-ss__stats {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1024px) {
    .wca-ss__stats { margin-left: 0; margin-right: 0; }
}
.wca-ss__stat-item {
    text-align: center;
}
@media (min-width: 1024px) {
    .wca-ss__stat-item { text-align: left; }
}
.wca-ss__stat-val {
    font-family: var(--wca-font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.875rem;
    color: #DAA520;
    line-height: 1;
}
.wca-ss__stat-lbl {
    margin-top: 0.25rem;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(253, 246, 227, 0.6);
}

/* CTA */
.wca-ss__cta {
    margin-top: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgba(253, 246, 227, 0.4);
    padding: 1rem 2.25rem;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FDF6E3;
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
}
.wca-ss__cta:hover {
    border-color: #DAA520;
    color: #DAA520;
}
.wca-ss__cta span {
    transition: transform 0.3s ease;
}
.wca-ss__cta:hover span {
    transform: translateX(4px);
}