/* =============================================================
   COENGR EYE — About Page Styles
   about.css
   ============================================================= */

/* ── Brand Story ───────────────────────────────────────────── */
.brand-story {
  padding: var(--section-padding);
}

.brand-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.brand-story__image {
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-card);
}

.brand-story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-story__text p {
  margin-bottom: 20px;
}

.pull-quote {
  border-left: 3px solid var(--color-accent);
  padding: 12px 20px;
  margin: 28px 0;
  font-size: 17px;
  font-style: italic;
  color: var(--color-text-white);
  background-color: rgba(0, 180, 216, 0.06);
  border-radius: 0 8px 8px 0;
}

/* ── Mission & Vision ──────────────────────────────────────── */
.mission-vision {
  padding: var(--section-padding);
  background-color: var(--color-bg-card);
}

.mission-vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-grid);
}

.mv-card {
  padding: 44px 36px;
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
}

.mv-card--mission {
  background-color: rgba(0, 180, 216, 0.06);
  border-color: rgba(0, 180, 216, 0.25);
}

.mv-card__label {
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  margin-bottom: 16px;
}

.mv-card__title {
  font-size: 24px;
  color: var(--color-text-white);
  margin-bottom: 16px;
}

.mv-card__text {
  font-size: var(--text-body);
  color: var(--color-text-body);
  line-height: 1.75;
}

/* ── Equipment ─────────────────────────────────────────────── */
.equipment {
  padding: var(--section-padding);
}

.equipment__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
}

.eq-card {
  text-align: center;
}

.eq-card__image {
  aspect-ratio: 4 / 3;
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 20px;
  background-color: var(--color-bg-card);
}

.eq-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eq-card__name {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-white);
  margin-bottom: 6px;
}

.eq-card__spec {
  font-size: var(--text-caption);
  color: var(--color-text-body);
}

/* ── UAE Coverage ──────────────────────────────────────────── */
.uae-coverage {
  padding: var(--section-padding);
  background-color: var(--color-bg-card);
  text-align: center;
}

.uae-coverage__text {
  max-width: 560px;
  margin: 0 auto 40px;
}

/* ── About Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .equipment__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .brand-story__grid    { grid-template-columns: 1fr; gap: 40px; }
  .mission-vision__grid { grid-template-columns: 1fr; }
  .equipment__grid      { grid-template-columns: repeat(2, 1fr); }
}