/*
 * Mobile feature-list accordion (task #387)
 *
 * On phones, marketing pages' big static .feature-card blocks collapse into
 * the compact tap-to-expand rows used by the main landing page's feature
 * grid: icon + bold title + chevron, description revealed on tap. Desktop
 * (≥769px) is untouched — cards keep their page's own styling.
 *
 * Shared by wedding-websites/index.html and gifts.html (all locales).
 * Pair with assets/js/feature-accordion.js, which toggles .fa-open and the
 * ARIA state. Logical properties keep RTL (he/ar) mirrored correctly.
 */
@media (max-width: 768px) {
    .fa-enabled .feature-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 0.65rem;
        padding: 0.85rem 1.05rem;
        padding-inline-end: 2.6rem;
        border-radius: 12px;
        position: relative;
        cursor: pointer;
        height: auto;
        transition: none;
    }
    .fa-enabled .feature-card:hover {
        transform: none;
    }
    .fa-enabled .feature-card .feature-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 8px;
        font-size: 1.05rem;
        margin: 0;
    }
    .fa-enabled .feature-card h3,
    .fa-enabled .feature-card h4 {
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.3;
    }
    /* Chevron — same 8px folded-corner arrow as the landing accordion */
    .fa-enabled .feature-card::after {
        content: '';
        position: absolute;
        inset-inline-end: 1.1rem;
        top: calc(0.85rem + 17px); /* vertical center of the 34px icon header row */
        width: 8px;
        height: 8px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        opacity: 0.65;
        transform: translateY(-70%) rotate(45deg);
        transition: transform 0.3s ease;
    }
    .fa-enabled .feature-card.fa-open::after {
        transform: translateY(-30%) rotate(225deg);
    }
    .fa-enabled .feature-card p {
        grid-column: 1 / -1;
        display: none;
        margin: 0.55rem 0 0;
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .fa-enabled .feature-card.fa-open p {
        display: block;
    }
    /* Tighter stack rhythm than the desktop card grid */
    .fa-enabled .feature-card-col,
    .fa-enabled [class*="col-"]:has(> .feature-card) {
        margin-bottom: 0;
    }
}