/* futureplans.php: styles only this page uses. Shared look: Styles/site.css */

/* HERO */

.hero-ar-sub { font-family:var(--font-ar); font-size:28px; color:var(--gold); margin-bottom:10px; }

.ornament-divider { display:flex; align-items:center; justify-content:center; gap:12px; margin:14px auto; max-width:200px; }

.hero-title { font-family:var(--font-display); font-size:clamp(26px,4.5vw,48px); color:var(--white); margin-bottom:10px; }

/* LAND IMAGE BANNER */

.land-banner { position:relative; overflow:hidden; height:340px; }

.land-banner img { width:100%; height:100%; object-fit:cover; }

.land-banner-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,14,44,0.8) 0%, rgba(0,14,44,0.3) 60%, transparent 100%); }

/* caption sits on its own navy panel so it stays readable over any part of the photo */
.land-banner-label { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); text-align:center; background:rgba(0,14,44,0.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:10px 20px; border-radius:12px; }

.land-banner-label p { color:var(--gold-light); font-size:18px; margin-bottom:4px; }

.land-banner-label small { font-size:12px; color:var(--muted-on-navy); letter-spacing:1px; }

/* SECTION HEADER */

.section-tag { display:inline-flex; align-items:center; gap:8px; background:rgba(201,168,76,0.1); border:1px solid var(--border); color:var(--gold-ink); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:12px; }

.section-tag.ar { font-family:var(--font-ar); font-size:13px; letter-spacing:0; }

.section-header h2 { font-family:var(--font-display); font-size:clamp(22px,3vw,34px); color:var(--primary); }

/* ── ACHIEVEMENTS ── */

.achievements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-bottom:60px; }

.ach-card {
    background:var(--white);
    border:1px solid rgba(0,14,44,0.08);
    border-top:3px solid var(--green);
    border-radius:5px;
    padding:28px 24px;
    box-shadow:0 4px 20px rgba(0,0,0,0.05);
    position:relative;
    overflow:hidden;
    transition:transform 0.3s, box-shadow 0.3s;
}

.ach-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,0.1); }

.ach-card::before { content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px; border:1px solid rgba(26,107,58,0.06); border-radius:50%; }

.ach-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--green-light); color:var(--green);
    font-size:10px; letter-spacing:1px; text-transform:uppercase;
    padding:4px 12px; border-radius:20px; margin-bottom:14px;
    font-weight:600;
}

.ach-badge.ar { font-family:var(--font-ar); font-size:12px; letter-spacing:0; }

.ach-badge i { font-size:10px; }

.ach-icon { width:52px; height:52px; background:linear-gradient(135deg, var(--green-light), rgba(26,107,58,0.05)); border:1px solid rgba(26,107,58,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--green); font-size:20px; margin-bottom:16px; }

.ach-title { font-size:16px; font-weight:600; color:var(--primary); margin-bottom:8px; line-height:1.5; }

.ach-title.ar { font-family:var(--font-ar); font-size:18px; direction:rtl; }

.ach-desc { font-size:13px; color:var(--text-mid); line-height:1.9; }

.ach-desc.ar { font-family:var(--font-ar); font-size:15px; direction:rtl; line-height:2.1; }

.ach-collab { display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(0,0,0,0.05); }

.ach-collab i { font-size:11px; color:var(--gold); }

.ach-collab span { font-size:11px; color:var(--text-mid); }

.ach-collab span.ar { font-family:var(--font-ar); font-size:13px; }

/* ── FUTURE PLANS ── */

.plans-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.plan-card {
    background:var(--primary);
    border:1px solid var(--border);
    border-radius:5px;
    padding:28px 24px;
    position:relative;
    overflow:hidden;
    transition:transform 0.3s;
    counter-increment:plan-counter;
}

.plan-card:hover { transform:translateY(-4px); }

.plan-card::before {
    content:counter(plan-counter, arabic-indic);
    position:absolute; top:16px; right:20px;
    font-family:var(--font-ar); font-size:48px;
    color:rgba(201,168,76,0.07); line-height:1;
    font-weight:700;
}

body:not(.ar-mode) .plan-card::before {
    content:counter(plan-counter);
}

.plans-layout { counter-reset:plan-counter; }

.plan-icon { width:46px; height:46px; background:rgba(201,168,76,0.1); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:18px; margin-bottom:14px; }

.plan-title { font-size:15px; font-weight:600; color:var(--white); margin-bottom:8px; line-height:1.6; }

.plan-title.ar { font-family:var(--font-ar); font-size:17px; direction:rtl; }

.plan-desc { font-size:12px; color:var(--muted-on-navy); line-height:1.8; }
.plan-desc a { color:var(--gold-light); font-weight:600; text-underline-offset:3px; }

.plan-desc.ar { font-family:var(--font-ar); font-size:14px; direction:rtl; line-height:2; }

.plan-status { display:inline-flex; align-items:center; gap:5px; margin-top:14px; font-size:10px; letter-spacing:1px; color:var(--gold); background:rgba(201,168,76,0.08); padding:3px 10px; border-radius:20px; border:1px solid rgba(201,168,76,0.2); text-transform:uppercase; }

/* MAP */

.map-section { background:var(--white); border:1px solid rgba(0,14,44,0.08); border-radius:5px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.06); }

.map-header { padding:24px 28px; border-bottom:1px solid rgba(0,14,44,0.07); display:flex; align-items:center; gap:12px; }

.map-header-icon { width:40px; height:40px; background:rgba(201,168,76,0.1); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:16px; flex-shrink:0; }

.map-header h3 { font-size:17px; color:var(--primary); font-weight:600; }

.map-header h3.ar { font-family:var(--font-ar); font-size:19px; direction:rtl; }

.map-header p { font-size:12px; color:var(--text-mid); margin-top:2px; }

.map-header p.ar { font-family:var(--font-ar); font-size:14px; direction:rtl; }

.map-section iframe { display:block; width:100%; border:0; }

/* RESPONSIVE */

@media (max-width:900px) {
    .plans-layout { grid-template-columns:1fr; }
}

@media (max-width:600px) {
    .achievements-grid { grid-template-columns:1fr; }
}