/* ══════════════════════════════════════════════════════════════
   EMIT Yachts — EMIT Care Page Stylesheet
   Dedicated care page at /care/
   Uses CSS custom properties from style.css
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
/* Uses exact same .hero styles from style.css — no overrides. */

/* ── Overview Section (dynamic) ────────────────────────────── */
.care-overview-section,
.care-privileges-section {
    padding: 60px 5%;
    max-width: 900px;
    margin: 0 auto;
}

.care-content-card {
    text-align: center;
}
.care-content-icon {
    font-size: 2.5rem;
    color: var(--color-accent-pearl);
    margin-bottom: 16px;
    opacity: 0.8;
}
.care-content-title {
    font-family: 'Protrakt-Semi-Bold-Exp-One', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-pearl);
    margin-bottom: 20px;
}
.care-content-body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-accent-pearl);
    opacity: 0.75;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

/* ── Privileges Section ────────────────────────────────────── */
.care-privileges-section {
    background: rgba(10, 10, 10, 0.3);
    border-top: 1px solid rgba(242, 240, 239, 0.06);
    border-bottom: 1px solid rgba(242, 240, 239, 0.06);
}

/* ── Section Header ────────────────────────────────────────── */
.section-header { margin-bottom: 40px; }
.section-header .section-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-accent-pearl);
    opacity: 0.6;
    margin-top: 8px;
}

/* ── Services Grid ─────────────────────────────────────────── */
.care-services-section { padding: 80px 5%; }

.care-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.care-service-card {
    border-radius: var(--radius-standard);
    padding: 32px 28px;
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(242, 240, 239, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}
.care-service-card:hover { border-color: rgba(242, 240, 239, 0.25); transform: translateY(-2px); }
.care-service-card:active { transform: scale(0.98); }

.care-service-icon {
    font-size: 2rem;
    color: var(--color-accent-pearl);
    margin-bottom: 16px;
    opacity: 0.7;
}
.care-service-title {
    font-family: 'Protrakt-Semi-Bold-Exp-One', sans-serif;
    font-size: 1.1rem;
    color: var(--color-pearl);
    margin-bottom: 10px;
}
.care-service-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-accent-pearl);
    opacity: 0.7;
    line-height: 1.6;
}

/* ── CTA ───────────────────────────────────────────────────── */
.care-cta-section { padding: 60px 5% 100px; }
.care-cta-title {
    font-family: 'Protrakt-Semi-Bold-Exp-One', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--color-pearl);
    margin-bottom: 12px;
}
.care-cta-text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-accent-pearl);
    opacity: 0.7;
    margin-bottom: 24px;
}

/* ── Loading ───────────────────────────────────────────────── */
.care-loading { text-align: center; padding: 40px 20px; }
.care-loading .spinner {
    width: 28px; height: 28px;
    border: 2px solid rgba(242,240,239,0.15);
    border-top-color: var(--color-accent-pearl);
    border-radius: 50%;
    animation: care-spin 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes care-spin { to { transform: rotate(360deg); } }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .care-overview-section,
    .care-privileges-section { padding: 40px 5%; }
    .care-services-section { padding: 60px 5%; }
    .care-services-grid { grid-template-columns: 1fr; }

    .care-service-card { padding: 24px 20px; }
}