/* Kashiwazaki SEO TubeList Shortcode */

.kstls-tubelist {
    --kstls-cols: 3;
    --kstls-gap: 20px;
    --kstls-radius: 6px;
    --kstls-title-color: #1d2327;
    --kstls-title-lines: 2;
    --kstls-sub-color: #646970;
    --kstls-link-color: inherit;
    --kstls-bg: transparent;
    --kstls-control-bg: #ffffff;
    --kstls-control-color: #1d2327;
    --kstls-control-border: #d0d4d9;
    --kstls-control-active-bg: #1d2327;
    --kstls-control-active-color: #ffffff;
    --kstls-duration-bg: rgba(0, 0, 0, 0.75);
    --kstls-duration-color: #ffffff;
    --kstls-error-bg: #fff7f7;
    --kstls-error-border: #d63638;
    --kstls-scroll-offset: 80px;
    margin: 1.5em 0;
    background: var(--kstls-bg);
}

.kstls-tubelist .kstls-grid {
    display: grid;
    grid-template-columns: repeat(var(--kstls-cols), minmax(0, 1fr));
    gap: var(--kstls-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.kstls-tubelist .kstls-item {
    list-style: none;
    margin: 0;
    padding: 0;
    scroll-margin-top: var(--kstls-scroll-offset);
}

/* NV2: テーマの a 要素のオレンジ・下線を確実に上書き */
.kstls-tubelist a.kstls-link,
.kstls-tubelist a.kstls-link:link,
.kstls-tubelist a.kstls-link:visited,
.kstls-tubelist a.kstls-link:hover,
.kstls-tubelist a.kstls-link:focus,
.kstls-tubelist a.kstls-link:active {
    display: block;
    color: var(--kstls-link-color, inherit);
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-color: transparent;
    border: 0;
    box-shadow: none;
    transition: opacity 0.2s ease;
}

.kstls-tubelist a.kstls-link:hover,
.kstls-tubelist a.kstls-link:focus-visible {
    opacity: 0.85;
    text-decoration: none;
}

.kstls-tubelist .kstls-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--kstls-radius);
    background: #000;
}

.kstls-tubelist .kstls-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.kstls-tubelist .kstls-duration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 6px;
    font-size: 0.8em;
    line-height: 1.2;
    background: var(--kstls-duration-bg);
    color: var(--kstls-duration-color);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

.kstls-tubelist .kstls-meta {
    margin-top: 8px;
}

.kstls-tubelist .kstls-title {
    margin: 0 0 4px 0;
    font-size: 1em;
    line-height: 1.4;
    color: var(--kstls-title-color);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: var(--kstls-title-lines);
    line-clamp: var(--kstls-title-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kstls-tubelist .kstls-sub {
    font-size: 0.85em;
    color: var(--kstls-sub-color);
    line-height: 1.4;
}

.kstls-tubelist .kstls-sub .kstls-date,
.kstls-tubelist .kstls-sub .kstls-views {
    color: inherit;
}

.kstls-tubelist .kstls-sep {
    margin: 0 4px;
}

.kstls-tubelist .kstls-description {
    margin: 8px 0 0 0;
    font-size: 0.85em;
    line-height: 1.6;
    color: var(--kstls-sub-color);
    text-decoration: none;
    word-break: break-word;
}

.kstls-tubelist .kstls-description-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kstls-tubelist .kstls-description-full {
    white-space: normal;
}

/* B4: :has() で excerpt 切替（非対応ブラウザは両方表示。fallback は JS でも処理） */
.kstls-tubelist .kstls-item:has(.kstls-details[open]) .kstls-description-excerpt {
    display: none;
}

.kstls-tubelist .kstls-details {
    margin-top: 8px;
}

.kstls-tubelist .kstls-details-summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    padding: 4px 12px;
    font-size: 0.8em;
    line-height: 1.2;
    color: var(--kstls-sub-color);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    user-select: none;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kstls-tubelist .kstls-details-summary::-webkit-details-marker {
    display: none;
}

.kstls-tubelist .kstls-details-summary::marker {
    content: '';
}

.kstls-tubelist .kstls-details-summary:hover,
.kstls-tubelist .kstls-details-summary:focus-visible {
    background: var(--kstls-sub-color);
    color: #fff;
}

.kstls-tubelist .kstls-details-label-open {
    display: none;
}

.kstls-tubelist .kstls-details[open] .kstls-details-label-closed {
    display: none;
}

.kstls-tubelist .kstls-details[open] .kstls-details-label-open {
    display: inline;
}

/* B8/NV12: レスポンシブ（cols=1 指定はガード） */
@media (max-width: 900px) {
    .kstls-tubelist .kstls-grid {
        grid-template-columns: repeat(min(var(--kstls-cols), 3), minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .kstls-tubelist .kstls-grid {
        grid-template-columns: repeat(min(var(--kstls-cols), 2), minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .kstls-tubelist .kstls-grid {
        grid-template-columns: 1fr;
    }
}

/* === Pagination === */
.kstls-tubelist .kstls-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

.kstls-tubelist .kstls-pagination button {
    cursor: pointer;
    padding: 6px 12px;
    font-size: 0.9em;
    line-height: 1.2;
    background: var(--kstls-control-bg);
    color: var(--kstls-control-color);
    border: 1px solid var(--kstls-control-border);
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kstls-tubelist .kstls-pagination button:hover:not(:disabled),
.kstls-tubelist .kstls-pagination button:focus-visible:not(:disabled) {
    background: #f3f4f5;
    border-color: #9aa1a8;
}

.kstls-tubelist .kstls-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.kstls-tubelist .kstls-pagination .kstls-page-number.is-current {
    background: var(--kstls-control-active-bg);
    color: var(--kstls-control-active-color);
    border-color: var(--kstls-control-active-bg);
}

.kstls-tubelist .kstls-page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kstls-tubelist .kstls-page-numbers li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kstls-tubelist .kstls-page-ellipsis {
    padding: 0 4px;
    color: var(--kstls-sub-color);
    user-select: none;
}

/* === Load more === */
.kstls-tubelist .kstls-loadmore {
    text-align: center;
    margin-top: 24px;
}

.kstls-tubelist .kstls-loadmore:empty {
    margin-top: 0;
}

.kstls-tubelist .kstls-loadmore-button {
    cursor: pointer;
    padding: 10px 24px;
    font-size: 0.95em;
    line-height: 1.2;
    background: var(--kstls-control-active-bg);
    color: var(--kstls-control-active-color);
    border: 0;
    border-radius: 999px;
    transition: opacity 0.15s ease;
}

.kstls-tubelist .kstls-loadmore-button:hover,
.kstls-tubelist .kstls-loadmore-button:focus-visible {
    opacity: 0.85;
}

.kstls-tubelist .kstls-loadmore-count {
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.85;
}

/* === Carousel === */
.kstls-tubelist.kstls-mode-carousel {
    position: relative;
}

.kstls-tubelist.kstls-mode-carousel .kstls-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    outline: none;
}

.kstls-tubelist.kstls-mode-carousel .kstls-carousel-viewport:focus-visible {
    outline: 2px solid var(--kstls-control-active-bg);
    outline-offset: 2px;
}

.kstls-tubelist.kstls-mode-carousel .kstls-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: var(--kstls-gap);
    padding-bottom: 8px;
}

/* B17: max() で最小幅も保証しつつ cols 指定に従う */
.kstls-tubelist.kstls-mode-carousel .kstls-item {
    flex: 0 0 calc((100% - var(--kstls-gap) * (var(--kstls-cols) - 1)) / var(--kstls-cols));
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 640px) {
    .kstls-tubelist.kstls-mode-carousel .kstls-item {
        flex: 0 0 calc((100% - var(--kstls-gap)) / 2);
    }
}

@media (max-width: 420px) {
    .kstls-tubelist.kstls-mode-carousel .kstls-item {
        flex: 0 0 85%;
    }
}

.kstls-tubelist.kstls-mode-carousel .kstls-carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.kstls-tubelist.kstls-mode-carousel .kstls-carousel-controls button {
    cursor: pointer;
    width: 36px;
    height: 36px;
    border: 1px solid var(--kstls-control-border);
    background: var(--kstls-control-bg);
    color: var(--kstls-control-color);
    border-radius: 50%;
    font-size: 1em;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.kstls-tubelist.kstls-mode-carousel .kstls-carousel-controls button:hover:not(:disabled),
.kstls-tubelist.kstls-mode-carousel .kstls-carousel-controls button:focus-visible:not(:disabled) {
    background: #f3f4f5;
    border-color: #9aa1a8;
}

/* NV9: scroll 端のボタンは disabled state で視覚フィードバック */
.kstls-tubelist.kstls-mode-carousel .kstls-carousel-controls button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* === Error === */
.kstls-tubelist + .kstls-error,
.kstls-error {
    padding: 8px 12px;
    border-left: 4px solid var(--kstls-error-border, #d63638);
    background: var(--kstls-error-bg, #fff7f7);
    color: #3c3c3c;
}

/* NV4: prefers-reduced-motion の尊重 */
@media (prefers-reduced-motion: reduce) {
    .kstls-tubelist *,
    .kstls-tubelist *::before,
    .kstls-tubelist *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
    .kstls-tubelist.kstls-mode-carousel .kstls-carousel-viewport {
        scroll-snap-type: none;
    }
}

/* U4: ダークモード自動対応 */
@media (prefers-color-scheme: dark) {
    .kstls-tubelist:not(.kstls-no-dark) {
        --kstls-title-color: #f0f0f1;
        --kstls-sub-color: #b4b8be;
        --kstls-link-color: inherit;
        --kstls-control-bg: #2c3338;
        --kstls-control-color: #f0f0f1;
        --kstls-control-border: #50575e;
        --kstls-control-active-bg: #f0f0f1;
        --kstls-control-active-color: #1d2327;
        --kstls-duration-bg: rgba(0, 0, 0, 0.85);
    }
    .kstls-tubelist:not(.kstls-no-dark) .kstls-pagination button:hover:not(:disabled),
    .kstls-tubelist:not(.kstls-no-dark) .kstls-pagination button:focus-visible:not(:disabled),
    .kstls-tubelist:not(.kstls-no-dark).kstls-mode-carousel .kstls-carousel-controls button:hover:not(:disabled),
    .kstls-tubelist:not(.kstls-no-dark).kstls-mode-carousel .kstls-carousel-controls button:focus-visible:not(:disabled) {
        background: #3c434a;
        border-color: #8c8f94;
    }
}