/* ==========================================
   Homepage — app-shell restyle (2026-07-23)
   Replaces the earlier Variant B marketing hero (badge, split layout,
   glowing rings) with a compact intro + Quick Access grid + public
   data previews, matching the prototype's (Rabta_Madaris_App_Updated)
   index.html pattern. Reuses this theme's existing design tokens
   throughout — no new colors/scales introduced.
   ========================================== */

/* ---------- Shared section heading ---------- */

.section__title {
    font-size: var(--text-4xl);
    color: var(--primary);
    text-align: start;
    margin-bottom: var(--space-2);
}

.section__subtitle {
    color: var(--text-light);
    font-size: var(--text-md);
    text-align: start;
    margin-bottom: var(--space-8);
}

/* ---------- Scroll-reveal (home-effects.js toggles .is-revealed) ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Compact intro (replaces the old split hero) ---------- */

.home-intro {
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    padding-block: var(--space-8);
}

.home-intro__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.home-intro__logo {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    object-fit: contain;
    flex: 0 0 auto;
}

.home-intro__greeting {
    margin: 0 0 var(--space-1);
    color: var(--text-light);
    font-size: var(--text-md);
}

.home-intro__title {
    margin: 0;
    color: var(--primary);
    font-size: var(--text-2xl);
}

/* ---------- Quick Access tile grid ---------- */

.home-quick-access {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.home-quick-access__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-3);
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
}
.home-quick-access__tile:hover {
    box-shadow: var(--shadow-md);
    color: var(--primary);
}
.home-quick-access__tile svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--primary);
}

@media (max-width: 640px) {
    .home-quick-access { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Preview list sections (notices, announcements, exam schedule) ---------- */

.home-preview-list { display: flex; flex-direction: column; gap: var(--space-5); }
.home-preview-list[hidden] { display: none; }

.home-preview-card,
.announcement-card {
    border-inline-start: 4px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.home-preview-card h3,
.announcement-card h3 { font-size: var(--text-lg); color: var(--on-surface); margin-bottom: 0; }
.home-preview-card p,
.announcement-card p { margin: 0; color: var(--text-light); }
.home-preview-card__date,
.home-preview-card__meta,
.announcement-card__date {
    font-size: var(--text-sm);
    color: var(--text-light);
    white-space: nowrap;
}

.announcement-list { display: flex; flex-direction: column; gap: var(--space-5); }
.announcement-list[hidden] { display: none; }

.home-section__more {
    display: inline-block;
    margin-top: var(--space-5);
    color: var(--primary);
    font-weight: var(--font-weight-medium);
}

/* ---------- Downloads ---------- */

.home-downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}
.home-downloads-grid[hidden] { display: none; }

.home-download-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text);
    font-weight: var(--font-weight-medium);
}
.home-download-card__type {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
}

/* ---------- Admission info / Contact (single-object cards) ---------- */

.home-info-card__meta {
    margin-top: var(--space-3);
    color: var(--text-light);
    font-size: var(--text-sm);
}

/* ---------- About / Mission ---------- */

.about-mission { background: var(--surface-container); }

.about-mission__inner {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.about-mission__content { flex: 1; min-width: 300px; }
.about-mission__text { font-size: var(--text-lg); color: var(--text); margin-bottom: var(--space-6); }

.about-mission__photo-frame {
    flex: 0 0 auto;
    width: 300px;
    height: 280px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    border: 2px solid var(--outline-variant);
}
/* object-position: top — the source photo is a tall portrait with a
   caption baked into the top and the subject spanning nearly its full
   height; default center-cropping would cut off both his head and his
   feet. Biasing to the top keeps his face and the header text
   visible, at the cost of his lower body — adjust if a different
   framing is preferred. */
.about-mission__photo { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-mission__photo[hidden] { display: none; }
.about-mission__photo-frame--empty {
    background: var(--surface-container-high);
    border-style: dashed;
}

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
    .about-mission__inner { flex-direction: column; }
    .about-mission__content { text-align: center; }
    .about-mission__photo-frame { width: 100%; max-width: 320px; height: 260px; }
}