/* ==========================================================
   MOIT RESPONSIBILITIES PAGE
   Version 2.0
   وزارة الاقتصاد والصناعة والاستثمار
   ========================================================== */

:root {

  --moit-primary: #0b3c5d;
  --moit-secondary: #1e6f78;
  --moit-accent: #c19a6b;

  --moit-text: #2f3a40;
  --moit-text-light: #66727a;

  --moit-bg: #f8fbfc;
  --moit-card-bg: #ffffff;

  --moit-border: #dbe5ea;

  --moit-shadow-sm:
    0 8px 20px rgba(0,0,0,.04);

  --moit-shadow-md:
    0 14px 35px rgba(0,0,0,.06);

  --moit-radius-sm: 12px;
  --moit-radius-md: 18px;
  --moit-radius-lg: 28px;
}


/* ==========================================================
   PAGE WRAPPER
   ========================================================== */

.moit-responsibilities-page {

  max-width: 1280px;

  margin: 0 auto;

  padding: 1rem 1.5rem 4rem;
}


/* ==========================================================
   HERO
   ========================================================== */

.moit-resp-hero {

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7fbfc 100%
    );

  border: 1px solid var(--moit-border);

  border-radius: var(--moit-radius-lg);

  padding: 2.5rem 3rem;

  margin-bottom: 2.5rem;

  box-shadow: var(--moit-shadow-sm);
}


/* Pattern */

.moit-resp-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:
    url("../../images/branding/moit-pattern.svg");

  background-repeat: no-repeat;

  background-position: left center;

  background-size: 460px;

  opacity: .05;

  pointer-events: none;
}


.moit-resp-hero__content {

  position: relative;

  z-index: 2;

  max-width: 920px;
}


.moit-resp-hero__eyebrow {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  padding: .55rem 1rem;

  border-radius: 999px;

  background:
    rgba(11,60,93,.06);

  color: var(--moit-primary);

  font-size: .9rem;

  font-weight: 700;

  margin-bottom: 1rem;
}


.moit-resp-hero__title {

  margin: 0 0 1rem;

  color: var(--moit-primary);

  font-size: clamp(1.6rem,3vw,2.2rem);

  line-height: 1.15;

  font-weight: 800;
}


.moit-resp-hero__description {

  margin: 0;

  max-width: 850px;

  color: var(--moit-text);

  line-height: 1.9;

  font-size: .98rem;
}


/* ==========================================================
   STATISTICS
   ========================================================== */

.moit-resp-stats {

  display: grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap: 1rem;

  margin-bottom: 3rem;
}


.moit-resp-stat-card {

  background: var(--moit-card-bg);

  border: 1px solid var(--moit-border);

  border-radius: var(--moit-radius-md);

  padding: 1.75rem;

  text-align: center;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;

  box-shadow: var(--moit-shadow-sm);
}


.moit-resp-stat-card:hover {

  transform: translateY(-4px);

  border-color: #cfdde8;

  box-shadow: var(--moit-shadow-md);
}


.moit-resp-stat-card__number {

  display: block;

  color: var(--moit-primary);

  font-size: 2.25rem;

  font-weight: 800;

  line-height: 1;
}


.moit-resp-stat-card__label {

  display: block;

  margin-top: .65rem;

  color: var(--moit-text-light);

  font-weight: 600;
}


/* ==========================================================
   INTRO SECTION
   ========================================================== */

.moit-resp-section-intro {

  text-align: center;

  max-width: 900px;

  margin:
    0 auto
    3rem;
}


.moit-resp-axis__content h3 {

  color: var(--moit-primary);

  font-size: 1.35rem;

  font-weight: 800;

  margin-bottom: 1rem;
}


.moit-resp-section-intro p {

  margin: 0;

  color: var(--moit-text);

  line-height: 2;
}


/* ==========================================================
   AXIS SECTIONS
   ========================================================== */

.moit-resp-axis {

  background: var(--moit-card-bg);

  border: 1px solid var(--moit-border);

  border-radius: 24px;

  padding: 2rem;

  margin-bottom: 2rem;

  box-shadow: var(--moit-shadow-sm);

  transition:
    box-shadow .25s ease,
    transform .25s ease;
}

.moit-resp-axis:hover {

  box-shadow: var(--moit-shadow-md);
}


.moit-resp-axis__header {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  margin-bottom: 2rem;

  padding-bottom: 1.5rem;

  border-bottom: 1px solid #edf2f5;
}


.moit-resp-axis__icon {

  width: 64px;

  height: 64px;

  flex-shrink: 0;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      var(--moit-primary),
      var(--moit-secondary)
    );

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  box-shadow:
    0 10px 25px rgba(11,60,93,.18);
}


.moit-resp-axis__icon svg {

  width: 34px;

  height: 34px;

  fill: currentColor;
}


.moit-resp-axis__content h2 {

  margin: 0 0 .75rem;

  color: var(--moit-primary);

  font-size: 1.6rem;

  font-weight: 800;
}


.moit-resp-axis__content p {

  margin: 0;

  color: var(--moit-text);

  line-height: 1.9;

  max-width: 850px;
}


/* ==========================================================
   RESPONSIBILITIES GRID
   ========================================================== */

.moit-resp-items {

  display: grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap: 1rem;
}


/* ==========================================================
   RESPONSIBILITY CARD
   ========================================================== */

.moit-resp-item {

  position: relative;

  background: #fbfcfd;

  border: 1px solid #e7eef2;

  border-radius: 18px;

  padding: 1.4rem 1.4rem 1.4rem 4.3rem;

  min-height: 100px;

  display: flex;

  align-items: center;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.moit-resp-item:hover {

  transform: translateY(-4px);

  border-color: #cfdde8;

  box-shadow:
    0 12px 28px rgba(0,0,0,.05);
}


.moit-resp-item::before {

  content: "";

  position: absolute;

  top: 14px;

  bottom: 14px;

  left: 0;

  width: 4px;

  border-radius: 4px;

  background:
    linear-gradient(
      to bottom,
      var(--moit-accent),
      rgba(193,154,107,.20)
    );
}


.moit-resp-item__number {

  position: absolute;

  top: 50%;

  left: 1rem;

  transform: translateY(-50%);

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: var(--moit-accent);

  color: #fff;

  font-size: .85rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:
    0 6px 14px rgba(193,154,107,.25);
}


.moit-resp-item h3 {

  margin: 0;

  color: var(--moit-primary);

  font-size: 1rem;

  line-height: 1.8;

  font-weight: 700;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.moit-resp-footer {

  margin-top: 4rem;

  padding: 3rem;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fcfc
    );

  border: 1px solid var(--moit-border);

  text-align: center;

  box-shadow: var(--moit-shadow-sm);
}


.moit-resp-footer h2 {

  margin: 0 0 1rem;

  color: var(--moit-primary);

  font-size: 1.45rem;

  font-weight: 800;
}


.moit-resp-footer p {

  max-width: 900px;

  margin:
    0 auto
    2rem;

  color: var(--moit-text);

  line-height: 2;
}


.moit-resp-footer__links {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 1rem;
}


.moit-resp-footer__links a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 180px;

  padding: .95rem 1.5rem;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      var(--moit-primary),
      var(--moit-secondary)
    );

  color: #fff;

  font-weight: 700;

  text-decoration: none;

  transition:
    transform .25s ease,
    opacity .25s ease;
}


.moit-resp-footer__links a:hover {

  transform: translateY(-3px);

  opacity: .95;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 992px) {

  .moit-resp-axis__header {

    align-items: flex-start;
  }

}


@media (max-width: 768px) {

  .moit-resp-axis {

    padding: 1.5rem;
  }

  .moit-resp-axis__header {

    flex-direction: column;

    text-align: center;

    align-items: center;
  }

  .moit-resp-items {

    grid-template-columns: 1fr;
  }

  .moit-resp-item {

    min-height: auto;
  }

  .moit-resp-footer {

    padding: 2rem 1.5rem;
  }

}


@media (max-width: 576px) {

  .moit-resp-hero {

    padding: 1.75rem 1.25rem;
  }

  .moit-resp-stat-card {

    padding: 1.25rem;
  }

  .moit-resp-stat-card__number {

    font-size: 2rem;
  }

  .moit-resp-axis__icon {

    width: 60px;

    height: 60px;
  }

  .moit-resp-axis__icon svg {

    width: 28px;

    height: 28px;
  }

  .moit-resp-item {

    padding:
      1.15rem
      1rem
      1.15rem
      4rem;
  }

  .moit-resp-item h3 {

    font-size: .95rem;
  }

}