/* =====================================================================
   Prime Realty — Properties plugin styles (gap-fill + responsive)
   NOTE: Card grid (.pr-property-card/.pr-property-grid) and base search
   form (.pr-search-form) are already styled in the child theme style.css.
   This file ONLY adds styles for the NEW markup introduced during the
   production cleanup (single-property gallery, broker block, CTAs,
   extended search fields, map) and the required mobile/UX rules.
   Brand: navy #0e1b2e, gold #cda349, sand #fbf9f4, ink #2a2722.
   ===================================================================== */

:root{
	--prp-navy:#0e1b2e;
	--prp-navy-2:#16305c;
	--prp-gold:#cda349;
	--prp-sand:#fbf9f4;
	--prp-ink:#2a2722;
	--prp-muted:#6f6a61;
	--prp-line:#e6e0d4;
	--prp-ease:cubic-bezier(0.23,1,0.32,1);
}

/* ---------- Extended search fields / actions ---------- */
.pr-search-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.pr-search-field label{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--prp-muted)}
.pr-search-field input,.pr-search-field select{
	width:100%;padding:11px 12px;border:1px solid var(--prp-line);background:var(--prp-sand);
	font:inherit;font-size:.95rem;color:var(--prp-ink);border-radius:2px;
}
.pr-search-field input:focus,.pr-search-field select:focus{outline:2px solid var(--prp-gold);outline-offset:1px;border-color:var(--prp-gold)}
.pr-search-range{display:flex;gap:8px}
.pr-search-range input{flex:1;min-width:0}
.pr-search-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;align-items:center}
.pr-search-reset{color:var(--prp-muted);text-decoration:underline;font-size:.9rem}
.pr-search-reset:hover{color:var(--prp-navy)}

/* ---------- Single property head ---------- */
.pr-single-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin:6px 0 18px}
.pr-single-code{font-size:.78rem;color:var(--prp-muted);letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:6px}

/* ---------- Gallery ---------- */
.pr-gallery{display:grid;gap:12px;margin-bottom:26px}
.pr-gallery-main{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#ecebe7}
.pr-gallery-main img{width:100%;height:100%;object-fit:cover;display:block}
.pr-gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pr-gallery-thumb{
	width:90px;height:66px;padding:0;border:2px solid transparent;border-radius:3px;overflow:hidden;cursor:pointer;background:#ecebe7;
	transition:border-color .2s var(--prp-ease);
}
.pr-gallery-thumb.is-active,.pr-gallery-thumb:hover{border-color:var(--prp-gold)}
.pr-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Single layout: content + sidebar ---------- */
.pr-single-grid{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
.pr-property-content{line-height:1.8;color:var(--prp-ink);font-size:1rem;min-width:0}
.pr-property-content h2,.pr-property-content h3{color:var(--prp-navy)}

/* ---------- Broker block + CTA ---------- */
.pr-broker-block{position:sticky;top:96px;background:#fff;border:1px solid var(--prp-line);border-radius:4px;padding:22px;box-shadow:0 16px 38px -24px rgba(14,27,46,.4);display:flex;flex-direction:column;gap:10px}
.pr-broker-block h3{margin:0;font-size:1.05rem;color:var(--prp-navy)}
.pr-broker-block p{margin:0 0 6px;font-size:.86rem;color:var(--prp-muted)}
.pr-cta-primary,.pr-cta-ghost{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 18px;border-radius:2px;font-weight:600;text-decoration:none;transition:transform .16s var(--prp-ease),background .2s,color .2s}
.pr-cta-primary:active,.pr-cta-ghost:active{transform:scale(.97)}
.pr-cta-primary{background:var(--prp-navy);color:#fff}
.pr-cta-primary:hover{background:var(--prp-navy-2);color:#fff}
.pr-cta-primary.is-wa{background:#25d366;color:#0b2a17}
.pr-cta-primary.is-wa:hover{background:#1fc15c;color:#0b2a17}
.pr-cta-ghost{background:transparent;color:var(--prp-navy);border:1px solid var(--prp-navy)}
.pr-cta-ghost:hover{background:var(--prp-navy);color:#fff}

/* ---------- Map embed ---------- */
.pr-map-embed{margin:30px 0;border:1px solid var(--prp-line);border-radius:4px;overflow:hidden}
.pr-map-embed iframe{display:block;width:100%;height:340px;border:0}

/* ---------- Similar properties ---------- */
.pr-similar{margin:40px 0 8px}
.pr-similar h2{font-size:1.5rem;color:var(--prp-navy);margin:0 0 20px}

/* ---------- Single badge / location (augment) ---------- */
.pr-single-badge.is-rent{background:#1f6f54}
.pr-single-badge.is-sold{background:#8a8276}

/* =====================================================================
   RESPONSIVE — tablet
   ===================================================================== */
@media (max-width:1024px){
	.pr-single-grid{grid-template-columns:1fr}
	.pr-broker-block{position:static}
}

/* =====================================================================
   RESPONSIVE — mobile: single-column search, full-width CTAs,
   prevent floating buttons from covering bottom content.
   ===================================================================== */
@media (max-width:600px){
	/* search form -> single column */
	.pr-search-form{grid-template-columns:1fr !important;display:grid;gap:12px}
	.pr-search-field{width:100%}
	.pr-search-actions{flex-direction:column;align-items:stretch}
	.pr-search-actions .pr-btn,.pr-search-actions button,.pr-search-actions a.pr-cta-primary{width:100%;text-align:center;justify-content:center}
	.pr-search-reset{text-align:center}

	/* single page */
	.pr-single-head{align-items:flex-start}
	.pr-gallery-thumb{width:66px;height:50px}
	.pr-map-embed iframe{height:250px}

	/* CTA buttons full-width */
	.pr-cta-primary,.pr-cta-ghost{width:100%}

	/* keep last content clear of the floating contact button */
	.pr-single,.pr-similar{padding-bottom:88px}
}


/* ---------- Clickable service cards (Services page) ----------
   The whole card (image + heading + text) is wrapped in <a class="pr-service-link">.
   Keeps the existing look, adds a clear clickable affordance + mobile tap feedback. */
.pr-service-link{
	display:block;height:100%;text-decoration:none;color:inherit;
	border-radius:6px;overflow:hidden;
	transition:transform .35s var(--prp-ease), box-shadow .35s var(--prp-ease);
	-webkit-tap-highlight-color:transparent;cursor:pointer;
}
.pr-service-link figure.wp-block-image{margin:0;overflow:hidden;border-radius:6px}
.pr-service-link figure.wp-block-image img{
	display:block;width:100%;height:auto;
	transition:transform .5s var(--prp-ease);
}
.pr-service-link h3{margin:.7em 0 .3em;transition:color .3s var(--prp-ease)}
.pr-service-link p{color:var(--prp-muted)}
.pr-service-cta{
	display:inline-block;margin-top:.5em;font-weight:700;font-size:.9rem;
	letter-spacing:.02em;color:var(--prp-gold);
	opacity:0;transform:translateX(-6px);
	transition:opacity .3s var(--prp-ease), transform .3s var(--prp-ease);
}
@media (hover:hover){
	.pr-service-link:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(14,27,46,.45)}
	.pr-service-link:hover figure.wp-block-image img{transform:scale(1.06)}
	.pr-service-link:hover h3{color:var(--prp-gold)}
	.pr-service-link:hover .pr-service-cta{opacity:1;transform:translateX(0)}
}
/* On touch devices the CTA is always visible (no hover), with tap feedback. */
@media (hover:none){
	.pr-service-cta{opacity:1;transform:none}
}
.pr-service-link:active{transform:scale(.985)}
.pr-service-link:focus-visible{outline:2px solid var(--prp-gold);outline-offset:3px}

/* ---------- Archive empty state ---------- */
.pr-empty-state{
	text-align:center;max-width:560px;margin:36px auto 8px;
	padding:44px 28px;background:var(--prp-sand);
	border:1px solid var(--prp-line);border-radius:8px;
}
.pr-empty-icon{font-size:1.8rem;color:var(--prp-gold);margin-bottom:12px;line-height:1}
.pr-empty-text{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--prp-ink);margin:0 0 18px;line-height:1.4}
.pr-empty-cta{
	display:inline-block;padding:11px 26px;background:var(--prp-navy);color:#fff;
	text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.03em;border-radius:3px;
	transition:background .3s var(--prp-ease), transform .16s var(--prp-ease);
}
.pr-empty-cta:hover{background:var(--prp-navy-2)}
.pr-empty-cta:active{transform:scale(.97)}