/* Shared rules for the card styles in this folder. A style applies to every post card inside an
   element with its class, e.g. a landing block or module page with "card-style-03" in CSS Classes.
   The --cs-* colours are set from the site theme settings in frontEnd/site/layouts/styles.blade.php;
   these values are only fallbacks. */
:root {
    --cs-accent: #0cbaa4;
    --cs-ink: #2e3e4e;
    --cs-soft: #edf3f2;
    --cs-line: #dfeae8;
}

/* One image height per row: photos and video thumbnails are cropped to 16:9 (YouTube
   thumbnails lose their black bars). Photo modules keep their own 3:2 frame. */
[class*="card-style-"] .post-card:not(.photo-frame-3x2) .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Custom fields shown in listings (e.g. Bible verse) read as a small label and value
   instead of a box inside the card. */
[class*="card-style-"] .post-card .topic-custom-fields {
    margin-bottom: 0;
}

[class*="card-style-"] .post-card .custom-field-title {
    margin: 0 0 .1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .65;
}

[class*="card-style-"] .post-card .custom-field-value.card {
    margin: 0 0 .5rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    color: inherit;
}

[class*="card-style-"] .post-card .topic-date {
    font-size: .85rem;
}

/* Excerpts stop at three lines so cards in a row stay close in height. Only on cards with a
   bottom button: elsewhere the "More Details" link sits at the end of the excerpt itself. */
[class*="card-style-"] .post-card-with-btn .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

[class*="card-style-"] .post-card .card-title {
    line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
    [class*="card-style-"] .post-card,
    [class*="card-style-"] .post-card * {
        transition: none !important;
    }

    [class*="card-style-"] .post-card:hover {
        transform: none !important;
    }
}