/* =====================================================================
   Ridhaan Travels — About Us template
   Additive only: tokens, buttons, .section, .page-hero etc. all come
   from the shared assets/css/site.css loaded before this file. Scoped
   under .rt for the same specificity reasons as site.css.
===================================================================== */

/* Story split (image + copy) */
.rt .story-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .rt .story-grid { grid-template-columns: .9fr 1.1fr; gap: 56px; } }

.rt .story-media img {
  border-radius: 1rem;
  box-shadow: var(--shadow-lift);
  width: 100%;
  height: 340px;
  object-fit: cover;
}
.rt .story-copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.rt .story-copy p { color: var(--muted-foreground); font-size: .95rem; margin: 0 0 16px; }
.rt .story-copy p:last-child { margin-bottom: 0; }

/* Value grid ("why choose us") */
.rt .value-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rt .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .rt .value-grid { grid-template-columns: repeat(3, 1fr); } }

.rt .value-card {
  padding: 28px 24px;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rt .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.rt .value-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--accent);
  margin-bottom: 16px;
}
.rt .value-card h3 { font-size: 1rem; margin-bottom: 8px; }
.rt .value-card p { font-size: .88rem; color: var(--muted-foreground); margin: 0; line-height: 1.6; }

/* CTA banner */
.rt .cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  border-radius: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-soft);
}
.rt .cta-banner h2 { color: var(--foreground); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.rt .cta-banner p { color: var(--muted-foreground); margin: 0; font-size: .92rem; }
.rt .cta-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }