/**
 * MapCheck — Property Teaser module styles
 *
 * Container-query driven so the same module fits a narrow column AND
 * a full-width section without per-page tweaks. Falls back gracefully
 * in browsers without container query support (Chrome <105, Safari <16).
 */

.mc-tres-wrap {
  container-type: inline-size;
  container-name: tres;
  width: 100%;
}

/* ── Intro block ─────────────────────────────────────────────── */
.mc-tres-intro {
  max-width: 980px;
  margin: 0 auto 1.5rem;
  text-align: center;
}
.mc-tres-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mid);
  margin-bottom: 1rem;
  font-weight: 500;
}
.mc-tres-kicker--on-dark { color: rgba(255,255,255,0.78); }

/* Badge-style highlights for punchy words inside the kicker — orange
   background, white text, real visual stopping power. INSTANT / FREE
   by default; user can wrap any word in <span class="mc-tres-hot">…</span>. */
.mc-tres-kicker .mc-tres-hot {
  display: inline-block;
  background: var(--mc-order) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: 0.08em;
  padding: 0.2em 0.55em;
  border-radius: 2px;
  vertical-align: 0.05em;
}
.mc-tres-kicker--on-dark .mc-tres-hot {
  background: var(--mc-order) !important;
  color: #ffffff !important;
}

.mc-tres-headline {
  font-family: 'Playfair Display', serif;
  color: var(--mc-ink);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.mc-tres-headline--on-dark { color: #ffffff; }
/* Italic emphasis word ("your", etc.) — Moss on light, Straw-light on dark.
   Both green, just tuned for legibility against their backgrounds. */
.mc-tres-headline em,
h2.mc-tres-headline em { color: var(--mc-moss) !important; font-style: italic; }
.mc-tres-headline--on-dark em,
h2.mc-tres-headline--on-dark em { color: var(--mc-straw-lt) !important; }

.mc-tres-subhead {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--mc-ink-mid);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}
.mc-tres-subhead--on-dark { color: rgba(255,255,255,0.72); }

/* ── Search panel ───────────────────────────────────────────── */
.mc-tres-panel-wrap {
  max-width: 980px;
  margin: 0 auto;
}
.mc-tres-panel {
  background: #ffffff;
  padding: 1.75rem 2rem;
  border: 1px solid var(--mc-paper-rule);
}

/* Row: label + input + button inline (wide); stacked (narrow) */
.mc-tres-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.mc-tres-row--addr { padding-bottom: 1rem; border-bottom: 1px solid var(--mc-paper-warm); }

.mc-tres-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-light);
  min-width: 160px;
  padding-right: 1rem;
}

.mc-tres-input {
  flex: 1;
  min-width: 0;            /* allow input to shrink inside flex */
  padding: 0.85rem 1rem;
  border: 1px solid var(--mc-paper-rule);
  background: #f7faf7;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  color: var(--mc-ink);
  border-radius: 0;
  outline: none;
}
.mc-tres-input:focus {
  border-color: var(--mc-ink);
  background: #ffffff;
}

.mc-tres-btn {
  border: none;
  padding: 0.95rem 1.6rem;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
}
.mc-tres-btn--moss { background: var(--mc-moss); color: #ffffff; }
.mc-tres-btn--ink  { background: var(--mc-ink);  color: #ffffff; }
.mc-tres-btn--moss:hover { background: var(--mc-moss-light); }
.mc-tres-btn--ink:hover  { background: var(--mc-ink-mid); }

.mc-tres-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.85rem 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
}
.mc-tres-divider span {
  flex: 1;
  height: 1px;
  background: var(--mc-paper-rule);
}

.mc-tres-foot {
  text-align: center;
  padding-top: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--mc-ink-faint);
}

/* ── Results section ────────────────────────────────────────── */
.mc-tres-results-section {
  max-width: 1200px;
  margin: 1.5rem auto 0;
  padding: 0 clamp(0.5rem, 2vw, 2vw);
}
.mc-tres-empty {
  background: #ffffff;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--mc-paper-rule);
}
.mc-tres-empty__lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-faint);
  margin-bottom: 0.4rem;
}
.mc-tres-empty__sub {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--mc-ink-light);
  font-size: 0.95rem;
}


/* ════════════════════════════════════════════════════════════════
 *  CONTAINER QUERIES — responds to MODULE width, not viewport.
 *  A 600-wide cutoff handles the typical "right column" case while
 *  keeping the wide horizontal layout for full-width placements.
 * ════════════════════════════════════════════════════════════════ */

@container tres (max-width: 700px) {
  .mc-tres-headline { font-size: clamp(1.4rem, 5cqw, 2rem); }
  .mc-tres-subhead  { font-size: 0.95rem; }
  .mc-tres-kicker   { font-size: 0.68rem; letter-spacing: 0.1em; }
  .mc-tres-panel    { padding: 1.25rem 1.25rem; }

  /* Stack rows vertically: label / input / button */
  .mc-tres-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .mc-tres-label {
    min-width: 0;
    padding-right: 0;
    text-align: left;
  }
  .mc-tres-btn { width: 100%; }
  .mc-tres-foot { font-size: 0.7rem; line-height: 1.5; }
}

@container tres (max-width: 480px) {
  .mc-tres-hero { padding-left: 1rem !important; padding-right: 1rem !important; }
  .mc-tres-headline { font-size: 1.4rem; }
}

/* Fallback for browsers without container query support: media-query
   approach using viewport. Less precise but better than nothing. */
@supports not (container-type: inline-size) {
  @media (max-width: 700px) {
    .mc-tres-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .mc-tres-label { min-width: 0; padding-right: 0; text-align: left; }
    .mc-tres-btn { width: 100%; }
    .mc-tres-headline { font-size: clamp(1.4rem, 5vw, 2rem); }
  }
}