/* ==========================================================
   Nalapad Group – About Us page
   Needs base.css. The page hero and CTA band load their own
   component styles (components/page-hero.css, components/cta.css).
   Sections, in page order:
     1. Story     (about/story.blade.php)
     2. Vision    (about/vision.blade.php)
     3. Mission   (about/mission.blade.php)
     4. Values    (about/values.blade.php)
   ========================================================== */


/* ==========================================================
   1. STORY: centred column with a drop cap
   ========================================================== */
.cs { padding-block: var(--section-y); background: var(--color-white); }
.cs__inner { max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.cs__title { margin-bottom: 40px; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.15; }

/* Body paragraphs read left-aligned inside the centred column */
.cs__inner p:not(.eyebrow) { margin: 0 0 22px; font-size: 17px; line-height: 1.85; color: var(--color-text); text-align: start; }
.cs__inner p.cs__drop { font-size: 19px; color: var(--color-ink); }
.cs__drop::first-letter {
  float: left;
  margin: 6px 14px 0 0;
  font-family: var(--font-serif);
  font-size: 76px;
  line-height: .8;
  color: var(--color-primary);
}
[dir="rtl"] .cs__drop::first-letter { float: right; margin: 6px 0 0 14px; }


/* ==========================================================
   2. VISION: full-width photo with a centred quote
   ========================================================== */
.vision {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 40vw, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  background: var(--color-ink);
  overflow: hidden;
}
/* Photo sizing comes from .bg-img */
.vision::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 28, 56, .7); }
.vision__inner { max-width: 960px; padding: 96px var(--gutter); }
.vision__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.25;
}


/* ==========================================================
   3. MISSION: heading on the left, points on the right.
   A short blue rule marks each point. Logical properties, so RTL needs no extra rules.
   ========================================================== */
.mm { background: var(--color-white); padding-block: var(--section-y); }
.mm__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.mm__head { position: sticky; top: 120px; }      /* stays beside the list while it scrolls */

.mm__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.mm__item {
  position: relative;
  padding-block: 30px;
  padding-inline-start: 48px;
  border-bottom: 1px solid var(--color-line);
}
.mm__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(30px + .9em);
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  transition: width .3s ease;
}
.mm__item p { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.8; color: var(--color-text); transition: color .3s ease; }
.mm__item:hover::before { width: 32px; }
.mm__item:hover p { color: var(--color-ink); }
.mm__item:nth-child(2) { transition-delay: .06s; }
.mm__item:nth-child(3) { transition-delay: .12s; }
.mm__item:nth-child(4) { transition-delay: .18s; }

@media (max-width: 860px) {
  .mm__inner { grid-template-columns: 1fr; gap: 32px; }
  .mm__head { position: static; }
  .mm__item { padding-block: 24px; padding-inline-start: 36px; }
  .mm__item::before { top: calc(24px + .9em); width: 18px; }
}


/* ==========================================================
   4. VALUES: five cards on a soft background
   ========================================================== */
.cv { padding-block: var(--section-y); background: var(--color-soft); }
.cv__head { text-align: center; margin-bottom: 56px; }

.cv__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.cv__grid li {
  text-align: center;
  padding: 36px 22px 32px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cv__icon {
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
  transition: background-color .3s, color .3s;
}
.cv__icon svg { width: 36px; height: 36px; }
/* Hover: the circle fills blue and the icon turns white */
.cv__grid li:hover .cv__icon { background: var(--color-primary); color: var(--color-white); }

.cv__grid h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: var(--color-ink); }
.cv__grid p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text); }
.cv__grid li:nth-child(2) { transition-delay: .06s; }
.cv__grid li:nth-child(3) { transition-delay: .12s; }
.cv__grid li:nth-child(4) { transition-delay: .18s; }
.cv__grid li:nth-child(5) { transition-delay: .24s; }

@media (max-width: 1100px) { .cv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .cv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .cv__grid { grid-template-columns: 1fr; } }