/**
 * InsidePiano — On the Media + Bienvenidos pages
 * Zero itemid selectors — works on any deployment without changes.
 *
 * Scoping strategy:
 *   OTM index grid   -> .has-otm-grid  (JS class added to .demo-card when ul.otm-grid is present)
 *                    -> ul.otm-grid     (element-level, already unique)
 *   OTM/Bienvenidos article pages -> .com-content-article.item-page  (Joomla native class)
 *   Bienvenidos index -> .bienvenidos-index  (JS body class)
 *   Breadcrumb hide   -> nav[aria-label*="Bread"] li:has(a[href*="view=category"])
 *   Prev/next nav     -> nav.pagenavigation  (already unique enough in dashboard context)
 */

/* ============================================================
   BREADCRUMB — hide the raw category crumb ("Latest Tacticas")
   ============================================================ */
nav[aria-label*="Bread"] li:has(a[href*="view=category"]) {
    display: none !important;
}

/* ============================================================
   STRIP CONCA WRAPPER — index grid + documentaries page
   ============================================================ */
.demo-card.has-otm-grid,
.demo-card.has-otm-grid .demo-card-body,
.ip-documentaries .page-content {
    margin-bottom: 0 !important;
}

.ip-documentaries .demo-card,
.ip-documentaries .demo-card-body,
.ip-documentaries .demo-card-body.p-6 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ============================================================
   WELCOME VIDEO pages (catid=119) — restore card + padding
   Body gets ip-dashboard-home so RESTORE CARD excludes it;
   ip-welcome-video class added by PHP lets us target it here.
   ============================================================ */
.ip-welcome-video .demo-card:has(.com-content-article.item-page) {
    background: #1F1F21 !important;
    border: 1px solid #2e2e33 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(25,24,34,0.08) !important;
}
.ip-welcome-video .demo-card:has(.com-content-article.item-page) .demo-card-body {
    background: transparent !important;
    padding: 1.25rem 1.5rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
}
.ip-welcome-video .com-content-article.item-page .com-content-article__body {
    padding: 0 !important;
}
.ip-welcome-video .otm-lesson-header {
    margin-bottom: 1rem !important;
}

/* ============================================================
   RESTORE CARD — individual OTM + Bienvenidos article pages
   Exclude dashboard home (.ip-dashboard-home) — its demo-card must stay transparent
   ============================================================ */
body:not(.ip-dashboard-home):not(.ip-documentaries) .demo-card:has(.com-content-article.item-page):not(:has(.sq-report-card)):not(:has(.sq-report-empty-state)):not(:has(.ip-revisiones-page)):not(:has(.ip-gate-card)):not(:has(.modcbsubEncl)) {
    background: #1F1F21 !important;
    border: 1px solid #2e2e33 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(25,24,34,0.08) !important;
}

body:not(.ip-dashboard-home):not(.ip-documentaries):not(.ip-legal-page):not(.ip-otm-lesson):not(.ip-welcome-video) .demo-card:has(.com-content-article.item-page):not(:has(.ip-revisiones-page)):not(:has(.ip-gate-card)):not(:has(.modcbsubEncl)):not(:has(.ip-pricing)):not(:has(#userForm)) .demo-card-body {
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* OTM lesson pages: strip bg/border but keep padding-top for the ip-otm-lesson rule below */
body.ip-otm-lesson .demo-card:has(.com-content-article.item-page) .demo-card-body {
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
}

/* OTM/article lesson pages: equal top/bottom padding */
body.ip-otm-lesson .demo-card:has(.com-content-article.item-page):not(:has(.sq-report-card)):not(:has(.sq-report-empty-state)):not(:has(.ip-revisiones-page)):not(:has(.ip-gate-card)):not(:has(.modcbsubEncl)) .demo-card-body {
    padding-top: 12px !important;
}



/* Restore top padding for individual lesson pages (not grid index, not results pages) */
body:not(.ip-dashboard-home):not(.ip-documentaries):not(.ip-legal-page):not(.ip-otm-lesson):not(.ip-welcome-video) .demo-card:has(.com-content-article.item-page):not(:has(.sq-report-card)):not(:has(.sq-report-empty-state)):not(:has(.ip-revisiones-page)):not(:has(.ip-gate-card)):not(:has(.modcbsubEncl)):not(:has(.ip-pricing)) .demo-card-body {
    padding-top: 1.25rem !important;
}
.demo-card.has-otm-grid .demo-card-body {
    padding-top: 0 !important;
}

/* ============================================================
   PAGE 1 — INDEX GRID (ul.otm-grid)
   ============================================================ */

ul.otm-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.otm-grid li {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 12px 8px 8px !important;
    background: #1F1F21 !important;
    border-radius: 10px !important;
    border: 1px solid #2e2e33 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    margin: 0 !important;
}

ul.otm-grid li:hover {
    border-color: rgba(115, 103, 240, 0.45) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

ul.otm-grid li a {
    display: block !important;
    flex-shrink: 0 !important;
    width: 160px !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #111 !important;
}

ul.otm-grid li a img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

ul.otm-grid li:hover a img {
    transform: scale(1.04) !important;
}

ul.otm-grid li .otm-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

ul.otm-grid li .otm-title {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #c8c8cd !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}

ul.otm-grid li:hover .otm-title {
    color: #e0e0e5 !important;
}

ul.otm-grid li .otm-desc {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #57575a !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

ul.otm-grid li:hover .otm-desc {
    color: #939397 !important;
}

ul.otm-grid li::after {
    content: '\F285' !important; /* bi-chevron-right */
    font-family: 'bootstrap-icons' !important;
    font-size: 1rem !important;
    color: #57575a !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

ul.otm-grid li:hover::after {
    color: #7367f0 !important;
    transform: translateX(2px) !important;
}

@media (max-width: 479px) {
    ul.otm-grid li a {
        width: 120px !important;
    }
    ul.otm-grid li .otm-title {
        font-size: 0.85rem !important;
    }
}

/* Grid index pages — no padding on article body */
.has-otm-grid .com-content-article__body {
    padding: 0 !important;
}

/* ============================================================
   PAGE 2 — INDIVIDUAL ARTICLE PAGES
   ============================================================ */

/* Article body padding — OTM lesson pages only */
.ip-otm-lesson .com-content-article.item-page:not(:has(.sq-report-card)):not(:has(.sq-report-empty-state)) .com-content-article__body {
    padding: 0 !important;
}

/* Article title */
body:not(.ip-dashboard-home) .com-content-article .page-header h1 {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: #e0e0e5 !important;
    margin: 0 0 0.75rem 0 !important;
}

/* Reset inline p margins */
body:not(.ip-dashboard-home):not(.ip-legal-page) .com-content-article.item-page .com-content-article__body p,
body:not(.ip-dashboard-home):not(.ip-legal-page) .com-content-article.item-page .com-content-article__body p[style] {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Kill inline margins from article p tags (not the last/action bar) */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body p[style]:not(:last-child) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Collapse br tags between video and pagination */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body br {
    display: none !important;
}

/* Action bar (PDF + nav row) — flex row, gap from video */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body > p:last-child {
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    padding: 0 0 14px 0 !important;
}

/* Hide Joomla article metadata */
body:not(.ip-dashboard-home) .com-content-article dl.article-info,
body:not(.ip-dashboard-home) .com-content-article .article-info-term,
body:not(.ip-dashboard-home) .com-content-article dd.createdby,
body:not(.ip-dashboard-home) .com-content-article dd.category-name,
body:not(.ip-dashboard-home) .com-content-article dd.published,
body:not(.ip-dashboard-home) .com-content-article dd.hits,
body:not(.ip-dashboard-home) .com-content-article .com-content-article__details {
    display: none !important;
}

/* ── Lesson header: title + back button row (injected by JS) ── */
.otm-lesson-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin-bottom: 12px !important;
    padding: 0 5px !important;
}

.otm-lesson-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #c8c8cd !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.otm-lesson-nav {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    gap: 0.4rem !important;
}

/* Ghost purple back button */
.otm-back-btn {
    background: rgba(115, 103, 240, 0.15) !important;
    color: #7367f0 !important;
    border: 1px solid rgba(115, 103, 240, 0.55) !important;
    border-radius: 8px !important;
    padding: 5px 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    transition: all 0.2s ease !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

.otm-back-btn:hover {
    background: rgba(115, 103, 240, 0.28) !important;
    border-color: rgba(115, 103, 240, 0.7) !important;
    color: #9f92fe !important;
    box-shadow: 0 0 0 1px rgba(115, 103, 240, 0.25) !important;
    text-decoration: none !important;
}

.otm-back-btn i {
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

@media (max-width: 768px) {
    .otm-lesson-header {
        flex-wrap: nowrap !important;
        margin-bottom: 0.75rem !important;
    }
    .otm-lesson-title {
        font-size: 1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .otm-back-btn {
        flex-shrink: 0 !important;
        font-size: 0.8rem !important;
        padding: 4px 0.75rem !important;
    }
}

/* ============================================================
   SHARED BUTTON BASE (article body buttons)
   ============================================================ */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    padding: 7px 16px !important;
    cursor: pointer !important;
    border: 1px solid !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Hide fa-download icon */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a button i.fa-download {
    display: none !important;
}

/* ============================================================
   BACK BUTTON
   ============================================================ */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body p:first-child a button,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a:first-of-type button {
    background: rgba(115, 103, 240, 0.15) !important;
    color: #7367f0 !important;
    border-color: rgba(115, 103, 240, 0.55) !important;
    margin-bottom: 0 !important;
    margin-left: 2px !important;
}

body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body p:first-child a:hover button,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a:first-of-type:hover button {
    background: rgba(115, 103, 240, 0.28) !important;
    color: #9f92fe !important;
    border-color: rgba(115, 103, 240, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(115, 103, 240, 0.25) !important;
}

/* ============================================================
   VIMEO EMBED
   ============================================================ */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body .embera-embed-responsive {
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #000 !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body .embera-embed-responsive iframe {
    display: block !important;
    width: 100% !important;
    border: none !important;
}

/* Fallback: bare iframe */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body iframe[src*="vimeo"] {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border: none !important;
    border-radius: 10px !important;
    margin: 0 0 1.25rem 0 !important;
    background: #000 !important;
}

/* ============================================================
   PDF BUTTON
   ============================================================ */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.jcepopup,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.wfpopup {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    text-decoration: none !important;
}

body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.jcepopup button,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.wfpopup button {
    background: rgba(115, 103, 240, 0.15) !important;
    color: #7367f0 !important;
    border-color: rgba(115, 103, 240, 0.55) !important;
    padding: 7px 16px !important;
}

body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.jcepopup:hover button,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.wfpopup:hover button {
    background: rgba(115, 103, 240, 0.28) !important;
    color: #9f92fe !important;
    border-color: rgba(115, 103, 240, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(115, 103, 240, 0.25) !important;
}

/* Hide JCE external link icon */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body .wf-icon-zoom-link,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.jcepopup + span,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a[data-mediabox] + span {
    display: none !important;
}

/* ============================================================
   BACKING TRACK BUTTON
   ============================================================ */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a[href$=".zip"] button {
    background: rgba(0, 207, 169, 0.15) !important;
    color: #00cfa9 !important;
    border-color: rgba(0, 207, 169, 0.55) !important;
}

body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a[href$=".zip"]:hover button {
    background: rgba(0, 207, 169, 0.28) !important;
    color: #33e0c0 !important;
    border-color: rgba(0, 207, 169, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(0, 207, 169, 0.25) !important;
}

/* Gap between PDF and backing track buttons */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a.jcepopup + a,
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body a[href$=".pdf"] + a {
    margin-left: 8px !important;
}

/* ============================================================
   PREV/NEXT NAV — nav.pagenavigation
   ============================================================ */
nav.pagenavigation {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 1.5rem 0.75rem 1.5rem !important;
    order: 2 !important;
}

nav.pagenavigation .pagination {
    display: flex !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}

/* Nav inside last p (action bar row) */
body:not(.ip-dashboard-home) .com-content-article.item-page .com-content-article__body > p:last-child > nav.pagenavigation {
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

/* Both buttons — hide article title tooltip text, keep labels */
nav.pagenavigation .pagination a.btn {
    font-size: 0 !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 7px 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

nav.pagenavigation .pagination a.btn span[aria-hidden="true"],
nav.pagenavigation .pagination a.btn span[class^="icon-"] {
    font-size: 0.85rem !important;
}
nav.pagenavigation .pagination a.btn span.visually-hidden {
    font-size: 0 !important;
}

/* Anterior — ghost purple */
nav.pagenavigation .pagination a.btn.previous {
    background: rgba(115, 103, 240, 0.15) !important;
    color: #7367f0 !important;
    border: 1px solid rgba(115, 103, 240, 0.55) !important;
    --bs-btn-bg: rgba(115, 103, 240, 0.15) !important;
    --bs-btn-color: #7367f0 !important;
    --bs-btn-border-color: rgba(115, 103, 240, 0.55) !important;
}

nav.pagenavigation .pagination a.btn.previous:hover {
    background: rgba(115, 103, 240, 0.28) !important;
    color: #9f92fe !important;
    border-color: rgba(115, 103, 240, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(115, 103, 240, 0.25) !important;
}

/* Siguiente — ghost teal */
nav.pagenavigation .pagination a.btn.next {
    background: rgba(0, 207, 169, 0.15) !important;
    color: #00cfa9 !important;
    border: 1px solid rgba(0, 207, 169, 0.55) !important;
    --bs-btn-bg: rgba(0, 207, 169, 0.15) !important;
    --bs-btn-color: #00cfa9 !important;
    --bs-btn-border-color: rgba(0, 207, 169, 0.55) !important;
}

nav.pagenavigation .pagination a.btn.next:hover {
    background: rgba(0, 207, 169, 0.28) !important;
    color: #33e0c0 !important;
    border-color: rgba(0, 207, 169, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(0, 207, 169, 0.25) !important;
}