/* Appapp YouTube Feed – Frontend Styles (Slider) */

/* ── Section ─────────────────────────────────────────────────────────────── */

.ayt-section {
    /* padding-top:    var(--wp--preset--spacing--10, 48px);
    padding-bottom: var(--wp--preset--spacing--10, 48px); */
}

/* ── Section header ──────────────────────────────────────────────────────── */

.ayt-section-header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    margin-bottom:   20px !important;
}

.ayt-section-title {
    display:         flex !important;
    align-items:     center !important;
    gap:             8px !important;
    font-size:       13px !important;
    font-weight:     700 !important;
    letter-spacing:  0.08em !important;
    text-transform:  uppercase !important;
    line-height:     1 !important;
    color:           var(--wp--preset--color--contrast, #111) !important;
    margin:          0 !important;
}

.ayt-channel-avatar {
    width:         28px !important;
    height:        28px !important;
    border-radius: 50% !important;
    object-fit:    cover !important;
    flex-shrink:   0 !important;
}

.ayt-section-link {
    font-size:     13px !important;
    font-weight:   600 !important;
    color:         var(--wp--preset--color--primary, #1a1a1a) !important;
    text-decoration: unset !important;
    /* border-bottom: 1.5px solid currentColor !important; */
    line-height:   1 !important;
    transition:    opacity 0.2s !important;
    white-space:   nowrap !important;
}

.ayt-section-link:hover { opacity: 0.65 !important; }

/* ── Carousel outer (anchor for arrows) ─────────────────────────────────── */

.ayt-carousel-outer {
    position:   relative !important;
    box-sizing: border-box !important;
}

/* ── Carousel (overflow clip) ────────────────────────────────────────────── */

.ayt-carousel {
    overflow: hidden !important;
    display:  block !important;
    width:    100% !important;
}

/* ── Track ───────────────────────────────────────────────────────────────── */

.ayt-track {
    display:    flex !important;
    flex-wrap:  nowrap !important;
    gap:        16px !important;
    transform:  translateX(0);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    cursor:     grab;
    user-select: none;
}

.ayt-track.is-dragging {
    cursor:     grabbing !important;
    transition: none !important;
}

/* ── Video card ──────────────────────────────────────────────────────────── */

.ayt-video-card {
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
    flex-shrink:    0 !important;
    min-width:      0 !important;
    box-sizing:     border-box !important;
    /* Width set by JS */
}

/* ── Thumbnail wrap ──────────────────────────────────────────────────────── */

.ayt-thumb-wrap {
    display:         block !important;
    position:        relative !important;
    border-radius:   10px !important;
    overflow:        hidden !important;
    flex-shrink:     0 !important;
    text-decoration: none !important;
    background:      #0f0f0f !important;
    /* aspect-ratio set by JS (height) */
}

.ayt-thumb-wrap--empty {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
}

.ayt-thumb-wrap img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.ayt-thumb-wrap:hover img {
    transform: scale(1.04);
    filter:    brightness(0.85);
}

/* Dark overlay on hover */
.ayt-thumb-wrap::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .45);
    opacity:    0;
    transition: opacity .25s ease;
    z-index:    1;
}

.ayt-thumb-wrap:hover::before,
.ayt-thumb-wrap:focus-visible::before { opacity: 1; }

/* YouTube play button overlay */
.ayt-play-btn {
    position:   absolute;
    inset:      0;
    display:    flex !important;
    align-items:     center !important;
    justify-content: center !important;
    opacity:    0;
    transition: opacity .25s ease;
    z-index:    2;
}

.ayt-play-btn svg {
    width:  52px;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

.ayt-thumb-wrap:hover .ayt-play-btn,
.ayt-thumb-wrap:focus-visible .ayt-play-btn { opacity: 1; }

.ayt-thumb-wrap:focus-visible {
    outline:        3px solid #ff0000;
    outline-offset: 2px;
}

/* ── Video meta ──────────────────────────────────────────────────────────── */

.ayt-video-meta {
    display:        flex !important;
    flex-direction: column !important;
    gap:            4px !important;
}

.ayt-video-title {
    font-size:   14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin:      0 !important;
    display:         -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:    hidden !important;
}

.ayt-video-title a {
    color:           inherit !important;
    text-decoration: none !important;
}

.ayt-video-title a:hover {
    color:           #ff0000 !important;
    text-decoration: underline !important;
}

.ayt-video-date {
    font-size:   12px !important;
    line-height: 1.4 !important;
    color:       var(--wp--preset--color--text-mute, #888) !important;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */

.ayt-arrow {
    position:        absolute !important;
    top:             40% !important;       /* vertically centred on thumb */
    transform:       translateY(-50%) !important;
    width:           36px !important;
    height:          36px !important;
    border-radius:   50% !important;
    background:      #fff !important;
    border:          1.5px solid rgba(0,0,0,0.12) !important;
    box-shadow:      0 2px 8px rgba(0,0,0,0.12) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    z-index:         10 !important;
    color:           #222 !important;
    padding:         0 !important;
    transition:      background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.ayt-arrow:hover {
    background:  #f5f5f5 !important;
    box-shadow:  0 4px 12px rgba(0,0,0,0.18) !important;
}

.ayt-arrow.is-hidden {
    opacity:        0 !important;
    pointer-events: none !important;
}

.ayt-arrow--prev { left:  -18px !important; }
.ayt-arrow--next { right: -18px !important; }

@media (max-width: 600px) {
    .ayt-arrow--prev { left:  0 !important; }
    .ayt-arrow--next { right: 0 !important; }
}

/* ── Dots ────────────────────────────────────────────────────────────────── */

.ayt-dots {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    margin-top:      18px !important;
    padding:         0 !important;
    list-style:      none !important;
}

.ayt-dot {
    width:         7px !important;
    height:        7px !important;
    border-radius: 50% !important;
    background:    rgba(0,0,0,0.18) !important;
    border:        none !important;
    padding:       0 !important;
    cursor:        pointer !important;
    transition:    background 0.25s, width 0.25s;
    flex-shrink:   0 !important;
}

.ayt-dot.is-active {
    background:    var(--wp--preset--color--contrast, #111) !important;
    width:         22px !important;
    border-radius: 4px !important;
}

.ayt-dot:hover:not(.is-active) { background: rgba(0,0,0,0.38) !important; }

/* ── Placeholder / error ─────────────────────────────────────────────────── */

.ayt-placeholder {
    padding:       1.5rem;
    background:    #f8f8f8;
    border:        1px dashed #ccc;
    border-radius: 10px;
    color:         #777;
    font-size:     .9rem;
    text-align:    center;
}