/* CGR homepage stylesheet v1.1.0 - extracted from live fidelity v1.0.16. */
/* ===== CGR Home Fidelity (row21b) — homepage only ===== */

/* ---- F3: section heads full-width, centered, ABOVE the content grid ---- */
.elementor-element-82e6a6a > .elementor-container,
.elementor-element-20520e4 > .elementor-container,
.elementor-element-77736f7 > .elementor-container{
  flex-wrap:wrap !important; justify-content:center !important;
}
/* content columns widen so they form clean rows once the head sits above */
/* desktop only: widen content columns so they form clean multi-col rows. Mobile keeps Elementor's native 100% stack. */
@media (min-width:1025px){
  .elementor-element-82e6a6a > .elementor-container > .elementor-column.elementor-col-20:not(.elementor-element-7f6cf9b){flex:0 0 23% !important;max-width:23% !important;}
  .elementor-element-20520e4 > .elementor-container > .elementor-column.elementor-col-14:not(.elementor-element-06a8c23){flex:0 0 30.5% !important;max-width:30.5% !important;}
  .elementor-element-77736f7 > .elementor-container > .elementor-column.elementor-col-25:not(.elementor-element-7a9e7c4){flex:0 0 31% !important;max-width:31% !important;}
}
/* testimonial card treatment (all viewports; stacks on mobile) */
.elementor-element-77736f7 > .elementor-container > .elementor-column.elementor-col-25:not(.elementor-element-7a9e7c4){background:#FFFFFF !important;border:1px solid #E2DED8 !important;padding:24px !important;margin:0 8px 16px !important;}
/* head columns forced full-width + centered (ID selectors win over the class rules above) */
.elementor-element-dfb483b,
.elementor-element-7f6cf9b,
.elementor-element-06a8c23,
.elementor-element-7a9e7c4{
  flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  text-align:center !important; margin:0 auto 34px !important; padding:0 !important;
  background:transparent !important; border:0 !important;
}
.elementor-element-dfb483b h2,.elementor-element-7f6cf9b h2,
.elementor-element-06a8c23 h2,.elementor-element-7a9e7c4 h2{ max-width:none !important; }
/* ---- F4: hero photograph + navy scrim (was flat navy) ---- */
.elementor-element-ca2f0d2{
  background-image:linear-gradient(90deg,rgba(14,28,46,.88) 0%,rgba(14,28,46,.66) 40%,rgba(14,28,46,.22) 66%,rgba(14,28,46,.04) 100%),url('https://cebugrandrealty.com/wp-content/uploads/2025/08/SRBJDB2-busay-villa-hero-clean-1200.webp') !important;
  background-size:cover !important; background-position:80% 55% !important; background-repeat:no-repeat !important;
}
@media (max-width:1023px){
  .elementor-element-ca2f0d2{
    background-image:linear-gradient(180deg,rgba(14,28,46,.66) 0%,rgba(14,28,46,.76) 46%,rgba(14,28,46,.93) 100%),url('https://cebugrandrealty.com/wp-content/uploads/2025/08/SRBJDB2-busay-villa-hero-clean-1200.webp') !important;
    background-position:70% center !important;
  }
}

/* ---- F8: "Selling in Cebu?" promo as an intentional navy band ---- */
.elementor-element-b24d2e3{background-color:#0E1C2E !important;}
.elementor-element-b24d2e3 h3,.elementor-element-b24d2e3 span,.elementor-element-b24d2e3 a{color:#F5F2EE !important;}
.elementor-element-b24d2e3 h3{color:#FFFFFF !important;}
.elementor-element-b24d2e3 .elementor-button{background:#C59B7A !important;color:#0E1C2E !important;}

/* ---- F11: OFW 2nd action -> quiet gold-underline text link ---- */
.elementor-element-5b863f3 .elementor-button,
.elementor-element-5b863f3 a.elementor-button{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:6px 0 !important; color:#0E1C2E !important;
  border-bottom:1px solid #C59B7A !important;
}
.elementor-element-5b863f3 .elementor-button:hover{color:#C59B7A !important;background:transparent !important;}

/* ===== HOMEPAGE-SPEC 2026-07-10 (v1.0.4) — header geom (home-scoped) + enclave overlay + avatars ===== */

/* H1 header geometry — template 4900 is GLOBAL; scoped here to homepage only.
 * Sitewide migration to cgr-rhea-brand-overrides.php is a tracked follow-up (spec H1).
 * Collapses the dead gap by clustering the nav on the right next to the CTA. */
.elementor-4900 .elementor-element-b694699{ flex-grow:0 !important; width:auto !important; margin-left:auto !important; }
.elementor-4900 .elementor-element-c108e4f{ width:auto !important; flex:0 0 auto !important; margin-left:24px !important; }
.elementor-4900 .elementor-element-a40c7ae .rhea-elementor-nav-menu > li > a{ font-size:14px !important; column-gap:26px !important; letter-spacing:.02em !important; color:#0E1C2E !important; }

/* H4/F enclave cards (R2) — homepage only. Bottom-anchored content over bottom-up scrim, uniform height. */
.elementor-element-20520e4 > .elementor-container > .elementor-column.elementor-col-14:not(.elementor-element-06a8c23){
  position:relative !important; overflow:hidden !important; padding:0 !important;
  aspect-ratio:4/3; min-height:300px;
}
/* Content wrapper is ABSOLUTELY positioned to fill the card (inset:0) rather than height:100%.
 * Root cause of the wide-viewport anchoring failure: a box sized only by aspect-ratio does NOT
 * establish a definite height for percentage-height children in Chrome, so height:100% collapsed
 * to the text height and floated to the card top; the gap grew as the card got taller with width.
 * Absolute inset:0 resolves against the column's used aspect-ratio height and bottom-pins at ALL widths. */
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) > .elementor-widget-wrap,
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) > .elementor-element-populated{
  position:absolute !important; inset:0; z-index:2;
  display:flex !important; flex-direction:column; justify-content:flex-end; padding:28px !important;
}
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-image{ position:absolute; inset:0; margin:0; z-index:0; }
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-image img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Scrim lives INSIDE the widget-wrap stacking context (between image z0 and text z2).
 * Prior versions put it on the column (z1) BELOW the wrap (z2) that CONTAINS the photo image,
 * so the photo painted over the scrim and text sat on the raw bright photo = unreadable. */
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) > .elementor-widget-wrap::after,
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) > .elementor-element-populated::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,rgba(14,28,46,.95) 0%,rgba(14,28,46,.90) 42%,rgba(14,28,46,.78) 60%,rgba(14,28,46,.32) 82%,rgba(14,28,46,0) 100%);
}
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-heading,
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-text-editor,
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-button{ position:relative; z-index:2; width:100%; }
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-heading{ margin-bottom:6px; }
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-heading h3{ color:#FFFFFF !important; text-shadow:0 1px 2px rgba(14,28,46,.5) !important; }
.elementor-element-20520e4 .elementor-col-14:not(.elementor-element-06a8c23) .elementor-widget-text-editor{
  color:#F5F2EE !important; margin-bottom:14px; text-shadow:0 1px 2px rgba(14,28,46,.5) !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* H7 testimonial avatar approximation (Tier-2 real avatars remain an editor change). */
.elementor-element-77736f7 :is(.elementor-element-a993d14,.elementor-element-92e1587,.elementor-element-18e47aa) .elementor-widget-text-editor:nth-child(3),
.elementor-element-77736f7 :is(.elementor-element-a993d14,.elementor-element-92e1587,.elementor-element-18e47aa) .elementor-widget-text-editor:nth-child(4){
  margin-left:64px;
}
.elementor-element-77736f7 :is(.elementor-element-a993d14,.elementor-element-92e1587,.elementor-element-18e47aa) .elementor-widget-text-editor:nth-child(3){
  position:relative; min-height:24px;
}
.elementor-element-77736f7 :is(.elementor-element-a993d14,.elementor-element-92e1587,.elementor-element-18e47aa) .elementor-widget-text-editor:nth-child(3)::before{
  position:absolute; top:0; left:-64px; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; background:#0E1C2E; color:#C59B7A;
  font:600 14px/1 Roboto,Arial,sans-serif; letter-spacing:.04em;
}
.elementor-element-77736f7 .elementor-element-a993d14 .elementor-widget-text-editor:nth-child(3)::before{ content:"RC"; }
.elementor-element-77736f7 .elementor-element-92e1587 .elementor-widget-text-editor:nth-child(3)::before{ content:"JG"; }
.elementor-element-77736f7 .elementor-element-18e47aa .elementor-widget-text-editor:nth-child(3)::before{ content:"FG"; }

/* ===== R2 2026-07-10 (v1.0.7) — B insights, E trust, F enclave(above), G intl desk ===== */

/* B: INSIGHTS — kill tag pills over card images, keep read-time badge, on-brand meta line. */
.elementor-element-8ac57d3 .rhea-top-tags .tags{ display:none !important; }
.elementor-element-8ac57d3 .rhea-top-tags .read-time{ display:inline-block !important; }
.elementor-element-8ac57d3 .rhea-date-category .rhea-date{ color:#55677D !important; }
.elementor-element-8ac57d3 .rhea-date-category .separator{ color:#55677D !important; }
.elementor-element-8ac57d3 .rhea-date-category .rhea-tags,
.elementor-element-8ac57d3 .rhea-tags-box a{ color:#C59B7A !important; }

/* H2 news-v4 pagination current bullet -> gold accent (was theme red; spec H2 #4). */
.elementor-element-8ac57d3 .real-btn.current{ background-color:#C59B7A !important; color:#0E1C2E !important; border-color:#C59B7A !important; }

/* E: TRUST band — center all; order eyebrow>H2>support>stats>chips (icon-list -> inline gold-middot chips). */
.elementor-element-bdc0386 > .elementor-container{ flex-wrap:wrap !important; justify-content:center !important; align-items:flex-start !important; }
.elementor-element-dfb483b{ display:contents !important; }
.elementor-element-dfb483b > .elementor-widget-wrap,
.elementor-element-dfb483b > .elementor-element-populated{ display:contents !important; }
.elementor-element-d64b684{ order:1; flex:0 0 100% !important; max-width:100% !important; text-align:center; }
.elementor-element-5c030a3{ order:2; flex:0 0 100% !important; max-width:100% !important; text-align:center; margin:0 auto 12px !important; }
/* Trust H2: 2 balanced lines at desktop (break after "trusted"), natural wrap on mobile. NO <br> in title. */
.elementor-element-5c030a3 h2{ max-width:none !important; margin:0 auto !important; text-wrap:balance; }
@media (min-width:1024px){ .elementor-element-5c030a3 h2{ max-width:22em !important; } }
.elementor-element-2ca9594{ order:3; flex:0 0 100% !important; max-width:100% !important; text-align:center; margin:0 auto 40px !important; }
.elementor-element-2ca9594 a{ color:#C59B7A !important; }
.elementor-element-bdc0386 .elementor-col-20:not(.elementor-element-dfb483b){ order:4; flex:0 0 44% !important; max-width:44% !important; margin-bottom:24px; padding:0 8px; }
@media (min-width:1025px){
  .elementor-element-bdc0386 .elementor-col-20:not(.elementor-element-dfb483b){ flex:0 0 22% !important; max-width:22% !important; margin-bottom:0; }
}
/* E2 MOBILE STAT NUMBERS 2026-07-11 (v1.0.14) — numbers must fit the 44% column.
 * Ivan: "on mobile, these 4 boxes are not aligned properly." Widget CSS pins the stat
 * numbers at 54px Lora with no mobile override; "3,000+" measures ~173px vs ~138px of
 * column content at 390px viewports, so it bled into the "11" column (outright glyph
 * overlap on font-boosting devices) and broke the 2x2 grid. min(54px,9.5vw) keeps the
 * original 54px wherever it fits (>=600px) and shrinks fluidly below — "3,000+" stays
 * inside its column down to 320px. Desktop (>=1025px, 22% cols) untouched. */
@media (max-width:1024px){
  .elementor-element-cd2a122,
  .elementor-element-400b5a2,
  .elementor-element-6dce4cc,
  .elementor-element-bb1ab50{ font-size:min(54px, 9.5vw) !important; }
}
.elementor-element-692212d{ order:5; flex:0 0 100% !important; max-width:100% !important; margin:36px auto 0 !important; padding-top:28px; border-top:1px solid rgba(245,242,238,.12); }
.elementor-element-692212d .elementor-icon-list-items{ display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:0; }
.elementor-element-692212d .elementor-icon-list-item{ margin:0 !important; padding:0 !important; }
.elementor-element-692212d .elementor-icon-list-icon{ display:none !important; }
.elementor-element-692212d .elementor-icon-list-text{ color:#F5F2EE !important; letter-spacing:.06em; text-transform:uppercase; font-size:13px; }
.elementor-element-692212d .elementor-icon-list-item:not(:last-child)::after{ content:"\00B7"; color:#C59B7A; margin:0 16px; font-weight:700; }

/* G: INTERNATIONAL DESK — 2x2 checklist, vertically-centered right stack, tighter band. */
@media (min-width:1024px){
  .elementor-element-cdcd1a0 .elementor-icon-list-items{ display:grid !important; grid-template-columns:1fr 1fr; column-gap:28px; row-gap:12px; }
}
.elementor-element-a75f4e7 > .elementor-widget-wrap,
.elementor-element-a75f4e7 > .elementor-element-populated{
  height:100%; display:flex !important; flex-direction:column; justify-content:center; gap:14px;
}
.elementor-element-aa8255d{ padding-top:56px !important; padding-bottom:56px !important; }

/* HERO search submit button — kill theme red, brand gold/navy (existing brand rule targeted wrong wrapper class). */
body.home .elementor-72663 .elementor-element-aa47415 .rhea_search_form_button,
body.home .elementor-72663 .elementor-element-aa47415 button[type="submit"]{
  background:#C59B7A !important; border-color:#C59B7A !important; color:#0E1C2E !important;
}
body.home .elementor-72663 .elementor-element-aa47415 .rhea_search_form_button span,
body.home .elementor-72663 .elementor-element-aa47415 button[type="submit"] span{ color:#0E1C2E !important; }
body.home .elementor-72663 .elementor-element-aa47415 .rhea_search_form_button:hover,
body.home .elementor-72663 .elementor-element-aa47415 .rhea_search_form_button:focus,
body.home .elementor-72663 .elementor-element-aa47415 button[type="submit"]:hover{
  background:#0E1C2E !important; border-color:#0E1C2E !important;
}
body.home .elementor-72663 .elementor-element-aa47415 .rhea_search_form_button:hover span,
body.home .elementor-72663 .elementor-element-aa47415 .rhea_search_form_button:focus span{ color:#F5F2EE !important; }
/* filter-tab active state — no red; active label navy, underline gold */
body.home .elementor-element-aa47415 .rhea-mod-tab input:checked + .rhea-mod-tab-name{ color:#0E1C2E !important; }
body.home .elementor-element-aa47415 .rhea-search-top-tabs-wrapper.enable-underline .rhea-mod-tab-name::after{ background-color:#C59B7A !important; }

/* HERO SEARCH BUTTON polish — match the 52px input bar (was 42px, cramped), uppercase brand label,
 * radius parity with the search inputs (0px), navy-on-gold (color set above), filter icon centered. */
body.home .elementor-element-aa47415 .rhea_top_search_fields,
body.home .elementor-element-aa47415 .rhea-search-form-frame{ align-items:center !important; }
body.home .elementor-element-aa47415 .rhea_buttons_top{ align-items:center !important; column-gap:14px !important; }
body.home .elementor-element-aa47415 .rhea_advanced_expander{ align-self:center !important; }
body.home .elementor-element-aa47415 .rhea_search_form_button{
  height:52px !important; min-height:52px !important; line-height:52px !important;
  border-radius:0 !important; padding:0 28px !important;
  font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase !important; font-weight:600 !important;
}
body.home .elementor-element-aa47415 .rhea_search_form_button span{
  font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase !important; line-height:52px !important;
}

/* ===== INSIGHTS TYPOGRAPHY 2026-07-10 (v1.0.12) — normalize news-v4 card type to prototype scale =====
 * Ivan: "blog posts title and content font size is not uniform with the rest of the webpage."
 * Rhea news-v4 shipped theme rem defaults (root=10px): title 24px/700/#1A1A1A, excerpt 23px/Roboto — both
 * oversized (excerpt competed with body scale; title neared the section H2). Re-authored in PX to the
 * approved prototype insights scale (docs/design/homepage-redesign-prototype .cgr-card__*). Scoped to the
 * homepage insights widget (.elementor-element-8ac57d3) ONLY — blog-family cards have their own rebuild lane. */
.elementor-element-8ac57d3 h3.rhea-post-title,
.elementor-element-8ac57d3 h3.rhea-post-title a{
  font-family:'Lora',Georgia,serif !important;
  font-size:20px !important; font-weight:600 !important; line-height:1.3 !important;
  color:#0E1C2E !important;
}
.elementor-element-8ac57d3 .rhea-excerpt{
  font-family:'Roboto',Arial,sans-serif !important;
  font-size:15px !important; font-weight:400 !important; line-height:1.6 !important;
  color:#55677D !important;
}
.elementor-element-8ac57d3 time.rhea-date{
  font-size:13px !important; line-height:1.5 !important; color:#55677D !important;
}
.elementor-element-8ac57d3 .rhea-date-category .separator,
.elementor-element-8ac57d3 .rhea-tags-box a.rhea-tags{
  font-size:13px !important; line-height:1.5 !important;
}
.elementor-element-8ac57d3 .rhea-top-tags .read-time{
  font-size:11px !important; font-weight:600 !important; line-height:1 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important; color:#55677D !important;
}

/* ===== BUTTON UNIFORMITY 2026-07-11 (v1.0.13) — one button geometry across homepage rows =====
 * Ivan: "buttons are not uniform" (services CTAs + featured filter chips).
 * Services row (82e6a6a): columns are equal height but CTAs sat at ragged y-positions (driven by
 * description length: tops 1856/1856/1880/1857) and "Explore Property Management" wrapped to 2 lines
 * (one-line needs 228px vs 214px card content). Fix: per-card flex column + margin-top:auto pins all
 * four CTAs to one bottom baseline; labels forced one-line. Paired with a settings-only label patch
 * (widget 26894ab -> "Explore management"; backup: backups/button-uniformity-20260711/) so the
 * longest label fits one line down to 1025px. Mobile stack unaffected (auto column height).
 * Featured filter chips (widget c45ce38 #filters): theme rem scale (root=10px) served 20px/44px pills
 * — a second button language at twice the CTA scale on one page. Re-authored in PX to the exact
 * services-CTA geometry: 13px/600, 12x24 pad, radius 8, border #E2DED8 -> 39px tall, gap 16.
 * Colors stay with cgr-rhea-brand-overrides (navy .current, sand hover). */
.elementor-element-82e6a6a > .elementor-container > .elementor-column.elementor-col-20:not(.elementor-element-7f6cf9b) > .elementor-widget-wrap{
  display:flex !important; flex-direction:column !important; height:100% !important;
}
.elementor-element-82e6a6a > .elementor-container > .elementor-column.elementor-col-20:not(.elementor-element-7f6cf9b) .elementor-widget-button{
  margin-top:auto !important;
}
.elementor-element-82e6a6a .elementor-widget-button a.elementor-button{ white-space:nowrap !important; }
.elementor-element-c45ce38 #filters{ gap:16px !important; }
.elementor-element-c45ce38 .filter-btn{
  font-size:13px !important; line-height:13px !important; font-weight:600 !important;
  padding:12px 24px !important; border-radius:8px !important;
  border:1px solid #E2DED8 !important; box-shadow:none !important;
}
.elementor-element-c45ce38 .filter-btn.current{ border-color:#0E1C2E !important; }
