/**
 * Event hover overlay — pop-out reveal of bigger image + see-also chips.
 * Companion to /js/event_hover_overlay.js. Loaded by:
 *   Templates/timeline/year.php
 *   Templates/timeline/filtered.php
 *
 * Two states for the same element:
 *   .evt-hover-overlay              the hidden source inside each .yr-card
 *                                   (rendered display:none by the partial)
 *   .evt-hover-overlay--floating    the clone we place on document.body
 *                                   when hovering a card. JS sets position +
 *                                   width inline; this stylesheet styles the
 *                                   inside.
 */

.evt-hover-overlay--floating {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    padding: 12px 14px 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    /* Box height cap (separate from the JS-set viewport cap) so popovers
       don't balloon vertically when the image is tall. Width cap is 340px;
       this gives ~55% more for height so portrait covers (PDF, tall ads)
       fit at a useful size without forcing landscape popovers to feel
       under-stuffed. */
    max-height: 520px;
}

.evt-hover-overlay--floating .evt-hover-title {
    font-family: 'EB Garamond', Garamond, Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1.2;
    text-align: center;
    margin-bottom: 18px;
    color: #222;
}

.evt-hover-overlay--floating .evt-hover-img {
    text-align: center;
    background: #fafafa; border-radius: 4px;
    overflow: hidden;
    margin-bottom: 18px;
    position: relative;
}
/* Magnifier icon centered over the image — no button chrome, just the
   SVG. White stroke + drop-shadow so it stays legible on any background. */
.evt-hover-overlay--floating .evt-hover-zoom {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: transparent; border: 0; padding: 0;
    color: #fff;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.12s;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
.evt-hover-overlay--floating .evt-hover-zoom:hover {
    transform: translate(-50%, -50%) scale(1.1);
}
.evt-hover-overlay--floating .evt-hover-zoom-icon {
    width: 48px; height: 48px;
    display: block;
}

/* Open-PDF button (PDF cards only) — sits in the same centered spot as
   the magnifier on event/photo cards. Red CTA with a drop-shadow so it
   stays legible on any cover background. */
.evt-hover-overlay--floating .evt-hover-open-pdf {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-block;
    padding: 10px 18px;
    background: #9C0000; color: #fff !important;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px; font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
    transition: background 0.12s, transform 0.12s;
    white-space: nowrap;
}
.evt-hover-overlay--floating .evt-hover-open-pdf:hover {
    background: #b30000;
    transform: translate(-50%, -50%) scale(1.05);
}

/* Slideshow cards: "Play slideshow" CTA centered on the cover image, same
   visual treatment as the Open-PDF button but with a triangle glyph + an
   optional photo count. Base styles apply regardless of whether the partial
   is rendered inside .evt-hover-overlay--floating (the cloned popover) or
   somewhere else — so on touch devices that don't trigger the hover overlay,
   the button still looks like a real CTA, not a tiny grey default-styled
   <button>. The --floating selector below adds positional overrides only. */
.evt-hover-play-slideshow {
    display: inline-block;
    padding: 10px 18px;
    background: #9C0000; color: #fff;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255,255,255,0.15);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px; font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
    transition: background 0.12s, transform 0.12s;
    white-space: nowrap;
}
.evt-hover-overlay--floating .evt-hover-play-slideshow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 2;
}
.evt-hover-overlay--floating .evt-hover-play-slideshow:hover {
    background: #b30000;
    transform: translate(-50%, -50%) scale(1.05);
}
.evt-hover-play-slideshow:active { background: #b30000; }
.evt-hover-play-count {
    font-weight: 400; font-size: 13px; opacity: 0.85;
}

/* Video cards: thumbnail wrapped in an anchor that opens YouTube in a new
   tab. A 56px play-button circle sits centered on the image (matches the
   in-tile .yr-video-play look), with a small "Watch on YouTube" caption
   right below it. */
.evt-hover-overlay--floating .evt-hover-yt-link {
    display: block; position: relative; line-height: 0;
    text-decoration: none;
}
.evt-hover-overlay--floating .evt-hover-yt-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    background: rgba(0,0,0,0.7); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s;
    pointer-events: none;
}
.evt-hover-overlay--floating .evt-hover-yt-link:hover .evt-hover-yt-play {
    background: #c00; transform: translate(-50%, -50%) scale(1.1);
}
.evt-hover-overlay--floating .evt-hover-yt-play::after {
    content: ''; display: block; width: 0; height: 0;
    border-style: solid; border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff; margin-left: 3px;
}
.evt-hover-overlay--floating .evt-hover-yt-caption {
    /* inline-block so vertical padding actually expands the pill — bare
       inline elements ignore top/bottom padding for box height. */
    display: inline-block;
    position: absolute; top: calc(50% + 44px); left: 50%; transform: translateX(-50%);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px; font-weight: 600;
    line-height: 1.3;
    /* Semi-transparent pill so the caption stays legible against bright
       YouTube thumbnails (sky, white walls, etc.). */
    background: rgba(0,0,0,0.65);
    padding: 5px 12px;
    border-radius: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
    pointer-events: none;
}

/* Admin chrome (edit + tag picker) floats over the image just below the
   center action button. Absolute-positioned → zero impact on popover
   height. Logged-in viewers only; anonymous never sees the markup. White
   text + drop-shadow + semi-transparent pill so it stays legible on any
   background. */
.evt-hover-overlay--floating .evt-hover-admin {
    position: absolute;
    top: calc(50% + 38px); left: 50%; transform: translateX(-50%);
    z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.45);
    border-radius: 14px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.evt-hover-overlay--floating .evt-hover-edit {
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px; font-weight: 600;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.evt-hover-overlay--floating .evt-hover-edit:hover { color: #ffd0d0 !important; }
.evt-hover-overlay--floating .evt-hover-tag-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; line-height: 16px; text-align: center;
    border: 1px solid rgba(255,255,255,0.7); border-radius: 50%;
    color: #fff; font-size: 12px; font-weight: 700;
    cursor: pointer;
    background: transparent;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.evt-hover-overlay--floating .evt-hover-tag-add:hover {
    background: rgba(255,255,255,0.2);
    border-color: #fff;
}

/* On video cards the caption pill sits at +44px (~22px tall), so push the
   admin pill down further so they don't crowd each other. */
.evt-hover-overlay--floating .evt-hover-yt-link ~ .evt-hover-admin {
    top: calc(50% + 80px);
}

/* Inline variant — used on no-image events (people-only). A wrapping row
   centers the pill between title and vignettes. The inner pill needs its
   absolute-positioning stripped since there's no image to overlay. */
.evt-hover-overlay--floating .evt-hover-admin-row {
    display: flex; justify-content: center;
    margin: 0 0 12px;
}
.evt-hover-overlay--floating .evt-hover-admin-row .evt-hover-admin {
    position: static;
    top: auto; left: auto; transform: none;
}

/* Fullscreen image lightbox lives in /css/image_lightbox.css — loaded
   by every template that loads this file. */
.evt-hover-overlay--floating .evt-hover-img img {
    display: inline-block;
    /* Portrait covers (PDFs, tall ads) bind on height; landscape photos
       bind on the .evt-hover-img wrapper's width. 320px cap leaves room
       inside the 520px box for title (~48) + image margins (~36) + 2-3
       chip rows (~80) + padding (~26) ≈ 510 < 520. */
    max-width: 100%; max-height: 320px;
    width: auto; height: auto;
    vertical-align: top;
}

/* People vignettes (no-image fallback) — mirrors year-page .yr-card-people:
   round photo when a person has a primary photo; a name-pill otherwise.
   Bigger than the in-card vignettes since the popover has more room.
   Extra vertical padding so vignette-only popovers don't look wide-and-thin. */
.evt-hover-overlay--floating .evt-hover-vignettes {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-bottom: 12px;
    padding: 18px 0;
}
.evt-hover-overlay--floating .evt-hover-vignettes a {
    display: inline-block; text-decoration: none; line-height: 0;
}
.evt-hover-overlay--floating .evt-hover-vignette-thumb {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background: #fafafa;
    border: 2px solid #eee;
    transition: border-color 0.15s, transform 0.15s;
}
.evt-hover-overlay--floating .evt-hover-vignettes a:hover .evt-hover-vignette-thumb {
    border-color: #9C0000; transform: scale(1.06);
}
.evt-hover-overlay--floating .evt-hover-vignette-chip {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px; font-weight: 600;
    color: #555; line-height: 1.3;
    background: #fafafa;
    transition: all 0.15s;
}
.evt-hover-overlay--floating .evt-hover-vignettes a:hover .evt-hover-vignette-chip {
    border-color: #9C0000; color: #9C0000;
}

/* Centered wrapping row. Each {label + its chips} is an inline-flex group
   that doesn't break internally — so "Companies:" is never on its own line
   while its chips are on another. Groups wrap to a new line as a whole unit. */
.evt-hover-overlay--floating .evt-hover-chips-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; align-items: baseline;
    /* Image already has 18px margin-bottom; no extra padding-top needed. */
}
.evt-hover-overlay--floating .evt-hover-group {
    display: inline-flex; flex-wrap: wrap; gap: 5px;
    align-items: baseline;
}
/* Label + first chip wrapped together so the label is never orphaned from
   its group when the row wraps. Subsequent chips can wrap freely. */
.evt-hover-overlay--floating .evt-hover-label-first {
    display: inline-flex; flex-wrap: nowrap; gap: 5px;
    align-items: baseline;
}
.evt-hover-overlay--floating .evt-hover-label {
    font-size: 13px; color: #777; font-style: italic;
    flex: 0 0 auto;
}
.evt-hover-overlay--floating .evt-hover-chip {
    display: inline-block;
    padding: 4px 12px; border-radius: 13px;
    font-size: 12px; font-weight: 600;
    color: #fff !important; text-decoration: none;
    background: #888; border: 1px solid transparent;
    transition: background 0.12s, transform 0.12s;
}
.evt-hover-overlay--floating .evt-hover-chip:hover { background: #555; transform: translateY(-1px); }

/* On narrow screens, just tighten the popover padding — keep title size,
   vignette size, image cap, and chip size the same as desktop. The popover
   width itself is already responsive (JS sets width = min(MAX_WIDTH, vw-24)
   so it can't overflow the viewport). */
@media (max-width: 480px) {
    .evt-hover-overlay--floating { padding: 10px 12px; }
}

/* ── Click-modal variant (filtered domain pages; /js/card_modal.js) ──
   The modal reuses the popover's internal layout (.evt-hover-overlay--floating)
   but overrides positioning to be fixed-center, and adds a backdrop +
   close button + prev/next side arrows. Year pages and /pdfs/ keep the
   hover model and never load card_modal.js. */
.evt-hover-overlay--floating.evt-hover-overlay--modal {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 100002;
    /* Modal is ~30% larger than the hover popover (340/520 → 440/675) since
       it's the user's focus rather than a glance affordance. min() with
       viewport math keeps it shrinking on phone-width screens. */
    width: min(440px, calc(100vw - 24px));
    max-height: min(675px, 92vh);
}
/* Image cap also scales up so portrait covers (PDFs, tall ads) take
   advantage of the bigger box. Only applied in modal mode — hover popover
   keeps its 320px cap. */
.evt-hover-overlay--floating.evt-hover-overlay--modal .evt-hover-img img {
    max-height: 415px;
}
.evt-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100001;
    cursor: zoom-out;
}
/* × Close — child of the modal so it tracks its position automatically.
   Sits in the modal's top-right corner; subtle grey on the white card
   that turns red on hover. */
.evt-hover-overlay--modal .evt-modal-close {
    position: absolute; top: 4px; right: 6px;
    width: 26px; height: 26px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #888; font-size: 22px; font-weight: 400;
    line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.evt-hover-overlay--modal .evt-modal-close:hover {
    background: rgba(156, 0, 0, 0.08);
    color: #9C0000;
}

/* Admin row in modal mode: move out of the over-image floating pill into
   a proper footer below the chips. The wider modal has room for it; the
   floating-pill design was a compromise for the smaller hover popover. */
.evt-hover-overlay--modal .evt-hover-admin {
    position: static;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid #eee;
    display: flex; justify-content: center; align-items: center; gap: 14px;
}
.evt-hover-overlay--modal .evt-hover-edit {
    /* !important needed to defeat the floating-mode rule's !important on
       white-with-shadow (designed for the over-image admin pill). */
    color: #888 !important;
    text-shadow: none;
}
.evt-hover-overlay--modal .evt-hover-edit:hover { color: #9C0000 !important; }
.evt-hover-overlay--modal .evt-hover-tag-add {
    background: #fff;
    border-color: #bbb;
    border-style: dashed;
    color: #999;
    text-shadow: none;
}
.evt-hover-overlay--modal .evt-hover-tag-add:hover {
    background: #fff;
    border-color: #9C0000;
    border-style: solid;
    color: #9C0000;
}
/* Video-mode bumped the floating admin pill's top offset to clear the
   "Watch on YouTube" caption — irrelevant in modal mode where it's a
   static footer. Reset to neutralize the override. */
.evt-hover-overlay--modal .evt-hover-yt-link ~ .evt-hover-admin { top: auto; }

/* Video play-in-modal: iframe wrapper with 16:9 intrinsic ratio so it
   scales nicely with the modal's fixed 340px width. */
.evt-hover-overlay--modal .evt-modal-yt-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}
.evt-hover-overlay--modal .evt-modal-yt-embed iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}
.evt-modal-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    color: #fff; font-size: 36px; font-weight: 400;
    line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0 4px 0; /* nudge ‹ › glyphs to optical center */
    transition: background 0.12s, transform 0.12s, opacity 0.12s;
    z-index: 100003;
}
.evt-modal-nav:hover { background: rgba(0,0,0,0.7); transform: translateY(-50%) scale(1.08); }
.evt-modal-nav--disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
/* Arrows hug the modal's edges instead of the viewport's edges so they're
   visually tied to the content. Modal is 440px wide centered, so modal
   half-width = 220px. Arrows = 56px wide with a ~14px gap, so each one
   sits 290px from viewport center. Clamped at 8px so they don't run off
   the viewport on narrow screens where the modal nearly fills the width
   (in that case they overlay the modal edges instead, matching the phone
   reference behavior). */
.evt-modal-nav-prev { left:  max(8px, calc(50% - 290px)); }
.evt-modal-nav-next { right: max(8px, calc(50% - 290px)); }
/* Smaller, edge-tucked arrows for true phone widths. */
@media (max-width: 520px) {
    .evt-modal-nav { width: 44px; height: 44px; font-size: 28px; }
    .evt-modal-nav-prev { left:  4px; }
    .evt-modal-nav-next { right: 4px; }
}