/* Terravive transactional landing pages (2026-09-11).
   The landing pages reuse the theme's own room-page / home-page sections (room-detail-hero,
   home-page-room-preview, room-detail-amenities, room-type cards, terra-testimonial, terra-faq,
   room-detail-promo, terra-inquiry-form). This file only adds the few pieces the theme doesn't have,
   plus the footer "Stay in Christchurch" links and the mobile booking bar.
   Plain CSS (not part of the SCSS build) so WP-SCSS recompiles can't drop it. */

/* Feature image in the amenities-style section (same crop + radius as the room gallery) */
.lp-page .lp-feature-img { display: block; width: 100%; height: auto; aspect-ratio: 1.4545; object-fit: cover; border-radius: 16px; }

/* Body copy inside theme groups, matching .view-more-lede */
.lp-page .lp-copy { font-size: 16px; line-height: 1.6; color: #555; margin: 0 0 .75rem; }
.lp-page .lp-copy a, .lp-page .lp-check-list a { color: #F48056; }
.lp-page .room-detail-amenity-group { margin-bottom: 1.5rem; }

/* Check list using the theme's amenity-check icon */
.lp-page .lp-check-list { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .55rem; }
.lp-page .lp-check-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: 16px; line-height: 1.5; color: #555; list-style: none; }
.lp-page .lp-check-list img { flex: none; width: 18px; height: 18px; margin-top: 3px; }

/* Section titles for the room-cards and distances sections (theme h2, left aligned) */
.lp-page .lp-section-title { text-align: left; margin-bottom: 1.5rem; }
.lp-page .lp-rooms { padding-top: clamp(2.5rem, 5vw, 3.75rem); }

/* Distances list, styled like the room card detail rows */
.lp-page .lp-nearby { padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.lp-page .lp-distance-list { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid #E8E2DF; }
.lp-page .lp-distance-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #E8E2DF; list-style: none; }
.lp-page .lp-distance-name { font-size: 16px; color: #52433E; font-weight: 600; }
.lp-page .lp-distance-meta { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #71747C; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-page .lp-note { font-size: 13px; color: #71747C; margin: .75rem 0 0; }
.lp-page .lp-map-img { width: 100%; height: auto; }

/* Related links as theme pill buttons */
.lp-page .lp-related { margin-top: 2.5rem; }
.lp-page .lp-related-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.lp-page .lp-related-links .btn-tertiary { font-size: 16px !important; padding: 12px 20px !important; }

@media (max-width: 767px) {
	.lp-page .lp-distance-list li { flex-direction: column; gap: .15rem; }
	.lp-page .lp-distance-meta { text-align: left; white-space: normal; }
}

/* ---------- Footer: Stay in Christchurch links ---------- */
.footer-stay-links { border-top: 1px solid rgba(255,255,255,.15); margin-top: 28px; padding-top: 22px; }
.footer-stay-links .footer-heading { margin-bottom: 12px; }
.footer-stay-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-stay-links li { margin: 0; }
.site-footer .footer-stay-links a { color: #F3EEEA; opacity: .85; text-decoration: none; font-size: 15px; }
.site-footer .footer-stay-links a:hover, .site-footer .footer-stay-links a:focus { color: #F48056; opacity: 1; }

/* ---------- Mobile booking bar ---------- */
.tv-mobile-book-bar { display: none; }
@media (max-width: 767px) {
	.tv-mobile-book-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 18px rgba(6,20,27,.12); }
	.tv-mobile-book-bar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 16px; }
	.tv-mobile-book-bar__call { border: 2px solid #F48056; color: #F48056; background: #fff; }
	.tv-mobile-book-bar__book { background: #F48056; color: #fff; border: 2px solid #F48056; }
	body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ---------- Location page "What's nearby" table (existing page) ---------- */
.lp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.lp-table th, .lp-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #ECE7E4; }
.lp-table th { background: #FBFBFD; color: #52433E; font-weight: 600; }
.lp-table td:nth-child(2), .lp-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-note { font-size: 13px; color: #71747C; margin-top: 8px; }
.full-bleed > .lp-narrow { max-width: 1040px; }
.lp-list { padding-left: 1.2em; margin: 8px 0 0; }
.lp-list li { margin: 0 0 10px; line-height: 1.6; list-style: disc; }

/* Theme adds list indents inside main; reset them for the landing lists */
.lp-page .lp-distance-list li, .lp-page .lp-check-list li { padding-left: 0 !important; margin-left: 0 !important; }
.lp-page .lp-distance-list li::before, .lp-page .lp-check-list li::before { content: none !important; }
.lp-page .lp-related .room-detail-amenity-heading { display: block; margin-bottom: .9rem; }
/* Contextual link under the room-preview line (internal links to the apartments hub) */
.terra-hub-link { margin: 14px 0 0; font-size: 16px; }
.terra-hub-link a { color: #F48056; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(244,128,86,.4); }
.terra-hub-link a:hover, .terra-hub-link a:focus { color: #B4502C; border-bottom-color: #B4502C; }

/* ---------------------------------------------------------------------------
   Mobile hero fix (15 Sep 2026)

   Two pre-existing theme bugs, both visible on the live room pages and inherited
   by the new landing pages because they reuse the same hero:

   1. main.css sets the hero headline to clamp(40px, 5vw, 60px) - the MINIMUM is
      40px, so it never shrinks below that however narrow the screen. Long single
      words (ACCOMMODATION, CHRISTCHURCH) are then wider than the available space
      and the right-hand edge is clipped.
   2. .room-detail-hero-copy is inset 20px from the left but sized without a
      matching right gutter, so it sits ~4px past the viewport edge at 375px.

   Selectors below match the theme's own specificity (.room-detail-page ...) on
   purpose; a bare .room-detail-hero-title loses to it and does nothing.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .room-detail-page .room-detail-hero-title,
  .about-page .about-page-hero-title {
    font-size: clamp(26px, 7.4vw, 40px);
    overflow-wrap: break-word;
  }
  .room-detail-page .room-detail-hero-title .room-detail-hero-title-em,
  .location-page.room-detail-page .location-hero-title.room-detail-hero-title {
    font-size: clamp(30px, 9vw, 48px);
  }
}

@media (max-width: 767px) {
  .room-detail-page .room-detail-hero-copy {
    max-width: calc(100vw - 40px);
  }
}