/**
 * Card Grid block styles.
 *
 * @package lcms
 */

/* ── card image wrapper ─────────────────────────────────────────
   The shared `image` component wraps <img> in <figure>. Without
   explicit sizing on the figure, the img's `h-full object-cover`
   can't take effect because its parent (figure) has auto height,
   so the image renders at its natural ratio inside the
   aspect-ratio'd wrapper. Forcing figure to fill the wrapper
   restores the expected cover-crop behaviour for every ratio.
   Descendant (not direct-child) selector — some hosts/plugins
   wrap wp_get_attachment_image output in extra elements (picture,
   span, etc.) so > would miss.
   ─────────────────────────────────────────────────────────────── */
.block-card-grid__card-image figure {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* ── image-tile variant ─────────────────────────────────────────
   Grid of bg-image tiles with scrim overlay and stacked content
   composition. Borrows the bg + scrim mechanic from cta nav-tile
   but applies it at card-grid scale (multiple tiles per row, no
   side-anchored content offset — content fills the full tile).
   ─────────────────────────────────────────────────────────────── */

.block-card-grid--image-tile .block-card-grid__tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg, 16px);
    box-shadow: var(--block-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    isolation: isolate;
    /* Flex column lets the content child stretch to fill min-height —
       bg + overlay are absolutely-positioned so they don't participate. */
    display: flex;
    flex-direction: column;
    color: #fff;
    text-decoration: none;
}

.block-card-grid--image-tile .block-card-grid__tile-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-brand-primary, #114b36);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease-out;
}

.block-card-grid--image-tile .block-card-grid__tile--clickable:hover .block-card-grid__tile-bg {
    transform: scale(1.04);
}

/* Tile content — flex column that fills the tile height. Eyebrow +
   title + description sit at the top; button is pushed to the bottom
   via margin-top:auto so any body length still hugs the title rather
   than floating in the middle. */
.block-card-grid--image-tile .block-card-grid__tile-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem 1.5rem;
    flex: 1;
}

@media (min-width: 768px) {
    .block-card-grid--image-tile .block-card-grid__tile-content {
        padding: 2.5rem 2rem;
        gap: 1rem;
    }
}

.block-card-grid--image-tile .block-card-grid__tile-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brand-accent, var(--color-text-light, rgba(255, 255, 255, 0.9)));
    line-height: 1.4;
}

.block-card-grid--image-tile .block-card-grid__tile-title {
    margin: 0;
}

.block-card-grid--image-tile .block-card-grid__tile-description {
    font-size: 0.95rem;
}

.block-card-grid--image-tile .block-card-grid__tile-actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Min-height presets — same scale as cta nav-tile for visual
   consistency when the two block types appear on the same page. */
.block-card-grid--image-tile.block-card-grid--h-small  .block-card-grid__tile { min-height: 280px; }
.block-card-grid--image-tile.block-card-grid--h-medium .block-card-grid__tile { min-height: 360px; }
.block-card-grid--image-tile.block-card-grid--h-large  .block-card-grid__tile { min-height: 480px; }

@media (min-width: 768px) {
    .block-card-grid--image-tile.block-card-grid--h-small  .block-card-grid__tile { min-height: 320px; }
    .block-card-grid--image-tile.block-card-grid--h-medium .block-card-grid__tile { min-height: 420px; }
    .block-card-grid--image-tile.block-card-grid--h-large  .block-card-grid__tile { min-height: 540px; }
}