/* [IRIDIAN AI LAYER] CSS extern del bloc FeaturedCardV1. Fase G + tokens 2026-05-19.
 * Variables per-usuari: --card-bg, --title-color, --subtitle-color, --cta-bg, --cta-color, --content-align
 * Tokens globals: _iailayer-base.css
 */
/* [L6 pàgines base 2026-09-30] El text ric (p, li, strong, b i els enllaços sense classe) pren el token de text de
   la superfície (--ia-color-text, que brand, dark i image redefineixen); sense això main p, main li, main li p,
   strong i main a del tema el pinten amb el seu color fix (1,21:1 a surface dark). Token i no inherit: inherit
   aclaria el cos a les superfícies clares (#6F6F6F, 4,53:1 sobre soft). :where() deixa p, li, strong i b a
   (0,1,0) perquè qualsevol regla pròpia del mòdul hi guanyi; el bloc va al principi perquè hi guanyin en empat. */
.iaLayer-featuredcardv1 :where(p, li, strong, b) { color: var(--ia-color-text, inherit); }
.iaLayer-featuredcardv1 a:not([class]) { color: var(--ia-color-text, inherit); text-decoration: underline; }
.iaLayer-featuredcardv1 a:not([class]):is(:hover, :focus-visible) { --ia-interaction-text-hover: var(--ia-color-text, inherit); color: var(--ia-interaction-text-hover); text-decoration: underline; }
.iaLayer-featuredcardv1 {
    display: flex;
    flex-direction: column;
    border-radius: var(--ia-radius-l, 12px);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    background: var(--card-bg, var(--ia-color-surface, #faf7f4));
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
}
.iaLayer-featuredcardv1 .fc-image-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--ia-color-border, #e0e0e0);
}
.iaLayer-featuredcardv1 .fc-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    --ia-interaction-transition: transform 0.4s ease; transition: var(--ia-interaction-transition);
}
.iaLayer-featuredcardv1:hover .fc-image-wrap img { transform: scale(1.04); }
.iaLayer-featuredcardv1 .fc-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: var(--content-align, center);
    text-align: var(--content-align, center);
}
.iaLayer-featuredcardv1 .fc-title {
    font-size: var(--ia-card-title-size);
    font-weight: var(--ia-card-title-weight);
    line-height: var(--ia-card-title-lh);
    margin: 0;
    color: var(--title-color, var(--ia-color-text, #1a1a2e));
}
.iaLayer-featuredcardv1 .fc-subtitle {
    font-size: var(--ia-card-text-size);
    line-height: var(--ia-card-text-lh);
    margin: 0;
    color: var(--subtitle-color, var(--ia-color-text-soft, #5a5a7a));
}
.iaLayer-featuredcardv1 .fc-cta {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.65rem 1.6rem;
    border-radius: var(--ia-radius-s, 6px);
    background: var(--cta-bg, var(--ia-button-primary-bg));
    color: var(--cta-color, var(--ia-button-primary-text));
    font-size: var(--ia-btn-size);
    font-weight: var(--ia-btn-weight);
    text-decoration: none;
    --ia-interaction-transition: opacity 0.25s ease; transition: var(--ia-interaction-transition);
    cursor: pointer;
}
.iaLayer-featuredcardv1 .fc-cta:hover { opacity: 0.82; }
@media (max-width: 600px) {
    .iaLayer-featuredcardv1 { max-width: 100%; border-radius: var(--ia-radius-m, 8px); }
    .iaLayer-featuredcardv1 .fc-body { padding: 1rem; }
    .iaLayer-featuredcardv1 .fc-title { font-size: var(--ia-card-title-size); }
}