/* ===========================================================================
   home.css — The Bloomfield County Home (homepage)
   Builds on explore.css (brand tokens + header/footer/modal/buttons).
   Brand: THE COUNTY · Editorial Coast.
   ========================================================================== */

/* hero text */
.x-hero h1 { margin-top: 6px; }
.hh-meta { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--stone); margin: 26px 0 6px; }
@media (min-width: 1081px) { .hh-meta { margin: 32px 0 8px; } }
.hh-meta b { color: var(--ink); font-weight: 600; }
.hh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn-ghost {
  display: inline-flex; align-items: center; background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-sm); padding: 13px 22px;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s, color .18s;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.x-hero-badge .pct { white-space: nowrap; }

/* section headings */
.hs-head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.hs-head .x-eyebrow { display: inline-block; }
.hs-head h2 { font-size: clamp(28px, 4vw, 42px); }
.hs-head p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 14px 0 0; }

/* the stay */
.home-stay { padding-top: 48px; padding-bottom: 12px; }   /* keep .wrap side gutter */
.facts { display: flex; max-width: 720px; margin: 6px auto 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { flex: 1; text-align: center; padding: 22px 6px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: none; }
.fact .n { font-family: var(--serif); font-size: 38px; font-weight: 400; line-height: 1; color: var(--ink); }
.fact .l { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.amen { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.amen-item { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 13px 0; }
.amen-item::before {
  content: ""; flex: none; width: 18px; height: 18px; background: no-repeat center / contain
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336546B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

/* gallery (masonry) */
.home-gallery { padding-top: 56px; padding-bottom: 56px; }   /* keep .wrap side gutter */
.gallery { columns: 3; column-gap: 16px; }
.gal { break-inside: avoid; margin: 0 0 16px; position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.gal img { width: 100%; height: auto; display: block; }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(20, 24, 26, .6));
}

/* longer-stays inquiry band */
.longstay {
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 36px 40px; margin: 0 0 8px;
}
.longstay h2 { font-size: clamp(24px, 3vw, 32px); margin: 10px 0 10px; }
.longstay p { color: var(--ink-soft); max-width: 56ch; margin: 0; line-height: 1.65; }
.longstay .btn-book { flex: none; }
@media (max-width: 720px) {
  .longstay { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .longstay .btn-book { width: 100%; padding-top: 15px; padding-bottom: 15px; text-align: center; }
}

/* explore CTA band */
.home-explore {
  background: var(--pine); color: var(--on-dark); border-radius: var(--r-lg);
  padding: 60px 40px; text-align: center; box-shadow: var(--shadow-lg); margin: 8px 0 64px;
}
.home-explore h2 { color: var(--on-dark); font-size: clamp(30px, 4.5vw, 46px); margin: 14px 0; }
.home-explore p { color: var(--on-dark-soft); max-width: 52ch; margin: 0 auto 28px; font-size: 17px; line-height: 1.6; }

@media (max-width: 900px) {
  .gallery { columns: 2; }
}
@media (max-width: 600px) {
  /* full-width, stacked hero CTAs: primary (clay) over secondary (outline).
     Identical box model (display, line-height, padding, 1px border) so the two
     buttons are the exact same height — the ghost's outline no longer makes it
     taller than the filled button. */
  .hh-cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px; }
  .hh-cta .btn-book, .hh-cta .btn-ghost {
    width: 100%; display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 22px; font-size: 12px; line-height: 1; border: 1px solid transparent;
  }
  .hh-cta .btn-ghost { border-color: var(--ink); }
}
@media (max-width: 560px) {
  .gallery { columns: 1; }
  .amen { grid-template-columns: 1fr; }
  .fact .n { font-size: 30px; }
  .home-explore { padding: 44px 24px; }
}