/**
 * RoastMyDorm — homepage-specific stylesheet.
 * Scoped under .rmd-home so nothing here can collide with the legacy
 * inline <style> block in index.html's <head> (still used by the
 * preserved .navbar/.nav-menu/.hamburger/.signin-modal markup) or with any
 * other page that might someday reuse shared class names.
 *
 * Brand tokens per the homepage redesign spec - intentionally a separate,
 * smaller token set from frontend/css/roastmydorm-design-system.css (the
 * roommate section's system) rather than pulling that file in, since this
 * task is scoped to homepage-only files.
 */
:root {
  --rh-green: #10b981;
  --rh-green-dark: #059669;
  --rh-navy: #0f172a;
  --rh-bg: #fffcf7;
  --rh-surface: #ffffff;
  --rh-border: #ece5db;
  --rh-text: #0f172a;
  --rh-text-muted: #64748b;
  --rh-text-faint: #94a3b8;
  --rh-radius-sm: 12px;
  --rh-radius-md: 16px;
  --rh-radius-lg: 18px;
  --rh-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --rh-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --rh-space-1: 4px;
  --rh-space-2: 8px;
  --rh-space-3: 12px;
  --rh-space-4: 16px;
  --rh-space-5: 24px;
  --rh-space-6: 32px;
  --rh-space-7: 48px;
  --rh-space-8: 64px;
  --rh-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.rmd-home { background: var(--rh-bg); }
.rmd-home * { box-sizing: border-box; }
.rmd-home img { max-width: 100%; display: block; }
.rmd-home a { color: inherit; }

.rmd-home .rh-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--rh-space-5); }
.rmd-home .rh-section { padding: var(--rh-space-8) 0; }
.rmd-home .rh-section--alt { background: var(--rh-surface); border-top: 1px solid var(--rh-border); border-bottom: 1px solid var(--rh-border); }

.rmd-home .rh-head { max-width: 640px; margin: 0 0 var(--rh-space-6); }
.rmd-home .rh-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.rmd-home .rh-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rh-space-5); margin-bottom: var(--rh-space-6); }
.rmd-home .rh-head-row .rh-head { margin-bottom: 0; }
.rmd-home .rh-eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rh-green-dark); margin: 0 0 var(--rh-space-2); }
.rmd-home .rh-h2 { font-family: var(--rh-font-heading); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--rh-text); margin: 0 0 var(--rh-space-2); line-height: 1.2; }
.rmd-home .rh-lead { color: var(--rh-text-muted); font-size: 1rem; margin: 0; line-height: 1.55; }
.rmd-home .rh-link-more { flex-shrink: 0; font-weight: 700; color: var(--rh-green-dark); text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.rmd-home .rh-link-more:hover { text-decoration: underline; }

.rmd-home .rh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rh-space-2);
  font-family: var(--rh-font-body); font-weight: 700; font-size: 0.95rem;
  border-radius: 999px; border: none; cursor: pointer;
  min-height: 48px; padding: 0 var(--rh-space-6); text-decoration: none;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.rmd-home .rh-btn:active { transform: translateY(1px); }
.rmd-home .rh-btn--primary { background: var(--rh-green); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,0.3); }
.rmd-home .rh-btn--primary:hover { background: var(--rh-green-dark); }
.rmd-home .rh-btn--secondary { background: var(--rh-surface); color: var(--rh-text); border: 1.5px solid var(--rh-border); }
.rmd-home .rh-btn--secondary:hover { background: var(--rh-bg); }
.rmd-home .rh-btn--block { width: 100%; }
.rmd-home .rh-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---- Neutral image placeholder (used wherever a real supplied photo is
   still needed - never a stock/AI substitute). ---- */
.rmd-home .rh-img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rh-space-2);
  background: linear-gradient(135deg, #ecfdf5, #fffcf7);
  border: 1.5px dashed #a7f3d0; border-radius: var(--rh-radius-md);
  color: var(--rh-green-dark); width: 100%; height: 100%; min-height: 180px;
  text-align: center; padding: var(--rh-space-4);
}
.rmd-home .rh-img-placeholder i { font-size: 1.6rem; opacity: 0.7; }
.rmd-home .rh-img-placeholder span { font-size: 0.78rem; font-weight: 700; color: var(--rh-green-dark); max-width: 200px; }

/* ============================================================
   1. Header extras
   ============================================================
   .nav-menu/.nav-link/.nav-btn/.hamburger are pre-existing classes from
   styles.css, reused (not rebuilt) so the existing auth JS
   (updateNavAuthState, logoutUser, toggleMobileMenu) and the
   lang-switcher.js self-injection keep working unmodified.

   Root cause #1 (measured, not guessed): styles.css only switches to the
   hamburger/dropdown pattern below 768px; from 769px up it always renders
   the full nav-menu as one inline row with no fallback. That was already
   marginal with the original 4 items - adding Logements and Trouver un
   colocataire (2 more real, required nav links) pushed it well past
   breaking. Measured with Playwright at every width from 769-1920px: the
   row overflows the viewport (items pushed off-screen, not just wrapping)
   at 769/820/900/1023/1024/1200/1366px and only genuinely fits starting at
   1440px. A gap/font tweak alone can't close a gap that size, so this
   extends the SAME already-working toggle (.active class, same
   toggleMobileMenu() function, zero JS changes) up through 1439px instead
   of stopping at 768px - homepage.css only loads on index.html, so this
   never touches any other page's nav. */
.nav-btn { background: var(--rh-green) !important; white-space: nowrap; }
.nav-btn:hover { background: var(--rh-green-dark) !important; }
.rh-nav-deposit { font-weight: 700; color: var(--rh-green-dark) !important; }

@media (min-width: 769px) and (max-width: 1479.98px) {
  .hamburger { display: flex !important; }
  .nav-menu {
    position: absolute !important; top: 60px; left: 0; right: 0; background: var(--rh-surface);
    flex-direction: column !important; width: 100%; text-align: left; display: none !important;
    padding: var(--rh-space-2) 0; box-shadow: var(--rh-shadow); border-bottom: 1px solid var(--rh-border);
    gap: 0 !important; z-index: 999;
  }
  .nav-menu.active { display: flex !important; }
  .nav-link {
    padding: 12px var(--rh-space-5); width: 100% !important; border: none !important;
    border-bottom: 1px solid var(--rh-border) !important; min-height: 44px; display: flex; align-items: center;
  }
  .nav-btn, .rh-nav-deposit { margin: var(--rh-space-2) var(--rh-space-5) !important; align-self: flex-start; width: auto !important; }
  #userNav { padding: 0 var(--rh-space-5) var(--rh-space-2); }
}

/* Root cause #2 (also measured, missed on the first pass): .nav-container
   has an unconditional `max-width: 1200px` in styles.css - that caps the
   row's available width at every viewport size, not just narrow ones, so
   even at 1440/1920px the 6 real links were wrapping INSIDE that
   1200px-wide box (the first fix's viewport-overflow check didn't catch
   internal wrapping, only content spilling past the browser edge - a real
   gap in that verification, not a second unrelated bug). Widened here,
   homepage-only, only at the width where the inline row (not the
   hamburger) is actually shown. */
@media (min-width: 1480px) {
  .nav-container { max-width: 1400px !important; }
  .nav-menu { gap: 20px !important; }
  .nav-link { white-space: nowrap; }
}

/* Compact logo above mobile widths: drop the glow pseudo-element, shadow
   and animation that made the wordmark look oversized/bulky - the mobile
   breakpoints in styles.css already define their own compact sizing and
   are left untouched below 769px. */
@media (min-width: 769px) {
  .nav-logo { font-size: 1.3rem; text-shadow: none; letter-spacing: 0.3px; }
  .nav-logo span { animation: none; }
  .nav-logo span::before { display: none; }
}

/* ============================================================
   2. Hero — rebuilt against the target reference (not the old
   .rh-container-based layout): a wider 1400px hero-only container, a
   56/44 content/photo split from 1024px up, and the photo stretching to
   the full row height instead of a fixed aspect-ratio box. Mobile
   (<1024px) keeps its own stacked, single-column treatment further down.
   ============================================================ */
.rh-hero { padding: 28px 0 48px; overflow: hidden; }
.rh-hero-container {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--rh-space-5);
  display: grid; grid-template-columns: 1fr; gap: var(--rh-space-6); align-items: stretch;
}
/* The 56/44 split is the required 1366px+ composition. Below that
   (1024-1199px), the search row's own minimum content width (three
   columns in one row) is wider than a 44%-reserved-for-photo column can
   spare, so this tier keeps the pre-1366 stacked single-column layout
   already used below 1024px rather than forcing an unreadable squeeze. */
@media (min-width: 1200px) {
  .rh-hero-container { grid-template-columns: 1.28fr 1fr; gap: var(--rh-space-7); }
}

.rh-hero-content { display: flex; flex-direction: column; justify-content: center; }

.rh-hero-eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rh-green-dark); margin: 0 0 var(--rh-space-3); }
.rh-hero-title {
  font-family: var(--rh-font-heading); font-weight: 800;
  font-size: clamp(2.2rem, 3.4vw, 4.5rem); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--rh-navy); margin: 0 0 var(--rh-space-4); max-width: 100%;
}
.rh-hero-title strong { color: var(--rh-green); white-space: nowrap; }
.rh-hero-desc { color: var(--rh-text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 var(--rh-space-5); max-width: 460px; }

.rh-search { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius-lg); box-shadow: var(--rh-shadow); padding: var(--rh-space-4); margin-bottom: var(--rh-space-4); }
.rh-search-row { display: grid; grid-template-columns: 1fr; gap: var(--rh-space-3); }
@media (min-width: 640px) {
  .rh-search-row { grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.72fr) auto; align-items: stretch; }
}
.rh-search-field { position: relative; }
.rh-search-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--rh-text-faint); pointer-events: none; }
.rh-search-field input, .rh-search-field select {
  width: 100%; height: 100%; min-height: 48px; padding: 0 var(--rh-space-4) 0 38px; border-radius: var(--rh-radius-sm);
  border: 1.5px solid var(--rh-border); font-family: var(--rh-font-body); font-size: 0.92rem; color: var(--rh-text);
  background: var(--rh-surface); appearance: none;
}
.rh-search-field select { padding-right: 30px; }
.rh-search-field input:focus, .rh-search-field select:focus { outline: 3px solid #a7f3d0; outline-offset: 1px; border-color: var(--rh-green); }
.rh-search button { min-height: 48px; white-space: nowrap; }
.rh-search-error { color: #b91c1c; font-size: 0.85rem; margin: var(--rh-space-2) 2px 0; display: none; }
.rh-search-error.show { display: block; }

.rh-reassure { display: flex; flex-wrap: wrap; gap: var(--rh-space-3) var(--rh-space-5); margin: 0; padding: 0; list-style: none; }
.rh-reassure li { display: flex; align-items: center; gap: var(--rh-space-2); font-size: 0.85rem; font-weight: 600; color: var(--rh-text-muted); }
.rh-reassure i { color: var(--rh-green); }

.rh-hero-media { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--rh-shadow); aspect-ratio: 4/3; background: var(--rh-border); }
.rh-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rh-hero-overlay {
  position: absolute; left: var(--rh-space-4); right: var(--rh-space-4); bottom: var(--rh-space-4);
  background: var(--rh-surface); border-radius: var(--rh-radius-md); box-shadow: var(--rh-shadow);
  padding: var(--rh-space-3) var(--rh-space-4); display: flex; align-items: center; gap: var(--rh-space-3);
}
/* `.rh-hero-media img` (higher specificity: class+tag) was winning over
   this class-only selector whenever the thumb rendered as a real <img>
   (a real listing photo) rather than the no-photo <div> placeholder -
   inflating the 52px thumb to fill the whole overlay card. Never caught
   in dev because the seeded test listing had no image, so only the div
   path (unaffected by that rule) was ever exercised. Scoped selector
   here to win on specificity instead of relying on source order. */
.rh-hero-media .rh-hero-overlay-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--rh-border); }
.rh-hero-overlay-body { min-width: 0; flex: 1; }
.rh-hero-overlay-title { font-weight: 700; font-size: 0.85rem; color: var(--rh-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.rh-hero-overlay-meta { font-size: 0.78rem; color: var(--rh-text-muted); margin: 2px 0 0; }
.rh-hero-overlay-meta strong { color: var(--rh-green-dark); }
.rh-hero-overlay-confirm { font-size: 0.74rem; color: var(--rh-green-dark); font-weight: 700; margin: 2px 0 0; display: flex; align-items: center; gap: 4px; }
.rh-hero-overlay-skel-line { height: 11px; border-radius: 4px; aspect-ratio: auto; }

@media (max-width: 1199.98px) {
  .rh-hero-container { display: flex; flex-direction: column; }
  .rh-hero-media { order: 3; }
  .rh-reassure { order: 2; }
}

/* Desktop: photo stretches to the full hero row height (matches the
   target - not a fixed 4:3 card) and the overlay floats as a compact
   card anchored bottom-right instead of spanning the full width.
   Mobile/tablet (<1024px) keeps the original 4:3 box + full-width bar
   untouched, per "preserve the approved mobile hero below 768px". */
@media (min-width: 1200px) {
  .rh-hero-media { height: 100%; min-height: clamp(420px, 34vw, 540px); aspect-ratio: auto; }
  .rh-hero-overlay { left: auto; width: min(320px, calc(100% - 2 * var(--rh-space-4))); }
}

/* ---- Mobile hero refinement (<768px only) ----
   Root cause of the hidden eyebrow: .navbar is unconditionally
   position:fixed (styles.css) with no compensating top offset anywhere,
   and the universal mobile guard further up this file drops every
   .rh-section (hero included) to a 48px top padding - less than the
   ~60px fixed nav height, so the eyebrow rendered underneath it. Fixed
   here with a hero-only override (3 classes - beats that 2-class guard)
   rather than touching the shared guard, which every other section also
   relies on. */
@media (max-width: 767.98px) {
  /* Bottom padding intentionally 0: the city section immediately after
     (out of scope to modify) already carries its own 48px top padding
     from the shared .rh-section mobile guard above, which alone provides
     the visual breathing room before "Trouve ton logement dans ta
     ville" - adding hero-side padding on top of that would overshoot the
     requested ~32-40px gap without touching a section outside this task's
     scope. */
  .rmd-home .rh-hero.rh-section { padding-top: 84px; padding-bottom: 0; }

  .rh-hero-eyebrow { margin-top: 0; }
  .rh-hero-title { font-size: clamp(1.875rem, 8.2vw, 2.125rem); line-height: 1.06; }

  .rh-search { padding: var(--rh-space-4); }
  .rh-search-row { gap: var(--rh-space-3); }

  /* Three equal, centred, wrap-safe trust items instead of a loose flex
     row whose 24px column-gap pushed the wrapped 3rd item toward the
     container edge. */
  .rh-reassure { justify-content: space-between; gap: var(--rh-space-2) var(--rh-space-2); }
  .rh-reassure li { flex: 1 1 0; flex-direction: column; justify-content: flex-start; text-align: center; gap: 4px; font-size: 0.76rem; }
  .rh-reassure i { font-size: 1rem; }

  .rh-hero-media { aspect-ratio: auto; height: 310px; border-radius: 17px; }
  .rh-hero-media img { object-position: 50% 25%; }

  .rh-hero-overlay { padding: 13px; gap: 11px; }
  .rh-hero-media .rh-hero-overlay-thumb { width: 48px; height: 48px; }
  .rh-hero-overlay-thumb--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4); color: var(--rh-green-dark); font-size: 1.1rem;
  }

  /* Mobile header: real controls visible at all times (not just inside
     the closed dropdown) - logo left, [language][hamburger] grouped
     right via margin-right:auto on the logo rather than the base
     3-way space-between, which would otherwise center the relocated
     language button between logo and hamburger. */
  .nav-container { justify-content: flex-start; }
  .nav-logo { margin-right: auto; }
  /* styles.css's global `*{box-sizing:border-box}` means padding can't
     grow this box past its fixed 32x24 - so the tappable area is grown
     by resizing it directly to 44x44 instead. Spans use width:100% so
     they scale with it automatically; only re-centered vertically since
     the fixed 4px span margins no longer fill the taller box. */
  .hamburger { width: 44px; height: 44px; justify-content: center; }
  #rmd-lang-toggle { min-height: 44px !important; box-sizing: border-box; }
}

@media (max-width: 340px) {
  .rh-reassure li { font-size: 0.7rem; }
  .rh-reassure li:nth-child(3) { flex: 1 1 100%; }
}

/* ============================================================
   3. City discovery (replaces the old per-listing grid)
   ============================================================
   .rh-state/.rh-skel are shared with the guides section below and this
   section's own loading skeleton - kept.
   ============================================================ */
.rh-state { text-align: center; padding: var(--rh-space-7) var(--rh-space-4); color: var(--rh-text-muted); grid-column: 1 / -1; }
.rh-state i { font-size: 1.6rem; color: var(--rh-text-faint); margin-bottom: var(--rh-space-2); display: block; }
.rh-state p { margin: 0; }
.rh-skel { background: linear-gradient(90deg, #f1efe9 25%, #f8f6f1 50%, #f1efe9 75%); background-size: 200% 100%; animation: rhSkelPulse 1.4s ease-in-out infinite; border-radius: var(--rh-radius-md); aspect-ratio: 4/3; }
@keyframes rhSkelPulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rh-skel { animation: none; } }

/* ---- Desktop (>=768px): one featured Casablanca card + 3 secondary,
   unchanged by the later mobile-only refinement below. ---- */
.rh-city-grid-desktop {
  display: none;
}
@media (min-width: 768px) {
  .rh-city-grid-desktop {
    display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(3, 1fr);
    gap: var(--rh-space-4); min-height: 400px;
  }
  .rh-city-card {
    position: relative; grid-column: 2; border-radius: var(--rh-radius-lg); overflow: hidden;
    text-decoration: none; display: block; box-shadow: var(--rh-shadow-sm);
  }
  .rh-city-card--featured { grid-column: 1; grid-row: 1 / 4; }
  .rh-city-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .rh-city-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,0.82) 100%); }
  .rh-city-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--rh-space-4); color: #fff; }
  .rh-city-card--featured .rh-city-card-body { padding: var(--rh-space-6); }
  .rh-city-card-name { font-family: var(--rh-font-heading); font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; color: #fff; }
  .rh-city-card--featured .rh-city-card-name { font-size: 1.6rem; }
  .rh-city-card-count { font-size: 0.82rem; margin: 0 0 4px; color: #e2e8f0; }
  .rh-city-card-price { font-size: 0.85rem; font-weight: 700; margin: 0 0 8px; color: #6ee7b7; }
  .rh-city-card-cta { font-size: 0.82rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
  .rh-city-card:hover .rh-city-card-cta, .rh-city-card:focus-visible .rh-city-card-cta { text-decoration: underline; }
  .rh-city-card:focus-visible { outline: 3px solid var(--rh-green); outline-offset: 2px; }
}

/* Mobile grid/CTA are built for <768px but the elements exist in the DOM at
   all widths - hidden above 768px so only one presentation is ever
   visible, matching the desktop block's own display:none default above. */
.rh-city-grid-mobile { display: none; }
.rh-city-mobile-cta { display: none; }

/* ---- Mobile city grid (<768px only) ----
   Entirely scoped inside this one media query, per the task's explicit
   "keep the CSS inside a scoped max-width:767px query" - nothing here can
   leak into the >=768px desktop block above, which this section does not
   touch at all. Selectors are all specific to .rh-city-* classes unique to
   this section, never generic .card/.grid names that could bleed into
   other homepage sections. */
@media (max-width: 767.98px) {
  .rh-city-grid-desktop { display: none !important; }
  .rh-city-grid-mobile {
    display: grid !important; grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .rh-city-card-mobile {
    position: relative; display: block; height: 160px; border-radius: 15px; overflow: hidden;
    text-decoration: none; min-height: 44px;
  }
  .rh-city-card-mobile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .rh-city-card-mobile::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 45%, rgba(15,23,42,0.55) 100%);
  }
  .rh-city-card-mobile-label {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
    background: var(--rh-navy); color: #fff; font-family: var(--rh-font-heading); font-weight: 700;
    font-size: 0.95rem; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  }
  .rh-city-card-mobile--promoted .rh-city-card-mobile-label { background: var(--rh-green); }
  .rh-city-card-mobile:focus-visible { outline: 3px solid var(--rh-green); outline-offset: 2px; }
  .rh-city-mobile-cta { display: block !important; text-align: center; margin-top: var(--rh-space-4); }
  .rh-city-mobile-cta .rh-btn { width: 100%; max-width: 320px; }

  @media (max-width: 340px) {
    .rh-city-grid-mobile { gap: 8px; }
    .rh-city-card-mobile { height: 150px; }
    .rh-city-card-mobile-label { font-size: 0.85rem; padding: 5px 12px; }
  }
}

/* ============================================================
   4. Universities
   ============================================================ */
.rh-uni-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rh-space-3); }
@media (min-width: 640px) { .rh-uni-grid { grid-template-columns: repeat(3, 1fr); gap: var(--rh-space-4); } }
@media (min-width: 1024px) { .rh-uni-grid { grid-template-columns: repeat(3, 1fr); } }
.rh-uni-card { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius-md); overflow: hidden; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.rh-uni-card:hover { box-shadow: var(--rh-shadow); transform: translateY(-2px); }
.rh-uni-card-media { aspect-ratio: 16/10; background: var(--rh-border); position: relative; }
.rh-uni-card-media img { width: 100%; height: 100%; object-fit: cover; }
.rh-uni-card-body { padding: var(--rh-space-3) var(--rh-space-4) var(--rh-space-4); display: flex; align-items: flex-start; gap: var(--rh-space-2); }
.rh-uni-card-body i { color: var(--rh-green-dark); margin-top: 3px; flex-shrink: 0; }
.rh-uni-card-name { font-weight: 700; font-size: 0.88rem; color: var(--rh-text); margin: 0 0 2px; line-height: 1.3; }
.rh-uni-card-city { font-size: 0.78rem; color: var(--rh-text-muted); margin: 0; }

/* ============================================================
   5. Verification
   ============================================================ */
.rh-verify { display: grid; grid-template-columns: 1fr; gap: var(--rh-space-6); align-items: center; }
@media (min-width: 1024px) { .rh-verify { grid-template-columns: 1fr 1fr; } }
.rh-verify-media { aspect-ratio: 4/3; border-radius: var(--rh-radius-lg); overflow: hidden; background: var(--rh-border); }
.rh-verify-media img { width: 100%; height: 100%; object-fit: cover; }
.rh-verify-media picture { display: contents; } /* keep img sized by the container */
.rh-verify-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rh-space-4); }
.rh-verify-list li { display: flex; align-items: flex-start; gap: var(--rh-space-3); font-weight: 600; color: var(--rh-text); font-size: 0.98rem; }
.rh-verify-list i { color: var(--rh-green); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
@media (max-width: 1023.98px) { .rh-verify-media { order: 2; } }

/* ============================================================
   6. Process
   ============================================================ */
.rh-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rh-space-5); counter-reset: rh-step; }
@media (max-width: 767.98px) { .rh-steps { grid-template-columns: 1fr; } }
.rh-step { text-align: center; padding: var(--rh-space-4); }
@media (max-width: 767.98px) { .rh-step { display: flex; align-items: flex-start; gap: var(--rh-space-4); text-align: left; padding: var(--rh-space-3) 0; } }
.rh-step-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--rh-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--rh-font-heading);
  margin: 0 auto var(--rh-space-3); font-size: 1.05rem; flex-shrink: 0;
}
@media (max-width: 767.98px) { .rh-step-num { margin: 0; } }
.rh-step h3 { font-size: 0.95rem; font-weight: 700; color: var(--rh-text); margin: 0 0 4px; }
.rh-step p { font-size: 0.85rem; color: var(--rh-text-muted); margin: 0; }

/* ============================================================
   7 & 8. Roommate / Landlord split cards
   ============================================================ */
.rh-split { display: grid; grid-template-columns: 1fr; gap: var(--rh-space-5); }
@media (min-width: 768px) { .rh-split { grid-template-columns: 1fr 1fr; } }
.rh-split-card { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius-lg); padding: var(--rh-space-6); display: flex; flex-direction: column; gap: var(--rh-space-3); }
.rh-split-media { aspect-ratio: 16/9; border-radius: var(--rh-radius-md); overflow: hidden; margin-bottom: var(--rh-space-2); background: var(--rh-border); }
.rh-split-media img { width: 100%; height: 100%; object-fit: cover; }
.rh-split-card h2 { font-family: var(--rh-font-heading); font-weight: 800; font-size: 1.3rem; color: var(--rh-text); margin: 0; }
.rh-split-card p { color: var(--rh-text-muted); margin: 0; line-height: 1.55; }
.rh-split-card .rh-btn { align-self: flex-start; margin-top: var(--rh-space-2); }

/* ============================================================
   9. Guides
   ============================================================ */
.rh-guides-grid { display: grid; grid-template-columns: 1fr; gap: var(--rh-space-4); }
@media (min-width: 768px) { .rh-guides-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) {
  .rh-guides-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--rh-space-2); }
  .rh-guides-grid .rh-guide-card { flex: 0 0 78%; scroll-snap-align: start; }
}
.rh-guide-card { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius-md); padding: var(--rh-space-5); text-decoration: none; }
.rh-guide-card h3 { font-family: var(--rh-font-heading); font-size: 1rem; font-weight: 700; color: var(--rh-text); margin: 0 0 6px; }
.rh-guide-card p { color: var(--rh-text-muted); font-size: 0.88rem; margin: 0; line-height: 1.5; }

/* ============================================================
   10. Final CTA
   ============================================================ */
.rh-final-cta {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.84)), url('../images/opt/cta-ville-nuit-1600.webp') center/cover no-repeat, var(--rh-navy);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.84)), image-set(url('../images/opt/cta-ville-nuit-1600.avif') type('image/avif'), url('../images/opt/cta-ville-nuit-1600.webp') type('image/webp')) center/cover no-repeat, var(--rh-navy);
  border-radius: var(--rh-radius-lg); padding: var(--rh-space-7) var(--rh-space-5); text-align: center; margin: 0 var(--rh-space-5);
}
@media (min-width: 768px) { .rh-final-cta { margin: 0 auto; max-width: 1136px; } }
@media (max-width: 767px) {
  .rh-final-cta {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.84)), url('../images/opt/cta-ville-nuit-900.webp') center/cover no-repeat, var(--rh-navy);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.84)), image-set(url('../images/opt/cta-ville-nuit-900.avif') type('image/avif'), url('../images/opt/cta-ville-nuit-900.webp') type('image/webp')) center/cover no-repeat, var(--rh-navy);
  }
}
.rh-final-cta h2 { color: #fff; font-family: var(--rh-font-heading); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 var(--rh-space-5); }

/* ============================================================
   11. Footer extras (visual only - links preserved from existing markup)
   ============================================================ */
.rh-footer-social { display: flex; gap: var(--rh-space-3); margin-top: var(--rh-space-3); }
.rh-footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: #cbd5e1; text-decoration: none; }
.rh-footer-social a:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ---- Universal mobile guards ---- */
@media (max-width: 767.98px) {
  .rmd-home .rh-container { padding: 0 var(--rh-space-4); }
  .rmd-home .rh-btn--responsive-block { width: 100%; }
  .rmd-home .rh-section { padding: var(--rh-space-7) 0; }
}
html, body { overflow-x: hidden; }

/* City / university suggestions under the search field. */
.rh-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,0.14);
  max-height: 320px; overflow-y: auto; }
.rh-suggest[hidden] { display: none; }
.rh-suggest-head { padding: 8px 10px 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.rh-suggest-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; color: #111827; }
.rh-suggest-item i { position: static; transform: none; color: #10b981; width: 16px; text-align: center; pointer-events: none; }
.rh-suggest-item small { margin-left: auto; color: #6b7280; font-size: 0.78rem; }
.rh-suggest-item:hover, .rh-suggest-item.active { background: #ecfdf5; }
.rh-suggest-empty { padding: 12px 10px; font-size: 0.85rem; color: #6b7280; }