/**
 * Amilia Activity Page – Responsive
 *
 * 1024px — tablet
 *  768px — mobile (collapsible sidebar, vertical cards)
 *  480px — small phone
 */

/* ================================================================== */
/*  Tablet (≤ 1024px)                                                 */
/* ================================================================== */

@media (max-width: 1024px) {
    .amilia-page { grid-template-columns: 260px 1fr; }
    .amilia-page-content { padding: 28px 28px; }
    .amilia-card-img { flex: 0 0 200px; width: 200px; min-height: 180px; }
    .amilia-card-body { padding: 18px 22px; }
    .amilia-card-title { font-size: 18px; }
}

/* ================================================================== */
/*  Mobile (≤ 768px)                                                  */
/* ================================================================== */

@media (max-width: 768px) {

    .amilia-page { grid-template-columns: 1fr; }

    .amilia-page-sidebar { position: sticky; top: 0; z-index: 100; }
    .amilia-page-sidebar .amilia-filters {
        position: static; max-height: none; overflow: visible; padding: 16px;
    }

    /* ---- Toggle ---- */
    .amilia-filters-toggle {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 14px 20px;
        background: rgba(255,255,255,.1);
        border: 2px solid rgba(255,255,255,.25);
        border-radius: 10px; color: #fff;
        font-size: 16px; font-weight: 700; cursor: pointer;
        box-sizing: border-box;
        transition: background .2s, border-color .2s;
    }
    .amilia-filters-toggle:hover,
    .amilia-filters-toggle:focus {
        background: rgba(255,255,255,.18);
        border-color: rgba(255,255,255,.45);
        outline: none;
    }
    .amilia-filters-toggle-icon { font-size: 12px; transition: transform .25s; }
    .amilia-filters.is-open .amilia-filters-toggle {
        border-radius: 10px 10px 0 0; border-bottom-color: transparent;
    }
    .amilia-filters.is-open .amilia-filters-toggle-icon { transform: rotate(180deg); }

    /* ---- Collapsible body ---- */
    .amilia-filters-body {
        max-height: 0; overflow: hidden;
        transition: max-height .35s ease, padding .35s ease;
        padding-top: 0; padding-bottom: 0;
    }
    .amilia-filters.is-open .amilia-filters-body {
        max-height: 3000px; padding-top: 16px; padding-bottom: 12px; overflow-y: auto;
    }

    .amilia-page-content { padding: 20px 16px; }

    /* ---- Touch targets ---- */
    .amilia-filter-label {
        font-size: 15px; padding: 12px 4px;
        min-height: 44px; display: flex; align-items: center;
    }
    .amilia-search-input { font-size: 16px; padding: 12px 14px; }

    .amilia-filter-clear {
        display: block; width: 100%; text-align: center;
        padding: 14px 24px; box-sizing: border-box;
    }

    /* ---- Vertical cards ---- */
    .amilia-card { flex-direction: column; }
    .amilia-card-img { flex: none; width: 100%; height: 200px; min-height: 200px; padding: 12px; }
    .amilia-card-body { padding: 18px 16px; }
    .amilia-card-title { font-size: 18px; }
    .amilia-card-meta-row { font-size: 13px; }
    .amilia-card-desc { font-size: 13px; -webkit-line-clamp: 2; }

    .amilia-card-actions { flex-direction: column; gap: 10px; }
    .amilia-card-btn {
        display: block; width: 100%; text-align: center;
        padding: 13px 20px; box-sizing: border-box;
    }
    .amilia-examine-btn {
        display: block; width: 100%; text-align: center;
        padding: 11px 20px; box-sizing: border-box;
    }

    /* ---- Stack ---- */
    .amilia-stack-badge { top: 8px; right: 8px; font-size: 11px; padding: 4px 10px; }
    .amilia-stack-card { padding-bottom: 14px; }
    .amilia-results-grid { gap: 16px; }

    /* ---- Modal ---- */
    .amilia-modal-overlay { padding: 12px; }
    .amilia-modal { max-width: 100%; max-height: 90vh; border-radius: 10px; }
    .amilia-modal-header { padding: 14px 16px; font-size: 14px; }
    .amilia-modal-json { padding: 14px; font-size: 11px; }
}

/* ================================================================== */
/*  Small phone (≤ 480px)                                             */
/* ================================================================== */

@media (max-width: 480px) {
    .amilia-page-sidebar .amilia-filters { padding: 12px; }
    .amilia-page-content { padding: 16px 12px; }
    .amilia-card-body { padding: 14px 12px; }
    .amilia-card-title { font-size: 16px; }
    .amilia-card-img { height: 160px; min-height: 160px; }
    .amilia-card-btn, .amilia-examine-btn, .amilia-filter-clear {
        font-size: 14px; padding: 12px 16px;
    }
    .amilia-filters-toggle { padding: 12px 16px; font-size: 15px; }
}