/* ==========================================================
   PUBLIC COMPANY PLATFORM -- CUSTOM SECTIONS, admin-authored cards
   (text/image/link/CTA) on a custom homepage section
   (company_homepage_section_cards via Company::public.home_sections.
   custom_cards). Loads after 09_layout_alignment.css targets
   .cp-custom-cards/.cp-custom-card generically alongside the other
   three content grids -- see that file's own header.
========================================================== */

.cp-custom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.cp-custom-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
}

.cp-custom-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.cp-custom-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cp-custom-card__title {
    margin: 0;
    padding: 16px 18px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-heading);
}

.cp-custom-card__title:first-child,
.cp-custom-card__text:first-child {
    padding-top: 18px;
}

.cp-custom-card__title + .cp-custom-card__text {
    padding-top: 4px;
}

.cp-custom-card__text {
    margin: 0;
    padding: 16px 18px 0;
    font-size: 14px;
    color: var(--cp-text);
}

.cp-custom-card__cta {
    display: inline-block;
    align-self: flex-start;
    margin: 12px 18px 18px;
    padding: 9px 20px;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.cp-custom-card__cta:hover { opacity: .92; }

/* Whole-card link, no separate CTA button/text at all -- a link with no
   cta_label used to fall back to a plain "Learn more" text link
   (.cp-custom-card__cta--plain, removed); the card itself being
   clickable/hoverable is meant to read as "this is tappable" on its own,
   same reasoning custom_cards.php's own comment gives. */
.cp-custom-card--linked {
    color: inherit;
    text-decoration: none;
    transition: transform var(--cp-transition), box-shadow var(--cp-transition);
}

.cp-custom-card--linked:hover,
.cp-custom-card--linked:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 21, 29, .12);
}

/* -- Flat/icon-strip card style (CompanyHomepageSectionRepository::
   CARD_STYLES 'flat', migration 0478) -- no card chrome at all: an
   icon-sized image beside a title+description+CTA column, sitting
   directly on the section's own background. --on-dark is added by the
   renderer (HomepageSectionRenderer::renderCustomCards(), via
   App\Shared\Support\ColorContrast) only when the admin's chosen
   background_color is dark enough that the default dark text/heading
   tokens would be unreadable -- 'photo' cards never get either
   modifier, since they keep their own opaque white background
   regardless of the section's. -- */

.cp-custom-cards--flat {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}

.cp-custom-cards--flat .cp-custom-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    background: none;
    border: none;
    border-radius: 0;
}

.cp-custom-cards--flat .cp-custom-card__image {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 4px;
    border-radius: var(--cp-radius-pill);
    background: color-mix(in srgb, var(--cp-primary, #137A5A) 14%, transparent);
}

.cp-custom-cards--flat .cp-custom-card__title,
.cp-custom-cards--flat .cp-custom-card__text {
    padding: 0;
}

.cp-custom-cards--flat .cp-custom-card__title + .cp-custom-card__text {
    padding-top: 2px;
}

.cp-custom-cards--flat .cp-custom-card__cta {
    margin: 8px 0 0;
}

.cp-custom-cards--on-dark .cp-custom-card__title {
    color: var(--cp-inverse);
}

.cp-custom-cards--on-dark .cp-custom-card__text {
    color: var(--cp-inverse);
    opacity: .88;
}