/* ============================================================
   ISELLVICTORIA.CA GLOBAL CSS
   Overrides MyRealPage defaults for consistent brand experience
   ============================================================ */

/* --- CSS VARIABLES --- */
:root {
  --iv-card-radius: 14px;
  --iv-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  --iv-card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.10);
  --iv-card-border: 1px solid rgba(0, 0, 0, 0.08);
  --iv-card-padding: 18px 18px 14px;
}

/* ============================================================
   1. TYPOGRAPHY (GLOBAL FONT OVERRIDE)
   ============================================================ */

body, button, input, select, textarea {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

button, .btn, a.btn, a.button, input[type="submit"] {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ============================================================
   2. ANIMATION OVERRIDES (DISABLE MRP SCROLL/FADE)
   ============================================================ */

/* Stop fade/slide effects on custom HTML pages */
body.first-time-buyers .block-layout .fx,
body.buying .block-layout .fx,
body.downsizing-rightsizing .block-layout .fx,
body.move-up-growing-families .block-layout .fx {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Ensure child elements also remain visible */
body.first-time-buyers .block-layout .fx *,
body.buying .block-layout .fx *,
body.downsizing-rightsizing .block-layout .fx *,
body.move-up-growing-families .block-layout .fx * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Custom soft fade for page-specific elements */
body.first-time-buyers .soft-fade,
body.buying .soft-fade,
body.downsizing-rightsizing .soft-fade,
body.move-up-growing-families .soft-fade {
  opacity: 0;
  transform: translateY(10px);
  animation: softFadeIn 0.45s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes softFadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   3. CARD SYSTEM (CONSISTENT ROUNDING & SHADOWS)
   ============================================================ */

/* Municipality cards (block #bid_2847891) */
#bid_2847891 .content-container {
  background: #fff;
  border: var(--iv-card-border);
  border-radius: var(--iv-card-radius);
  overflow: hidden;
  box-shadow: var(--iv-card-shadow);
}

#bid_2847891 .content {
  padding: var(--iv-card-padding);
}

#bid_2847891 .image-container img {
  display: block;
  width: 100%;
  height: auto;
}

#bid_2847891 .content-container:active {
  transform: scale(0.99);
  filter: brightness(0.97);
}

/* Desktop: equal-height cards with bottom-aligned buttons */
@media (min-width: 992px) {
  #bid_2847891 .content-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #bid_2847891 .image-container {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex: 0 0 auto;
  }

  #bid_2847891 .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #bid_2847891 .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  #bid_2847891 .content .btn,
  #bid_2847891 .content a.btn,
  #bid_2847891 .content a.button {
    margin-top: auto;
    align-self: center;
  }
}

/* Homepage action cards (block #bid_4036099) */
#bid_4036099 :is(.content-container, .card, .item, .grid-item) {
  background: #fff;
  border: var(--iv-card-border);
  border-radius: var(--iv-card-radius);
  overflow: hidden;
  box-shadow: var(--iv-card-shadow);
}

#bid_4036099 :is(.image-container, .card-image, figure) {
  aspect-ratio: 16/9;
  overflow: hidden;
}

#bid_4036099 :is(.image-container img, .card-image img, figure img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  #bid_4036099 :is(.content-container, .card, .item, .grid-item) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #bid_4036099 :is(.content, .card-body, .item-content) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--iv-card-padding);
  }

  #bid_4036099 :is(.content, .card-body, .item-content) :is(.btn, a.btn, a.button, button) {
    margin-top: auto;
  }
}

/* ============================================================
   4. SITE-WIDE CARD ROUNDING FIX
   ============================================================ */

/* MRP "boxes" style blocks */
.block-layout[class*="boxes-"] .block-column.has-bg,
.block-layout[class*="boxes-"] .block-column.has-bg-color,
.block-layout[class*="boxes-"] .block-column.has-bg-image {
  border-radius: var(--iv-card-radius) !important;
  overflow: hidden !important;
}

/* Force all inner layers to respect card rounding */
.block-layout[class*="boxes-"] .block-column.has-bg::before,
.block-layout[class*="boxes-"] .block-column.has-bg::after,
.block-layout[class*="boxes-"] .block-column.has-bg :is(
  .with-smart-bg-outer,
  .with-smart-bg-inner,
  .bg,
  .content,
  .content-container,
  .bg-link
) {
  border-radius: inherit !important;
}

/* Generic image + content card pattern */
.content-container.has-media.has-content {
  border-radius: var(--iv-card-radius) !important;
  overflow: hidden !important;
}

.content-container.has-media.has-content > .image-container,
.content-container.has-media.has-content > .image-container img {
  border-radius: 0 !important;
}

/* Hover state elevation */
.block-layout[class*="boxes-"] .block-column.has-bg:hover,
.content-container.has-media.has-content:hover {
  box-shadow: var(--iv-card-shadow-hover) !important;
}

/* ============================================================
   5. IMAGE INSET FIX (PREVENT CORNER GAPS)
   ============================================================ */

#content-well .content-container.has-media {
  padding: 0 !important;
  overflow: hidden;
}

#content-well .content-container.has-media > .content {
  padding: var(--iv-card-padding) !important;
}

#content-well .content-container.has-media :is(.image-container, figure, .card-image) {
  margin: 0 !important;
  border-radius: 0 !important;
}

#content-well .content-container.has-media :is(.image-container img, figure img, .card-image img) {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  object-fit: cover;
}

/* ============================================================
   6. PAGE-SPECIFIC FIXES
   ============================================================ */

/* Greater Victoria hero (#bid_5112708) - maintain white text on dark background */
#bid_5112708.inverted {
  color: #fff !important;
}

#bid_5112708.inverted :is(h1, h2, h3, h4, h5, h6, p, li, span, a) {
  color: #fff !important;
}

#bid_5112708 .title,
#bid_5112708 .subtitle {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* #bid_4036099 — Homepage “Search / Neighbourhood / Home Worth” cards
   Goal: force consistent image frame + aligned titles/copy/buttons across the row
*/

/* Make each card a flex column so we can push CTA to the bottom */
@media (min-width: 992px){
  #bid_4036099 :is(.content-container, .card, .item, .grid-item){
    display:flex;
    flex-direction:column;
    height:100%;
  }

  /* Standardize the image frame height */
  #bid_4036099 :is(.image-container, .card-image, figure){
    aspect-ratio: 16 / 9;
    overflow:hidden;
  }
  #bid_4036099 :is(.image-container img, .card-image img, figure img){
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* Stack text + CTA consistently */
  #bid_4036099 :is(.content, .card-body, .item-content){
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:18px 18px 16px;
  }

  /* Title alignment: clamp to 2 lines so bottoms line up */
  #bid_4036099 :is(h2,h3,.title,.heading){
    margin: 0 0 10px;
    line-height:1.15;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    min-height: 2.3em; /* ~2 lines */
  }

  /* Body copy alignment: clamp to 4 lines */
  #bid_4036099 :is(p,.text,.description){
    margin: 0 0 14px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    overflow:hidden;
    min-height: 5.6em; /* ~4 lines */
  }

  /* Push CTA/link/button to the bottom of every card */
  #bid_4036099 :is(a.btn, .btn, a.button, button, a[href]){
    margin-top:auto;
  }
}

/* Mobile: keep images tidy, but don’t clamp aggressively */
@media (max-width: 991px){
  #bid_4036099 :is(.image-container, .card-image, figure){
    aspect-ratio: 16 / 9;
    overflow:hidden;
  }
  #bid_4036099 :is(.image-container img, .card-image img, figure img){
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
}

/* #bid_4036099 — fix title truncation + improve responsive headings */

/* Kill any single-line/ellipsis truncation coming from the theme */
#bid_4036099 :is(h2,h3,.title,.heading){
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Make headings scale with screen size (prevents awkward wraps/clips) */
#bid_4036099 :is(h2,h3,.title,.heading){
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
}

/* If your earlier clamp is causing “Neighbourhoods” to get cut,
   relax it at common breakpoints */
@media (max-width: 1200px){
  #bid_4036099 :is(h2,h3,.title,.heading){
    -webkit-line-clamp: 3;
    min-height: 3.4em; /* ~3 lines */
  }
}

@media (max-width: 640px){
  /* On mobile, don’t force equal heights; let titles/copy breathe */
  #bid_4036099 :is(h2,h3,.title,.heading),
  #bid_4036099 :is(p,.text,.description){
    -webkit-line-clamp: unset;
    min-height: unset;
  }
}