/**
 * Grid Card Layout Presets.
 *
 * Four layout presets applied via modifier classes on `.wcpc-card`.
 * Each grid widget emits `wcpc-card--{preset}` on its article wrapper;
 * the CSS here reshapes the card without requiring the PHP renderer
 * to branch.
 *
 * Presets
 *   vertical   — default. Image top, body below (the classic card).
 *   horizontal — image on one side, body on the other. Image side is
 *                controlled via `.wcpc-card--image-left`/`--image-right`.
 *   minimal    — no image slot; body only. Useful for dense lists.
 *   hero       — big image fills the card with title/meta overlaid.
 *
 * All rules are scoped to `.wcpc-card` so they won't leak into other
 * Elementor content. No hardcoded colors — everything inherits from the
 * theme / Elementor kit / the plugin's design tokens.
 *
 * @package WCPC_Sermons
 * @since   1.41.0
 */

.wcpc-card {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

/* The card acts as its own stacking context so hover transforms and
   overlays don't escape it. */
.wcpc-card {
    isolation: isolate;
}

/* --- Vertical (default) ------------------------------------------------- */

.wcpc-card--vertical {
    flex-direction: column;
}

.wcpc-card--vertical > .wcpc-card__media {
    width: 100%;
}

/* --- Horizontal (image beside content) --------------------------------- */

.wcpc-card--horizontal {
    flex-direction: row;
    align-items: stretch;
}

.wcpc-card--horizontal > .wcpc-card__media {
    flex: 0 0 40%;
    align-self: stretch;
}

.wcpc-card--horizontal > .wcpc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wcpc-card--horizontal > .wcpc-card__body {
    flex: 1 1 0;
    min-width: 0;
}

/* Image placement: right puts the media after the body in visual order. */
.wcpc-card--image-right {
    flex-direction: row-reverse;
}

/* On narrow screens horizontal cards collapse to vertical so they stay
   legible. */
@media (max-width: 640px) {
    .wcpc-card--horizontal,
    .wcpc-card--image-right {
        flex-direction: column;
    }
    .wcpc-card--horizontal > .wcpc-card__media {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* --- Minimal (no image) ------------------------------------------------ */

.wcpc-card--minimal > .wcpc-card__media {
    display: none !important;
}

.wcpc-card--minimal {
    background: transparent;
}

/* --- Hero (image background + overlaid text) -------------------------- */

.wcpc-card--hero {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}

.wcpc-card--hero > .wcpc-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wcpc-card--hero > .wcpc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wcpc-card--hero > .wcpc-card__body {
    position: relative;
    z-index: 1;
    margin-top: auto;          /* pin body to the bottom */
    color: #ffffff;
    padding: 24px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0)   100%
    );
}

.wcpc-card--hero .wcpc-card__title,
.wcpc-card--hero .wcpc-card__title a,
.wcpc-card--hero .wcpc-card__eyebrow,
.wcpc-card--hero .wcpc-card__meta {
    color: inherit;
}

.wcpc-card--hero .wcpc-card__eyebrow {
    opacity: 0.85;
}

/* --- Media aspect ratio + zoom hover ----------------------------------- */

.wcpc-card__media {
    overflow: hidden;
}

.wcpc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover zoom — applied only when the `--zoom` modifier is present. */
.wcpc-card--zoom .wcpc-card__media img {
    transition: transform 0.35s ease;
}

.wcpc-card--zoom:hover .wcpc-card__media img {
    transform: scale(1.04);
}

/* --- Body layout -------------------------------------------------------- */

.wcpc-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    min-width: 0;               /* prevents long titles from forcing overflow */
}

.wcpc-card--hero > .wcpc-card__body {
    gap: 4px;
}

/* Give pills and meta rows a default inline layout. */
.wcpc-card__pills,
.wcpc-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.wcpc-card__meta {
    font-size: 0.875em;
    opacity: 0.85;
}

.wcpc-card__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75em;
    opacity: 0.75;
}

.wcpc-card__title {
    margin: 0;
    line-height: 1.25;
}

.wcpc-card__title a {
    color: inherit;
    text-decoration: none;
}

.wcpc-card__excerpt {
    margin: 0;
    line-height: 1.55;
}

/* --- Per-field envelope (1.42.0) -------------------------------------- */

/*
 * Each field in the Card Fields repeater renders into a consistent
 * `.wcpc-card__field` wrapper. Inside sits an optional icon, an
 * optional label prefix, and the value. All three are inline-flexed so
 * fields stay on one row internally — they only break to a new "row"
 * when their .wcpc-card__field wrapper is a direct child of the body
 * (the default) versus being grouped in a .wcpc-card__row--inline.
 */

.wcpc-card__field {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.wcpc-card__field-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;          /* prevents icon font descenders throwing off baseline */
    flex-shrink: 0;
}

.wcpc-card__field-icon svg,
.wcpc-card__field-icon i {
    width: 1em;
    height: 1em;
    font-size: 1em;
}

.wcpc-card__field-label {
    font-weight: 600;
    opacity: 0.75;
    flex-shrink: 0;
}

.wcpc-card__field-value {
    min-width: 0;
}

/* Inline row grouping — two or more fields on the same line with a
 * separator between. Generated when repeater rows toggle "Inline with
 * previous." */

.wcpc-card__row--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
}

.wcpc-card__row--inline .wcpc-card__field {
    display: inline-flex;
}

.wcpc-card__row-sep {
    opacity: 0.45;
    user-select: none;
    padding: 0 2px;
}

/* When a field is marked inline but NOT inside a row container (edge
 * case: first field can't be inline), flatten the field's own display. */

.wcpc-card__field--inline {
    display: inline-flex;
}

/* --- Filter bar orientation (1.42.3) ---------------------------------- */

/*
 * Pure class-based layout. PHP always renders one of two modifier
 * classes on the wrapper:
 *
 *   .wcpc-sg-filters--row      — filters flow side-by-side, wrap on
 *                                 narrow viewports.
 *   .wcpc-sg-filters--stacked  — each filter on its own row,
 *                                 full-width selects.
 *
 * Both flex-direction AND display:flex are set here so we don't depend
 * on inline styles or Elementor-emitted rules — those were getting
 * stomped on by other CSS in the wild. The base `.wcpc-sg-filters`
 * class establishes the flex container; the modifier class picks the
 * direction.
 */

.wcpc-sg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    /* Belt-and-suspenders default direction in case the modifier
     * class is somehow stripped. */
    flex-direction: row;
}

.wcpc-sg-filters--row {
    flex-direction: row;
}

.wcpc-sg-filters--stacked {
    flex-direction: column;
}

/*
 * 1.42.5 — horizontal filters fill the available row equally.
 *
 * `flex: 1 1 0` makes each filter take an equal share of the row
 * width regardless of its content width. `min-width: 180px` is a
 * floor so the dropdowns can't squeeze below readable size — when
 * the viewport is too narrow to fit all filters at 180px each,
 * `flex-wrap: wrap` on the parent kicks in and they break to a new
 * line. After wrapping, each row's items still grow to fill their
 * row, so a single-item row goes full-width naturally.
 *
 * Specificity here is `.wcpc-sg-filters > .wcpc-sg-filter` (0,2,0)
 * which beats theme `select { width: 100% }` (0,0,1) without
 * needing `!important`.
 */
.wcpc-sg-filters > .wcpc-sg-filter {
    flex: 1 1 0;
    min-width: 180px;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
}

/* Stacked mode reinstates the full-width behavior intentionally. */
.wcpc-sg-filters--stacked > .wcpc-sg-filter {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

/* --- Overflow indicator (1.42.1) -------------------------------------- */

/*
 * Used by the per-row Max Items setting on multi-value fields
 * (Speakers, Series, Topics, Books, Seasons, Scripture). When a card
 * has 12 scripture references but Max Items is 3, the renderer emits
 * the first 3 and appends "+9 more" wrapped in `.wcpc-card__overflow`
 * (text mode) or `.wcpc-pill--overflow` (pill mode).
 */

.wcpc-card__overflow {
    opacity: 0.7;
    font-style: italic;
}

.wcpc-pill--overflow {
    opacity: 0.85;
}

/* --- AJAX refresh indicator ------------------------------------------- */

.wcpc-loop-refreshing {
    position: relative;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.wcpc-loop-refreshing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    opacity: 0.3;
    pointer-events: none;
}