/* ============================================
   CATEGORY IMAGE & CAPTION
   ============================================ */

.page-listing-image .container-fluid {
    display: flex;
    justify-content: center;
}

.page-listing-image figure {
    display: table;
    margin: 0 auto;
}

.page-listing-image figure img.category-image {
    display: block;
}

.page-listing-image figcaption {
    display: table-caption;
    caption-side: bottom;
    min-width: 200px;
    text-align: center;
}

/* ============================================
   BLOG CARD (team-card aesthetic)
   The blog card mirrors the module_team_card box model: a centered photo plate
   above a centered body. The photo is a fixed 80% of the card width so it reads
   as a portrait plate rather than a full-bleed banner. The aspect ratio comes
   from the --listing-aspect custom property set on the section by the renderer.
   ============================================ */

.listing-blog-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #dfe4e1);
    border-radius: var(--listing-radius, 8px);
    padding: 28px 20px;
    /* Shadow-Is-State: the resting elevation comes from the Bootstrap shadow-*
       utility class on the element (card_shadow knob); the hover lift / glow
       effects own their own shadow on engagement via :hover specificity. */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    width: 100%;
    height: 100%;
}

/* The photo plate: 80% of the card width, centered. aspect-ratio keeps the box
   proportional so object-fit never distorts; the radius + overflow clip let the
   hover wash / ring stay contained. position:relative anchors the ::after wash /
   ring (overlay / glow) to THIS box, not the card or page. */
.listing-blog-photo {
    position: relative;
    width: 80%;
    aspect-ratio: var(--listing-aspect, 16/9);
    margin: 0 auto 16px;
    overflow: hidden;
    background: var(--surface-sunken, #eff2f0);
    border-radius: var(--listing-radius, 8px);
    flex-shrink: 0;
}

.listing-blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-blog-body {
    width: 100%;
}

.listing-blog-title {
    font-size: var(--fs-lead);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--text-ink, #1a2421);
}

.listing-blog-text {
    font-size: var(--fs-subtitle);
    line-height: 1.5;
    margin: 0 0 8px;
    color: var(--text-muted, #5a6b66);
}

.listing-blog-readmore,
.listing-list-readmore {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--on-primary, #fff);
    background-color: var(--primary-color, #1d6b5e);
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.listing-list-readmore {
    margin-top: 8px;
}

.listing-blog-link:hover .listing-blog-readmore,
.listing-list-link:hover .listing-list-readmore {
    background-color: var(--primary-deep, #155449);
}

/* Text-link read-more variant: a bare primary-colored text link instead of the
   solid pill. Shares typography with the pill but drops the surface, padding,
   and radius so it reads as a plain inline link. */
.listing-blog-readmore-text,
.listing-list-readmore-text {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--primary-color, #1d6b5e);
    background-color: transparent;
    text-decoration: none;
    transition: color 0.2s ease;
}

.listing-list-readmore-text {
    margin-top: 8px;
}

.listing-blog-link:hover .listing-blog-readmore-text,
.listing-list-link:hover .listing-list-readmore-text {
    color: var(--primary-deep, #155449);
}

/* Frameless: strip only the card chrome (border/background). The image keeps
   its own corner radius and the hover overlay/glow ring still paints on the
   photo. The resting shadow comes from the shadow-none utility class emitted
   alongside this modifier; the lift hover shadow is suppressed too — a
   borderless card has no lift. */
.listing-blog-card--frameless {
    background: transparent;
    border: none;
    padding: 4px 0;
}

[data-bs-theme="dark"] .listing-blog-card--frameless {
    background: transparent;
}

.listing-blog-card--frameless[data-hover-effect="lift"]:hover {
    box-shadow: none;
}

/* ============================================
   LISTING THUMBNAIL IMAGE (list layout)
   The photo wrapper carries the box size (admin width knob + aspect ratio),
   overflow clip and corner radius so the hover wash / image scale stay
   contained; position:relative anchors the overlay ::after wash. The img fills
   the wrapper.
   ============================================ */

.listing-thumb-photo {
    position: relative;
    width: var(--listing-thumb-width, 150px);
    aspect-ratio: var(--listing-aspect, 16/9);
    overflow: hidden;
    background: var(--surface-sunken, #eff2f0);
    border-radius: var(--listing-radius, 8px);
}

.listing-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   LIST CARD (list layout)
   Each row is a standalone card (border + background + radius + resting
   elevation) so the --listing-gap knob spaces them apart. The resting elevation
   comes from the Bootstrap shadow-* utility class emitted alongside (the
   card_shadow knob); the hover lift / glow effects override it on engagement.
   The card mirrors the blog card's chrome tokens (card-bg / border-color /
   listing-radius) so the two layouts read as one family. The inner flex row
   holds the thumb on the left, the title/preview body in the middle, and the
   chevron on the right.
   ============================================ */

.listing-list-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #dfe4e1);
    border-radius: var(--listing-radius, 8px);
    padding: 14px 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* List layout frameless: same chrome strip as the blog card — transparent
   background, no border, no resting shadow — so the row floats bare while the
   thumb keeps its own corner radius and hover ring. The lift hover shadow is
   suppressed too, mirroring the blog frameless behavior. This rule must come
   AFTER .listing-list-card so it wins the equal-specificity source-order tie. */
.listing-list-card--frameless {
    background: transparent;
    border: none;
    padding: 6px 0;
}

[data-bs-theme="dark"] .listing-list-card--frameless {
    background: transparent;
}

.listing-list-card--frameless[data-hover-effect="lift"]:hover {
    box-shadow: none;
}

.listing-list-title {
    font-size: var(--fs-title);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--text-ink, #1a2421);
}

.listing-list-text {
    font-size: var(--fs-subtitle);
    line-height: 1.4;
    margin: 2px 0 0;
    color: var(--text-muted, #5a6b66);
}

.listing-list-chevron {
    flex-shrink: 0;
    font-size: var(--fs-body);
    color: var(--text-muted, #5a6b66);
}

/* ============================================
   GRID SPACING
   Driven by the --listing-gap custom property. The blog grid uses the
   Bootstrap row gutter; the list stack is a flex column whose gap is the knob.
   ============================================ */

.page-listing-blog .row {
    --bs-gutter-x: var(--listing-gap, 20px);
}

.listing-list-stack {
    display: flex;
    flex-direction: column;
    gap: var(--listing-gap, 20px);
}

/* ============================================
   HOVER EFFECTS
   Mirrors the team-card family vocabulary (none / overlay / lift / zoom /
   glow / tilt) driven by the data-hover-effect attribute. The accent color
   reuses the template's --primary-color token so it tracks dark mode too. Like
   team-card, each effect also repaints the title to primary, so the engaged card
   reads as "coming alive" — not just the image.

   The listing card lives inside an <a>, which the template's generic
   "a > .card:hover" rule would lift (translateY) on every hover. That reflex is
   suppressed here so each hover_effect owns its own motion.
   ============================================ */

a > .listing-page-card:hover,
.is-clickable > .listing-page-card:hover {
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
    a > .listing-page-card:hover,
    .is-clickable > .listing-page-card:hover {
        transform: none;
    }
}

.listing-page-card[data-hover-effect="none"] {
    transition: none;
}

/* lift — the signature featured-card motion. Border deepens (not fades) so the
   card chrome stays visible at rest and reads as "lifting" on hover. */
.listing-page-card[data-hover-effect="lift"]:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong, #c4ccc8);
    box-shadow:
        0 2px 4px rgba(26, 36, 33, 0.06),
        0 8px 16px rgba(26, 36, 33, 0.12);
}

.listing-page-card[data-hover-effect="lift"]:hover .listing-blog-title,
.listing-page-card[data-hover-effect="lift"]:hover .listing-list-title {
    color: var(--primary-color, #1d6b5e);
}

/* overlay — a tonal wash sits ON TOP OF THE IMAGE ONLY. The card body text
   stays clean; the wash lives in the photo wrapper, layered above the image
   (z-index 1). */
.listing-page-card[data-hover-effect="overlay"] .listing-blog-photo::after,
.listing-page-card[data-hover-effect="overlay"] .listing-thumb-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--primary-color, #1d6b5e);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.listing-page-card[data-hover-effect="overlay"]:hover .listing-blog-photo::after,
.listing-page-card[data-hover-effect="overlay"]:hover .listing-thumb-photo::after {
    opacity: 0.35;
}

.listing-page-card[data-hover-effect="overlay"]:hover {
    border-color: var(--primary-color, #1d6b5e);
}

.listing-page-card[data-hover-effect="overlay"]:hover .listing-blog-title,
.listing-page-card[data-hover-effect="overlay"]:hover .listing-list-title {
    color: var(--secondary-color, #155046);
}

/* zoom — the image scales up inside its overflow-hidden photo wrapper */
.listing-page-card[data-hover-effect="zoom"] .listing-blog-img,
.listing-page-card[data-hover-effect="zoom"] .listing-thumb-img {
    transition: transform 0.4s ease;
}

.listing-page-card[data-hover-effect="zoom"]:hover .listing-blog-img,
.listing-page-card[data-hover-effect="zoom"]:hover .listing-thumb-img {
    transform: scale(1.08);
}

.listing-page-card[data-hover-effect="zoom"]:hover {
    border-color: var(--border-strong, #c4ccc8);
}

.listing-page-card[data-hover-effect="zoom"]:hover .listing-blog-title,
.listing-page-card[data-hover-effect="zoom"]:hover .listing-list-title {
    color: var(--primary-color, #1d6b5e);
}

/* glow — a Kelp Teal halo rings the CARD edge (not the image). The ::after
   layer paints an inset 2px primary ring stacked above the card content
   (z-index: 2) so the title/photo never cover it, exactly like team-card. */
.listing-page-card[data-hover-effect="glow"] {
    position: relative;
}

.listing-page-card[data-hover-effect="glow"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--primary-color, #1d6b5e);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.listing-page-card[data-hover-effect="glow"]:hover::after {
    opacity: 1;
}

.listing-page-card[data-hover-effect="glow"]:hover {
    box-shadow: 0 4px 12px rgba(29, 107, 94, 0.28);
}

.listing-page-card[data-hover-effect="glow"]:hover .listing-blog-title,
.listing-page-card[data-hover-effect="glow"]:hover .listing-list-title {
    color: var(--primary-color, #1d6b5e);
}

/* tilt — grayscale to color swing on the image */
.listing-page-card[data-hover-effect="tilt"] .listing-blog-img,
.listing-page-card[data-hover-effect="tilt"] .listing-thumb-img {
    filter: grayscale(1) contrast(0.95) brightness(1.02);
    transition: filter 0.45s ease, transform 0.45s ease;
}

.listing-page-card[data-hover-effect="tilt"]:hover .listing-blog-img,
.listing-page-card[data-hover-effect="tilt"]:hover .listing-thumb-img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.06);
}

.listing-page-card[data-hover-effect="tilt"]:hover {
    border-color: var(--border-strong, #c4ccc8);
}

.listing-page-card[data-hover-effect="tilt"]:hover .listing-blog-title,
.listing-page-card[data-hover-effect="tilt"]:hover .listing-list-title {
    color: var(--primary-color, #1d6b5e);
}

/* Keyboard focus visibility */
.listing-page-card:focus-within {
    outline: 2px solid var(--primary-color, #1d6b5e);
    outline-offset: 2px;
}