/* =========================================================
   about.css — зөвхөн About Us хуудсанд
   ========================================================= */

/* ===== Танилцуулга: зүүн талд текст, баруун талд 3 зураг ===== */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 56px;
  padding: 48px 0 72px;
}

.about-intro h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--charcoal);
  margin-bottom: 20px;
}
/* Гарчгийн доорх алтан шар "бийрийн" зураас */
.about-intro h1 .underline {
  position: relative;
  white-space: nowrap;
}
.about-intro h1 .underline::after {
  content: "";
  position: absolute; left: -4%; right: -4%; bottom: -10px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C60 3 140 2 296 6' fill='none' stroke='%23D9A96C' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.about-intro p {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 520px;
}
.about-intro p + p { margin-top: 24px; }
.about-intro strong { font-weight: 700; }

/* Зургийн мозайк */
.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.about-photos .col { display: grid; gap: 16px; }
.about-photos .col--offset { margin-top: 80px; }
.about-photos img {
  display: block;
  width: 100%; height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* ===== Бидний үнэт зүйлс ===== */
.about-values { background: var(--ivory); }
.about-values h2 { text-align: center; margin-bottom: 32px; color: var(--charcoal); }
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.value {
  padding: 24px;
  background: #fff;
  border-top: 4px solid var(--sand-gold);
  border-radius: var(--radius);
}
.value h3 { margin-bottom: 8px; color: var(--altai-forest); }

/* ===== Таблет, гар утас ===== */
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 36px; padding-top: 32px; }
  .about-intro p { max-width: none; }
}
@media (max-width: 560px) {
  .about-photos { gap: 10px; }
  .about-photos .col { gap: 10px; }
  .about-photos .col--offset { margin-top: 40px; }
  .about-intro p { font-size: 1.05rem; }
}

/* ===== Rooted in Mongolia: зүүн талд гарчиг (наалдана), баруун талд 4 дугаартай догол мөр ===== */
.about-story { background: var(--ivory); padding: 80px 0; }
.story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.story-head { position: sticky; top: calc(var(--header-h) + 24px); }
.story-head h2 { color: var(--altai-forest); margin-bottom: 24px; }
.story-head h2 span { display: block; color: var(--charcoal); }
.story-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  padding-left: 20px;
  border-left: 4px solid var(--sand-gold);
}

.story-list { display: grid; gap: 16px; }
.story-item {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 20px;
  padding: 26px 28px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e6e8df;
}
.story-num {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--steppe-green);
}
.story-item h3 { font-size: 1.15rem; color: var(--altai-forest); margin-bottom: 8px; }
.story-item p { color: #4a4f4f; line-height: 1.65; font-size: 1rem; }

.story-closing {
  margin-top: 48px;
  padding: 36px 40px;
  background: var(--altai-forest);
  color: var(--ivory);
  border-radius: 14px;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-head { position: static; }
}
@media (max-width: 560px) {
  .about-story { padding: 56px 0; }
  .story-item { padding: 20px; gap: 14px; }
  .story-closing { padding: 26px 22px; }
}

/* ===== Meet the team: team.html руу орох том карт ===== */
.about-team-cta { padding: 64px 0 0; }

/* TripAdvisor шагнал: Meet the team-ийн дээр */
.award-intro { margin-bottom: 16px; font-weight: 700; color: var(--charcoal); }
.award-card {
  display: flex; align-items: center; gap: 32px;
  margin-bottom: 32px;
  padding: 28px 36px;
  border: 1px solid #e6e8df;
  border-radius: 14px;
  background: #fff;
}
.award-card img { flex: none; width: 96px; height: auto; mix-blend-mode: multiply; } /* зургийн цайвар дэвсгэр картад уусна */
.award-text h2 { margin-bottom: 10px; font-size: clamp(1.15rem, 2vw, 1.35rem); color: var(--charcoal); }
.award-text p { max-width: 820px; color: #4d5450; line-height: 1.7; }
.award-link {
  display: inline-block; margin-top: 14px;
  font-weight: 700; color: var(--altai-forest);
  text-decoration: none;
}
.award-link:hover { text-decoration: underline; }
.team-cta {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: 300px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 14px;
  background: var(--altai-forest);
  color: var(--ivory);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.team-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(27, 94, 59, 0.25); }
.team-cta img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.team-cta-text { padding: 40px 48px; align-self: center; }
.team-cta h2 { color: var(--ivory); margin-bottom: 10px; }
.team-cta p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 24px; }
.team-cta-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius);
  background: var(--ivory);
  color: var(--altai-forest);
  font-weight: 700;
}
.team-cta:hover .team-cta-link { background: var(--sand-gold); color: var(--charcoal); }

@media (max-width: 700px) {
  .team-cta { grid-template-columns: 1fr; grid-template-rows: auto; }
  .team-cta img { height: 200px; min-height: 0; }
  .team-cta-text { padding: 28px 24px; }
  .award-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; }
  .award-card img { width: 80px; }
}

/* ===== What makes our journeys special: 3 зурагтай карт ===== */
.about-special { padding-top: 24px; }
.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--altai-forest);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-special h2 { color: var(--charcoal); margin-bottom: 32px; }

.special-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.special-card img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 18px;
}
.special-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.special-card p { color: #5b6060; line-height: 1.6; }

@media (max-width: 900px) {
  .special-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .special-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== Moments from our journeys: masonry галерей ===== */
/* Багана бүрийг 8 мөрт хуваана: хэвтээ зураг 6 мөр, босоо зураг 10 мөр эзэлнэ */
.about-moments { padding: 24px 0 72px; }
.about-moments h2 { color: var(--altai-forest); margin-bottom: 10px; }
.moments-lead { color: #5b6060; margin-bottom: 32px; max-width: 640px; }

.moments-grid {
  --cols: 4;
  --gap: 16px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) / 8);
  grid-auto-flow: dense;
  column-gap: var(--gap);
}
.moment { margin: 0; grid-row: span 6; padding-bottom: var(--gap); }
.moment--tall { grid-row: span 10; }
.moment img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 14px;
  background: #e9ebe4;
}
.moment.is-extra { display: none; }
.moments-grid.is-open .moment.is-extra { display: block; }

.moments-more { text-align: center; margin-top: 16px; }

@media (max-width: 700px) {
  .moments-grid { --cols: 2; --gap: 10px; }
  .moment img { border-radius: 10px; }
}