/* 2026-09-08 | The Retreat, Carlingford | responsive overrides
   ------------------------------------------------------------------
   Everything that changes below a breakpoint lives here, and nowhere else. Loaded after
   site.css, so these rules win.

   There is deliberately NO separate mobile page. One HTML file, one set of content, and this
   file adjusts the layout for narrow screens. A second page would mean every price, phone
   number and paragraph had to be changed twice, and the two would drift apart within a month.

   Breakpoints, largest first:
     1000px - the booking rail stops being a sidebar and drops under the content
      720px - phone layout: single-column rooms, stacked hero, compact masthead
      700px - the eat-and-drink list goes to one column
      560px - kitchen photographs stack, appliance strip goes two-up
   ------------------------------------------------------------------ */

/* ---------- 1000px: the two-column body collapses ---------- */

@media (max-width: 1000px) {
  .body { grid-template-columns: 1fr; }
  .rail { position: static; }
  .hero__layout { grid-template-columns: 1fr; }
  .reviews { height: auto; }
  .reviews__viewport { min-height: 8.5rem; }
}

/* ---------- 720px: phones ---------- */

@media (max-width: 720px) {
  /* the wordmark was wrapping to two lines and colliding with the phone number and button */
  .masthead__inner { grid-template-columns: auto 1fr; gap: .6rem; padding: .8rem 0; }
  .masthead__nav { display: none; }
  .wordmark { text-align: left; }
  .wordmark__name { font-size: 1.05rem; letter-spacing: .16em; white-space: nowrap; }
  .wordmark__place { font-size: .52rem; letter-spacing: .18em; }
  .masthead__cta { gap: .7rem; }
  .masthead__phone { display: none; }   /* the number is one tap away in the rail and footer */
  .masthead__cta .btn { padding: .6rem 1.1rem; font-size: .64rem; letter-spacing: .14em; }
  .masthead__offer { font-size: .5rem; letter-spacing: .08em; }
  /* the compact masthead is ~79px here, so the jump list sits higher to stay flush */
  .jumps { top: 4.9rem; }

  /* this row was overlapping itself: two long strings sharing one flex line */
  .hero__bar { flex-direction: column; align-items: flex-start; gap: .5rem; font-size: .62rem; }

  .hero__grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .hero__grid > * { aspect-ratio: 4 / 3; height: auto; }
  .hero__grid > *:first-child { grid-row: auto; }

  .badges { gap: .4rem 1.4rem; justify-content: flex-start; }

  /* rooms stack: photograph above its description */
  .room { grid-template-columns: 1fr; gap: .8rem; }
  .room--pair { grid-template-columns: 1fr; }

  .rec--wide { grid-column: auto; }

  /* three appliance thumbnails are too small to read on a phone */
  .rec__strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 700px: the eating-out list ---------- */

@media (max-width: 700px) {
  #eat .eatlist { grid-template-columns: 1fr; }
  #eat .eatlist li:last-child { border-bottom: 1px solid var(--line); }
}

/* ---------- 560px: small phones ---------- */

@media (max-width: 560px) {
  .kitchen__photos { grid-template-columns: 1fr; }
  .kit__strip { grid-template-columns: repeat(2, 1fr); }
}