/* ==========================================================================
   components.css — Reusable UI components
   Named with BEM. Every block here is used by two or more sections.
   ========================================================================== */

/* --- Eyebrow (small uppercase kicker above a heading) --------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-blue);
}

.eyebrow--on-dark {
  color: var(--color-cyan-soft);
}

/* --- Section heading block (eyebrow + title + optional subtitle) ---------- */
.section-head {
  max-width: 640px;
  margin-bottom: 50px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-3);
}

.section-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-top: var(--space-4);
}

.section--dark .section-title,
.section--brand .section-title {
  color: #fff;
}

.section--dark .section-subtitle {
  color: var(--color-on-dark-body);
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: 0.97rem;
  line-height: 1;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: transform var(--transition-base) var(--ease-out-expo),
    box-shadow var(--transition-base) ease,
    background var(--transition-base) ease,
    border-color var(--transition-base) ease,
    filter var(--transition-base) ease;
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-button);
}

.btn--primary:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-button-hover);
  filter: brightness(1.07);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.btn--ghost:hover {
  color: #fff;
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--navy {
  background: var(--color-navy);
  color: #fff;
}

.btn--navy:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -14px rgba(11, 31, 51, 0.6);
}

.btn--sm {
  font-size: 0.9rem;
  padding: 11px 20px;
}

.btn--lg {
  font-size: 1.06rem;
  font-weight: var(--fw-bold);
  padding: 17px 32px;
}

/* --- Text arrow link (e.g. "View Category →") ----------------------------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: 0.9rem;
}

.arrow-link svg {
  transition: transform var(--transition-base) var(--ease-out-expo);
}

.arrow-link:hover svg {
  transform: translateX(4px);
}

.arrow-link--blue { color: var(--color-blue); }
.arrow-link--navy { color: var(--color-navy); }

/* --- Badge (pill label) --------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}

.badge--accent {
  color: var(--color-cyan-soft);
  background: rgba(35, 183, 217, 0.14);
  border: 1px solid rgba(35, 183, 217, 0.3);
}

.badge--glass {
  color: #D6F4FA;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-transform: none;
  letter-spacing: 0;
}

/* --- Chip (governorate tags) ---------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.81rem;
  font-weight: var(--fw-medium);
  color: var(--color-blue-dark);
  background: var(--color-surface-well);
  border: 1px solid rgba(31, 122, 224, 0.14);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}

.chip--plain {
  color: var(--color-navy);
  background: none;
  border: none;
  font-weight: var(--fw-semibold);
  padding-inline: 6px;
}

/* --- Card (shared surface for categories, steps, why, etc.) --------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

.card--dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* --- Icon tile (rounded square holding an SVG glyph) ---------------------- */
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-well);
  color: var(--color-blue);
}

.icon-tile--dark {
  background: rgba(35, 183, 217, 0.14);
  color: var(--color-cyan-soft);
}

.icon-tile--gradient {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(31, 122, 224, 0.6);
}

/* --- Breadcrumb (interior page navigation trail) -------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 22px;
  font-size: 0.81rem;
  color: rgba(255, 255, 255, 0.55);
}

.breadcrumb__link {
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb__link:hover {
  color: #fff;
}

.breadcrumb__current {
  color: var(--color-cyan-soft);
}

/* --- Framed media (image with offset gradient backing plate) -------------- */
.framed-media {
  position: relative;
}

.framed-media__frame {
  position: absolute;
  inset: 22px -22px -22px 22px;
  z-index: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--color-surface-well), var(--color-surface-alt));
}

.framed-media__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-image);
}

.framed-media__img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
}

/* Mirrored frame (image sits on the right of a two-column split). */
.framed-media--flip .framed-media__frame {
  inset: 22px 22px -22px -22px;
}

/* --- Feature description for sector/feature cards -------------------------- */
.sector-card__text {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: 0.84rem;
  line-height: 1.55;
}

.section--dark .sector-card__text {
  color: var(--color-on-dark-muted);
}

/* --- Live status dot (pulsing) -------------------------------------------- */
.status-dot {
  position: relative;
  display: inline-flex;
  width: 9px;
  height: 9px;
}

.status-dot__core,
.status-dot__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-success);
}

.status-dot__core {
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
}