/* ================================================================
   VICTORIE — About Page  (assets/css/about.css)
   Bootstrap 5 + custom. Prefix: .vab-
================================================================ */

/* ─ Hero ──────────────────────────────────────────────────────── */
.vab-hero {
  height: 332px;
  background: var(--v-primary)
    radial-gradient(closest-side, rgba(62,49,51,0) 0%, rgba(62,49,51,.5) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.vab-hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(62,49,51,0) 0%, rgba(62,49,51,.45) 100%);
  pointer-events: none;
}
@media (max-width:767px) { .vab-hero { height: 200px; } }

/* ─ Typography helpers ───────────────────────────────────────────── */
.vab-section-title {
  font-family: var(--v-font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--v-text);
  margin-bottom: 1.25rem;
}
.vab-section-text {
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.8;
  color: #222;
  margin: 0 auto;
}
.vab-img-ph { background: #d9c8cc; }

/* ─ Mission & Vision ──────────────────────────────────────────── */
.vab-mv {
  background: var(--v-surface);
  padding: 6rem 0 0;
}
.vab-img-portrait {
  display: block;
  border-radius: 16px 16px 0 0;
  aspect-ratio: 582 / 479;
  object-fit: cover;
}

/* ─ Our Story section wrapper ───────────────────────────────────── */
.vab-story {
  background: var(--v-surface);
  padding: 6rem 0 0;
}

/* ─ Timeline Slider ──────────────────────────────────────────────── */
.vab-slider-outer {
  overflow: hidden;
  padding-left: 30%; /* slides start 30% from left; 30% > 35px so year is always visible */
  /* Right side intentionally has no padding — images bleed to edge */
  cursor: grab;
  user-select: none;
}
.vab-slider-outer:active { cursor: grabbing; }

.vab-slider-track {
  display: flex;
  gap: 32px;
  transition: transform .65s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}

/* Each slide:
   image (flex 1) │ text+arrow (280px)
   Year is absolutely positioned inside the image wrap
   Images ~30 % smaller: flex-basis derived from 0.7 × (100% − text − peek) + text */
.vab-slide {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: start;
  flex: 0 0 calc(70% - 56px);
  min-width: calc(70% - 56px);
  gap: 0;
}

/* ---- Year: absolutely positioned, extends to the left of the image ---- */
.vab-slide__year {
  position: absolute;
  z-index: 2;
  left: -35px;
  font-family: var(--v-font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: #3E3133;
  line-height: 1;
}

/* Year position variants */
.vab-slide--year-top    .vab-slide__year { top: 30px; }
.vab-slide--year-center .vab-slide__year { top: 50%; transform: translateY(-50%); }
.vab-slide--year-bottom .vab-slide__year { bottom: 30px; }

.vab-slide__img-wrap {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: visible; /* allow year to extend past the image edge */
  border-radius: 16px;
}
.vab-slide__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  transition: transform .5s ease;
  pointer-events: none;   /* pass all pointer events to parent so drag works on images */
  user-select: none;
  -webkit-user-drag: none;
}
.vab-slide:hover .vab-slide__img { transform: scale(1.025); }

/* Placeholder */
.vab-slide__img.vab-img-ph {
  background: #d9c8cc;
  aspect-ratio: 16 / 9;
}

.vab-slide__content {
  grid-column: 2;
  align-self: center;
  padding: 2.5rem 1rem 2.5rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}

.vab-slide__text {
  flex: 1;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.85;
  color: #444;
  margin: 0;
}

/* Plain › arrow — sits at right edge of content column, before next slide peeks */
.vab-slide__next {
  background: none;
  border: none;
  padding: 0;
  color: var(--v-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: .35;
  transition: opacity .2s;
  flex-shrink: 0;
}
.vab-slide__next:hover { opacity: .85; }

/* Dots navigation */
.vab-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 2rem 0 4rem;
}
.vab-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9c8cc;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0;
}
.vab-slider-dot.is-active {
  background: var(--v-primary);
  transform: scale(1.3);
}

/* Mobile — stack layout */
@media (max-width: 767px) {
  .vab-slide {
    grid-template-columns: 1fr;
    flex: 0 0 90%;
    min-width: 90%;
  }
  .vab-slide__year { font-size: 1.25rem; left: 20px; } /* reset negative left on mobile */
  .vab-slide--year-top    .vab-slide__year { top: 16px; }
  .vab-slide--year-center .vab-slide__year { top: 50%; transform: translateY(-50%); }
  .vab-slide--year-bottom .vab-slide__year { bottom: 16px; }
  .vab-slide__content { padding: 1.5rem 1rem; }
  .vab-slider-outer { padding-left: 1.25rem; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .vab-slide {
    grid-template-columns: 1fr 240px;
    flex: 0 0 calc(70% - 26px);
    min-width: calc(70% - 26px);
  }
  .vab-slide__content { padding: 2rem 1.5rem; }
}

/* ─ Features ───────────────────────────────────────────────────────── */
.vab-features {
  background: var(--v-surface);
  padding: 5rem 0 6rem;
  border-top: 1px solid #e8dfe1;
}
.vab-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .875rem;
}
.vab-feat__icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--v-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v-text);
  flex-shrink: 0;
}
.vab-feat__icon-circle img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.vab-feat__title {
  font-family: var(--v-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin: 0;
}
.vab-feat__text {
  font-size: .9rem;
  color: #aaa;
  line-height: 1.7;
  margin: 0;
  max-width: 280px;
}