/* Split out of style.css — enqueued only where it is needed.
   Edit here, not in style.css. */

/* ═══════════════════════════════════════════════════════
   PORTFOLIO VIDEO GALLERY
   Mixed-orientation grid: 16:9 tiles span two columns,
   vertical 9:16 tiles (TikTok / Reels / Shorts) span one.
═══════════════════════════════════════════════════════ */
.tpc-video-gallery { margin: 3rem 0; }

.tpc-video-gallery__heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-text);
    margin-bottom: 1.5rem;
}
.tpc-video-gallery__heading i { color: var(--c-primary); }

.tpc-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.tpc-video-card {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tpc-video-card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, .35);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

/* Landscape clips get twice the width of vertical ones. */
.tpc-video-card.is-16-9 { grid-column: span 2; }
@media (max-width: 640px) {
    .tpc-video-card.is-16-9 { grid-column: span 1; }
}

.tpc-video-facade,
.tpc-video-player {
    display: block;
    width: 100%;
    border: 0;
    background: var(--c-surface);
}
.tpc-video-facade { padding: 0; cursor: pointer; position: relative; }

.is-16-9 .tpc-video-facade, .is-16-9 .tpc-video-player { aspect-ratio: 16 / 9; }
.is-9-16 .tpc-video-facade, .is-9-16 .tpc-video-player { aspect-ratio: 9 / 16; }
.is-1-1   .tpc-video-facade, .is-1-1   .tpc-video-player { aspect-ratio: 1 / 1; }
.is-4-5   .tpc-video-facade, .is-4-5   .tpc-video-player { aspect-ratio: 4 / 5; }

.tpc-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease, filter .3s ease;
}
.tpc-video-facade:hover .tpc-video-poster { transform: scale(1.04); filter: brightness(.75); }

.tpc-video-poster--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface));
    font-size: 2.75rem;
    color: rgba(255, 255, 255, .22);
}

.tpc-video-play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, .92);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 8px 26px rgba(59, 130, 246, .5);
    transition: transform .25s ease, background .25s ease;
    pointer-events: none;
}
/* The icon is a triangle, so nudge it to sit optically centred. */
.tpc-video-play i { margin-inline-start: 4px; }
.tpc-video-facade:hover .tpc-video-play {
    transform: translate(-50%, -50%) scale(1.12);
    background: var(--c-primary);
}

.tpc-video-badge {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(3, 7, 18, .78);
    backdrop-filter: blur(6px);
    color: #e2e8f0;
    font-size: .72rem;
    font-weight: 700;
    pointer-events: none;
}

.tpc-video-caption {
    padding: .75rem 1rem 1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--c-text-muted, #94a3b8);
    line-height: 1.5;
}

/* Vertical players need a sensible ceiling on tall desktop screens. */
.tpc-video-card.is-9-16 { max-width: 340px; }

@media print {
    .tpc-video-gallery { display: none; }
}

/* Video count badge on portfolio archive cards */
.tpc-card-video-badge {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(3, 7, 18, .82);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}
.tpc-card-video-badge i { color: var(--c-primary); }



/* ════════════════════
   PORTFOLIO SINGLE — supplementary — moved out of single-tpc_portfolio.php (second inline block).
════════════════════ */
.tech-tooltip { position: relative; cursor: help; }
                    .tech-tooltip::before {
                        content: attr(data-tooltip);
                        position: absolute;
                        bottom: 135%;
                        left: 50%;
                        transform: translateX(-50%) scale(0.85);
                        background: #0f172a;
                        border: 1px solid rgba(255,255,255,0.08);
                        color: #f1f5f9;
                        padding: 0.6rem 0.8rem;
                        border-radius: 8px;
                        font-size: 0.72rem;
                        width: 210px;
                        text-align: center;
                        line-height: 1.45;
                        white-space: normal;
                        pointer-events: none;
                        opacity: 0;
                        z-index: 100;
                        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
                        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
                    }
                    .tech-tooltip:hover::before { opacity: 1; transform: translateX(-50%) scale(1); }
                    .tech-tooltip::after {
                        content: '';
                        position: absolute;
                        bottom: 115%;
                        left: 50%;
                        transform: translateX(-50%);
                        border-width: 6px;
                        border-style: solid;
                        border-color: #0f172a transparent transparent transparent;
                        pointer-events: none;
                        opacity: 0;
                        z-index: 100;
                        transition: all 0.2s ease;
                    }
                    .tech-tooltip:hover::after { opacity: 1; }


/* ════════════════════
   PORTFOLIO SINGLE — moved out of single-tpc_portfolio.php. The project accent
   arrives as --proj-color / --proj-glow, set inline by the template.
════════════════════ */
.tpc-ba-showcase {
                    margin-top: 4rem;
                }
                .tpc-ba-title {
                    color: #fff;
                    font-size: 1.45rem;
                    font-weight: 800;
                    margin-bottom: 2rem;
                    display: flex;
                    align-items: center;
                    gap: 0.6rem;
                }
                .tpc-ba-title i {
                    background: linear-gradient(135deg, var(--proj-color), var(--c-secondary));
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                
                /* Device Mockup Section */
                .tpc-showcase-device-wrapper {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 3rem 0;
                    background: radial-gradient(circle at center, rgba(139,92,246,0.06) 0%, transparent 70%);
                    border-radius: var(--r-xl);
                    border: 1px dashed rgba(255,255,255,0.05);
                    margin-bottom: 3rem;
                    perspective: 1200px;
                }
                
                .tpc-phone-mockup {
                    position: relative;
                    width: 310px;
                    max-width: 100%;
                    height: 620px;
                    border: 12px solid #1e293b;
                    border-radius: 42px;
                    background: #030712;
                    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 
                                0 0 0 1px rgba(255,255,255,0.08), 
                                0 0 40px -10px var(--proj-glow);
                    transform-style: preserve-3d;
                    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
                }
                @media (max-width: 480px) {
                    .tpc-showcase-device-wrapper {
                        padding: 1.5rem 0.5rem;
                    }
                    .tpc-phone-mockup {
                        width: 270px;
                        height: 540px;
                        border-width: 8px;
                        border-radius: 32px;
                    }
                    .tpc-phone-screen {
                        border-radius: 24px !important;
                    }
                }
                .tpc-phone-screen {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    border-radius: 30px;
                    overflow: hidden;
                }
                .tpc-phone-notch {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 110px;
                    height: 24px;
                    background: #1e293b;
                    border-bottom-left-radius: 14px;
                    border-bottom-right-radius: 14px;
                    z-index: 10;
                }
                .tpc-phone-notch::before {
                    content: '';
                    position: absolute;
                    top: 6px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 35px;
                    height: 3px;
                    background: #475569;
                    border-radius: 2px;
                }
                .tpc-phone-home-bar {
                    position: absolute;
                    bottom: 8px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 110px;
                    height: 4px;
                    background: rgba(255,255,255,0.35);
                    border-radius: 2px;
                    z-index: 10;
                    pointer-events: none;
                }
                
                /* Image Comparison Slider */
                .tpc-image-slider {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    user-select: none;
                    touch-action: pan-y;
                }
                .tpc-image-slider img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    pointer-events: none;
                }
                .img-after {
                    z-index: 1;
                }
                .img-before {
                    z-index: 2;
                    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
                }
                
                .slider-handle {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 50%;
                    width: 4px;
                    background: #fff;
                    z-index: 5;
                    cursor: ew-resize;
                    transform: translateX(-50%);
                    box-shadow: 0 0 15px rgba(0,0,0,0.5);
                    touch-action: none;
                }
                .handle-button {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 40px;
                    height: 40px;
                    background: #fff;
                    color: #030712;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
                    font-size: 0.85rem;
                    touch-action: none;
                }
                .slider-badge {
                    position: absolute;
                    top: 35px;
                    padding: 0.25rem 0.6rem;
                    border-radius: var(--r-md);
                    font-size: 0.72rem;
                    font-weight: 700;
                    letter-spacing: 0.02em;
                    text-transform: uppercase;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
                    pointer-events: none;
                }
                .badge-before-label {
                    left: 15px;
                    background: #ef4444;
                    color: #fff;
                    z-index: 3;
                }
                .badge-after-label {
                    right: 15px;
                    bottom: 35px;
                    top: auto;
                    background: #10b981;
                    color: #fff;
                    z-index: 3;
                }
                
                /* .tpc-ba-text-* moved to the core sheet: the client
   portal renders them as well. */

                
                /* Metrics Cards */
                .tpc-metrics-title {
                    font-size: 1.15rem;
                    font-weight: 700;
                    color: #fff;
                    margin-bottom: 1.25rem;
                }
                .tpc-metrics-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                    gap: 1.25rem;
                    margin-bottom: 3.5rem;
                }
                .tpc-metric-card {
                    background: #111827;
                    border: 1px solid rgba(255,255,255,0.05);
                    border-radius: var(--r-lg);
                    padding: 1.25rem;
                    position: relative;
                    overflow: hidden;
                    box-shadow: var(--shadow-card);
                }
                .tpc-metric-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 3px;
                    height: 100%;
                    background: linear-gradient(to bottom, var(--proj-color), var(--c-secondary));
                }
                .metric-card-label {
                    font-size: 0.8rem;
                    font-weight: 600;
                    color: var(--c-text-muted);
                    margin-bottom: 0.75rem;
                    text-transform: uppercase;
                }
                .metric-card-values {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .metric-card-val-before {
                    font-size: 0.95rem;
                    color: #ef4444;
                    font-weight: 700;
                    text-decoration: line-through;
                    opacity: 0.85;
                }
                .metric-card-arrow {
                    color: #10b981;
                    font-size: 1.1rem;
                    animation: pulseUp 2s infinite;
                }
                .metric-card-val-after {
                    font-size: 1.4rem;
                    color: #10b981;
                    font-weight: 800;
                }
                
                @keyframes pulseUp {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-4px); }
                }
                
                /* Transformation Timeline */
                .tpc-timeline-section {
                    margin-top: 4rem;
                    border-top: 1px solid rgba(255,255,255,0.06);
                    padding-top: 3.5rem;
                }
                .tpc-timeline-title {
                    text-align: center;
                    font-size: 1.35rem;
                    font-weight: 800;
                    color: #fff;
                    margin-bottom: 3rem;
                }
                .tpc-timeline {
                    position: relative;
                    max-width: 800px;
                    margin: 0 auto;
                    padding-left: 2rem;
                }
                .tpc-timeline::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 7px;
                    width: 2px;
                    background: rgba(255,255,255,0.08);
                }
                .tpc-timeline-item {
                    position: relative;
                    margin-bottom: 2.5rem;
                    opacity: 0;
                    transform: translateY(20px);
                    transition: all 0.6s ease;
                }
                .tpc-timeline-item.revealed {
                    opacity: 1;
                    transform: translateY(0);
                }
                .tpc-timeline-node {
                    position: absolute;
                    left: -2rem;
                    top: 2px;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: #030712;
                    border: 3px solid rgba(255,255,255,0.2);
                    z-index: 2;
                    transition: border-color 0.4s ease, box-shadow 0.4s ease;
                }
                .tpc-timeline-item.revealed .tpc-timeline-node {
                    border-color: var(--proj-color);
                    box-shadow: 0 0 10px var(--proj-color);
                }
                .tpc-timeline-content {
                    background: rgba(255,255,255,0.01);
                    border: 1px solid rgba(255,255,255,0.03);
                    border-radius: var(--r-md);
                    padding: 1.25rem 1.5rem;
                }
                .tpc-timeline-phase {
                    font-size: 0.72rem;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: var(--proj-color);
                    margin-bottom: 0.25rem;
                }
                .tpc-timeline-item-title {
                    font-size: 1rem;
                    font-weight: 700;
                    color: #fff;
                    margin-bottom: 0.5rem;
                }
                .tpc-timeline-item-desc {
                    font-size: 0.85rem;
                    color: var(--c-text-muted);
                    line-height: 1.6;
                    margin: 0;
                }