/* ─────────────────────────────────────────────────
   LearnDash Course Card – Frontend styles
───────────────────────────────────────────────── */

.ldc-card {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    max-width: 440px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    /* The overlay type on the image scales with the card, not the viewport —
       see .ldc-card__title. Safe here because the card's own width never
       depends on its contents (width: 100%, max-width: 440px). */
    container-type: inline-size;
    /* The two properties the hover moves — see the Hover block further down. */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ldc-card *,
.ldc-card *::before,
.ldc-card *::after {
    box-sizing: border-box;
}

/* ── Image area ──
   Deliberately square (1:1) at every width: the card's artwork is the course
   collage, and the title/subtitle are drawn over its bottom edge, so the frame
   must not change shape between desktop and phone. */
.ldc-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    background: #e2e8f0;
    overflow: visible;
    /* The card is a column flex container, so this is a flex item: without these
       two its automatic minimum size would be computed from the artwork and a
       portrait photo would stretch the frame taller than the square. */
    flex: 0 0 auto;
    min-height: 0;
}

/* Taken out of the flow on purpose: an in-flow image contributes its own
   proportion to the wrapper's content height and defeats the 1:1 ratio above. */
.ldc-card__image,
.ldc-card__image--placeholder {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.ldc-card__image {
    object-fit: cover !important;
    display: block;
}

.ldc-card__image--placeholder {
    background: linear-gradient(135deg, #a8d8d8 0%, #4a9aba 100%);
}

/* ── Title overlay on the image ──
   A gradient veil rising from the bottom edge of the square, with the course
   title and (optionally) a per-card second line on top of it. The box always
   covers the lower ~62% of the image so the ramp lands in the same place on
   every card, and grows taller than that if a long title needs the room. */
.ldc-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 62%;
    /* Never taller than the image: a very long title in a very narrow card
       would otherwise push the veil out over whatever sits above the card. */
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    /* Right padding clears the play button, which overlaps the bottom-right
       corner of the image (bottom: -18px; right: 16px; 42px wide). */
    padding: 18px 64px 18px 20px;
    /* Half the opacity this veil started at: enough to carry white type, light
       enough to leave the artwork readable underneath. The stops keep their
       positions, so the ramp still begins around 45% of the box's height. */
    background: linear-gradient(
        to top,
        rgba(26, 19, 16, 0.46) 0%,
        rgba(26, 19, 16, 0.42) 20%,
        rgba(26, 19, 16, 0.31) 45%,
        rgba(26, 19, 16, 0.14) 72%,
        rgba(26, 19, 16, 0) 100%
    );
    border-bottom-left-radius: 0;
    z-index: 2;
    /* The veil reaches well up the artwork — don't let it swallow clicks meant
       for the image or the badges underneath it. The title link opts back in. */
    pointer-events: none;
}

.ldc-card__overlay a {
    pointer-events: auto;
}

.ldc-card .ldc-card__overlay .ldc-card__subtitle {
    font-size: 13px;
    font-size: clamp(11px, 4.4cqw, 13px);
    font-weight: 400;
    line-height: 1.45;
    /* One line of room is held even when the card has no second line at all, so
       the title sits the same distance above the bottom edge on every card and a
       row of them reads level. 1.45em is exactly one line box at the line-height
       above, and follows the fluid font-size. A second line typed long enough to
       wrap does push that card's title up — the reserved space is one line. */
    min-height: 1.45em;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
    padding: 0;
    white-space: pre-line;
    overflow-wrap: break-word;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ── Badge (Enrolled / ribbon / price) ── */
.ldc-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ldc-badge--enrolled {
    background: #d8a252;
    color: #ffffff;
}

.ldc-badge--price {
    background: #d8a252; /* Warm gold/amber matching LearnDash — also used for the ribbon-text badge */
    color: #ffffff;
}

.ldc-badge--bestseller {
    left: 12px;
    right: auto;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff2c4 0%, #f6c94b 45%, #d99a12 100%);
    color: #5a3600;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 2px 4px rgba(154, 100, 0, 0.35),
        0 4px 10px rgba(154, 100, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    position: absolute;
    overflow: hidden;
    z-index: 2;
}

.ldc-badge--bestseller::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, 0.55);
    transform: rotate(20deg);
    pointer-events: none;
}

.ldc-badge--bestseller svg {
    fill: #7a4a00;
    flex-shrink: 0;
}

/* ── "New" badge (course published within the last two months) ── */
.ldc-badge--new {
    position: absolute;
    left: 12px;
    right: auto;
    top: 12px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5fd39a 0%, #23a06a 55%, #167f54 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 2px 4px rgba(11, 84, 55, 0.3),
        0 4px 10px rgba(11, 84, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    z-index: 2;
}

/* Both badges sit in the top-left corner, so on a card that is new *and*
   bestselling the "New" pill drops below the ribbon instead of under it. It is
   rendered immediately after the bestseller badge for exactly this rule; the
   offset is the ribbon's own height (11px x 1.4 line + 12px padding + border)
   plus a small gap. */
.ldc-badge--bestseller + .ldc-badge--new {
    top: 48px;
}

/* ── Play / arrow button ── */
.ldc-card__play-btn {
    position: absolute;
    bottom: -18px;
    right: 16px;
    width: 42px;
    height: 42px;
    background: #ff8038;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(255, 128, 56, 0.35);
    z-index: 3;
    transition: background 0.2s, transform 0.2s;
}

.ldc-card__play-btn:hover {
    background: #f06a1e;
    transform: scale(1.08);
    color: #ffffff !important;
}

.ldc-card__play-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}

/* ── Body ── */
.ldc-card__body {
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto; /* fills remaining height so the button below can be pinned to the bottom */
}

/* ── Meta row (author + lessons) ── */
.ldc-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ldc-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ldc-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ldc-card__author-info {
    display: flex;
    flex-direction: column;
}

.ldc-card__author-name {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.3;
}

.ldc-card__duration {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 2px;
}

.ldc-card__lessons {
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
}

/* ── Title ──
   Lives inside .ldc-card__overlay (on the image), not in the card body. The
   serif matches the site's heading font so a card reads as part of the page.
   Selectors are deliberately three classes deep: themes style headings through
   descendant selectors like ".entry-content h3", which would otherwise win on
   specificity over a single class and resize the title. */
.ldc-card .ldc-card__overlay .ldc-card__title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    /* Fluid on the card's own width, not the viewport's: the same card is 440px
       wide on its own and half that in a four-column grid, and a fixed 30px
       would break long words apart in the narrow case. Browsers without
       container queries keep the 30px above. */
    font-size: clamp(19px, 8.4cqw, 30px);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1.18;
    letter-spacing: 0;
    /* Break inside a word only when it genuinely cannot fit. */
    overflow-wrap: break-word;
    word-break: normal;
    /* Carries the type over the lighter veil: with half the darkening the title
       can land on a bright patch of artwork, and the shadow is what keeps its
       edges readable there. */
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.6);
}

.ldc-card__title a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* No underline on hover either. The title is a link, but it is set in white
   serif over the artwork, where a browser underline reads as raw hypertext —
   and a title that wraps gets one under every line. The answer to the pointer
   is the whole card lifting instead; see the Hover block below. Kept !important
   for other themes: Astra already sets none on a:hover, not every theme does. */
.ldc-card__title a:hover,
.ldc-card__title a:focus-visible {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ── Hover: the card lifts, the type is left alone ──
   Pointing anywhere at the card — the title included — raises it 6px, deepens the
   shadow, warms the artwork and lights the round arrow with the same paint a direct
   hover on it gives. The movement is what answers the pointer, so the title itself
   is never restyled: that is the whole point of the change.

   Keyed to .ldc-card:hover rather than to the title link, for two reasons. A card
   that moved only under the title would slide out from beneath a pointer resting
   near the link's bottom edge, drop back, and flicker in a loop. And plain :hover
   needs no :has(), so every browser gets an answer and the underline can simply
   go — nothing has to hand it back.

   What the hover paints is set up here; the states themselves are in the
   (hover: hover) block below. */
.ldc-card__image {
    transition: filter 0.25s ease;
}

/* The veil deepens through a second gradient of its own, faded in by opacity: a
   transition between two linear-gradients is not interpolated everywhere and
   would snap instead of easing. z-index: -1 keeps this layer above the veil's
   own background and below the title and second line — .ldc-card__overlay has
   position plus z-index: 2, so it is a stacking context and holds it in.
   The alphas are picked so the composite lands about 0.08 above the base at
   every stop (0.46 -> 0.54 at the bottom edge): exactly what the brightened
   artwork takes away from the white type, not a return to the heavy veil that
   this one replaced. */
.ldc-card__overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: linear-gradient(
        to top,
        rgba(26, 19, 16, 0.15) 0%,
        rgba(26, 19, 16, 0.14) 20%,
        rgba(26, 19, 16, 0.10) 45%,
        rgba(26, 19, 16, 0.05) 72%,
        rgba(26, 19, 16, 0) 100%
    );
}

/* Behind (hover: hover) so a tap on a phone does not leave a card lifted for the
   rest of the page's life: touch browsers keep :hover on the last thing tapped. */
@media (hover: hover) {
    .ldc-card:hover {
        transform: translateY(-6px);
        /* Reads as the card coming off the page: the resting shadow is
           0 4px 16px at 0.08, so both the throw and the darkness grow. */
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    }

    .ldc-card:hover .ldc-card__image {
        filter: brightness(1.05) saturate(1.08);
    }

    .ldc-card:hover .ldc-card__overlay::before {
        opacity: 1;
    }

    /* Exactly the paint a direct hover on the arrow gives (its own rule further
       up), so pointing anywhere at the card lights the way in. */
    .ldc-card:hover .ldc-card__play-btn {
        background: #f06a1e;
        transform: scale(1.08);
        color: #ffffff !important;
    }
}

/* Keyboard: the lift is pointer-only on purpose — a ring says "you are here" more
   plainly than a 6px shift, and it needs no :has(). Orange on the title, which is
   white type over artwork where an orange ring reads at any brightness; white on
   the arrow, which is orange itself. */
.ldc-card__title a:focus-visible {
    outline: 2px solid #ff8038;
    outline-offset: 3px;
}

.ldc-card__play-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ── Excerpt ── */
.ldc-card__excerpt {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}

/* ── Bottom group (progress bar + button) — always pinned to the card's bottom edge,
      so progress bars and buttons line up across a row of cards with different-length descriptions ── */
.ldc-card__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Progress ── */
.ldc-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ldc-progress__bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.ldc-progress__fill {
    height: 100%;
    background: #3a9ec9;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ldc-progress__label {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ldc-progress__pct {
    font-weight: 700;
    color: #3a9ec9;
}

/* ── Buttons ── */
.ldc-btn,
a.ldc-btn,
a.ldc-btn:visited {
    display: block;
    width: 100%;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: opacity 0.2s, background-color 0.2s;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ldc-btn:hover,
a.ldc-btn:hover {
    opacity: 0.92;
    color: #ffffff !important;
}

.ldc-btn--enroll,
.ldc-btn--continue {
    background: #0f3859;
    color: #ffffff !important;
}

/* ── Price line — shown above the full-width button when a price is set ── */
.ldc-card__price-line {
    display: block;
    text-align: right;
    font-size: 18px;
    font-weight: 700;
    color: #d8a252;
}

/* ── Discounted price — original struck through, sale price beside it ── */
.ldc-card__price-line--sale {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ldc-card__price-regular {
    text-decoration: line-through;
    /* Themes (and WooCommerce itself) sometimes style <del> with their own
       colour/opacity — pin both so the original price stays legibly muted
       next to the sale price instead of vanishing into the background. */
    text-decoration-color: currentColor;
    color: #8a8f98;
    font-size: 15px;
    font-weight: 500;
    opacity: 1;
}

.ldc-card__price-sale {
    text-decoration: none; /* <ins> is underlined by default */
    color: #c0392b;
    font-weight: 700;
}

/* Visually hidden — labels the two numbers for screen readers only.
   Defined here rather than relying on the theme providing .screen-reader-text,
   since this block ships as a standalone plugin. */
.ldc-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ── */
@media (max-width: 520px) {
    /* Only the fallback differs from the base rule: where container queries are
       supported the size already follows the card's width. */
    .ldc-card .ldc-card__overlay .ldc-card__title { font-size: 25px; font-size: clamp(19px, 8.4cqw, 30px); }
    .ldc-card .ldc-card__overlay .ldc-card__subtitle { font-size: 12.5px; font-size: clamp(11px, 4.4cqw, 13px); }
    .ldc-card__overlay  { padding: 16px 60px 16px 16px; }
    .ldc-card__body     { padding: 22px 16px 16px; }
    /* Re-asserted here in case a theme's own mobile-specific responsive-image
       CSS (e.g. a global "img { height: auto }" reset) applies at this
       breakpoint specifically and would otherwise squash the image's aspect
       ratio on phones while the desktop view stays correct. The card is square
       on every device — see the note on .ldc-card__image-wrap above. */
    .ldc-card__image-wrap { aspect-ratio: 1 / 1 !important; }
    .ldc-card__image      { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

/* The Elementor editor's own boxes ("select a course", "preview didn't load",
   Retry) used to live here. They moved to elementor/preview.css, which Elementor
   loads inside the editor's preview iframe only — see the header of that file. */