/* ===================================================
 * Load More – Dorset Bricks Elements
 *
 * Two modes:
 *  - Content: truncate text to N lines (max-height + gradient fade)
 *  - Items:   hide child elements beyond a count
 *
 * All content stays in the DOM (SEO-safe).
 * Without JS everything is visible and the button is hidden.
 * =================================================== */

.dr-load-more {
    --dr-lm-duration: 300ms;
    --dr-lm-stagger: 50ms;
    --dr-lm-fade-color: #fff;
}

/* ==========================
 * Button visibility
 * ========================== */

/* Hidden by default (noscript: no button, all content visible) */
.dr-load-more__actions {
    display: none;
}

/* CSS-first: show button immediately when clamped (before JS) */
.dr-load-more--clamped .dr-load-more__actions {
    display: flex;
    justify-content: center;
}

/* JS takes over: keep button visible */
.dr-load-more--initialized .dr-load-more__actions {
    display: flex;
    justify-content: center;
}

/* Builder always shows button for styling */
.dr-load-more__actions--builder {
    display: flex;
    justify-content: center;
}

/* Default button reset */
.dr-load-more__btn {
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    line-height: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        opacity 150ms ease;
}

.dr-load-more__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Arrow icon */
.dr-load-more__icon {
    display: block;
    flex-shrink: 0;
    transition: transform var(--dr-lm-duration) ease;
}

/* Rotate arrow when expanded */
.dr-load-more__btn[aria-expanded="true"] .dr-load-more__icon {
    transform: rotate(180deg);
}

/* ==========================
 * Content mode – CSS-first clamped state (prevents flash / CLS)
 *
 * PHP adds --clamped + --mode-content + --dr-lm-lines CSS var.
 * This truncates text BEFORE JS loads.  JS then swaps to exact
 * pixel max-height and removes --clamped.
 * ========================== */

.dr-load-more--clamped.dr-load-more--mode-content .dr-load-more__content {
    position: relative;
    overflow: hidden;
    /* Approximate: 1.65em per line covers most font/line-height combos */
    max-height: calc(var(--dr-lm-lines, 4) * 1.65em);
}

.dr-load-more--clamped.dr-load-more--mode-content .dr-load-more__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, var(--dr-lm-fade-color));
    pointer-events: none;
    z-index: 1;
}

/* ==========================
 * Content mode – JS-driven state (after init)
 * ========================== */

.dr-load-more--content .dr-load-more__content {
    position: relative;
    overflow: hidden;
    transition: max-height var(--dr-lm-duration) ease;
}

/* Gradient fade overlay at the bottom of truncated content */
.dr-load-more--content .dr-load-more__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, var(--dr-lm-fade-color));
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--dr-lm-duration) ease;
    z-index: 1;
}

/* Expanded state – no fade, full height */
.dr-load-more--content.dr-load-more--expanded .dr-load-more__content::after {
    opacity: 0;
}

/* ==========================
 * Items mode
 * ========================== */

.dr-load-more__content > .dr-load-more--hidden {
    display: none !important;
}

/* Reveal animations */
.dr-load-more__content > .dr-load-more--reveal-fade {
    animation: drLmFadeIn var(--dr-lm-duration) ease forwards;
}

.dr-load-more__content > .dr-load-more--reveal-slideUp {
    animation: drLmSlideUp var(--dr-lm-duration) ease forwards;
}

@keyframes drLmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes drLmSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Collapse animations (for "Show Less") */
.dr-load-more__content > .dr-load-more--collapse-fade {
    animation: drLmFadeOut var(--dr-lm-duration) ease forwards;
}

.dr-load-more__content > .dr-load-more--collapse-slideUp {
    animation: drLmSlideDown var(--dr-lm-duration) ease forwards;
}

@keyframes drLmFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes drLmSlideDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}

/* ==========================
 * Reduced motion
 * ========================== */

@media (prefers-reduced-motion: reduce) {
    .dr-load-more--content .dr-load-more__content {
        transition-duration: 1ms !important;
    }

    .dr-load-more--content .dr-load-more__content::after {
        transition-duration: 1ms !important;
    }

    .dr-load-more__content > .dr-load-more--reveal-fade,
    .dr-load-more__content > .dr-load-more--reveal-slideUp,
    .dr-load-more__content > .dr-load-more--collapse-fade,
    .dr-load-more__content > .dr-load-more--collapse-slideUp {
        animation-duration: 1ms !important;
    }
}