/* =========================================================
   AREAS INDEX — Al Massa (RTL, premium, no frameworks)
   Primary: #F03030
   ========================================================= */
.areas-index{ overflow-x: clip; }
@supports not (overflow: clip){ .areas-index{ overflow-x: hidden; } }
.areas-index *, .areas-index *::before, .areas-index *::after{ box-sizing:border-box; }

:root{
  --alm-red:#F03030;
  --alm-ink:#0f172a;
  --alm-navy:#304060;
  --alm-muted: rgba(15,23,42,.72);
  --alm-line: rgba(15,23,42,.10);
  --alm-card: rgba(255,255,255,.86);
  --alm-soft: rgba(48,64,96,.05);
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* HERO */
.areas-hero{ position:relative; padding: clamp(26px,4vw,78px) 0; overflow: clip; }
.areas-hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.areas-hero__mesh, .areas-hero__grid, .areas-hero__noise, .areas-hero__glow{ position:absolute; inset:0; }

.areas-hero__mesh{
  background:
    radial-gradient(900px 520px at 12% 22%, rgba(240,48,48,.18), transparent 62%),
    radial-gradient(900px 520px at 86% 28%, rgba(48,64,96,.16), transparent 62%),
    linear-gradient(180deg, #fff 0%, #fbfbfc 100%);
}
.areas-hero__grid{
  opacity:.34;
  background:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px) 0 0/46px 46px,
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px) 0 0/46px 46px;
  mask-image: radial-gradient(closest-side at 50% 36%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 36%, #000 0%, transparent 78%);
}
.areas-hero__noise{
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:multiply;
}
.areas-hero__glow--a{
  inset:auto; width:520px; height:520px; right:-180px; top:-160px;
  background:radial-gradient(circle at 30% 30%, rgba(240,48,48,.22), transparent 60%);
  filter:blur(12px);
}
.areas-hero__glow--b{
  inset:auto; width:520px; height:520px; left:-200px; bottom:-220px;
  background:radial-gradient(circle at 30% 30%, rgba(48,64,96,.18), transparent 62%);
  filter:blur(14px);
}

.areas-hero__inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(14px,2.6vw,28px);
  align-items:start;
}

.kicker{
  margin:0 0 10px;
  font-weight:1000; color:var(--alm-navy);
  display:inline-flex; gap:10px; align-items:center;
}
.kicker::before{
  content:""; width:10px; height:10px; border-radius:999px;
  background:var(--alm-red);
  box-shadow:0 0 0 7px rgba(240,48,48,.10);
}
.title{
  margin:0 0 10px;
  font-weight:1000; color:var(--alm-ink);
  font-size:clamp(22px,2.6vw,42px);
  line-height:1.15;
}
.subtitle{
  margin:0 0 14px;
  color:var(--alm-muted);
  font-weight:780;
  line-height:2;
  max-width: 92ch;
}

.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--alm-line);
  background: rgba(255,255,255,.70);
  font-weight:1000;
  color: rgba(15,23,42,.86);
  text-decoration:none;
}
.btn:hover{ background: rgba(240,48,48,.06); border-color: rgba(240,48,48,.18); }
.btn--primary{ border-color: rgba(240,48,48,.26); background: rgba(240,48,48,.12); }
.btn--ghost{ background: rgba(255,255,255,.70); }
.btn--small{ padding:10px 12px; font-size:13px; }

.hero-stats{ display:flex; flex-wrap:wrap; gap:10px; }
.stat{
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid var(--alm-line);
  background: rgba(48,64,96,.05);
  font-weight:900;
  color: rgba(15,23,42,.78);
}
.stat strong{ color: var(--alm-ink); }

.areas-hero__panel .panel{
  border-radius: 26px;
  border: 1px solid rgba(240,48,48,.18);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 54px rgba(15,23,42,.10);
  padding: 16px;
}
.panel__h{ margin:0 0 8px; font-weight:1000; color:var(--alm-ink); font-size:16px; }
.panel__p{ margin:0 0 12px; font-weight:750; color:var(--alm-muted); line-height:1.9; }
.panel__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.panel__mini{ display:flex; flex-wrap:wrap; gap:10px; }
.mini{
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--alm-line);
  background: rgba(255,255,255,.70);
  font-weight: 1000;
  color: rgba(15,23,42,.75);
  font-size: 12.5px;
}

/* FILTER */
.areas-filter{ padding: 18px 0; border-top:1px solid rgba(15,23,42,.06); background:#fff; }
.filter-bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  border: 1px solid var(--alm-line);
  background: rgba(255,255,255,.84);
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 18px 54px rgba(15,23,42,.06);
}
.tabs{ display:flex; flex-wrap:wrap; gap:10px; }
.tab{
  border: 1px solid var(--alm-line);
  background: rgba(48,64,96,.05);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 1000;
  color: var(--alm-ink);
  cursor:pointer;
}
.tab[aria-selected="true"]{
  border-color: rgba(240,48,48,.28);
  background: rgba(240,48,48,.10);
}
.tab--all{ opacity:.9; }

.controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ctrl{ display:flex; }
.input, .select{
  border-radius: 999px;
  border:1px solid var(--alm-line);
  background: rgba(255,255,255,.90);
  padding: 11px 14px;
  font-weight: 900;
  color: var(--alm-ink);
  outline: none;
}
.input{ min-width: 260px; }
.select{ min-width: 170px; }

.filter-meta{ margin-top:10px; font-weight:900; color: rgba(15,23,42,.72); }

/* RESULTS */
.areas-results{ padding: clamp(26px,4vw,78px) 0; }
.section-head{ margin-bottom:14px; }
.section-kicker{
  margin:0 0 10px;
  font-weight:1000; color:var(--alm-navy);
  display:inline-flex; gap:10px; align-items:center;
}
.section-kicker::before{
  content:""; width:10px; height:10px; border-radius:999px;
  background:var(--alm-red);
  box-shadow:0 0 0 7px rgba(240,48,48,.10);
}
.section-title{
  margin:0 0 10px;
  font-weight:1000; color:var(--alm-ink);
  font-size:clamp(20px,2.2vw,34px);
  line-height:1.2;
}
.section-subtitle{
  margin:0;
  font-weight:750; color:var(--alm-muted);
  line-height:1.9;
  max-width: 92ch;
}

.results-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.area-card{
  border-radius: 22px;
  border: 1px solid var(--alm-line);
  background: var(--alm-card);
  box-shadow: 0 18px 54px rgba(15,23,42,.08);
  overflow:hidden;
}
.area-card__link{ color:inherit; text-decoration:none; display:block; height:100%; }
.area-card__media{
  position:relative;
  aspect-ratio: 16/9;
  background: rgba(48,64,96,.06);
}
.area-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.area-card__ph{
  position:absolute; inset:0;
  background:
    radial-gradient(500px 200px at 30% 30%, rgba(240,48,48,.14), transparent 60%),
    radial-gradient(500px 200px at 70% 70%, rgba(48,64,96,.14), transparent 60%);
}
.area-card__badges{
  position:absolute; inset:auto 10px 10px 10px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;
}
.badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(15,23,42,.35);
  color:#fff;
  font-weight:1000;
  backdrop-filter: blur(10px);
}
.badge--hot{ background: rgba(240,48,48,.40); border-color: rgba(240,48,48,.55); }

.area-card__body{ padding: 14px; }
.area-card__t{ margin:0 0 8px; font-weight:1000; color:var(--alm-ink); }
.area-card__meta{ margin:0 0 8px; font-weight:900; color: rgba(15,23,42,.70); }
.area-card__d{ margin:0 0 12px; font-weight:750; color:var(--alm-muted); line-height:1.9; }

.area-card__sv{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid var(--alm-line);
  background: rgba(255,255,255,.72);
  font-weight:1000;
  color: rgba(15,23,42,.78);
  font-size: 12.5px;
}
.pill--more{ background: rgba(240,48,48,.08); border-color: rgba(240,48,48,.20); }

.area-card__footer{
  display:flex; justify-content:space-between; align-items:center;
  border-top: 1px solid rgba(15,23,42,.06);
  padding-top: 12px;
}
.muted{ font-weight:900; color: rgba(15,23,42,.60); }
.go{ font-weight:1000; color: rgba(15,23,42,.72); }

.empty{
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--alm-line);
  background: rgba(48,64,96,.04);
  font-weight: 900;
  color: rgba(15,23,42,.70);
}

/* Responsive */
@media (max-width: 1100px){
  .areas-hero__inner{ grid-template-columns: 1fr; }
  .results-grid{ grid-template-columns: 1fr; }
  .input{ min-width: 220px; }
}