/* ============================================================================
   THE GATE INVESTMENTS — ENTITY COMPONENTS  (gc-* class set)
   ----------------------------------------------------------------------------
   Visual styles for the V2 component HTML produced by assets/entity-components.js
   (Gate.Components). PURELY ADDITIVE — does not override any existing site
   selector. Uses only existing site tokens (CSS variables defined elsewhere)
   for color / typography / spacing rhythm. RTL-safe via CSS logical properties
   plus a small set of [dir="rtl"] overrides where logical properties aren't
   sufficient.

   Class-name convention: every selector is prefixed `gc-` (Gate Components)
   to avoid collision with existing site classes.

   No animations beyond opacity transitions on hover. No layout shifts on
   re-render (sections are display:none in HTML and toggled to display:block
   by the renderer when data exists).
   ============================================================================ */

/* ─────────────── Section shell (used by every component) ─────────────── */
.gc-section{
  display: block;
  padding: 64px 0;
  background: transparent;
}
.gc-section + .gc-section{
  padding-top: 0;
}
.gc-section-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.gc-eyebrow{
  display: inline-block;
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep, #B8924E);
  margin-bottom: 12px;
}
.gc-heading{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--navy-deep, #0A1F44);
  margin: 0 0 28px 0;
}
.gc-section-body{
  color: var(--slate, #495E73);
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

/* RTL: switch to Arabic display font where appropriate */
html[dir="rtl"] .gc-heading{
  font-family: var(--font-display-ar, 'Tajawal'), system-ui, sans-serif;
  font-weight: 700;
}
html[dir="rtl"] .gc-eyebrow,
html[dir="rtl"] .gc-section-body{
  font-family: var(--font-sans-ar, 'Tajawal'), system-ui, sans-serif;
}

/* Mobile + tablet rhythm matches existing .section breakpoints */
@media (max-width: 1100px){
  .gc-section{ padding: 56px 0; }
  .gc-heading{ font-size: 28px; }
}
@media (max-width: 720px){
  .gc-section{ padding: 40px 0; }
  .gc-section-inner{ padding: 0 18px; }
  .gc-heading{ font-size: 24px; margin-bottom: 20px; }
  .gc-eyebrow{ font-size: 10px; letter-spacing: 1.8px; }
}

/* ═══════════ 1. intelligenceCard — 6 metric grid ════════════════════════ */
.gc-intel-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.gc-intel-metric{
  background: var(--ivory, #F7F2EA);
  border: 1px solid rgba(184, 146, 78, 0.18);
  border-radius: 12px;
  padding: 22px 22px 20px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gc-intel-metric:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 31, 68, 0.06);
}
.gc-intel-metric-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.gc-intel-metric-label{
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep, #0A1F44);
  letter-spacing: 0.2px;
}
.gc-intel-metric-value{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  color: var(--gold-deep, #B8924E);
}
.gc-intel-metric-value small{
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--slate, #495E73);
  letter-spacing: 0.5px;
  margin-inline-start: 2px;
}
.gc-intel-bar{
  position: relative;
  height: 6px;
  background: rgba(10, 31, 68, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.gc-intel-bar-fill{
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep, #B8924E), var(--gold-pale, #D8B16E));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 1100px){ .gc-intel-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px){  .gc-intel-grid{ grid-template-columns: 1fr; gap: 14px; } }

/* ═══════════ 2. faqAccordion — Q/A expandable ═══════════════════════════ */
.gc-faq-list{
  max-width: 880px;
}
.gc-faq-row{
  border-block-end: 1px solid rgba(10, 31, 68, 0.10);
  padding: 0;
}
.gc-faq-row:first-child{ border-block-start: 1px solid rgba(10, 31, 68, 0.10); }
.gc-faq-q{
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  transition: color .2s ease;
}
.gc-faq-q::-webkit-details-marker{ display: none; }
.gc-faq-q-text{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-deep, #0A1F44);
  line-height: 1.4;
}
html[dir="rtl"] .gc-faq-q-text{
  font-family: var(--font-display-ar, 'Tajawal'), system-ui, sans-serif;
}
.gc-faq-q-icon{
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid rgba(184, 146, 78, 0.4);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--gold-deep, #B8924E);
  transition: transform .25s ease, background .25s ease;
}
.gc-faq-row[open] > .gc-faq-q .gc-faq-q-icon{
  transform: rotate(45deg);
  background: var(--gold-deep, #B8924E);
  color: #fff;
}
.gc-faq-q:hover{ color: var(--gold-deep, #B8924E); }
.gc-faq-q:hover .gc-faq-q-icon{ background: rgba(184, 146, 78, 0.08); }
.gc-faq-a{
  padding: 0 4px 22px 4px;
  color: var(--slate, #495E73);
  font-size: 15px;
  line-height: 1.75;
}
.gc-faq-a .gc-narrative-p{ margin: 0 0 12px; }
.gc-faq-a .gc-narrative-p:last-child{ margin-bottom: 0; }

/* ═══════════ 3. narrative — long-form copy ══════════════════════════════ */
.gc-narrative{
  max-width: 760px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--navy-deep, #0A1F44);
}
.gc-narrative-p{
  margin: 0 0 20px;
}
.gc-narrative-p:last-child{ margin-bottom: 0; }

/* ═══════════ 4. landmarksList — nearby landmarks ═══════════════════════ */
.gc-landmark-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}
.gc-landmark{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ivory, #F7F2EA);
  border-radius: 10px;
  border-inline-start: 3px solid var(--gold-deep, #B8924E);
}
.gc-landmark-name{
  font-weight: 600;
  color: var(--navy-deep, #0A1F44);
  font-size: 14px;
}
.gc-landmark-dist{
  flex-shrink: 0;
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 14px;
  color: var(--gold-deep, #B8924E);
  font-weight: 600;
  letter-spacing: 0.3px;
}
@media (max-width: 720px){ .gc-landmark-list{ grid-template-columns: 1fr; } }

/* ═══════════ 5. priceRanges — price-range rows per type ═════════════════ */
.gc-price-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  max-width: 880px;
}
.gc-price-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(10, 31, 68, 0.10);
}
.gc-price-type{
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-deep, #0A1F44);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.gc-price-range{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-deep, #B8924E);
}
@media (max-width: 720px){ .gc-price-grid{ grid-template-columns: 1fr; } }

/* ═══════════ 6. relatedCarousel — horizontal entity rail ═══════════════ */
.gc-related-rail{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-inline: -8px;
  scrollbar-width: thin;
}
.gc-related-rail::-webkit-scrollbar{ height: 6px; }
.gc-related-rail::-webkit-scrollbar-thumb{ background: rgba(184, 146, 78, 0.3); border-radius: 999px; }
.gc-related-card{
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gc-related-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 31, 68, 0.10);
  border-color: rgba(184, 146, 78, 0.35);
}
.gc-related-img{
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--ivory, #F7F2EA);
}
.gc-related-body{
  padding: 14px 18px 18px;
}
.gc-related-name{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-deep, #0A1F44);
  line-height: 1.3;
}
html[dir="rtl"] .gc-related-name{
  font-family: var(--font-display-ar, 'Tajawal'), system-ui, sans-serif;
}

/* ═══════════ 7. considerationsList — neutral observations ══════════════ */
.gc-consid-hint{
  font-size: 12px;
  color: var(--slate, #495E73);
  font-style: italic;
  margin: 0 0 14px;
  letter-spacing: 0.3px;
}
.gc-consid-list{
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.gc-consid-item{
  position: relative;
  padding: 14px 0 14px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy-deep, #0A1F44);
  border-bottom: 1px solid rgba(10, 31, 68, 0.08);
}
.gc-consid-item:last-child{ border-bottom: none; }
.gc-consid-item::before{
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 22px;
  width: 8px;
  height: 8px;
  background: var(--gold-deep, #B8924E);
  border-radius: 50%;
}
html[dir="rtl"] .gc-consid-item{ padding-inline-start: 22px; padding-inline-end: 0; }

/* ═══════════ 8. paymentPlans — structured plan cards ═══════════════════ */
.gc-plan-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.gc-plan-card{
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.10);
  border-radius: 14px;
  padding: 24px 22px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.gc-plan-card:hover{
  border-color: rgba(184, 146, 78, 0.4);
  box-shadow: 0 8px 24px rgba(10, 31, 68, 0.06);
}
.gc-plan-name{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy-deep, #0A1F44);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(184, 146, 78, 0.25);
}
html[dir="rtl"] .gc-plan-name{
  font-family: var(--font-display-ar, 'Tajawal'), system-ui, sans-serif;
}
.gc-plan-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
}
.gc-plan-row-label{
  font-size: 13px;
  color: var(--slate, #495E73);
  letter-spacing: 0.2px;
}
.gc-plan-row-val{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-deep, #B8924E);
}
.gc-plan-row-val small{
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-size: 11px;
  color: var(--slate, #495E73);
  font-weight: 500;
  margin-inline-start: 2px;
  letter-spacing: 0.3px;
}
@media (max-width: 1100px){ .gc-plan-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .gc-plan-grid{ grid-template-columns: 1fr; } }

/* ═══════════ 9. attractScore — Investment Attractiveness badge (V2 Phase F) ═══ */
/* Used by the area page Investment Attractiveness section. The component is
   composed inline in the renderer (sectionShell + custom HTML) — only this
   small block of CSS is needed for the visual. */
.gc-attract-score{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 18px;
  padding: 14px 22px;
  background: var(--ivory, #F7F2EA);
  border: 1px solid rgba(184, 146, 78, 0.25);
  border-radius: 12px;
}
.gc-attract-score-num{
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-size: 42px;
  line-height: 1;
  font-weight: 600;
  color: var(--gold-deep, #B8924E);
}
.gc-attract-score-out{
  font-family: var(--font-sans, 'Inter'), system-ui, sans-serif;
  font-size: 14px;
  color: var(--slate, #495E73);
  letter-spacing: 0.3px;
}
.gc-attract-blurb{
  max-width: 760px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--navy-deep, #0A1F44);
}

/* ═══════════ Section accent backgrounds for visual rhythm ══════════════ */
/* Subtle alternating-section background to break up vertical monotony when
   multiple V2 sections render in sequence. Uses the same tokens so it stays
   coherent with the existing site palette. */
.gc-section--intel,
.gc-section--prices,
.gc-section--narrative{
  background: var(--offwhite, #FBF9F4);
}
.gc-section--faq{
  background: #fff;
}
.gc-section--related{
  background: var(--ivory, #F7F2EA);
}