/* ============================================================
   difficulty.css — the difficulty badge and its popover, on every layout.
   Markup: Views/Shared/Components/DifficultyBadge and DifficultyPopovers; behaviour: js/difficulty.js
   ============================================================ */

/* ── Badge: a button, above the card's stretched link ── */
.dbadge {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: .4rem;
    font: inherit; color: inherit; text-align: left;
    background: none; border: 0; border-radius: 8px;
    padding: .4rem .3rem; margin: -.4rem -.3rem;
    cursor: pointer;
}
.dbadge--static { cursor: default; }
.dbadge__i { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; }
.dbadge:hover .dbadge__i, .dbadge[aria-expanded="true"] .dbadge__i { opacity: 1; color: var(--et-primary, #22891f); }
.dbadge:focus-visible { outline: 3px solid var(--et-primary, #22891f); outline-offset: 1px; }
.dbadge__sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dbadge--card .dbadge__i { color: #6c757d; }
.dbadge--card:hover .v2-difficulty-label,
.dbadge--card[aria-expanded="true"] .v2-difficulty-label { color: #1a2a1a; }
.dbadge--hero .dbadge__i, .dbadge--hero:hover .dbadge__i, .dbadge--hero[aria-expanded="true"] .dbadge__i { color: inherit; }
.dbadge--short { padding: .1rem .2rem; margin: -.1rem -.2rem; text-transform: inherit; font-weight: inherit; }
.dbadge--short .dbadge__i { width: 13px; height: 13px; }

/* Old layout cards: the badge sits in the photo overlay, below the card's stretched link.
   Lift the overlay over the link and let clicks through everywhere but the badge. */
.card-img-overlay:has(.dbadge) { z-index: 2 !important; pointer-events: none; }
.card-img-overlay:has(.dbadge) a, .card-img-overlay:has(.dbadge) button { pointer-events: auto; }

/* ── Popover ── */
.dpop { display: none; }
.dpop:popover-open {
    display: block;
    position: fixed; inset: 0; margin: auto; height: fit-content;
    width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px);
    border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #1f2937;
    padding: .9rem 1rem 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    font-family: inherit; font-size: .84rem; line-height: 1.45; text-align: left;
    /* Browsers give popovers overflow:auto, and the arrow sticking out would make it scroll.
       difficulty.js switches scrolling back on only for a popover taller than the window. */
    overflow: visible;
}
.dpop::backdrop { background: transparent; }
.dpop__head { display: flex; align-items: center; gap: .5rem; padding-right: 1.8rem; }
.dpop__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dpop__name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; color: #1a2a1a; }
.dpop__step { margin-left: auto; font-size: .7rem; font-weight: 700; color: #374151; background: #f3f4f6; border-radius: 20px; padding: .1rem .5rem; white-space: nowrap; }
.dpop__close {
    position: absolute; top: .55rem; right: .55rem; width: 32px; height: 32px;
    border: 0; background: none; color: #6b7280; font-size: 1.4rem; line-height: 1; border-radius: 8px; cursor: pointer;
}
.dpop__close:hover { background: #f3f4f6; color: #111827; }
.dpop__close:focus-visible { outline: 3px solid var(--et-primary, #22891f); }
.dpop__sum { margin: .4rem 0 .6rem; color: #374151; }
.dpop__this { background: #f0faf0; border: 1px solid #bbf7d0; border-radius: 8px; padding: .45rem .65rem; margin-bottom: .6rem; font-weight: 600; color: #14532d; }
.dpop__this small { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #15803d; }
.dpop__k { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: .3rem; }
.dpop__nums { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .35rem; margin-bottom: .6rem; }
.dpop__num { background: #f9fafb; border: 1px solid #f1f3f5; border-radius: 8px; padding: .35rem .45rem; min-width: 0; }
.dpop__num span { display: block; font-size: .68rem; color: #6b7280; }
.dpop__num b { font-size: .82rem; color: #111827; overflow-wrap: anywhere; }
.dpop__line { margin: 0 0 .3rem; color: #374151; }
.dpop__line b { color: #111827; }
.dpop__more { display: inline-block; margin-top: .45rem; padding: .2rem 0; font-weight: 600; color: var(--et-primary-dark, #0f5e0d); text-decoration: none; }
.dpop__more:hover { text-decoration: underline; color: var(--et-primary-dark, #0f5e0d); }
.dpop__arrow {
    position: absolute; display: none; width: 12px; height: 12px;
    background: #fff; border: 1px solid #e5e7eb; transform: rotate(45deg);
    left: calc(var(--dpop-arrow-x, 50%) - 6px);
}
.dpop[data-side="bottom"] .dpop__arrow { display: block; top: -7px; border-right: 0; border-bottom: 0; }
.dpop[data-side="top"] .dpop__arrow { display: block; bottom: -7px; border-left: 0; border-top: 0; }

/* Phones: a sheet from the bottom, like the filter sheet */
@media (max-width: 575.98px) {
    .dpop:popover-open {
        inset: auto 0 0 0; width: 100%; max-width: none; margin: 0;
        max-height: 85vh; overflow: auto;
        border: 0; border-radius: 18px 18px 0 0;
        padding: 1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
        font-size: .9rem;
    }
    .dpop:popover-open::before { content: ''; display: block; width: 36px; height: 4px; background: #e5e7eb; border-radius: 2px; margin: -.3rem auto .8rem; }
    .dpop::backdrop { background: rgba(0, 0, 0, .45); }
    .dpop__close { top: 1.1rem; }
    .dpop__arrow { display: none !important; }
}