/* ================================================================
   property-layouts.css — Places Property Theme v3
================================================================ */

/* ── Tokens ── */
:root {
    --accent:     #e65c00;
    --acc-dark:   #c04d00;
    --navy:       #1a1a2e;
    --navy2:      #0f3460;
    --text:       #1f2937;
    --muted:      #6b7280;
    --border:     #e5e7eb;
    --bg:         #f9fafb;
    --white:      #ffffff;
    --radius:     8px;
    --shadow:     0 2px 12px rgba(0,0,0,.08);
    --shadow-lg:  0 6px 28px rgba(0,0,0,.12);
}
*, *::before, *::after { box-sizing: border-box; }

/* ── Shared container ── */
.pc { max-width: 1244px; margin: 0 auto; padding: 0 20px; }

/* ── Typography ── */
.p-price     { font-size: 1.75rem; font-weight: 800; color: var(--accent); line-height: 1; }
.p-price-sub { font-size: .875rem; color: var(--muted); margin-top: 4px; }
.p-addr      { font-size: .88rem; color: var(--muted); margin: 6px 0 0; }
.p-addr i    { color: var(--accent); margin-right: 5px; }
.p-muted     { color: var(--muted); font-size: .9rem; }
.p-desc      { font-size: .92rem; color: #444; line-height: 1.75; }
.p-label     { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.p-section-title { font-size: 1.1rem; font-weight: 800; color: var(--navy); margin: 0; }

/* ── Badge ── */
.p-badge     { display: inline-block; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .05em; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; }
.p-badge-ol  { background: transparent; border: 1.5px solid var(--border); color: var(--muted); }
.p-badge-dark { background: var(--navy); }

/* ── Map button ── */
.p-map-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff !important; font-size: .8rem; font-weight: 600; padding: 7px 14px; border-radius: var(--radius); text-decoration: none !important; transition: background .2s; white-space: nowrap; }
.p-map-btn:hover { background: var(--navy2); }

/* ── Primary button ── */
.p-btn-primary { background: var(--accent); color: #fff !important; border: none; padding: 11px 22px; border-radius: var(--radius); font-weight: 700; font-size: .88rem; text-decoration: none !important; cursor: pointer; transition: background .2s, transform .2s; }
.p-btn-primary:hover { background: var(--acc-dark); transform: translateY(-1px); }

/* ── Block card ── */
.p-block { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.p-block h2 { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin: 0 0 14px; }
.p-block-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.p-block-hdr h2 { margin: 0; }

/* ── Stats row ── */
.p-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.p-stat  { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; text-align: center; font-size: .8rem; }
.p-stat strong { display: block; font-size: .9rem; color: var(--navy); margin-bottom: 2px; }
.p-stat small  { color: var(--muted); text-transform: uppercase; font-size: .7rem; }

/* ── Slider ── */
.p-thumbs { margin-top: 8px; }
#places-main-slider .item img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius); display: block; }
.p-thumbs .item img { width: 100%; height: 72px; object-fit: cover; border-radius: 5px; cursor: pointer; opacity: .65; transition: opacity .2s, outline .2s; }
.p-thumbs .owl-item:hover .item img,
.p-thumbs .owl-item.places-thumb-active .item img { opacity: 1; outline: 2.5px solid var(--accent); }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next { background: rgba(0,0,0,.45) !important; color: #fff !important; border-radius: 50% !important; width: 36px; height: 36px; font-size: .95rem !important; margin: 0 4px !important; }
.owl-carousel .owl-nav button:hover { background: var(--accent) !important; }

/* ── No images ── */
.places-no-images { min-height: 200px; background: var(--bg); border: 2px dashed var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 10px; padding: 30px; text-align: center; margin-bottom: 18px; }
.places-no-images i { font-size: 2.2rem; opacity: .35; }
.places-refetch-link { font-size: .8rem; color: var(--navy2); border: 1px solid var(--border); padding: 5px 14px; border-radius: 20px; text-decoration: none; }
.places-refetch-link:hover { background: var(--navy); color: #fff; }

/* ── Agent ── */
.p-agent-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: center; box-shadow: var(--shadow); }
.p-avatar    { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border); display: block; margin: 0 auto 12px; }
.p-avatar-sm { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; }
.p-agent-name { font-size: .95rem; font-weight: 700; margin: 0 0 4px; }
.p-agent-link { font-size: .78rem; color: var(--navy2); text-decoration: none; }
.p-agent-row  { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

/* ── Amenities ── */
.p-amenities { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 8px 10px; }
.p-amenity   { font-size: .875rem; color: #444; display: flex; align-items: center; gap: 7px; }
.p-amenity i { color: #27ae60; font-size: .85em; flex-shrink: 0; }

/* ── Detail list ── */
.p-det-list { display: flex; flex-direction: column; }
.p-det-row  { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
.p-det-row:last-child { border-bottom: none; }
.p-det-row strong { color: #555; font-weight: 600; min-width: 120px; }
.p-det-row span   { color: var(--navy); font-weight: 500; text-align: right; }

/* ── Overview table ── */
.p-ov-table { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.p-ov-row   { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: .875rem; }
.p-ov-row:last-child { border-bottom: none; }
.p-ov-row span   { color: var(--muted); }
.p-ov-row strong { color: var(--navy); font-weight: 600; }

/* ── Read More ── */
.places-readmore-wrap { position: relative; }
.places-rm-content    { transition: max-height .4s ease; overflow: hidden; }
.places-rm-btn { background: none; border: none; color: var(--accent); font-size: .85rem; font-weight: 600; cursor: pointer; padding: 8px 0 0; display: inline-flex; align-items: center; gap: 5px; }

/* ── Contact Form ── */
.places-contact-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.places-contact-form input,
.places-contact-form select,
.places-contact-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 6px; font-size: .88rem; color: var(--text); background: var(--white); transition: border-color .2s, box-shadow .2s; font-family: inherit; }
.places-contact-form input:focus,
.places-contact-form select:focus,
.places-contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,92,0,.1); }
.places-submit-btn { background: var(--accent); color: #fff; border: none; padding: 12px; border-radius: var(--radius); font-size: .9rem; font-weight: 700; cursor: pointer; width: 100%; transition: background .2s, transform .2s; }
.places-submit-btn:hover { background: var(--acc-dark); transform: translateY(-1px); }
.places-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.places-form-msg { font-size: .85rem; font-weight: 600; padding: 8px 12px; border-radius: 5px; display: none; margin-top: 4px; }
.places-form-msg.places-msg-ok  { display: block; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.places-form-msg.places-msg-err { display: block; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* ── Property Header (shared) ── */
.ph { background: var(--white); border-bottom: 1px solid var(--border); padding: 26px 0 18px; }
.ph-top  { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.ph-info { flex: 1; }
.ph-price { text-align: right; flex-shrink: 0; }
.ph-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ph-title-row h1 { font-size: 1.6rem; font-weight: 800; color: var(--navy); margin: 0; }
.ph-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* ════════ LAYOUT 1 ════════ */
.l1-slider { background: #fafafa; padding: 18px 0; }
.l1-desc   { background: var(--white); padding: 36px 0; }
.l1-desc-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
.l1-quick-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 22px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.l1-fact { display: flex; align-items: flex-start; gap: 9px; font-size: .875rem; }
.l1-fact i    { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.l1-fact-val  { font-weight: 700; color: var(--navy); }
.l1-fact-lbl  { color: var(--muted); font-size: .76rem; }
.l1-overview  { background: var(--bg); padding: 36px 0; }
.l1-amenities { background: var(--white); padding: 36px 0; }
.l1-contact   { background: var(--bg); padding: 36px 0; }
.l1-2col { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.p-contact-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }

/* ════════ LAYOUT 2 ════════ */
.l2-ph-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.l2-body    { padding: 24px 20px 60px; }
.l2-grid    { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; }
.l2-main    { min-width: 0; }
.l2-slider-wrap { margin-bottom: 0; }
.l2-tiles   { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.l2-tile    { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 10px; text-align: center; font-size: .8rem; }
.l2-tile i      { color: var(--accent); font-size: 1rem; display: block; margin-bottom: 5px; }
.l2-tile strong { display: block; font-size: .9rem; color: var(--navy); margin-bottom: 2px; }
.l2-tile small  { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.l2-sticky-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-lg); position: sticky; top: 86px; }

/* ════════ LAYOUT 3 ════════ */
.l3-ph .l2-ph-grid { flex-wrap: wrap; }
.l3-gallery-sec { background: #111; padding: 18px 0 0; }
.l3-masonry { column-count: 3; column-gap: 8px; }
.places-gallery-item { break-inside: avoid; position: relative; cursor: pointer; overflow: hidden; border-radius: 5px; margin-bottom: 8px; }
.places-gallery-item img { width: 100%; display: block; transition: transform .4s ease; }
.places-gallery-item:hover img { transform: scale(1.04); }
.l3-wide { column-span: all; }
.l3-wide img { max-height: 380px; object-fit: cover; border-radius: 6px; }
.l3-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background .25s; }
.places-gallery-item:hover .l3-overlay { background: rgba(0,0,0,.35); }
.l3-overlay i { color: #fff; font-size: 1.3rem; opacity: 0; transition: opacity .25s; }
.places-gallery-item:hover .l3-overlay i { opacity: 1; }
.l3-feat-badge { position: absolute; bottom: 8px; left: 8px; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; padding: 3px 8px; border-radius: 3px; }
.l3-count { color: #888; font-size: .8rem; text-align: center; padding: 8px 0 14px; margin: 0; }
.l3-body  { padding: 24px 20px 60px; }
.l3-grid  { display: grid; grid-template-columns: 1fr 310px; gap: 24px; align-items: start; }
.l3-main  { min-width: 0; }
.l3-stats-strip { display: flex; flex-wrap: wrap; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.l3-stat  { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; padding: 13px 8px; border-right: 1px solid var(--border); text-align: center; }
.l3-stat:last-child { border-right: none; }
.l3-stat i     { color: var(--accent); font-size: .95rem; margin-bottom: 4px; }
.l3-stat span  { font-weight: 700; font-size: .88rem; color: var(--navy); }
.l3-stat small { font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.l3-det-grid   { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.l3-det-cell   { padding: 9px 13px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.l3-det-cell:nth-child(even) { border-right: none; }
.l3-det-lbl    { font-size: .72rem; color: var(--muted); text-transform: uppercase; margin-bottom: 2px; }
.l3-det-val    { font-size: .875rem; color: var(--navy); font-weight: 600; }
.l3-chips      { display: flex; flex-wrap: wrap; gap: 8px; }
.l3-chip       { background: var(--bg); border: 1px solid var(--border); padding: 5px 13px; border-radius: 20px; font-size: .8rem; color: var(--navy); }
.l3-sticky     { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-lg); position: sticky; top: 86px; }
.l3-price-box  { background: var(--bg); border-radius: 6px; padding: 12px; margin: 10px 0 14px; }

/* ════════ LAYOUT 4 ════════ */
.l4-hero { min-height: 420px; background-size: cover; background-position: center; position: relative; }
.l4-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.7) 100%); display: flex; align-items: flex-end; }
.l4-hero-content { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 28px; flex-wrap: wrap; gap: 14px; width: 100%; }
.l4-hero-badge   { display: inline-block; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .05em; padding: 4px 10px; border-radius: 3px; margin-bottom: 8px; }
.l4-hero-title   { font-size: 1.9rem; font-weight: 800; color: #fff; margin: 0 0 6px; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.l4-hero-addr    { color: rgba(255,255,255,.8); font-size: .88rem; margin: 0; }
.l4-hero-addr i  { color: var(--accent); }
.l4-photos-btn   { background: rgba(255,255,255,.15); backdrop-filter: blur(6px); color: #fff !important; border: 1px solid rgba(255,255,255,.3); padding: 9px 18px; border-radius: var(--radius); font-size: .85rem; font-weight: 600; text-decoration: none !important; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.l4-strip     { background: var(--navy); }
.l4-strip-row { display: flex; flex-wrap: wrap; }
.l4-strip-item { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-right: 1px solid rgba(255,255,255,.1); flex: 1; min-width: 110px; }
.l4-strip-item:last-child { border-right: none; }
.l4-strip-item i      { color: var(--accent); font-size: 1rem; flex-shrink: 0; }
.l4-strip-item strong { display: block; color: #fff; font-size: .88rem; font-weight: 700; }
.l4-strip-item small  { color: rgba(255,255,255,.45); font-size: .7rem; text-transform: uppercase; }
.l4-body  { padding: 24px 20px 60px; }
.l4-grid  { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; }
.l4-main  { min-width: 0; }
.l4-gallery-wrap #places-main-slider .item img { height: 340px; }
.l4-info-grid    { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.l4-info-cell    { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--border); font-size: .875rem; }
.l4-info-cell:nth-child(even) { border-left: 1px solid var(--border); }
.l4-lbl { color: var(--muted); }
.l4-val { color: var(--navy); font-weight: 600; text-align: right; }
.l4-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.l4-tag  { background: var(--bg); border: 1px solid var(--border); color: var(--navy); font-size: .8rem; padding: 5px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; }
.l4-tag i { color: #27ae60; font-size: .8em; }
.l4-sticky-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); position: sticky; top: 86px; overflow: hidden; }
.l4-price-hdr  { background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%); padding: 20px 22px; }
.l4-card-body  { padding: 20px 22px; }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
    .l2-grid,.l3-grid,.l4-grid { grid-template-columns: 1fr 290px; }
    .l2-tiles { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
    .ph-top,.l2-ph-grid,.l3-ph .l2-ph-grid { flex-direction: column; }
    .ph-price,.l2-ph-grid > div:last-child { text-align: left; }
    .l1-desc-grid,.l1-2col { grid-template-columns: 1fr; }
    .l2-grid,.l3-grid,.l4-grid { grid-template-columns: 1fr; }
    .l2-sticky-card,.l3-sticky,.l4-sticky-card { position: static; }
    .l2-tiles { grid-template-columns: repeat(2,1fr); }
    .l3-masonry { column-count: 2; }
    .l3-det-grid,.l4-info-grid { grid-template-columns: 1fr; }
    .l3-det-cell:nth-child(even),.l4-info-cell:nth-child(even) { border-left: none; }
    .l1-quick-facts { grid-template-columns: repeat(2,1fr); }
    #places-main-slider .item img { height: 260px; }
    .l4-gallery-wrap #places-main-slider .item img { height: 230px; }
    .l4-hero { min-height: 280px; }
    .l4-hero-title { font-size: 1.35rem; }
    .l4-strip-item { min-width: 48%; border-bottom: 1px solid rgba(255,255,255,.1); }
    .l3-wide img { max-height: 230px; }
    .p-price { font-size: 1.4rem; }
}
@media (max-width: 480px) {
    .l3-masonry { column-count: 1; }
    .l1-quick-facts { grid-template-columns: 1fr; }
    .p-amenities { grid-template-columns: 1fr 1fr; }
}