/* ==========================================================================
   Chandigarh Roadshow landing page — extends css/style.css design tokens
   ========================================================================== */

/* Hero */
.rs-hero { height: auto; min-height: 640px; padding: 190px 0 90px; align-items: flex-start; }
/* The shared .hero-content rule carries its own max-width:780px, which — as a
   flex item with auto margins — gets CENTERED inside the hero rather than
   pinned left, so its inset never actually matches the header's .container
   (also centered, but at a different width, hence a different inset). Cancel
   that out and let .hero-content use the exact same box as the header's own
   .container (same max-width, same padding), so their left edges are
   identical by construction. The narrower reading-width cap then lives on
   this plain-block inner wrapper, which has no auto-margins to fight. */
.rs-hero .hero-content { max-width: 1240px; }
.rs-hero-inner { max-width: 920px; margin: 0; }
.rs-hero .hero-content h1 { font-size: clamp(32px, 4.4vw, 54px); }
/* The city name is italic text filled by a clipped gradient; the italic's last
   letter overhangs its box and got cut off. Pad the box so the clip includes it
   (negative margin cancels the extra width so layout doesn't shift). */
.rs-hero .hero-content h1 em { padding-right: 0.18em; margin-right: -0.18em; }
.rs-hero .hero-media::after {
  /* No added gradient — the supplied photo is used as-is. */
  background: none;
}
.rs-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.rs-pill {
  display: inline-flex; align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  background: rgba(255,255,255,0.94); color: var(--navy);
}
.rs-pill-solid { background: var(--grad-blue); color: var(--white); }

/* Info bar (Date / Venue / Access) */
.rs-info-bar { background: var(--navy); border-top: 1px solid rgba(255,255,255,0.08); }
.rs-info-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 26px 28px;
}
.rs-info-bar-inner > div {
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.rs-info-bar-inner > div:last-child { border-right: none; }
/* Direct-child combinator — this must only style the "DATE/VENUE/ACCESS" label
   span, not the .rs-date-year span nested inside <strong> below (a plain
   `.rs-info-bar-inner span` selector matches both, at any depth). */
.rs-info-bar-inner > div > span {
  display: block;
  font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--blue-light); margin-bottom: 6px;
}
.rs-info-bar-inner strong {
  /* display:block so this element's own line-height sets the line spacing —
     as inline text, the parent's 1.6 line-height strut kept wrapped lines loose. */
  display: block;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--white);
  line-height: 1.3;
}
.rs-date-year { color: inherit; }

/* Why Attend cards */
.rs-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.rs-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
}
.rs-card-icon {
  display: block;
  width: 12px; height: 12px;
  background: var(--blue);
  transform: rotate(45deg);
  border-radius: 3px;
  margin-bottom: 20px;
}
.rs-card h3 { font-size: 19px; margin-bottom: 10px; }
.rs-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

/* Featured developers strip */
.rs-dev-strip {
  background-color: var(--navy);
  background-image: url('../assets/images/roadshow/wave-bg.jpg');
  background-size: cover;
  background-position: center;
  padding: 56px 0;
  text-align: center;
}
.rs-dev-eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 34px;
}
.rs-dev-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px;
}
.rs-dev-logos img {
  height: 64px; width: auto; opacity: 0.92;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
/* Azizi and Sobha artwork fills its frame more than BNW/Vincitore do, so at the
   same height they read larger than in the Figma design — scale just those two.
   (Matched on the logo's alt text, which is set per attachment in the Media Library.) */
.rs-dev-logos img[alt="Azizi"], .rs-dev-logos img[alt="Sobha Realty"] { height: 46px; }
.rs-dev-logos img:hover { transform: translateY(-4px) scale(1.06); opacity: 1; }

/* Show-only offers */
.rs-offer-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rs-offer { padding: 38px 30px; border-right: 1px solid var(--line); }
.rs-offer:last-child { border-right: none; }
.rs-offer strong {
  display: block; font-family: var(--font-display); font-size: 32px; color: var(--navy); margin-bottom: 8px;
}
.rs-offer span {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blue-deep); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--line);
}
.rs-offer p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* Why Dubai split section */
.rs-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 560px; }
.rs-split-media { position: relative; overflow: hidden; }
.rs-split-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.rs-split-body { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.rs-split-body h2 { color: var(--white); font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
.rs-split-body > p { color: rgba(255,255,255,0.78); font-size: 15.5px; margin-bottom: 40px; max-width: 480px; }
.rs-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; }
.rs-reason { display: flex; gap: 16px; }
.rs-reason .num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; color: var(--blue-light);
}
.rs-reason h4 { color: var(--white); font-size: 16px; margin-bottom: 6px; }
.rs-reason p { color: rgba(255,255,255,0.7); font-size: 13.5px; line-height: 1.5; }

/* Register form card */
.rs-register-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 56px 64px;
  /* Full container width, same as .rs-offer-card — no separate max-width. */
  width: 100%;
}
.rs-register-card h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 10px; }
.rs-register-card > p { color: var(--ink-soft); font-size: 15px; margin-bottom: 34px; }
.rs-register-card .form-grid { margin-top: 0; }
.rs-register-card .field.full { display: block; }
.rs-register-card .field.full .btn { width: auto; min-width: 260px; }

/* Responsive */
@media (max-width: 768px) {
  .rs-dev-strip { background-image: url('../assets/images/roadshow/wave-bg-mobile.jpg'); }
}
@media (max-width: 980px) {
  .rs-cards { grid-template-columns: 1fr 1fr; }
  .rs-offer-card { grid-template-columns: 1fr 1fr; }
  .rs-offer { border-bottom: 1px solid var(--line); }
  .rs-offer:nth-child(2n) { border-right: none; }
  .rs-split { grid-template-columns: 1fr; }
  .rs-split-media { height: 320px; }
  .rs-split-body { padding: 60px 28px; }
  .rs-reasons { grid-template-columns: 1fr; }
  .rs-register-card { padding: 34px 24px; }
  .rs-register-card .field.full .btn { width: 100%; min-width: 0; }
  .rs-dev-logos { gap: 56px; }
  .rs-dev-logos img { height: 48px; }
  .rs-dev-logos img[alt="Azizi"], .rs-dev-logos img[alt="Sobha Realty"] { height: 36px; }

  /* Between the 600px phone tier and full desktop, the 3 columns are narrow
     enough that Venue/Access wrap onto 2 lines at the full 18px size — but
     with desktop's line-height that wrap looks loose/accidental rather than
     deliberate. Tighten size + line-height so a wrap here reads intentionally. */
  .rs-info-bar-inner { padding: 22px 16px; }
  .rs-info-bar-inner > div { padding: 0 10px; }
  .rs-info-bar-inner strong { font-size: 13.5px; line-height: 1.25; }
}
@media (max-width: 600px) {
  .rs-cards { grid-template-columns: 1fr; }
  .rs-hero { padding: 175px 0 70px; }

  /* Match the Figma mobile spec: Date/Venue/Access and the offer stats stay
     multi-column (3 and 2 respectively) even at phone width, just smaller —
     not stacked into single rows. */
  .rs-info-bar-inner { padding: 20px 10px; }
  .rs-info-bar-inner > div { padding: 0 4px; }
  .rs-info-bar-inner > div > span { font-size: 9.5px; letter-spacing: 1px; }
  .rs-info-bar-inner strong { font-size: 12px; line-height: 1.15; }
  /* Force the same two-line rhythm as Venue/Access, which wrap naturally at this width. */
  .rs-date-year { display: block; }

  .rs-offer { padding: 24px 16px; }
  .rs-offer strong { font-size: 24px; }

  /* Developer logos become a clean 2x2 grid rather than a wrapped row. */
  .rs-dev-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .rs-dev-logos img { height: 40px; margin: 0 auto; }
  .rs-dev-logos img[alt="Azizi"], .rs-dev-logos img[alt="Sobha Realty"] { height: 30px; }
}