/* ==========================================================================
   mls.css — /all-listings, the island-wide FlexMLS IDX embed.

   This page is a host, not a composition: everything below the intro is a
   cross-origin iframe we cannot style, script or measure. So the job here is
   only to (a) give it the site's frame and (b) hand it a viewport-sized,
   stable box to live in.

   Two rules that follow from "cross-origin" and are load-bearing:
     * the frame's height is set HERE and never by its content — no
       auto-resize is possible, so the box is sized from the viewport.
     * the header is opaque on this page (main.css §10) — see the note there.

   Sections
     1. Page shell
     2. Intro
     3. Frame
     4. Fallback
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell — clears the fixed header, which is opaque here.
   -------------------------------------------------------------------------- */
/* The intro + the frame together are exactly one viewport, however tall the
   intro turns out to be: `main` is a flex column pinned to 100svh and the
   frame is the flexing child. That is the whole reason this page does not
   hard-code the frame's height against a guessed intro height — a headline
   that wraps to two lines on a narrow laptop would otherwise push the bottom
   of the IDX (its pagination) below the fold. */
.page-mls main {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: 120rem;
}
@media (max-width: 767.98px) {
  .page-mls main {
    /* the mobile nav wraps to two lines (main.css §10), so the bar is taller */
    padding-top: 110rem;
  }
}

/* --------------------------------------------------------------------------
   2. Intro — the same label + headline pairing the about page uses for its
   section heads, at the top of the page rather than inside it.
   -------------------------------------------------------------------------- */
/* One short band, not a hero: label, headline and standfirst share a single
   row across the 15-column grid (main.css .grd). fn-h4 rather than the fn-h3
   the other page heads use — this page's subject is the frame below it, and
   118rem of serif would take a third of the viewport away from it. */
.mls-head {
  flex: none;
  padding-bottom: 24rem;
}
/* Two rows: the label on its own (the about page's section-head pairing),
   then the headline with the standfirst set against its baseline on the right.
   `align-items: end` is what pins the standfirst to the bottom of the
   headline — it cannot be a baseline alignment, because SplitText wraps the
   headline in masks that carry their own descender padding and there is no
   shared baseline left to align to. */
.mls-lbl {
  grid-column: 1 / 3;
  grid-row: 1;
  color: var(--gr3);
  margin-bottom: 10rem;
}
.mls-h {
  grid-column: 1 / 11;
  grid-row: 2;
  align-self: end;
  margin: 0;
}
.mls-p {
  grid-column: 11 / -1;
  grid-row: 2;
  align-self: end;
  max-width: 420rem;
  /* the mask padding under the headline's last line, so the two sit level */
  padding-bottom: 0.3em;
  color: var(--gr3);
}

@media (max-width: 767.98px) {
  /* main.css turns .grd into a FLEX COLUMN below 768 — there are no grid
     tracks left down here, and `align-self:end` stops meaning "sit on the
     bottom edge" and starts meaning "sit on the right edge", which silently
     right-aligned the headline and the standfirst. Both are reset. */
  .mls-lbl,
  .mls-h,
  .mls-p {
    align-self: stretch;
  }
  .mls-lbl { margin-bottom: 6rem; }
  .mls-p {
    max-width: none;
    padding-bottom: 0;
    margin-top: 8rem;
  }
}

/* --------------------------------------------------------------------------
   3. Frame

   `svh` not `vh`: on iOS the URL bar makes `vh` taller than what is actually
   on screen, which would push the bottom of the IDX (its pagination) under
   the chrome for the whole session. The px floor is deliberate — below about
   560 real pixels the IDX's own toolbar plus one result card no longer fit,
   and a nested scroller that short is worse than a taller page.
   -------------------------------------------------------------------------- */
/* .mls-embed and its container are pure pass-throughs for the flex height —
   each one has to be a flex column itself or `flex:1` on the frame has
   nothing to grow inside. */
.mls-embed {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mls-embed > .ctr {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mls-frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--gr);
  background-color: var(--wh);
  overflow: hidden;
}
/* ABSOLUTE, not `height: 100%` — and this is the single most important rule
   on the page. `.mls-frame` gets its height by FLEXING, which does not make
   that height "definite" for percentage resolution in a child. So
   `height: 100%` resolved to nothing and the iframe fell back to the CSS
   default intrinsic size of a replaced element: 300×150.

   The failure is silent and does not look like a sizing bug. The frame BOX
   was the right height (measured 670px), the IDX loaded, its header and
   "718 Results" line rendered — but everything below was blank, because
   inside the frame `innerHeight` was 150 and the app had laid its panels out
   against that. Measuring the parent proves nothing here; the number that
   matters is `innerHeight` inside the frame's own target.

   `inset: 0` on an absolutely positioned box resolves against the padding box
   of the positioned ancestor whether or not that ancestor's height is
   definite, so it is immune to the whole problem. */
.mls-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The IDX paints nothing for a second or two on a cold load, and a bare
   rectangle reads as broken. The placeholder is gated on `.is-loading`, which
   mls.js clears on the iframe's load event — NOT layered under the frame and
   left to be covered, because FlexMLS does not paint an opaque background
   across its whole document and the text showed straight through it. */
.mls-frame.is-loading::after {
  content: "Loading the Roatán MLS…";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wh);
  color: var(--gr3);
  font-size: 14rem;
  letter-spacing: -0.02em;
}
/* No-JS needs no rule of its own: mls.js is what ADDS `.is-loading`, so a
   visitor without JS simply never sees a placeholder nothing would clear. */

@media (max-width: 767.98px) {
  .mls-frame {
    /* Lower than the desktop floor on purpose: on a 375×667 phone a 520px
       floor makes `main` taller than the viewport, which puts the frame's
       own bottom edge below the fold — the exact thing the flex height is
       there to prevent. The IDX switches to its stacked phone layout at this
       width, so it needs less. */
    min-height: 380px;
  }
}

/* --------------------------------------------------------------------------
   4. Fallback — the escape hatch. The IDX is a third-party app behind a bot
   challenge; if it ever refuses to frame, this link still works.
   -------------------------------------------------------------------------- */
.mls-foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12rem;
  padding: 12rem 0 30rem;
  color: var(--gr3);
  font-size: 14rem;
}
.mls-foot a {
  color: var(--bk);
}
@media (max-width: 767.98px) {
  .mls-foot {
    padding-bottom: 20rem;
  }
}