/* ============================================
   CARD PANEL DETAILED — Katalog template styles
   Overlay with title visible, details expand on hover.
   Scopé via .katalog-theme-panel_detailed pour éviter les conflits multi-instances.
   ============================================ */

/* Grid layout for the course list */
.katalog-theme-panel_detailed .block_katalog-courseslist .courses-list,
.katalog-theme-panel_detailed .block_katalog-courseslist.coursebox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

/* Ensure grid items fill the cell */
.katalog-theme-panel_detailed .block_katalog-courseslist .courses-list>div {
    width: 100%;
}

/* Course card base */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox {
    background-color: #fff;
    width: 100%;
    border: none;
    border-radius: 8px;
    position: relative;
}

.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox.panel {
    border-radius: 8px;
    border: 0;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

/* Panel body & image */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .panel-body {
    padding: 0;
    text-align: left;
    height: 250px;
    position: relative;
}

.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .panel-body a {
    color: inherit;
    text-decoration: none;
}

.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .courseimage {
    height: 250px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Panel info: overlay at the bottom, shows title only */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .katalog-panel-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px 16px;
    box-sizing: border-box;
    z-index: 12;
    overflow-y: hidden;
    border-radius: 0 0 8px 8px;
    min-height: 70px;
    max-height: 70px;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        overflow-y 0s 0.45s;
}

/* Title inside panel info */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .katalog-panel-info h6 {
    color: #1a1a2e;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .katalog-panel-info h6 a {
    color: inherit;
    text-decoration: none;
}

/* Category label */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .katalog-panel-info .katalog-category {
    color: #F59C00;
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0;
}

/* Details wrapper: hidden at rest, expands on hover */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .katalog-details-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease;
}

/* Course details content */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox .katalog-details-wrapper .course-details {
    font-size: 13px;
    color: #555;
}

/* Hover: expand details wrapper */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox:hover .katalog-details-wrapper {
    max-height: 300px;
    opacity: 1;
    overflow: visible;
    margin-top: 1rem;
}

/* Hover: expand panel-info within card bounds */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox:hover .katalog-panel-info {
    max-height: 250px;
    overflow-y: auto;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        overflow-y 0s 0s;
}

/* Hover: subtle shadow lift */
.katalog-theme-panel_detailed .block_katalog-courseslist .coursebox:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}