/*
 * WPSUBS Downloads — Catalog styles
 *
 * Theming is data-driven via CSS custom properties:
 *   --tkdl-primary       Year bar, CTA background
 *   --tkdl-secondary     Hover accents
 *   --tkdl-card-bg       Card background image (url(...))
 *   --tkdl-text-on-card  Text color on card (default white)
 */

.wpsubs-dl-catalog {
    --tkdl-primary: #c8267a;
    --tkdl-secondary: #7a1846;
    --tkdl-accent: color-mix(in srgb, var(--tkdl-primary) 15%, white);  /* softer derivative */
    --tkdl-card-bg: none;
    --tkdl-text-on-card: #fff;
    --tkdl-card-radius: 10px;
    --tkdl-card-min-height: 160px;
    --tkdl-grid-gap: 20px;

    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
}

.wpsubs-dl-catalog *,
.wpsubs-dl-catalog *::before,
.wpsubs-dl-catalog *::after {
    box-sizing: border-box;
}

/* Theme presets — brand colors + card backgrounds. Inline styles from the
 * shortcode (set via plugin option or shortcode atts) override these. */
.wpsubs-dl-catalog[data-theme="tkh"] {
    --tkdl-primary:   #e5393d;  /* Hématologie — red */
    --tkdl-secondary: #b32327;
    --tkdl-card-bg:   url('../images/bg-tkh.jpg');
}
.wpsubs-dl-catalog[data-theme="tko"] {
    --tkdl-primary:   #0096dc;  /* Oncologie — blue */
    --tkdl-secondary: #006fa3;
    --tkdl-card-bg:   url('../images/bg-tko.jpg');
}
.wpsubs-dl-catalog[data-theme="tkrt"] {
    --tkdl-primary:   #61af34;  /* Radiothérapie — green */
    --tkdl-secondary: #427724;
    --tkdl-card-bg:   url('../images/bg-tkrt.jpg');
}

/* ─── Subscription banner ────────────────────────────── */

.wpsubs-dl-banner {
    margin-bottom: 30px;
    border: 1px solid var(--tkdl-accent);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.wpsubs-dl-banner-header {
    background: var(--tkdl-primary);
    color: #fff;
    padding: 12px 24px;
    text-align: center;
}

.wpsubs-dl-catalog .wpsubs-dl-banner-header h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.wpsubs-dl-banner-body {
    padding: 20px 28px 24px;
    background: var(--tkdl-accent);
}

/* High specificity so themes that set list-style on ul/li can't override */
.wpsubs-dl-catalog ul.wpsubs-dl-banner-bullets {
    margin: 0 0 18px 0;
    padding: 0;
    list-style: none;
}

.wpsubs-dl-catalog ul.wpsubs-dl-banner-bullets li {
    list-style: none;
    list-style-type: none;
    position: relative;
    padding: 4px 0 4px 22px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: inherit;
    background: none;
}

.wpsubs-dl-catalog ul.wpsubs-dl-banner-bullets li::marker {
    content: '';
    display: none;
}

.wpsubs-dl-catalog ul.wpsubs-dl-banner-bullets li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tkdl-primary);
}

.wpsubs-dl-banner-cta-wrap {
    text-align: center;
    margin-top: 12px;
}

/* High specificity so WP themes that style `a` can't override */
.wpsubs-dl-catalog a.wpsubs-dl-banner-cta,
.wpsubs-dl-catalog a.wpsubs-dl-banner-cta:link,
.wpsubs-dl-catalog a.wpsubs-dl-banner-cta:visited {
    display: inline-block;
    padding: 12px 28px;
    background: var(--tkdl-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.18s ease;
}

.wpsubs-dl-catalog a.wpsubs-dl-banner-cta:hover,
.wpsubs-dl-catalog a.wpsubs-dl-banner-cta:focus {
    background: color-mix(in srgb, var(--tkdl-primary) 85%, black);
    color: #fff;
}

/* ─── Toolbar (year filter) ──────────────────────────── */

.wpsubs-dl-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.wpsubs-dl-toolbar select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* ─── Year section ───────────────────────────────────── */

.wpsubs-dl-year-section {
    margin-bottom: 40px;
}

.wpsubs-dl-year-header {
    background: var(--tkdl-accent);
    color: var(--tkdl-primary);
    padding: 12px 24px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* High-specificity selector so WP themes that style h2 can't override the color */
.wpsubs-dl-catalog .wpsubs-dl-year-header h2 {
    margin: 0;
    color: var(--tkdl-primary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ─── Grid ───────────────────────────────────────────── */

.wpsubs-dl-grid {
    display: grid;
    gap: var(--tkdl-grid-gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wpsubs-dl-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpsubs-dl-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpsubs-dl-grid[data-columns="1"] { grid-template-columns: 1fr; }

@media (max-width: 1024px) {
    .wpsubs-dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .wpsubs-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .wpsubs-dl-grid { grid-template-columns: 1fr; }
}

/* ─── Card ───────────────────────────────────────────── */

.wpsubs-dl-card {
    display: flex;
    flex-direction: column;
}

.wpsubs-dl-card-bg {
    position: relative;
    min-height: var(--tkdl-card-min-height);
    background-image: var(--tkdl-card-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--tkdl-secondary);
    border-radius: var(--tkdl-card-radius) var(--tkdl-card-radius) 0 0;
    overflow: hidden;
    color: var(--tkdl-text-on-card);
}

.wpsubs-dl-card-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
    transition: background 0.2s ease;
}

/* Upper card is a <button> when a cover image exists — reset button defaults so
 * it visually matches the non-clickable .wpsubs-dl-card-bg div variant. We use a
 * button (not <a>) so Enfold's lightbox auto-init doesn't bind to image-extension
 * hrefs and trigger a second popup alongside our own. */
.wpsubs-dl-catalog button.wpsubs-dl-card-cover {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    color: #fff;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
    /* background-image + background-color from .wpsubs-dl-card-bg cascade in below */
}

.wpsubs-dl-catalog button.wpsubs-dl-card-cover:hover::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.10) 100%);
}

.wpsubs-dl-catalog button.wpsubs-dl-card-cover:focus {
    outline: 2px solid var(--tkdl-primary);
    outline-offset: 2px;
}

.wpsubs-dl-card-inner {
    position: relative;
    z-index: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: var(--tkdl-card-min-height);
    justify-content: flex-start;
}

/* High-specificity selectors so WP themes that style h3 / p tags can't override */
.wpsubs-dl-catalog .wpsubs-dl-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.wpsubs-dl-catalog .wpsubs-dl-card-volume {
    margin: auto 0 0 0;  /* push to bottom of the bg image */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ─── CTA download button ────────────────────────────── */

.wpsubs-dl-cta-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: var(--tkdl-accent);
    color: var(--tkdl-primary);
    border: none;
    border-radius: 0 0 var(--tkdl-card-radius) var(--tkdl-card-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    text-transform: none;
    font-family: inherit;
}

.wpsubs-dl-cta-download:hover {
    background: var(--tkdl-primary);
    color: #fff;
}

.wpsubs-dl-cta-download:active {
    transform: translateY(1px);
}

.wpsubs-dl-cta-download:disabled {
    opacity: 0.6;
    cursor: wait;
}

.wpsubs-dl-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tkdl-primary) 20%, white);
    flex-shrink: 0;
}

.wpsubs-dl-cta-download:hover .wpsubs-dl-cta-icon {
    background: rgba(255, 255, 255, 0.18);
}

.wpsubs-dl-cta-icon svg {
    display: block;
}

/* ─── Modal ──────────────────────────────────────────── */

.wpsubs-dl-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wpsubs-dl-modal[data-open="1"] {
    display: flex;
}

.wpsubs-dl-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.wpsubs-dl-modal-panel {
    position: relative;
    background: #fff;
    color: #222;
    border-radius: 10px;
    padding: 32px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.wpsubs-dl-modal-panel h2 {
    margin: 0 0 12px 0;
    font-size: 20px;
    color: var(--tkdl-primary);
}

.wpsubs-dl-modal-panel p {
    margin: 0 0 20px 0;
    line-height: 1.5;
    color: #555;
}

.wpsubs-dl-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 4px 8px;
}

.wpsubs-dl-modal-close:hover {
    color: #222;
}

/* High-specificity selectors so WP themes that style `a` can't override the label color */
.wpsubs-dl-modal a.wpsubs-dl-modal-cta,
.wpsubs-dl-modal a.wpsubs-dl-modal-cta:link,
.wpsubs-dl-modal a.wpsubs-dl-modal-cta:visited {
    display: inline-block;
    padding: 12px 28px;
    background: var(--tkdl-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.18s ease;
}

.wpsubs-dl-modal a.wpsubs-dl-modal-cta:hover,
.wpsubs-dl-modal a.wpsubs-dl-modal-cta:focus {
    background: color-mix(in srgb, var(--tkdl-primary) 85%, black);
    color: #fff;
}

/* ─── Cover lightbox fallback (used when Enfold Magnific Popup isn't loaded) ── */

.wpsubs-dl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.wpsubs-dl-lightbox[data-open="1"] {
    opacity: 1;
}

.wpsubs-dl-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    cursor: zoom-out;
}

.wpsubs-dl-lightbox-frame {
    position: relative;
    max-width: min(95vw, 1200px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wpsubs-dl-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    height: auto;
    width: auto;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: block;
}

.wpsubs-dl-lightbox-caption {
    margin-top: 14px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.wpsubs-dl-lightbox-close {
    position: absolute;
    top: -42px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    padding: 4px 12px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.18s ease;
}

.wpsubs-dl-lightbox-close:hover {
    opacity: 1;
}

/* ─── Empty / error ──────────────────────────────────── */

.wpsubs-dl-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-style: italic;
}

.wpsubs-dl-error {
    padding: 12px 16px;
    border-left: 4px solid #dc3232;
    background: #fbeaea;
    margin: 20px 0;
}