/**
 * Planning Center Connection — 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 under `.wcpc-pco` so they won't leak into other
 * Elementor content. No hardcoded colors — everything inherits from the
 * theme / Elementor kit / the plugin's design tokens.
 *
 * Load order: design-tokens.css -> components.css -> grid-card-presets.css
 *             -> frontend.css
 *
 * Ported from sibling WCPC Sermon Manager v1.94.1.
 *
 * @package WCPC\PCO
 * @since   0.20.0
 */

.wcpc-pco .wcpc-card {
    position: relative;
    box-sizing: border-box;
    isolation: isolate;     /* contain hover transforms / overlays */
}

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

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

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

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

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

.wcpc-pco .wcpc-card--horizontal > .wcpc-card__media,
.wcpc-pco .wcpc-card--horizontal > a > .wcpc-card__media {
    /* Image column width is driven by --wcpc-card-image-size (set per-widget
       via the Image width control, defaults to 40%). */
    flex: 0 0 var(--wcpc-card-image-size, 40%);
    align-self: stretch;
    aspect-ratio: auto;     /* override the default 16:9 in horizontal mode */
}

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

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

/* The card's inner <a> wrapper (group-grid emits one as the click target)
   needs to inherit the row flex so its child media + body stay side by side. */
.wcpc-pco .wcpc-card--horizontal > a {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    align-items: stretch;
    width: 100%;
}

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

/* Horizontal mode tightens the body's vertical rhythm so title + meta + leaders
   stack cleanly without giant gaps. The mockup's title row sits flush at the
   top with the status pill alongside; the meta row + leader chips sit below. */
.wcpc-pco .wcpc-card--horizontal .wcpc-card__body,
.wcpc-pco .wcpc-card--horizontal .wcpc-pco-group-card__body {
    justify-content: center;     /* vertical-center body content next to image */
    gap: var(--pl-space-2);
}

/* On narrow screens horizontal cards collapse to vertical. */
@media (max-width: 640px) {
    .wcpc-pco .wcpc-card--horizontal,
    .wcpc-pco .wcpc-card--image-right,
    .wcpc-pco .wcpc-card--horizontal > a,
    .wcpc-pco .wcpc-card--image-right > a {
        flex-direction: column;
    }
    .wcpc-pco .wcpc-card--horizontal > .wcpc-card__media,
    .wcpc-pco .wcpc-card--horizontal > a > .wcpc-card__media {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* The action button row (Join group / View details / Learn more) gets pinned
   to the right edge of the card body in horizontal mode — matches the
   reference Community Groups mockup where the action sits opposite the
   leader chips on the right side of each row. Targets both the BEM
   `.wcpc-card__footer` and the legacy `__button-row` so consumers using
   either markup get the treatment. */
.wcpc-pco .wcpc-card--horizontal .wcpc-card__footer,
.wcpc-pco .wcpc-card--horizontal .wcpc-pco-group-card__button-row,
.wcpc-pco .wcpc-card--horizontal .wcpc-pco-event-card__button-row {
    margin-left: auto;
}

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

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

.wcpc-pco .wcpc-card--minimal {
    background: transparent;
    border: none;
}

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

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

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

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

.wcpc-pco .wcpc-card--hero > .wcpc-card__body {
    position: relative;
    z-index: 1;
    margin-top: auto;          /* pin body to the bottom */
    color: #ffffff;
    padding: var(--pl-space-6);
    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%
    );
    gap: var(--pl-space-1);
}

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

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

/* --- Hover zoom (opt-in via .wcpc-card--zoom) -------------------------- */

.wcpc-pco .wcpc-card--zoom .wcpc-card__media img {
    transition: transform 0.35s ease;
}

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