/* ================================================================
   Sustain-X Transformations Widget — transformations.css
   BEM prefix: .sxtf-
   ================================================================ */

/* ── Design tokens ──────────────────────────────────────────────── */
.sxtf-wrapper {
    --sxtf-cyan:         #0891b2;
    --sxtf-cyan-light:   #22d3ee;
    --sxtf-blue-deep:    #2a6f97;
    --sxtf-navy:         #0f172a;
    --sxtf-slate:        #64748b;
    --sxtf-slate-light:  #94a3b8;
    --sxtf-white:        #ffffff;
    --sxtf-heading:      #0f172a;
    --sxtf-card-bg:      #ffffff;
    --sxtf-card-border:  rgba(0,0,0,0.07);
    --sxtf-cols:         2;
    --sxtf-gap:          28px;
    --sxtf-radius:       20px;

    font-family: 'Outfit', sans-serif;
    width: 100%;
}

/* ── Wrapper modifiers ──────────────────────────────────────────── */
.sxtf-wrapper--dark {
    --sxtf-card-bg:     #0f172a;
    --sxtf-card-border: rgba(255,255,255,0.07);
    --sxtf-heading:     #f1f5f9;
    --sxtf-slate:       #94a3b8;
}

/* ── Section header ─────────────────────────────────────────────── */
.sxtf-header {
    margin-bottom: 48px;
}

.sxtf-section-heading {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--sxtf-heading);
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.sxtf-section-sub {
    font-size: 1rem;
    color: var(--sxtf-slate);
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto;
}

/* ── Grid layout ────────────────────────────────────────────────── */
.sxtf-grid {
    display: grid;
    grid-template-columns: repeat(var(--sxtf-cols, 2), 1fr);
    gap: var(--sxtf-gap, 28px);
    align-items: start;
}

/* Column shortcuts */
.sxtf-grid--1col { --sxtf-cols: 1; }
.sxtf-grid--2col { --sxtf-cols: 2; }
.sxtf-grid--3col { --sxtf-cols: 3; }

/* ── Carousel layout ────────────────────────────────────────────── */
.sxtf-carousel-wrap {
    position: relative;
}

.sxtf-grid--carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: var(--sxtf-gap, 28px);
    padding-bottom: 4px;
    align-items: start;
    /* Hide scrollbar cross-browser */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sxtf-grid--carousel::-webkit-scrollbar { display: none; }

.sxtf-grid--carousel .sxtf-card {
    flex: 0 0 calc(100% / var(--sxtf-cols, 1.1));
    min-width: 280px;
    max-width: 520px;
    scroll-snap-align: start;
}

/* Carousel navigation buttons */
.sxtf-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--sxtf-white);
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    color: var(--sxtf-navy);
}

.sxtf-carousel-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.sxtf-carousel-btn--prev { left: -22px; }
.sxtf-carousel-btn--next { right: -22px; }

.sxtf-carousel-btn:hover {
    background: var(--sxtf-cyan);
    color: var(--sxtf-white);
    box-shadow: 0 6px 24px rgba(8,145,178,0.28);
    transform: translateY(-50%) scale(1.08);
}

.sxtf-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.sxtf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--sxtf-slate-light);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}

.sxtf-dot--active,
.sxtf-dot:hover {
    background: var(--sxtf-cyan);
    transform: scale(1.35);
}

/* ── Card base ──────────────────────────────────────────────────── */
.sxtf-card {
    background: var(--sxtf-card-bg);
    border: 1px solid var(--sxtf-card-border);
    border-radius: var(--sxtf-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

/* Dark skin */
.sxtf-card--dark {
    background: var(--sxtf-navy);
    border-color: rgba(255,255,255,0.07);
}

/* ── Shadow depths ──────────────────────────────────────────────── */
.sxtf-shadow--none .sxtf-card    { box-shadow: none; }
.sxtf-shadow--subtle .sxtf-card  { box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); }
.sxtf-shadow--dramatic .sxtf-card{ box-shadow: 0 16px 56px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.1); }

/* ── Hover effects ──────────────────────────────────────────────── */
.sxtf-wrapper--hover-lift .sxtf-card:hover {
    transform: translateY(-6px);
}

.sxtf-wrapper--hover-glow .sxtf-card:hover {
    box-shadow: 0 12px 36px rgba(8,145,178,0.22), 0 4px 16px rgba(0,0,0,0.06);
}

/* Combined lift + glow */
.sxtf-wrapper--hover-lift.sxtf-wrapper--hover-glow .sxtf-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(8,145,178,0.24), 0 6px 20px rgba(0,0,0,0.08);
}

/* Dark card hover: subtle cyan border glow */
.sxtf-wrapper--hover-glow .sxtf-card--dark:hover {
    border-color: rgba(8,145,178,0.45);
    box-shadow: 0 0 0 1px rgba(8,145,178,0.35), 0 16px 40px rgba(8,145,178,0.18);
}

/* ── Image wrapper ──────────────────────────────────────────────── */
.sxtf-img-wrap {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

/* Aspect ratio variants */
.sxtf-img-wrap--auto     .sxtf-img { height: auto; }
.sxtf-img-wrap--square   .sxtf-img { aspect-ratio: 1/1;   object-fit: cover; height: unset; }
.sxtf-img-wrap--portrait .sxtf-img { aspect-ratio: 4/5;   object-fit: cover; height: unset; }
.sxtf-img-wrap--landscape.sxtf-img { aspect-ratio: 16/9;  object-fit: cover; height: unset; }

.sxtf-img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.sxtf-wrapper--hover-lift .sxtf-card:hover .sxtf-img,
.sxtf-wrapper--hover-glow .sxtf-card:hover .sxtf-img {
    transform: scale(1.03);
}

/* ── Duration badge ─────────────────────────────────────────────── */
.sxtf-duration-badge {
    position: absolute;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* Positioning modifiers */
.sxtf-duration-badge--top-right    { top: 12px;    right: 12px; }
.sxtf-duration-badge--top-left     { top: 12px;    left: 12px;  }
.sxtf-duration-badge--bottom-right { bottom: 12px; right: 12px; }
.sxtf-duration-badge--bottom-left  { bottom: 12px; left: 12px;  }

/* Style variants */
.sxtf-duration-badge--gradient {
    background: linear-gradient(135deg, var(--sxtf-cyan) 0%, var(--sxtf-blue-deep) 100%);
    color: var(--sxtf-white);
}
.sxtf-duration-badge--dark {
    background: rgba(15,23,42,0.82);
    color: var(--sxtf-white);
    backdrop-filter: blur(4px);
}

/* ── Stat strip ─────────────────────────────────────────────────── */
.sxtf-stat-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 20px;
    background: linear-gradient(90deg, var(--sxtf-cyan) 0%, var(--sxtf-blue-deep) 100%);
    color: var(--sxtf-white);
    text-align: center;
}

.sxtf-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.sxtf-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
}

/* ── Card body ──────────────────────────────────────────────────── */
.sxtf-card-body {
    padding: 20px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sxtf-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sxtf-heading);
    line-height: 1.3;
    margin: 0;
}

.sxtf-card--dark .sxtf-card-title {
    color: #f1f5f9;
}

.sxtf-card-desc {
    font-size: 0.85rem;
    color: var(--sxtf-slate);
    line-height: 1.65;
    margin: 0;
}

.sxtf-card--dark .sxtf-card-desc {
    color: var(--sxtf-slate-light);
}

/* ── Scroll animations ──────────────────────────────────────────── */
@keyframes sxtf-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

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

@keyframes sxtf-slide-left {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes sxtf-slide-right {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* Cards with animation data-attributes start invisible */
.sxtf-card[data-sxtf-anim] {
    opacity: 0;
}

/* Visible state after IntersectionObserver fires */
.sxtf-card--visible[data-sxtf-anim="fade-up"] {
    animation: sxtf-fade-up forwards;
}

.sxtf-card--visible[data-sxtf-anim="stagger"] {
    animation: sxtf-fade-up forwards;
}

.sxtf-card--visible[data-sxtf-anim="slide-sides"]:nth-child(odd) {
    animation: sxtf-slide-left forwards;
}

.sxtf-card--visible[data-sxtf-anim="slide-sides"]:nth-child(even) {
    animation: sxtf-slide-right forwards;
}

/* Duration and delay set via JS inline style */

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .sxtf-grid--3col { --sxtf-cols: 2; }
}

@media (max-width: 600px) {
    .sxtf-grid {
        --sxtf-cols: 1 !important;
    }

    .sxtf-grid--carousel .sxtf-card {
        min-width: 88vw;
        max-width: 88vw;
    }

    .sxtf-carousel-btn--prev { left: 0; }
    .sxtf-carousel-btn--next { right: 0; }

    .sxtf-header {
        margin-bottom: 32px;
    }

    .sxtf-section-heading {
        font-size: 1.5rem;
    }
}

/* ── RTL ────────────────────────────────────────────────────────── */
[dir="rtl"] .sxtf-duration-badge--top-right    { right: auto; left: 12px; }
[dir="rtl"] .sxtf-duration-badge--top-left     { left: auto;  right: 12px; }
[dir="rtl"] .sxtf-duration-badge--bottom-right { right: auto; left: 12px; }
[dir="rtl"] .sxtf-duration-badge--bottom-left  { left: auto;  right: 12px; }
[dir="rtl"] .sxtf-carousel-btn--prev { left: auto;  right: -22px; }
[dir="rtl"] .sxtf-carousel-btn--next { right: auto; left: -22px;  }