/*
|--------------------------------------------------------------------------
| File: assets/css/cards.css
|--------------------------------------------------------------------------
| Purpose:
| Shared card components for service previews, location previews, editorial
| blocks, trust panels, admin placeholders, and premium content surfaces.
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   1. Base card
   ========================================================================== */

.card {
    position: relative;
    display: grid;
    gap: var(--space-5);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgba(10, 22, 34, 0.68);
    box-shadow: var(--shadow-soft);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.card-soft {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.card-compact {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.018);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

/* ==========================================================================
   2. Card content structure
   ========================================================================== */

.card-header {
    display: grid;
    gap: var(--space-3);
}

.card-body {
    display: grid;
    gap: var(--space-4);
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2);
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.card-meta > * {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

/* ==========================================================================
   3. Core luxury cards
   ========================================================================== */

.service-card,
.location-card,
.editorial-card {
    display: grid;
    gap: var(--space-5);
    min-height: 100%;
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: rgba(10, 22, 34, 0.62);
    box-shadow: var(--shadow-soft);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
}

.service-card:hover,
.location-card:hover,
.editorial-card:hover {
    transform: translateY(-3px);
    border-color: rgba(200, 164, 106, 0.22);
    box-shadow: var(--shadow-deep);
}

.card-link-wrap {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-5);
    min-height: 100%;
}

.card-copy {
    color: var(--color-text-soft);
    line-height: 1.72;
}

/* ==========================================================================
   4. Trust and process cards
   ========================================================================== */

.trust-card,
.process-card,
.highlight-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-8);
    min-height: 17.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.018);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.card-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(200, 164, 106, 0.24);
    background: rgba(200, 164, 106, 0.08);
    color: var(--color-accent-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.process-card .body-sm,
.trust-card .body-sm,
.highlight-card .body-sm {
    margin-top: var(--space-1);
}

/* ==========================================================================
   5. Premium labels and badges
   ========================================================================== */

.badge,
.chip,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 1.9rem;
    padding: 0.28rem 0.72rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.badge {
    color: var(--color-accent-soft);
    border: 1px solid rgba(200, 164, 106, 0.18);
    background: rgba(200, 164, 106, 0.08);
}

.chip {
    color: var(--color-text-soft);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.status-pill {
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   6. Media placeholders
   ========================================================================== */

.card-media {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition:
        background var(--transition-base),
        border-color var(--transition-base);
}

.card-media-tall {
    aspect-ratio: 4 / 5;
}

.card-media-copy {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ==========================================================================
   7. Admin placeholder cards
   ========================================================================== */

.admin-stat-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(10, 22, 34, 0.62);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.admin-stat-value {
    color: var(--color-text);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.admin-stat-label {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ==========================================================================
   8. Light mode refinements
   ========================================================================== */

html[data-theme="light"] .card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .location-card,
html[data-theme="light"] .editorial-card,
html[data-theme="light"] .admin-stat-card {
    background: rgba(255, 250, 243, 0.88);
    border-color: rgba(20, 35, 52, 0.08);
    box-shadow: 0 16px 42px rgba(34, 42, 52, 0.08);
}

html[data-theme="light"] .card-soft,
html[data-theme="light"] .card-compact,
html[data-theme="light"] .trust-card,
html[data-theme="light"] .process-card,
html[data-theme="light"] .highlight-card {
    background: rgba(255, 250, 243, 0.72);
    border-color: rgba(20, 35, 52, 0.08);
    box-shadow: 0 12px 32px rgba(34, 42, 52, 0.05);
}

html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .location-card:hover,
html[data-theme="light"] .editorial-card:hover {
    border-color: rgba(179, 138, 75, 0.22);
    box-shadow: 0 18px 48px rgba(34, 42, 52, 0.12);
}

html[data-theme="light"] .badge {
    color: var(--color-accent-deep);
    background: rgba(179, 138, 75, 0.08);
    border-color: rgba(179, 138, 75, 0.18);
}

html[data-theme="light"] .chip {
    background: rgba(20, 35, 52, 0.03);
    border-color: rgba(20, 35, 52, 0.08);
}

html[data-theme="light"] .status-pill {
    background: rgba(20, 35, 52, 0.025);
    border-color: rgba(20, 35, 52, 0.08);
}

html[data-theme="light"] .card-media {
    background: rgba(20, 35, 52, 0.025);
    border-color: rgba(20, 35, 52, 0.08);
}