/* ============================================================
   Migration overrides — layered AFTER main.css (which is kept
   byte-for-byte from the original). Put fixes here, not in main.css.
   ============================================================ */

/* ------------------------------------------------------------
   Fonts: Inter (body) and Inder (subheading) are now self-hosted
   via next/font (app/(main)/layout.tsx) instead of render-blocking
   Google Fonts links. Map the design's variables onto the generated
   next/font CSS variables, keeping the bare family name as fallback.
   --font-heading (haboro-contrast-extended, Adobe Fonts) is loaded
   separately by <TypekitFont> and is intentionally NOT remapped here.
   ------------------------------------------------------------ */
:root {
  --font-body: var(--font-inter), 'Inter', sans-serif;
  --font-subheading: var(--font-inder), 'Inder', sans-serif;
}

/* ------------------------------------------------------------
   Unified page-hero title treatment (EN + ES).
   Original site styled each page's hero title differently — some
   centered, some bottom-left, varying font weight / case. This
   normalizes every interior-page hero title to ONE treatment:
     • left-aligned, with its left edge on the SAME vertical line
       as the header logo (the header uses a 1400px container with
       40px side padding — 20px on mobile — so we mirror that), and
     • one font: --font-heading, 700, uppercase, white.
   The homepage slideshow caption (.hero-caption) is a distinct
   component and is intentionally NOT touched.
   ------------------------------------------------------------ */

/* --- Horizontal alignment: mirror the header logo container --- */
.about-hero-content,
.amenities-hero-content,
.beachfront-hero .hero-content,
.brasilito-impact-hero .hero-content,
.concierge-hero-content,
.hero-page-content,
.hero > .hero-content,
.blog-hero .hero-content,
.article-hero .hero-content {
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  text-align: left;
}

/* Children that were centered (margin:auto / text-center) → left */
.hero-page-content p,
.blog-hero p,
.article-hero p,
.article-hero .hero-meta {
  margin-left: 0;
  margin-right: 0;
}
.hero-line {
  margin-left: 0;
  margin-right: 0;
}

/* The generic full-height `.hero` (FAQ, ES Comunidad) uses flex to place
   its content. Anchor it to the BOTTOM (like the about/amenities/brasilito
   heroes) instead of vertically centering — otherwise the title floats in
   the middle of the tall hero. align-items:center centers the 1400 box;
   text inside it stays left-aligned to the logo. */
.hero:has(.hero-content) {
  display: flex;
  flex-direction: column;
  align-items: center;        /* centers the max-width:1400 box itself */
  justify-content: flex-end;  /* anchor content to the bottom of the hero */
  padding-bottom: 8vh;        /* ≈ the `bottom:8%` the other heroes use */
  text-align: left;
}

/* The bare `.hero-content` (FAQ, ES Comunidad) has NO position/z-index of its
   own (unlike .beachfront-hero/.brasilito-impact-hero .hero-content, which are
   absolute z-index:2). Without this, the absolutely-positioned `.hero-overlay`
   paints OVER the title and veils it — making the white text look transparent.
   Lift the content above the overlay. */
.hero > .hero-content {
  position: relative;
  z-index: 2;
}

/* Hero/section image overlays are stripped site-wide below (true colors),
   so the bare FAQ `.hero-overlay` no longer needs a special-case gradient —
   it is neutralized along with the rest. */

/* The beachfront hero is the only one at 60vh — so its bottom-anchored
   title lands mid-screen and reads as floating. Match about-us (80vh) so
   the title sits at the same grounded position as the rest. */
.beachfront-hero {
  height: 80vh;
  min-height: 520px;
}

/* --- One font/color for every interior-page hero title --- */
.about-hero-title,
.amenities-hero h1,
.beachfront-hero h1,
.brasilito-impact-hero h1,
.concierge-hero-content h1,
.hero-page-content h1,
.hero-page-content .hero-title,
.hero > .hero-content h1,
.blog-hero h1,
.article-hero h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.65);
  line-height: 1.2;
}

/* /contact uses the dark navy `.contact` section (like brasilito-impact) but
   keeps its phone/email/social info. The social buttons + consent note were
   styled for the old white page, so re-theme them for the dark background. */
.contact .contact-detail a {
  color: rgba(255, 255, 255, 0.8);
}
.contact .contact-detail a:hover {
  color: var(--gold);
}
.contact .contact-info-social a {
  border-color: rgba(255, 255, 255, 0.25);
}
.contact .contact-info-social a:hover {
  border-color: var(--gold);
  background: var(--gold);
}
.contact .contact-info-social svg {
  fill: #fff;
}
.contact .contact-info-social a:hover svg {
  fill: var(--navy);
}
.contact .contact-form-consent-note {
  color: rgba(255, 255, 255, 0.5);
}
.contact .contact-form-consent-note a {
  color: var(--gold);
}

/* Match the header's mobile side padding (20px) so titles stay
   aligned with the logo on small screens. */
@media (max-width: 768px) {
  .about-hero-content,
  .amenities-hero-content,
  .beachfront-hero .hero-content,
  .brasilito-impact-hero .hero-content,
  .concierge-hero-content,
  .hero-page-content,
  .hero > .hero-content,
  .blog-hero .hero-content,
  .article-hero .hero-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
   MOBILE: collapse multi-column layouts to a single column.
   Several grids in main.css never declared a mobile breakpoint,
   so on phones they stayed 2–6 columns and looked cramped. We
   mirror the breakpoints the rest of the site already uses:
     • two-pane text/media blocks stack at 900px (same as the
       existing .ocean-view / .amenities / .community sections);
     • card / multi-column grids stack at 768px (the site's
       primary mobile width, where the nav also collapses).
   Tabular numeric grids (stat counters) intentionally stay
   multi-column — they read fine compact and are meant to look
   table-like, per the requirement that tables keep 2 columns.
   ============================================================ */

/* --- Two-pane (text + image / side-by-side) blocks → stack --- */
@media (max-width: 900px) {
  .content-grid,
  .amenity-grid,
  .partner-row,
  .org-row-main,
  .sister-media,
  .contact-content-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* .content-grid.reverse swaps its two columns with direction:rtl;
     once stacked that would flip the vertical order — reset it so
     text stays above its image. */
  .content-grid.reverse { direction: ltr; }
  /* The featured org card places its header beside its body (row). */
  .org-card.featured { flex-direction: column; }
}

/* --- Card / multi-column grids → single column on phones --- */
@media (max-width: 768px) {
  .projects-grid,
  .org-row-secondary,
  .env-grid,
  .concierge-cards-grid,
  .features-grid,
  .minimal-form {
    grid-template-columns: 1fr;
  }

  /* Find-us trio (two photos + map) used a fixed 480px row track;
     stack it and let each tile size itself. */
  .findus-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .findus-photo-main,
  .findus-photo-secondary,
  .findus-map { height: 280px; }

  /* Brasilito-impact gallery mosaic: a fixed 3-col, 760px-tall grid
     with a center carousel spanning both rows and 4 static photos
     placed at explicit columns via INLINE styles (gridColumn:1/3 +
     gridRow). Inline styles beat normal CSS, so we need !important to
     unpin them — otherwise the grid re-expands to 3 columns on phones
     (the "carousel in one tiny column + images stuck to the right"
     bug). Lay the carousel full-width on top, the 4 photos 2×2 below.*/
  .gallery-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .gallery-mosaic > img {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 160px;
  }
  .gallery-center {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: -1;            /* carousel first, photos beneath it */
    height: 52vh;
    min-height: 280px;
  }

  /* Tabular numeric grid stays multi-column (compact, table-like)
     rather than collapsing into one tall column. */
  .res-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Residences unit cards: auto-fit columns have a 320px MINIMUM, which
     is wider than a phone's content area — so the cards kept their 320px
     width and pushed to the right instead of centering. Force one
     full-width, centered column. */
  .units-grid { grid-template-columns: 1fr; }

  /* Ocean-view unit list items were `white-space:nowrap`, so long
     lines pushed past the screen edge → horizontal scroll. Let them
     wrap on mobile. */
  .unit-list li { white-space: normal; }

  /* The 7-column "Compare Our Residences" table can't fit a phone, so
     it scrolls horizontally inside a `.compare-scroll` wrapper (added
     in the page markup). The wrapper — NOT `.compare-inner` — is the
     scroll box, so the section TITLE stays put and only the table
     slides. Keep the table at a readable width. */
  .compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table { min-width: 560px; }

  /* Beach lifestyle mosaic (amenities): items had a FIXED grid-auto-row
     height, so the navy text card ("Arcadia at Brasilito Beach …")
     overflowed its cell and printed on top of the row below — the
     "text behind each other" bug. Let rows size to content; image
     tiles keep their aspect ratio, the text card sizes to its text. */
  .lifestyle-mosaic { grid-auto-rows: auto; grid-template-rows: none; }
  .lifestyle-mosaic-text {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 0;
  }

  /* Beachfront lifestyle carousel: show ONE image per view instead of
     three stretched slivers (the JS reads slide width live, so this is
     enough; visible-count is also set to 1 in SiteScripts). */
  .lc-slide { flex: 0 0 100%; }

  /* About-us hero used `background-size:100% auto`, which on a narrow
     phone shrinks the photo to a short strip with empty space above
     and below. Fill the hero instead. */
  .about-hero-bg { background-size: cover !important; }

  /* Blog article hero centers its title vertically, so longer titles
     rose up under the fixed header logo. Anchor the title to the
     bottom of the hero, clear of the header. */
  .article-hero {
    align-items: flex-end;
    justify-content: flex-start;
  }
  .article-hero .hero-content { padding-bottom: 32px; }

  /* Blog article titles were large enough to rise into the fixed
     header logo. Cap the size on phones. */
  .article-hero h1 { font-size: 1.5rem; line-height: 1.25; }

  /* Beachfront lifestyle carousel: showing one slide per view means the
     JS renders one dot PER image (~20 dots). That row got wide enough to
     shove the prev/next arrows off the (clipped) viewport. Let the
     controls wrap — arrows stay centered on top, dots flow beneath. */
  .lc-controls { flex-wrap: wrap; gap: 12px 16px; }
  .lc-prev { order: 1; }
  .lc-next { order: 2; }
  .lc-dots { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: center; }

  /* Amenities beach mosaic text card: keep the eyebrow, headline and
     rule comfortably separated so nothing collides on small screens
     (defensive — overrides the inline gap/padding). */
  .lifestyle-mosaic-text {
    gap: 0.85rem !important;
    padding: 2rem 1.25rem !important;
    justify-content: center !important;
  }
  .lifestyle-mosaic-text > span:first-child { letter-spacing: 0.18em; line-height: 1.5; }
}

/* ------------------------------------------------------------
   Brasilito-impact "Where Every Dollar Went" stat banner: the gold
   dividers between stats are vertical (1px × 60px). Once the banner
   stacks into a column on phones, those read as stray vertical ticks —
   flip them to horizontal rules between the stacked stats.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .raised-banner { flex-direction: column; gap: 24px; }
  .raised-divider { width: 64px; height: 1px; }
}

/* ------------------------------------------------------------
   Backstop: nothing should ever scroll the page sideways on a
   phone. The header is position:fixed (not sticky) and there is
   no sticky positioning on the site, so clipping horizontal
   overflow at the root is safe and catches any stray wide element
   (off-canvas mobile nav, full-bleed images, etc.).
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   "Schedule a Showing" CTA inside the slide-in mobile menu, sitting
   right above the EN/ES language switcher. main.css keeps the header
   bar button hidden on mobile; this is its replacement, styled to
   MATCH the desktop `.btn-schedule` pill exactly. Selector is
   `.mobile-nav a.mobile-nav-schedule` so it outranks `.mobile-nav a`
   (which otherwise wins on specificity and re-adds the link divider).
   The .mobile-nav itself is only visible on phones, so no media query.
   ------------------------------------------------------------ */
.mobile-nav a.mobile-nav-schedule {
  display: inline-block;                     /* shown by default — the menu IS the phone nav */
  margin: 24px 0 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 22px 26px;
  border: 1px solid var(--white);
  border-bottom: 1px solid var(--white);     /* override .mobile-nav a divider */
  border-radius: 50px;
  color: var(--white);
  background: transparent;
  transition: all 0.3s ease;
}
.mobile-nav a.mobile-nav-schedule:hover {
  background: var(--white);
  color: var(--navy);
}
/* Desktop ONLY: hide it — the desktop header bar already shows its own
   `.btn-schedule`, so the in-menu copy would be a duplicate there. */
@media (min-width: 769px) {
  .mobile-nav a.mobile-nav-schedule { display: none; }
}

/* ============================================================
   TRUE-COLOR IMAGES — remove the navy tint overlays and the
   color-grading filters (saturate/brightness/contrast) that
   main.css layered over hero and section photos, so images
   render with their real colors. Hero/caption titles stay
   legible via their own text-shadow (set in the block above
   and in main.css `.hero-caption-*`).
   ============================================================ */

/* --- Navy tint overlays painted over images → transparent --- */
.elevated-slideshow-overlay,
.architecture-slideshow-overlay,
.about-hero-overlay,
.concierge-hero-overlay,
.amenities-hero-overlay,
.hero-overlay {
  background: none;
}

/* `.hero-gradient` (homepage slideshow) is set with !important in main.css,
   so the override needs it too. */
.hero-gradient {
  background: none !important;
}

/* Hero/section gradients drawn as `::after` pseudo-elements → transparent. */
.blog-hero::after,
.article-hero::after,
.unit-hero::after,
.beachfront-hero::after,
.brasilito-impact-hero::after,
.lch-slide::after {
  background: none;
}

/* --- Strip color-grading filters from images (true colors) --- */
.elevated-slideshow img,
.about-hero-bg,
.amenities-hero-bg,
.sister-media video,
.sister-media img,
.sister-media video:hover,
.sister-media img:hover,
.findus-photo-main img,
.findus-photo-secondary img {
  filter: none;
}