/**
 * Animation Styles
 * LGU offering card animations and responsive styles.
 * Now uses motion tokens from motion-system.css.
 */

.lgu-offering-card .offering-header {
    transition: transform var(--motion-ui, 180ms) var(--ease-standard, ease),
                box-shadow var(--motion-ui, 180ms) var(--ease-standard, ease);
}

.lgu-offering-card .offering-header:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover, 0 6px 20px rgba(0,0,0,0.15));
}

.lgu-offering-card .offering-header:active {
    transform: scale(0.98);
    transition-duration: var(--motion-fast, 120ms);
}

/* Chevron rotation */
.lgu-offering-card .offering-header > div:last-child {
    transition: transform var(--motion-ui, 180ms) var(--ease-standard, ease);
}

.lgu-offering-card.expanded .offering-header > div:last-child {
    transform: rotate(180deg);
}

/* Content reveal — using opacity + grid trick for smooth height animation */
.lgu-offering-card .offering-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--motion-medium, 240ms) var(--ease-emphasized, ease),
                opacity var(--motion-medium, 240ms) var(--ease-standard, ease);
    overflow: hidden;
}

.lgu-offering-card .offering-content > * {
    overflow: hidden;
}

.lgu-offering-card.expanded .offering-content {
    grid-template-rows: 1fr;
    opacity: 1;
}

@media (max-width: 768px) {
    .lgu-package-section h2 {
        font-size: 24px !important;
    }
    .lgu-package-section h3 {
        font-size: 20px !important;
    }
}