/*
Theme Name: Baytna Child
Template: hello-elementor
Version: 1.0.0
Text Domain: baytna
*/

/* =================================================================
   BAYTNA DESIGN SYSTEM  (Phase 4 — DESIGN-SPEC.md)
   Warm-modern Tunisian real estate. Photography-first, restrained.
   ================================================================= */

:root {
  /* Colors (DESIGN-SPEC tokens) */
  --b-ink: #16233A;
  --b-ink-hover: #22365A;
  --b-stone: #F4F1EC;
  --b-accent: #B4553D;
  --b-accent-hover: #9A4430;
  --b-green: #2E5E4E;
  --b-gold: #B7791F;
  --b-bg: #FFFFFF;
  --b-surface: #FFFFFF;
  --b-heading: #16233A;
  --b-body: #3A4453;
  --b-muted: #6B7686;
  --b-border: #E3E0D9;
  --b-border-strong: #C9C5BB;
  --b-success: #2E5E4E;
  --b-warning: #B7791F;
  --b-error: #B3362E;
  --b-dark: #101B2C;
  --b-scrim: rgba(16,27,44,.55);

  /* Typography */
  --b-font-display: "Fraunces", Georgia, serif;
  --b-font-body: "Work Sans", system-ui, sans-serif;

  /* Shape / spacing */
  --b-radius-card: 12px;
  --b-radius-btn: 8px;
  --b-radius-pill: 100px;
  --b-container: 1280px;
  --b-space: 4px;
  --b-topbar-h: 72px;
}

/* Base */
body {
  font-family: var(--b-font-body);
  color: var(--b-body);
  background: var(--b-bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--b-font-display);
  color: var(--b-heading);
  line-height: 1.1;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: clamp(40px,6vw,72px); letter-spacing:-.02em; }
h2 { font-size: clamp(30px,4.5vw,48px); letter-spacing:-.01em; }
h3 { font-size: clamp(22px,2.5vw,26px); letter-spacing:-.01em; }
p  { margin: 0 0 1em; }
a  { color: var(--b-accent); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--b-accent); color: #fff; }

.container { max-width: var(--b-container); margin-inline: auto; padding-inline: 24px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 26px; height: 48px; border-radius: var(--b-radius-btn);
  font-weight: 600; font-size: 14px; line-height: 48px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
  text-decoration: none; white-space: nowrap;
}
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--b-accent); color: #fff; }
.btn-primary:hover { background: var(--b-accent-hover); color:#fff; }
.btn-dark { background: var(--b-ink); color: #fff; }
.btn-dark:hover { background: var(--b-ink-hover); color:#fff; }
.btn-ghost { background: transparent; color: var(--b-ink); border-color: var(--b-border-strong); }
.btn-ghost:hover { border-color: var(--b-ink); }

/* Sections */
.section { padding: 80px 0; }
@media (max-width:782px){ .section { padding:56px 0; } }
.section--stone { background: var(--b-stone); }
.section--dark { background: var(--b-dark); color:#fff; }
.sg-head { max-width: 640px; margin: 0 auto 48px; text-align:center; }
.sg-kicker {
  display:inline-block; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color: var(--b-accent);
  margin-bottom:12px;
}

/* Property card */
.b-card {
  position: relative; background: var(--b-surface); border: 1px solid var(--b-border);
  border-radius: var(--b-radius-card); overflow: hidden; display:flex; flex-direction:column;
  transition: border-color .2s;
}
.b-card:hover { border-color: var(--b-border-strong); }
.b-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.b-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.b-card:hover .b-card__media img { transform: scale(1.02); }
.b-card__badge {
  position:absolute; top:14px; left:14px; z-index:2;
  padding:4px 12px; border-radius: var(--b-radius-pill);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background: var(--b-accent);
}
.b-card__badge--rent { background: var(--b-green); }
.b-card__wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--b-ink);
  transition: transform .2s;
}
.b-card__wish:hover { transform: scale(1.08); color: var(--b-accent); }
.b-card__body { padding: 20px 22px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.b-card__price { font-family: var(--b-font-display); font-weight:600; font-size:22px; color: var(--b-accent); }
.b-card__title { font-size:17px; font-weight:600; color:var(--b-heading); margin:0; }
.b-card__loc { font-size:14px; color: var(--b-muted); display:flex; align-items:center; gap:6px; }
.b-card__meta {
  border-top: 1px solid var(--b-border); margin-top: 12px; padding-top: 12px;
  display:flex; gap:16px; font-size:13px; color:var(--b-body);
}
.b-card__meta span { display:inline-flex; align-items:center; gap:6px; }
.b-card__meta svg { width:16px; height:16px; stroke: var(--b-muted); }

/* Location tile */
.b-loc { position:relative; border-radius: var(--b-radius-card); overflow:hidden; display:block; text-decoration:none; aspect-ratio: 16/10; }
.b-loc img { width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.b-loc:hover img { transform: scale(1.03); }
.b-loc__cap { position:absolute; left:0; right:0; bottom:0; padding:14px 18px; background: linear-gradient(transparent, rgba(16,27,44,.78)); color:#fff; }
.b-loc__cap b { font-family: var(--b-font-display); font-size:18px; display:block; }
.b-loc__cap span { font-size:13px; color:#E8E6E0; }

/* Category tile (editorial) */
.b-cat { position:relative; border-radius: var(--b-radius-card); overflow:hidden; display:block; text-decoration:none; aspect-ratio: 3/2; }
.b-cat img { width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.b-cat:hover img { transform: scale(1.04); }
.b-cat__cap {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:80px 18px 18px; background: linear-gradient(transparent 30%, rgba(16,27,44,.66));
  color:#fff;
}
.b-cat__cap b { font-family: var(--b-font-display); font-size:20px; }
.b-cat__cap span { font-size:13px; color:#E8E6E0; }

/* Forms */
.b-field { margin-bottom: 16px; }
.b-field label { display:block; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--b-muted); margin-bottom:8px; }
.b-field input, .b-field select, .b-field textarea {
  width:100%; height:48px; padding:0 16px; border:1px solid var(--b-border);
  border-radius: var(--b-radius-btn); font-family: var(--b-font-body); font-size:14px; color:var(--b-body);
  background:#fff; transition: border-color .2s;
}
.b-field textarea { height:auto; padding:14px 16px; }
.b-field input:focus, .b-field select:focus, .b-field textarea:focus { outline:none; border-color: var(--b-ink); }

/* Footer */
.b-footer { background: var(--b-dark); color:#D9DEE8; padding: 64px 0 0; font-size:14px; }
.b-footer a { color:#C7CDD8; }
.b-footer a:hover { color:#fff; }
.b-footer__cols { display:grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:48px; }
.b-footer h4 { color:#fff; font-family: var(--b-font-body); font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.b-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.b-footer__brand p { color:#AAB2C0; max-width: 320px; }
.b-footer__legal { border-top:1px solid rgba(255,255,255,.1); padding:20px 0; display:flex; justify-content:space-between; gap:16px; color:#8F98A8; }
@media (max-width:900px){ .b-footer__cols { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .b-footer__cols { grid-template-columns:1fr; } }

/* Utility grids */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:1024px){ .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-4, .grid-3 { grid-template-columns:1fr; } }

.text-center { text-align:center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24{ margin-bottom:24px; }

/* ------- Homepage: hero ------- */
.b-hero {
  position: relative; min-height: 620px;
  display:flex; align-items:center;
  background-color: var(--b-dark);
  background-image: var(--b-hero-img);
  background-size: cover; background-position: center;
  color:#fff; overflow:hidden;
}
.b-hero__scrim {
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(16,27,44,.85) 0%, rgba(16,27,44,.55) 55%, rgba(16,27,44,.25) 100%);
}
.b-hero__inner { position:relative; z-index:1; max-width: 720px; padding: 72px 24px; }
.b-hero h1 { color:#fff; margin-bottom:20px; }
.b-hero .sg-kicker { color:#F0C98C; }
.b-hero__sub { font-size:18px; color:#E4E6EA; max-width: 560px; margin-bottom:32px; }
.b-hero__cta { display:flex; gap:14px; flex-wrap:wrap; }
.b-hero__cta .btn-ghost { color:#fff; border-color:rgba(255,255,255,.45); }
.b-hero__cta .btn-ghost:hover { border-color:#fff; }
@media (max-width:782px){ .b-hero { min-height:520px; } .b-hero__inner{ padding:56px 24px; } .b-hero__sub{ font-size:16px; } }

/* ------- Homepage: quick search ------- */
.b-quick { background: var(--b-stone); padding: 0 0 56px; margin-top:-40px; position:relative; z-index:2; }
.b-quickbar {
  background:#fff; border:1px solid var(--b-border); border-radius:14px;
  box-shadow: 0 16px 40px rgba(16,27,44,.09);
  display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap:16px;
  align-items:end; padding:22px 24px 24px;
}
.b-quickbar .b-field { margin-bottom:0; }
.b-quickbar__go { height:48px; }
.b-quick__hint { font-size:13px; color:var(--b-muted); margin:14px 0 0; }
@media (max-width:900px){ .b-quickbar { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .b-quickbar { grid-template-columns:1fr; } .b-quick { margin-top:0; } }

/* ------- Homepage: category grid ------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:782px){ .grid-2{ grid-template-columns:1fr; } }

/* ------- Homepage: reasons ------- */
.b-reason { background:#fff; border:1px solid var(--b-border); border-radius:14px; padding:26px; }
.b-reason__num { font-family: var(--b-font-display); font-size:32px; color:var(--b-accent); display:block; margin-bottom:10px; }
.b-reason h3 { font-size:20px; margin-bottom:8px; }
.b-reason p { font-size:15px; color:var(--b-muted); margin:0; }

/* ------- Homepage: owner CTA band ------- */
.b-cta {
  position:relative; padding:88px 0; color:#fff; text-align:center;
  background-color: var(--b-dark);
  background-image: var(--b-hero-img);
  background-size: cover; background-position: center; overflow:hidden;
}
.b-cta .b-hero__scrim { background: rgba(16,27,44,.72); }
.b-cta__inner { position:relative; z-index:1; max-width:640px; }
.b-cta h2 { color:#fff; }
.b-cta p { color:#D9DEE8; font-size:17px; margin-bottom:28px; }
.b-cta__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.b-cta__actions .btn-ghost { color:#fff; border-color:rgba(255,255,255,.45); }
.b-cta__actions .btn-ghost:hover { border-color:#fff; }
@media (max-width:782px){ .b-cta { padding:64px 0; } }

/* ------- Empty state ------- */
.b-empty {
  border:1px dashed var(--b-border-strong); border-radius:14px;
  padding:40px; text-align:center; color:var(--b-muted); background:#FAF9F6;
}

/* ------- Listing page ------- */
.b-listing { padding-top: 48px; }
.b-listing__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; }
.b-listing__title { margin:0; }
.b-listing__count { color:var(--b-muted); font-size:14px; margin:0 0 6px; }
.b-filterbar {
  display:grid; grid-template-columns: repeat(8, 1fr) auto; gap:12px; align-items:end;
  background:#fff; border:1px solid var(--b-border); border-radius:14px;
  padding:18px 18px 20px; margin-bottom:34px;
}
.b-filterbar .b-field { margin-bottom:0; }
.b-filterbar .b-field select, .b-filterbar .b-field input { height:44px; font-size:13px; }
.b-filterbar__go { height:44px; white-space:nowrap; }
.b-listing__grid { margin-bottom: 14px; }
.b-listing .pagination,
.b-listing .page-numbers { list-style:none; margin:30px 0 0; display:flex; gap:8px; justify-content:center; padding:0; }
.b-listing .page-numbers li { display:inline; }
.b-listing .page-numbers .page-numbers {
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  border:1px solid var(--b-border); border-radius:8px; background:#fff;
  color:var(--b-body); font-size:14px; text-decoration:none;
}
.b-listing .page-numbers .page-numbers.current { background:var(--b-ink); border-color:var(--b-ink); color:#fff; }
.b-listing .page-numbers .page-numbers:not(.current):hover { border-color:var(--b-ink); color:var(--b-ink); }
@media (max-width:1100px){ .b-filterbar { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:782px){ .b-filterbar { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .b-filterbar { grid-template-columns: 1fr; } .b-listing__head { flex-direction:column; align-items:flex-start; } }

/* ------- Single property detail ------- */
.b-detail { padding: 34px 0 80px; }
.b-detail__crumbs { font-size:13px; color:var(--b-muted); margin-bottom:26px; }
.b-detail__crumbs a { color:var(--b-muted); }
.b-detail__crumbs a:hover { color:var(--b-ink); }
.b-detail__sep { margin:0 8px; color:var(--b-border-strong); }
.b-detail__here { color:var(--b-ink); }
.b-detail__grid { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:32px; align-items:start; }
.b-detail__main { min-width:0; }
.b-detail__side { position:sticky; top:96px; }
@media (max-width:1024px){ .b-detail__grid { grid-template-columns:1fr; } .b-detail__side { position:static; } }

/* gallery */
.b-gallery { border-radius:14px; overflow:hidden; border:1px solid var(--b-border); margin-bottom:28px; }
.b-gallery__stage { aspect-ratio: 16/10; background:#1c1c1c; }
.b-gallery__stage img { width:100%; height:100%; object-fit:cover; display:none; }
.b-gallery__stage img.is-active { display:block; }
.b-gallery__thumbs { display:flex; gap:8px; padding:10px; background:#fff; }
.b-gallery__thumbs button { width:64px; height:44px; padding:0; border:2px solid var(--b-border); border-radius:8px; overflow:hidden; cursor:pointer; background:#fff; }
.b-gallery__thumbs button.is-active { border-color: var(--b-accent); }
.b-gallery__thumbs img { width:100%; height:100%; object-fit:cover; }

/* panel / facts */
.b-detail__panel h1 { margin:6px 0 10px; }
.b-detail__addr { display:flex; align-items:center; gap:7px; color:var(--b-muted); font-size:15px; margin-bottom:6px; }
.b-detail__status { display:inline-block; font-size:12px; font-weight:600; color:#fff; background:var(--b-warning); padding:3px 10px; border-radius:100px; margin-bottom:14px; }
.b-detail__facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin:22px 0; }
.b-fact { border:1px solid var(--b-border); border-radius:12px; padding:14px 16px; background:#fff; }
.b-fact b { font-family:var(--b-font-display); font-size:24px; color:var(--b-ink); display:block; line-height:1; }
.b-fact span { font-size:12px; color:var(--b-muted); }
.b-fact small { display:block; margin-top:6px; font-size:12px; color:var(--b-muted); }
.b-detail__content { font-size:16px; line-height:1.7; }
.b-detail__content h2, .b-detail__content h3 { margin-top:24px; }

/* related */
.b-detail__related { margin-top:56px; }
.b-detail__related h2 { margin-bottom:22px; }

/* side card */
.b-sidecard { border:1px solid var(--b-border); border-radius:16px; padding:26px; background:#fff; box-shadow:0 10px 30px rgba(16,27,44,.06); }
.b-sidecard__price { font-family:var(--b-font-display); font-size:34px; color:var(--b-accent); margin:0 0 4px; font-weight:600; }
.b-sidecard__per { font-family:var(--b-font-body); font-size:14px; color:var(--b-muted); font-weight:400; }
.b-sidecard__tx { font-size:14px; color:var(--b-muted); margin-bottom:20px; }
.btn--block { width:100%; justify-content:center; }
.b-sidecard__list { list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid var(--b-border); display:grid; gap:12px; }
.b-sidecard__list li { display:flex; justify-content:space-between; font-size:14px; color:var(--b-body); }
.b-sidecard__list span { color:var(--b-muted); }
.b-sidecard__demo { margin:20px 0 0; font-size:13px; color:#7A4E0A; background:#FFF3E0; border:1px solid #F0C98C; border-radius:8px; padding:10px 14px; }

/* breadcrumb on mobile */
@media (max-width:600px){ .b-crumbs { font-size:12px; } }