/**
 * Related Posts — front-end styles
 *
 * Layout strategy:
 *   1. Default: 4 cards in ONE horizontal row (1×4).
 *   2. As viewport narrows: thumbnails AND titles shrink fluidly — DO NOT break.
 *   3. At ≤ 786px the layout collapses to 2×2.
 *   4. Below 380px the 2×2 cells tighten further but stay 2×2.
 *
 * Aspect-ratio adaptation (for wide horizontal images & embedded video thumbs):
 *   - The thumbnail SLOT has a fixed aspect ratio.
 *   - Source images that are wider than the slot (16:9 photos, YouTube/Vimeo
 *     embed thumbnails) are scaled UP and center-cropped via object-fit: cover
 *     plus an upper-biased object-position so faces/subjects survive the crop.
 *   - Square-ish images already fill cleanly with `cover` and need nothing more.
 *   - The default slot shape is 5:4 — wide enough that 16:9 sources lose
 *     minimal horizontal content, still tall enough that square sources don't
 *     get awkwardly cropped top/bottom.
 *
 * All variables are exposed on .amcry-rp so child themes can override them.
 */

.amcry-rp,
.amcry-rp *,
.amcry-rp *::before,
.amcry-rp *::after {
    box-sizing: border-box;
}

.amcry-rp {
    /* Theming variables — override in a child theme if needed. */
    --amcry-rp-gap: clamp(10px, 1.6vw, 22px);
    --amcry-rp-radius: 10px;
    --amcry-rp-title-size: clamp(13px, 1.05vw, 16px);
    --amcry-rp-title-color: inherit;
    --amcry-rp-title-color-hover: var(--accent, #1a73e8);
    --amcry-rp-heading-size: clamp(18px, 1.6vw, 24px);

    /* Slot shape: 5:4 is a balanced default — accommodates 16:9 sources
       well (small horizontal crop) AND square-ish sources (small vertical crop). */
    --amcry-rp-thumb-aspect: 5 / 4;

    /* Crop bias: put the focal point a little above center so YouTube/Vimeo
       play-button overlays and human faces stay in frame after cropping. */
    --amcry-rp-thumb-focus: center 38%;

    --amcry-rp-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06);
    --amcry-rp-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12);
    --amcry-rp-placeholder-bg: linear-gradient(135deg, #e8eef7 0%, #d6e0ef 100%);
    --amcry-rp-placeholder-fg: #6b7a90;

    margin: 2.5em 0 1.5em;
    padding: 0;
    clear: both;
}

.amcry-rp__heading {
    font-size: var(--amcry-rp-heading-size);
    line-height: 1.2;
    margin: 0 0 0 0;
    padding: 0 0 0.5em;
    border-bottom: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Grid: 4 columns by default, equal width, fluid gap. */
.amcry-rp__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--amcry-rp-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* If fewer than 4 posts are returned, don't stretch them awkwardly. */
.amcry-rp--count-1 .amcry-rp__grid { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.amcry-rp--count-2 .amcry-rp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amcry-rp--count-3 .amcry-rp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.amcry-rp__item {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.amcry-rp__link {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    text-decoration: none !important;
    color: inherit;
    border-radius: var(--amcry-rp-radius);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
}

.amcry-rp__link:hover,
.amcry-rp__link:focus-visible {
    transform: translateY(-2px);
}

.amcry-rp__link:focus-visible {
    outline: 2px solid var(--amcry-rp-title-color-hover);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------- *
 * Thumbnail slot — aspect-ratio adaptation
 *
 * Defensive strategy:
 *   • The slot is a fixed-aspect box (5:4 default).
 *   • EVERY descendant of the slot (any tag) is forced to position:absolute
 *     and stretched to 100% × 100%, EXCEPT elements with .amcry-rp__overlay
 *     (the play-button on video thumbnails). This neutralizes:
 *       - WordPress oEmbed responsive wrappers (padding-top: 56.25%)
 *       - Theme injected inline width/height attributes
 *       - GeneratePress's .wp-post-image rules
 *       - Block Editor wp-block-image aspect-ratio styles
 *       - Any nested wrapper of any tag name
 *   • For <img>: object-fit: cover scales up and crops to fill.
 *   • For video posts we render a static thumbnail + play-button overlay
 *     instead of a live iframe, so play state and hover state are entirely
 *     under our control (no YouTube UI bleeding through).
 * ---------------------------------------------------------------- */

.amcry-rp__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: var(--amcry-rp-thumb-aspect);
    overflow: hidden;
    border-radius: var(--amcry-rp-radius);
    background: #f3f4f6;
    box-shadow: var(--amcry-rp-shadow);
    transition: box-shadow 0.25s ease;
    min-height: 1px; /* fallback for browsers without aspect-ratio support */
}

.amcry-rp__link:hover .amcry-rp__thumb,
.amcry-rp__link:focus-visible .amcry-rp__thumb {
    box-shadow: var(--amcry-rp-shadow-hover);
}

/*
 * Universal flatten: every descendant (any tag, any depth) gets stretched
 * to fill the slot. The :not(.amcry-rp__overlay) exempts our overlay span;
 * a separate "unset" rule below restores natural sizing for SVG inside it.
 */
.amcry-rp__thumb *:not(.amcry-rp__overlay) {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    aspect-ratio: auto !important; /* kill wp-block-image aspect-ratio overrides */
}

/*
 * Restore natural sizing for everything inside the overlay (the SVG and
 * its children). This rule wins because it's later in the stylesheet
 * and uses the same specificity (one class + one tag selector pattern).
 */
.amcry-rp__overlay,
.amcry-rp__overlay svg,
.amcry-rp__overlay circle,
.amcry-rp__overlay path,
.amcry-rp__overlay g {
    position: revert !important;
    inset: revert !important;
    top: revert !important;
    left: revert !important;
    right: revert !important;
    bottom: revert !important;
    width: revert !important;
    height: revert !important;
    max-width: revert !important;
    max-height: revert !important;
    margin: revert !important;
    padding: revert !important;
}

/* The actual <img> — fills slot, crops via cover. */
.amcry-rp__thumb img {
    display: block !important;
    object-fit: cover !important;
    object-position: var(--amcry-rp-thumb-focus);
    transition: transform 0.6s ease;
    /* Belt-and-suspenders: ensure the image scales beyond its natural size if needed. */
    min-width: 100% !important;
    min-height: 100% !important;
}

/*
 * Hover zoom on the image only — overlay stays put.
 * Note: scale(1.04) is layered on top of object-fit:cover.
 */
.amcry-rp__link:hover .amcry-rp__thumb img,
.amcry-rp__link:focus-visible .amcry-rp__thumb img {
    transform: scale(1.04);
}

/*
 * Iframe safety net — if for any reason a live iframe still gets rendered
 * (shouldn't happen anymore — videos are converted to static thumbnails),
 * hide it. The poster image will be shown by the markup we control.
 */
.amcry-rp__thumb iframe {
    display: none !important;
}

/* Placeholder when no thumbnail exists. */
.amcry-rp__img--placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--amcry-rp-placeholder-bg) !important;
    color: var(--amcry-rp-placeholder-fg) !important;
    font-size: clamp(28px, 4vw, 48px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    object-fit: unset !important;
}

/* Crop-bias modifiers (applied via PHP for video sources). */
.amcry-rp__img--video {
    object-position: center 50% !important;
}
.amcry-rp__img--portrait {
    object-position: center 30% !important;
}

/* ---------------------------------------------------------------- *
 * Play-button overlay (video thumbnails)
 *
 * Sibling element to the <img> inside .amcry-rp__thumb. Exempt from the
 * universal flatten rule so it sizes naturally.
 *
 *   Idle state: ~22% the slot's height, semi-transparent dark red, soft.
 *   Hover state: shrinks slightly to ~18% with stronger color — a clean
 *     "click me" affordance, not the giant red YouTube control overlay.
 *
 * The button is purely decorative (aria-hidden); the parent <a> is what
 * actually receives clicks, so play behavior is unchanged.
 * ---------------------------------------------------------------- */
.amcry-rp__overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* clicks pass through to the parent <a> */
    z-index: 2;
}

.amcry-rp__playbtn {
    width: 22%;
    aspect-ratio: 1 / 1;
    color: rgba(220, 30, 30, 0.92);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    transition: width 0.25s ease, color 0.25s ease, filter 0.25s ease, transform 0.25s ease;
    /* Floor the size so on tiny phones it stays visible/tappable-looking. */
    min-width: 36px;
    /* Cap the size on very large desktop slots so it doesn't dominate. */
    max-width: 64px;
}

.amcry-rp__playbtn svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hover: button shrinks slightly, color firms up. */
.amcry-rp__link:hover .amcry-rp__playbtn,
.amcry-rp__link:focus-visible .amcry-rp__playbtn {
    width: 18%;
    color: rgba(220, 30, 30, 1);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}

/* Subtle dark scrim on video thumbs to make the play button pop, even on
   light/washed-out video poster frames. */
.amcry-rp__img--video {
    filter: brightness(0.92);
    transition: filter 0.25s ease, transform 0.6s ease !important;
}
.amcry-rp__link:hover .amcry-rp__img--video,
.amcry-rp__link:focus-visible .amcry-rp__img--video {
    filter: brightness(0.85);
}

.amcry-rp__title {
    display: block;
    text-align: center;
    font-size: var(--amcry-rp-title-size);
    line-height: 1.35;
    color: var(--amcry-rp-title-color);
    font-weight: 700;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    hyphens: auto;
}

.amcry-rp__link:hover .amcry-rp__title,
.amcry-rp__link:focus-visible .amcry-rp__title {
    color: var(--amcry-rp-title-color-hover);
}

/* ---------------------------------------------------------------- *
 * Multiple Post Names rotator support
 *
 * When the "Multiple Post Names" plugin is active, the title text is
 * wrapped in <span class="mpn-title-rotator">. We let that span
 * inherit the card's typography and give its 3D/slide/zoom transitions
 * room to animate without being clipped by the 2-line clamp box.
 * ---------------------------------------------------------------- */
.amcry-rp__title .mpn-title-rotator {
    display: inline-block;
    max-width: 100%;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    /* Keep transform-based effects (flip/zoom/slide) from being cropped. */
    transform-origin: center;
    will-change: opacity, transform, filter;
}

/* ---------------------------------------------------------------- *
 * Responsive behavior
 *
 * The fluid clamp() values above already shrink thumbs + titles
 * smoothly between ~1200px and ~787px without breaking the row.
 * Below 786px we collapse to a 2×2 grid as specified.
 * ---------------------------------------------------------------- */

/* Tablet-ish: row is still 1×4 but everything at its smallest fluid size. */
@media (max-width: 900px) {
    .amcry-rp {
        --amcry-rp-gap: 12px;
        --amcry-rp-title-size: 13px;
    }
}

/* Hard break to 2×2 when viewport is genuinely narrow. */
@media (max-width: 786px) {
    .amcry-rp__grid,
    .amcry-rp--count-3 .amcry-rp__grid,
    .amcry-rp--count-2 .amcry-rp__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .amcry-rp--count-1 .amcry-rp__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .amcry-rp {
        --amcry-rp-gap: 14px;
        --amcry-rp-title-size: 14px;
        /* On 2×2 phones, slightly taller slot reads better next to title. */
        --amcry-rp-thumb-aspect: 5 / 4;
    }
    .amcry-rp__heading {
        font-size: 18px;
    }
}

/* Tighten further on small phones. */
@media (max-width: 380px) {
    .amcry-rp {
        --amcry-rp-gap: 10px;
        --amcry-rp-title-size: 12.5px;
    }
}

/* Reduced-motion preference — kill transforms/transitions. */
@media (prefers-reduced-motion: reduce) {
    .amcry-rp__link,
    .amcry-rp__img,
    .amcry-rp__thumb,
    .amcry-rp__title {
        transition: none !important;
    }
    .amcry-rp__link:hover {
        transform: none;
    }
    .amcry-rp__link:hover .amcry-rp__img {
        transform: none;
    }
}

/* Dark-mode friendliness — only when the theme opts into dark color-scheme. */
@media (prefers-color-scheme: dark) {
    .amcry-rp {
        --amcry-rp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5);
        --amcry-rp-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.65);
        --amcry-rp-placeholder-bg: linear-gradient(135deg, #2a3344 0%, #1f2532 100%);
        --amcry-rp-placeholder-fg: #aab4c4;
    }
}

/* ---------------------------------------------------------------- *
 * Theme integrations
 * ---------------------------------------------------------------- */

/* GeneratePress: align spacing with .inside-article container. */
.generate-columns-container .amcry-rp,
.inside-article .amcry-rp {
    margin-top: 2.5em;
}

/* BuddyPress: scale down inside activity feeds. */
#buddypress .amcry-rp {
    --amcry-rp-heading-size: 16px;
    --amcry-rp-title-size: 12.5px;
    margin: 1.5em 0;
}