/* Small additions on top of the original design's style.css for pieces
   that only exist in the dynamic app (flash messages, WhatsApp float,
   filter <select> controls). Kept in a separate file rather than editing
   style.css so the original design stays easy to diff against. */

.flash-banner {
  background: #16a34a;
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-weight: 600;
}

.project-filter-form select {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #d9dee5;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.whatsapp-float:hover {
  filter: brightness(1.05);
}

/* ---------- Blog CMS additions (Section: dynamic blog, layered onto the
   existing design system -- same tokens as style.css, no new palette) ---------- */

.blog-search { max-width: 480px; margin: 26px auto 0; display: flex; gap: 10px; }
.blog-search input { flex: 1; padding: 13px 18px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; }

.featured-post { display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 56px; }
.featured-post .img { position: relative; min-height: 340px; background: var(--paper); }
.featured-post .img img { width: 100%; height: 100%; object-fit: cover; }
.featured-post .body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-post .badge-featured { display: inline-block; background: var(--navy); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; width: fit-content; }
.featured-post h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; line-height: 1.25; }
.featured-post h2 a:hover { color: var(--navy); }
.featured-post p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 22px; }

@media (max-width: 860px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-post .img { min-height: 220px; }
}

.blog-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.blog-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { padding: 6px 14px; border: 1px solid var(--line); border-radius: 20px; font-size: 12.5px; font-weight: 600; color: var(--navy); background: var(--navy-tint); }
.tag-pill:hover { background: var(--navy); color: #fff; }

.share-row { display: flex; gap: 10px; }
.share-row a, .share-row button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 13px; font-weight: 700; background: #fff; cursor: pointer; font-family: inherit; }
.share-row a:hover, .share-row button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.category-pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.category-pill { padding: 10px 20px; border: 1px solid var(--line); border-radius: 30px; font-weight: 600; font-size: 13.5px; color: var(--navy); background: #fff; }
.category-pill:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.category-pill .count { color: var(--muted); font-weight: 500; margin-left: 4px; }
.category-pill:hover .count { color: #e6edf3; }

.popular-list { list-style: none; padding: 0; margin: 0; }
.popular-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.popular-list li:last-child { border-bottom: none; }
.popular-list .num { font-size: 22px; font-weight: 800; color: var(--navy-tint); line-height: 1.1; }
.popular-list a { font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.popular-list a:hover { color: var(--navy); }

.author-box { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--paper); margin-top: 40px; }
.author-box .avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; flex-shrink: 0; }
.author-box .name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.author-box .role { color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }

/* ---------- Testimonials (Home page "What Our Clients Say") ---------- */

.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; background: #fff; display: flex; flex-direction: column; height: 100%; }
.testimonial-card .stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card .quote { color: var(--text); font-size: 15px; line-height: 1.75; flex-grow: 1; margin-bottom: 22px; }
.testimonial-card .who { display: flex; align-items: center; gap: 14px; }
.testimonial-card .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; object-fit: cover; }
.testimonial-card .name { font-weight: 700; font-size: 14.5px; }
.testimonial-card .position { color: var(--muted); font-size: 12.5px; }

/* ---------- Project cards (Projects listing incl. Ongoing/Handover/
   Upcoming/All, Home "Featured Developments", and the "Related Projects"
   strip on a project page -- all three share partials/project-card.blade.php,
   so this one place keeps every project card on the site the same size and
   the same hover behaviour, reference: bti.com/properties. Every card is
   just a fixed-aspect-ratio image box plus a fixed-height name/location
   strip -- no free-flowing text -- so width and height stay identical
   whichever list a card appears in and however long its name or spec text
   is. Deliberately a new .proj-card namespace rather than reusing the
   older shared .pcard, which blog listings still render with different
   markup -- changing .pcard here would have broken those. ---------- */

.proj-card { position: relative; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: box-shadow .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1); }
.proj-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }
.proj-card-link { display: block; color: inherit; }
.proj-card-link:hover { color: inherit; }

.proj-card-media { position: relative; width: 100%; aspect-ratio: 4 / 4.65; overflow: hidden; background: var(--paper); }
.proj-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.25,.75,.35,1); }
.proj-card:hover .proj-card-media img { transform: scale(1.08); }

.proj-card-badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: #fff; color: var(--navy); font-weight: 700; font-size: 11px; letter-spacing: .3px; padding: 6px 12px; border-radius: 20px; }

/* Admin-only quick-edit link (shown to a logged-in active admin) -- kept
   as a sibling of .proj-card-link, positioned over the image, since HTML
   doesn't allow an <a> inside an <a> and .proj-card-link already wraps
   the image. */
.proj-card-edit { position: absolute; top: 14px; right: 14px; z-index: 4; background: #fff; color: #c0392b; font-weight: 700; font-size: 11px; padding: 5px 10px; border-radius: 20px; text-decoration: none; }
.proj-card-edit:hover { background: #c0392b; color: #fff; }

.proj-card-arrow { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; transition: background .35s ease, color .35s ease, transform .35s ease; }
.proj-card:hover .proj-card-arrow { background: var(--navy); color: #fff; transform: translateY(-3px); }

/* Quick facts panel: hidden below the image, slides/fades in over the
   bottom of the photo on hover -- same interaction as the reference site's
   Size/Bed/Bath/Land strip. pointer-events:none while hidden so it never
   intercepts a click meant for the card link. */
.proj-card-stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: linear-gradient(180deg, rgba(15,31,46,0) 0%, rgba(15,31,46,.82) 40%, rgba(15,31,46,.94) 100%); color: #fff; padding: 46px 16px 16px; display: flex; flex-wrap: wrap; gap: 10px 22px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.proj-card:hover .proj-card-stats { opacity: 1; transform: translateY(0); }
.proj-card-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.proj-card-stats span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.65); }
.proj-card-stats strong { font-size: 13px; font-weight: 700; }

/* Fixed-height footer strip (name + location) below the image -- always
   visible, single line with ellipsis so a long project name can never grow
   the card taller than its neighbours. */
.proj-card-footer { padding: 14px 16px 15px; }
.proj-card-name { display: block; font-size: 16px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-card-name:hover { color: var(--navy-light); }
.proj-card-loc { font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .proj-card-stats { padding-top: 40px; gap: 8px 16px; }
}

/* ---------- Project detail page redesign (Section: "At a Glance" sidebar
   table + Property Video / Property Location embeds), modeled on a
   reference competitor page's content sections but kept on Wayhousing's
   own navy palette (var(--navy) etc. from style.css) -- no dark theme. ---------- */

/* Slightly tighter than the plain .spec-table (which is also used
   elsewhere) since this version lives inside a narrower .side-card. */
.at-a-glance-table th, .at-a-glance-table td { padding: 11px 6px; font-size: 13.5px; }
.at-a-glance-table th { white-space: nowrap; font-weight: 600; }
.at-a-glance-table tr:last-child th, .at-a-glance-table tr:last-child td { border-bottom: none; }

/* Responsive 16:9 wrapper shared by the Property Video iframe/<video> and
   the Property Location map iframe -- same look/feel (rounded corners,
   soft shadow) as .gallery-main above it. */
.media-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--paper); }
.media-embed iframe, .media-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Property Location's map is full-width on the reference page (not boxed
   into the narrower left column alongside the At a Glance sidebar), so it
   gets its own full-width wrapper below .detail-grid rather than living
   inside it. Shorter aspect ratio than the 16:9 .media-embed above since a
   full-width map that tall would otherwise dominate the page. */
.media-embed-wide { padding-top: 32%; }
@media (max-width: 700px) { .media-embed-wide { padding-top: 56.25%; } }

/* .section's own 88px top padding is shared by every page (home, blog,
   listings, etc.), so it can't be edited there without affecting all of
   them. This override applies only to the project detail page's opening
   <section>, capping the gap above the gallery at 10px as requested while
   leaving .section's bottom padding untouched. */
.project-gallery-section { padding-top: 10px; }

/* ---------- Homepage hero slider (Section: replaces the old split
   text/photo .hero with a full-bleed, auto-advancing image carousel,
   modeled on a reference competitor's homepage but kept on Wayhousing's
   own navy palette from style.css, plus one new accent (below) for the
   slider's own highlight/kicker/dots/progress bar). Background photos and
   captions come from the site's actual Featured Projects (admin ->
   Projects -> Featured), so this rotates real listings rather than fixed
   images; the headline copy/CTAs/stats stay constant across slides and
   reuse the same $siteSettings keys the old hero used, so nothing that
   was editable before has become hard-coded. Approved as a static mockup
   first (crossfade transition, no arrows -- dots + autoplay only) before
   being wired in here. ---------- */
:root { --accent-gold: #E8AA3E; }

.hero-slider { position: relative; overflow: hidden; background: var(--navy-dark); height: 640px; }
.hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; background-size: cover; background-position: center; }
.hs-slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,20,32,.82) 0%, rgba(10,20,32,.55) 38%, rgba(10,20,32,.22) 65%, rgba(10,20,32,.4) 100%),
    linear-gradient(0deg, rgba(8,16,26,.9) 0%, rgba(8,16,26,.15) 40%, rgba(8,16,26,.05) 65%, rgba(8,16,26,.35) 100%);
}
.hs-slide.is-active { opacity: 1; }

.hs-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 660px; padding-bottom: 56px; }
.hs-kicker { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; font-size: 12.5px; margin-bottom: 18px; opacity: .92; }
.hs-kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent-gold); }
.hs-content h1 { color: #fff; font-size: clamp(30px, 4vw, 50px); margin-bottom: 18px; }
.hs-content h1 span { color: var(--accent-gold); }
.hs-content p.lead { color: rgba(255,255,255,.86); font-size: 16.5px; line-height: 1.7; max-width: 480px; margin-bottom: 30px; }
.hs-btnrow { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.hs-btnrow .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.hs-btnrow .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.hs-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hs-stats .stat b { display: block; font-size: 24px; color: #fff; font-family: var(--font-heading); }
.hs-stats .stat span { font-size: 11.5px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .6px; }
.hs-stats .stat + .stat { border-left: 1px solid rgba(255,255,255,.25); padding-left: 36px; }

.hs-dots { position: absolute; left: 24px; z-index: 4; display: flex; gap: 9px; bottom: 24px; }
.hs-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0; transition: background .3s ease, width .3s ease; }
.hs-dot.is-active { background: var(--accent-gold); width: 26px; border-radius: 5px; }

.hs-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); z-index: 4; }
.hs-progress-bar { height: 100%; background: var(--accent-gold); width: 0%; }

/* The homepage's own .search-bar (style.css) already overlaps its section
   above via margin-top:-40px; on top of a full-bleed photo instead of the
   old hero's white background that overlap now reads as sitting on the
   slider, matching the reference site's layout -- no separate styles
   needed here. */

@media (max-width: 767px) { .hero-slider { height: 560px; } }
@media (prefers-reduced-motion: reduce) { .hs-slide { transition: none; } }

/* ---------- Shared pagination partial (resources/views/partials/pagination.blade.php),
   used on the public project and blog listing pages. ---------- */

.pg-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pg-info { color: var(--muted); font-size: 13px; }
.pg-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-link {
  display: inline-block; min-width: 34px; text-align: center; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 7px; font-size: 13px;
  color: var(--text); text-decoration: none; background: #fff;
}
a.pg-link:hover { border-color: var(--navy); color: var(--navy); }
.pg-link.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pg-link.disabled { color: var(--muted); background: var(--paper); cursor: default; }