@import url("../base.css");

:root:not([data-theme="light"]) {
  --gold: #c9931a;
  --gold-light: #dca832;
  --gold-dark: #9e7114;
  --bg: #0d0d0d;
  --line-color: #3c3c3c;
  --dot-color: #c9931a;
  --text-white: #ffffff;
  --text-muted: #777777;
  --font: "Inter", system-ui, sans-serif;

  /* how tall the balloon + pin tail is */
  --balloon-h: 90px;
  /* half the dot diameter — used to align everything */
  --dot-r: 9px;
  /* vertical spacing above/below the line */
  --arm: 80px;
}

[data-theme="light"] {
  --gold: #c47f0f;
  --gold-light: #d4921a;
  --gold-dark: #a56a0c;
  --bg: #f7f6f3;
  --line-color: #e4e2dc;
  --dot-color: #c47f0f;
  --text-white: #141414;
  --text-muted: #666666;
}

/* ══════════════════════════════════════
       HERO
    ══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--navbar-height);
}

/* Background image */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100vh;

  background-image: url("../../assets/home/heroImage.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark overlay layers (from Figma: #000 50%, #202020 0%, #000 67%, gradient) */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Extra bottom vignette */
.hero__overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  z-index: 2;
  background: linear-gradient(to top, var(--color-overlay-vignette) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Content */
.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;

  h1 {
    font-size: 60px;
  }

  p {
    font-size: 18px;
    width: 90%;
    line-height: 20px;
  }
}

/* ── WHY SECTION ─────────────────────────── */
.why {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ── HEADER ──────────────────────────── */
.why__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.why__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.625rem;
}

.why__sub {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* ══════════════════════════════════════
       BENTO GRID
       Row 1: [card-wide (col 1-2)] [card-small (col 3)]
       Row 2: [card-small (col 1)] [card-wide (col 2-3)]
    ══════════════════════════════════════ */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
}

/* Card 1 — spans 2 cols, row 1 */
.why-card:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}

/* Card 2 — col 3, row 1 */
.why-card:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}

/* Card 3 — col 1, row 2 */
.why-card:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

/* Card 4 — spans cols 2-3, row 2 */
.why-card:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 2;
}

/* ── BASE CARD ───────────────────────── */
.why-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 280px;
  transition: 0.3s;
  cursor: default;

  /* bg image — replace url() per card */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.why-card:hover {
  border-color: rgba(212, 146, 26, 0.25);
  transform: translateY(-2px);
}

/* ── GRADIENT OVERLAY (per card) ─────── */
.why-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Card 1: dark left, golden-tinted right (phone image on right) */
.why-card:nth-child(1) .why-card__overlay {
  background: linear-gradient(
    105deg,
    rgba(10, 8, 5, 0.97) 0%,
    rgba(15, 10, 5, 0.88) 35%,
    rgba(30, 18, 5, 0.55) 60%,
    rgba(97, 56, 7, 0.459) 80%,
    rgba(107, 60, 6, 0.452) 100%
  );
}

/* Card 2: dark bottom, golden-tinted top-right (icon top-right) */
.why-card:nth-child(2) .why-card__overlay {
  background: linear-gradient(
    145deg,
    rgba(60, 35, 5, 0.15) 0%,
    rgba(20, 12, 3, 0.65) 45%,
    rgba(10, 8, 5, 0.97) 100%
  );
}

/* Card 3: dark overall with subtle golden bottom (icon bottom-right) */
.why-card:nth-child(3) .why-card__overlay {
  background: linear-gradient(
    135deg,
    rgba(10, 8, 5, 0.95) 0%,
    rgba(15, 10, 4, 0.8) 50%,
    rgba(40, 25, 5, 0.45) 80%,
    rgba(60, 38, 5, 0.2) 100%
  );
}

/* Card 4: dark left text area, golden-tinted right (icon right) */
.why-card:nth-child(4) .why-card__overlay {
  background: linear-gradient(
    100deg,
    rgba(10, 8, 5, 0.97) 0%,
    rgba(18, 12, 4, 0.85) 40%,
    rgba(35, 22, 4, 0.55) 65%,
    rgba(60, 38, 5, 0.25) 85%,
    rgba(80, 50, 5, 0.1) 100%
  );
}

/* ── WATERMARK DOTS pattern ──────────── */
/* subtle scattered symbols in bg */
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(
    circle,
    rgba(212, 146, 26, 0.12) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── CONTENT ─────────────────────────── */
.why-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

/* Card 1: text left, icon right */
.why-card:nth-child(1) .why-card__content {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Card 2: icon top-right, text bottom-left */
.why-card:nth-child(2) .why-card__content {
  justify-content: space-between;
}

/* Card 3: text top, icon bottom-right */
.why-card:nth-child(3) .why-card__content {
  justify-content: space-between;
}

/* Card 4: text left, icon right */
.why-card:nth-child(4) .why-card__content {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ── TEXT BLOCK ──────────────────────── */
.why-card__text {
  flex: 1;
  min-width: 0;
}

.why-card__title {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.why-card__desc {
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 380px;
}

/* ── ICON BLOCK ──────────────────────── */
.why-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d6ae64;
}

.why-card__icon svg {
  filter: drop-shadow(0 0 12px rgba(212, 178, 26, 0.35));
}

/* Card 1 icon: large phone+envelope illustration */
.why-card:nth-child(1) .why-card__icon svg {
  width: 220px;
  height: 220px;
}

/* Card 2 icon: top-right, self-align */
.why-card:nth-child(2) .why-card__icon {
  align-self: flex-end;
}
.why-card:nth-child(2) .why-card__icon svg {
  width: 100px;
  height: 100px;
}

/* Card 3 icon: bottom-right */
.why-card:nth-child(3) .why-card__icon {
  align-self: flex-end;
}
.why-card:nth-child(3) .why-card__icon svg {
  width: 110px;
  height: 110px;
}

/* Card 4 icon: large right */
.why-card:nth-child(4) .why-card__icon svg {
  width: 120px;
  height: 120px;
}

/* ── RESPONSIVE ──────────────────────── */
@media (max-width: 860px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-card:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .why-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .why-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .why-card:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

@media (max-width: 540px) {
  .why__grid {
    grid-template-columns: 1fr;
  }
  .why-card:nth-child(1),
  .why-card:nth-child(2),
  .why-card:nth-child(3),
  .why-card:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }
  .why-card:nth-child(1) .why-card__content,
  .why-card:nth-child(4) .why-card__content {
    flex-direction: column;
    align-items: flex-start;
  }
  .why-card__icon svg {
    width: 80px !important;
    height: 80px !important;
  }
}

/* ──  experience SECTION ─────────────────────────── */
.experience {
  margin-top: 100px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* ── ROW ─────────────────────────────── */
.exp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

/* Row 2: image on right → put image in col 2 via order */
.exp-row--reverse .exp-row__img {
  order: 2;
}
.exp-row--reverse .exp-row__text {
  order: 1;
}

/* ── IMAGE ───────────────────────────── */
.exp-row__img {
  width: 90%;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius-img);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 24px;
}

.exp-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-img);
  transition: 0.3s;
}

.exp-row__img:hover img {
  transform: scale(1.03);
}

/* ── TEXT ────────────────────────────── */
.exp-row__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.exp-row__title {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.25;
}

.exp-row__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  counter-reset: exp-counter;
}

.exp-row__list li {
  display: flex;
  gap: 0.75rem;
  counter-increment: exp-counter;
  font-size: clamp(0.875rem, 1.8vw, 1rem);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.exp-row__list li::before {
  content: counter(exp-counter) ".";
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  min-width: 1.25rem;
  padding-top: 1px;
}

/* ── RESPONSIVE ──────────────────────── */
@media (max-width: 700px) {
  .exp-row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Row 1: text first, then image */
  .exp-row:not(.exp-row--reverse) .exp-row__text {
    order: 1;
  }
  .exp-row:not(.exp-row--reverse) .exp-row__img {
    order: 2;
  }

  /* Row 2: text first, then image */
  .exp-row--reverse .exp-row__text {
    order: 1;
  }
  .exp-row--reverse .exp-row__img {
    order: 2;
  }

  .exp-row__img {
    aspect-ratio: 16 / 9;
  }
}

/* ─────────────────────────────────
       SECTION
    ───────────────────────────────── */
.story {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  margin-top: 100px;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story__header {
  width: 100%;
  text-align: center;
  margin-bottom: 4rem;
}
.story__title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}
.story__sub {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ─────────────────────────────────
       DESKTOP TIMELINE
    ───────────────────────────────── */
.tl {
  position: relative;
  /* total height = arm above + dot diameter + arm below */
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* The horizontal line — perfectly centred vertically at dot row */
.tl__line {
  position: absolute;
  top: calc(var(--arm) + var(--dot-r)); /* centre of dots */
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--line-color);
  transform: translateY(-50%);
}

/* One step column — flex cell keeps each step centered on the timeline */
.tl__step {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── LABEL ── */
.tl__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  height: var(--arm);
  display: flex;
  align-items: flex-end;
  padding-bottom: 14px;
  /* hidden for odd steps (they show label below) */
}

/* ── DOT ── */
.tl__dot {
  width: calc(var(--dot-r) * 2);
  height: calc(var(--dot-r) * 2);
  border-radius: 50%;
  background: var(--dot-color);
  border: 3px solid var(--bg);
  outline: 1.5px solid var(--dot-color);
  flex-shrink: 0;
  z-index: 2;
}

/* ── BALLOON ── */
.tl__balloon {
  height: var(--arm);
  display: flex;
  align-items: flex-start;
  padding-top: 14px;
}

/* Map-pin shape — LTR defaults; RTL overrides on .tl */
.tl {
  --pin-radius: 50% 50% 50% 0;
  --pin-rotate: 135deg;
  --pin-icon-rotate: 45deg;
  --pin-flip: 0deg;
}

html[dir="rtl"] .tl {
  --pin-radius: 50% 50% 0 50%;
  --pin-rotate: 45deg;
  --pin-icon-rotate: -45deg;
  --pin-flip: 180deg;
}

.tl__pin {
  width: 68px;
  height: 68px;
  border-radius: var(--pin-radius);
  transform: rotate(calc(var(--pin-rotate) + var(--pin-flip)));
  background: linear-gradient(
    135deg,
    var(--gold-light) 0%,
    var(--gold-dark) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(201, 147, 26, 0.38);
  position: relative;
}

.tl__pin svg {
  transform: rotate(calc(var(--pin-icon-rotate) + var(--pin-flip)));
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── FLIP for odd steps: balloon below the line, label above  ──
       Step 1 & 3 → balloon below (default above in HTML order, so we flip)
       Step 2 & 4 → balloon above (already default) */

/* Default: balloon ABOVE the dot (steps 2 & 4) */
/* Odd steps (1 & 3): balloon BELOW the dot */
.tl__step--below .tl__label {
  order: 3;
  align-items: flex-start;
  padding-bottom: 0;
  padding-top: 14px;
}
.tl__step--below .tl__dot {
  order: 2;
}
.tl__step--below .tl__balloon {
  order: 1;
  align-items: flex-end;
  padding-top: 0;
  padding-bottom: 14px;
}

/* "Below" steps: pin tail points up toward the timeline dot */
.tl__step--below {
  --pin-radius: 50% 0 50% 50%;
  --pin-rotate: 135deg;
  --pin-icon-rotate: -135deg;
}

html[dir="rtl"] .tl__step--below {
  --pin-radius: 0 50% 50% 50%;
  --pin-rotate: 45deg;
  --pin-icon-rotate: 135deg;
}

/* ─────────────────────────────────
       MOBILE TIMELINE  (≤ 680px)
       Vertical line centred, dots on it,
       even steps right / odd steps left
    ───────────────────────────────── */
@media (max-width: 680px) {
  body {
    padding: 3rem 1rem;
  }
  .story__header {
    margin-bottom: 2.5rem;
  }

  /* reset desktop absolute layout */
  .tl {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    justify-content: flex-start;
    /* left-right padding so arms don't clip */
    padding-inline: 0;
  }

  /* Vertical line exactly in the middle */
  .tl__line {
    top: 0;
    bottom: 0;
    inset-inline-start: 50%;
    width: 1.5px;
    height: 100%;
    transform: translateX(-50%);
  }

  /* Each step is now a flex ROW  */
  .tl__step {
    flex: none;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 110px;
  }

  /* Dot: always in centre of the row, sitting on the line */
  .tl__dot {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    flex-shrink: 0;
  }

  /* Label & balloon split left / right of the centre line */
  .tl__label,
  .tl__balloon {
    width: calc(50% - 24px); /* 24px = half-dot + small gap */
    height: fit-content;
    padding: 0;
    display: flex;
    align-items: center;
  }

  /* Steps 2 & 4: label toward start, balloon toward end */
  .tl__step:not(.tl__step--below) .tl__label {
    order: 1;
    justify-content: flex-end;
    padding-inline-end: 20px;
    text-align: end;
    white-space: normal;
  }
  .tl__step:not(.tl__step--below) .tl__balloon {
    order: 3;
    justify-content: flex-start;
    padding-inline-start: 20px;
  }

  /* Steps 1 & 3 (--below): balloon toward start, label toward end */
  .tl__step--below .tl__label {
    order: 3;
    justify-content: flex-start;
    padding-inline-start: 20px;
    text-align: start;
    white-space: normal;
  }
  .tl__step--below .tl__balloon {
    order: 1;
    justify-content: flex-end;
    padding-inline-end: 20px;
  }

  /* Reset flex ordering overrides from desktop */
  .tl__step--below .tl__dot {
    order: 2;
  }

  /* Pin size on mobile */
  .tl__pin {
    width: 54px;
    height: 54px;
  }
  .tl__pin svg {
    width: 22px;
    height: 22px;
  }

  /* Mobile: all pins point down toward the centre line */
  .tl {
    --pin-radius: 50% 50% 50% 0;
    --pin-rotate: -45deg;
    --pin-icon-rotate: 45deg;
  }

  html[dir="rtl"] .tl {
    --pin-radius: 50% 50% 0 50%;
    --pin-rotate: 45deg;
    --pin-icon-rotate: -45deg;
  }

  .tl__step--below {
    --pin-radius: 50% 50% 50% 0;
    --pin-rotate: -45deg;
    --pin-icon-rotate: 45deg;
  }

  html[dir="rtl"] .tl__step--below {
    --pin-radius: 0 50% 50% 50%;
    --pin-rotate: 135deg;
    --pin-icon-rotate: 135deg;
  }

  .tl__label {
    font-size: 0.75rem;
  }
}

/* ── CONTACT SECTION ─────────────────────────── */
.contact {
  padding-block: var(--space-20);
}

/* ── HEADER ──────────────────────────── */
.contact__header {
  text-align: center;
  margin-bottom: 3rem;
}

.contact__title {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: 0.625rem;
}

.contact__sub {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* ── CARDS GRID ──────────────────────── */
.contact__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* ── SINGLE CARD ─────────────────────── */
.contact__card {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  padding: 2.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base);
}

.contact__card:hover {
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-glow);
}

/* ── ICON WRAP (rings + core) ────────── */
.contact__icon-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact__icon-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
}

.contact__icon-ring--1 {
  width: 64px;
  height: 64px;
  opacity: 0.55;
}

.contact__icon-ring--2 {
  width: 78px;
  height: 78px;
  opacity: 0.28;
}

.contact__icon-ring--3 {
  width: 90px;
  height: 90px;
  opacity: 0.12;
}

.contact__icon-core {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(212, 146, 26, 0.22),
    rgba(212, 146, 26, 0.06)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(212, 146, 26, 0.35);
}

.contact__icon-core svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
}

/* ── INFO TEXT ───────────────────────── */
.contact__info {
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: center;
}

/* ── MAP ─────────────────────────────── */
.contact__map {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-image: url(../../assets/about-us/map.png);
}

/* Diagonal roads */
.contact__map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      transparent 45%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.04) 46%,
      transparent 46%
    ),
    linear-gradient(
      45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(255, 255, 255, 0.04) 31%,
      transparent 31%
    ),
    linear-gradient(
      160deg,
      transparent 55%,
      rgba(255, 255, 255, 0.03) 55%,
      rgba(255, 255, 255, 0.03) 56%,
      transparent 56%
    );
  pointer-events: none;
}

/* ── RESPONSIVE ──────────────────────── */
@media (max-width: 768px) {
  .contact__cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
    margin-bottom: 1.25rem;
  }

  .contact__map {
    height: 200px;
  }
}