/* responsive.css
   Mobile-first: STACK on small screens, GRID on desktop.
   Layout-only: does not change colors or fonts.
*/

/* Safety / resets */
* { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }

/* ---------- MOBILE (default): stack everything ---------- */
/* Target common grid/listing wrappers and rows */
.property-grid,
.listings-grid,
.grid,
.listings,
.cards,
.card-list,
.row,
.listing-wrapper,
.results {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Make each child a full-width block */
.property-grid > * ,
.listings-grid > * ,
.grid > * ,
.row > * ,
.cards > * ,
.card-list > * ,
.listing-wrapper > * ,
.results > * {
  display: block !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
}

/* Generic item/card classes */
.property-card,
.listing-card,
.card,
.item,
.result-item,
.article {
  width: 100% !important;
  display: block !important;
  margin-bottom: 12px !important;
}

/* Columns inside forms or multi-col layouts stack */
.col,
.column,
.col-1,
.col-2,
.col-3 {
  width: 100% !important;
  display: block !important;
  margin-bottom: 10px !important;
}

/* Forms and inputs full width on mobile */
.form-row,
.form-group {
  display: block !important;
}
input, select, textarea, button, .btn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep navs visible control handled by your existing header logic.
   Do not force colors or positions here. */

/* ---------- DESKTOP: restore grid behaviour ---------- */
@media (min-width: 768px) {
  /* If the page uses .property-grid or .grid, give a multi-column layout */
  .property-grid,
  .listings-grid,
  .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 18px !important;
    align-items: start;
    padding: 0 !important;
  }

  /* A few common two-column containers */
  .two-col,
  .columns-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Restore form rows to side-by-side where previously used */
  .form-row {
    display: flex !important;
    gap: 12px !important;
  }
  .form-row .col { flex:1; width:auto !important; margin-bottom:0 !important; }

  /* Keep card appearance but let your site's styles control color/padding */
  .property-card,
  .listing-card,
  .card {
    width: auto !important;
    display: block !important;
    margin-bottom: 0 !important;
  }
}

/* Larger desktop: more columns */
@media (min-width: 992px) {
  .property-grid,
  .listings-grid,
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 22px !important;
  }
}




/* ---------- PROPERTY DETAILS PAGE ---------- */
@media (max-width: 768px) {
  .property-grid {
    display: block !important;   /* stack main + aside */
  }

  .property-grid main,
  .property-grid aside {
    width: 100% !important;
    display: block !important;
    margin-bottom: 20px !important;
  }

  /* Recommended section: make similar properties single column */
  .recommended .card-grid {
    display: block !important;
  }
  .recommended .card-grid > * {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
}



/* ---------- Add Property Form ---------- */
.property-form {
  display: block;
  max-width: 600px;
  margin: 0 auto;
}

.property-form label {
  font-weight: 600;
  margin-top: 12px;
  display: block;
}

.property-form input,
.property-form select,
.property-form textarea,
.property-form button {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

.property-form button {
  background: #ff6a00; /* keep your site color */
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row .col {
  flex: 1;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .form-row {
    display: block;
  }
  .form-row .col {
    width: 100%;
    margin-bottom: 12px;
  }
}



/* ----------------- Marketplace: stack on mobile, keep desktop grid ----------------- */

/* Mobile-first: stack layout and items */
@media (max-width: 767px) {

  /* Make the overall layout stack: sidebar then main (or main then sidebar if you prefer) */
  .layout {
    display: block !important;
    width: 100% !important;
  }

  /* Sidebar and main become full width stacked blocks */
  .layout .sidebar,
  .layout main {
    width: 100% !important;
    display: block !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }

  /* Make filter form inputs full width and comfortable on mobile */
  .sidebar .filter-group,
  .sidebar label,
  .sidebar input,
  .sidebar select,
  .sidebar button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Make the results/listing container a single column */
  .list-grid,
  .list-grid > * {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
  }

  /* Ensure each listing uses full width and stacks internal parts vertically */
  .listing {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    align-items: stretch;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Listing image full width on mobile */
  .listing img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 6px;
  }

  /* Listing body: full width and stacked */
  .listing .list-body {
    width: 100% !important;
    display: block !important;
  }

  /* Price and meta spacing */
  .listing .price, .listing .meta {
    display: block !important;
    margin-top: 8px !important;
  }

  /* Pagination centered and easy to tap */
  .pagination, .pagination a {
    display: block !important;
    text-align: center !important;
    margin: 8px 0 !important;
  }

  /* YouTube embed responsive */
  .youtube-embed, .youtube-embed iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
  }
}

/* Tablet+ (leave desktop grid intact) */
@media (min-width: 768px) {
  /* Don't override desktop grid: let your existing CSS take precedence */
  .layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; } /* optional if you had a grid */
  .list-grid { /* restore grid if you use it at larger widths */ display: grid !important; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)) !important; gap: 18px !important; }
  .listing { display: block !important; } /* let your desktop listing styles show */
}

/* mobile filter toggle */
.filter-toggle {
  display:block;
  padding:8px 12px;
  margin:10px 0;
  border-radius:6px;
  background:transparent;
  border:1px solid rgba(0,0,0,0.08);
}
.sidebar.open { display:block !important; }
@media(min-width:768px){ .filter-toggle{display:none} }




/* ===== Responsive Header Fix ===== */
.header {
  display: flex;
  flex-wrap: wrap;   /* allow items to wrap on small screens */
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden; /* prevent sideways scroll */
}

.header .brand img {
  height: 40px;
  max-width: 100%;
}

.header .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.header .searchbar {
  flex: 1 1 100%;       /* force full width on small screens */
  margin: 8px 0;
}
.header .searchbar input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

/* --- Mobile layout (stack neatly) --- */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: stretch;
  }

  .header .nav {
    justify-content: center;
    width: 100%;
  }

  .header .searchbar {
    order: 3; /* push search below navs */
  }

  .header .nav a,
  .header .cta {
    font-size: 14px;
    padding: 6px 8px;
  }
}

/* ===== Header: keep inside mobile frame & stack neatly ===== */

/* Base header layout (flex + wrap so items don't overflow) */
.header {
  display: flex;
  flex-wrap: wrap;            /* allow wrapping */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;         /* prevent horizontal scrolling */
  background: transparent;
}

/* Brand/logo */
.header .brand { display:flex; align-items:center; }
.header .brand img {
  height:40px;
  max-width:100%;
  display:block;
}

/* Nav groups (allow wrap) */
.header .nav {
  display:flex;
  flex-wrap:wrap;             /* wrap items into new lines instead of causing overflow */
  gap:8px;
  align-items:center;
}

/* Keep search reasonably sized on desktop, but allow growth */
.header .searchbar {
  flex: 0 1 420px;            /* preferred width on desktop, can shrink */
  margin: 0 12px;
}
.header .searchbar input {
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  box-sizing:border-box;
}

/* Right-side nav (post ad, login etc) */
.header > .nav:last-of-type,
.header-right { display:flex; gap:8px; align-items:center; }

/* Compact paddings for nav links */
.header .nav a,
.header .nav .cta,
.header .drop-btn {
  font-size:14px;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
  color:inherit;
}

/* === Mobile specific: stack & order for a tidy single-column layout === */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: stretch;      /* full width children */
    gap:8px;
    padding:10px;
  }

  /* make nav rows centered and full width */
  .header .nav {
    justify-content:center;
    width:100%;
    padding:0;
    margin:0;
  }

  /* search takes full width and appears below the navs */
  .header .searchbar {
    order: 3;                  /* ensures search is below navs */
    flex: 1 1 100%;
    margin-top:6px;
    margin-bottom:6px;
  }

  /* ensure nav items wrap as small inline blocks */
  .header .nav a,
  .header .drop-btn {
    font-size:13px;
    padding:6px 8px;
    margin:2px;
  }

  /* keep CTA visible but small */
  .header .nav .cta {
    padding:6px 8px;
    font-size:13px;
  }

  /* optional: reduce logo a little to save vertical space */
  .header .brand img { height:34px; }

  /* hide overflow and ensure no horizontal scroll */
  html, body { overflow-x: hidden; }
}

/* Defensive: if two headers accidentally exist, hide the later one so UI stays clean */
header + header { display: none !important; }



/* ---------- Property page responsive overrides ---------- */
/* Keeps desktop grid; stacks cleanly on mobile; gallery + thumbnails responsive */

/* Container safety */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 12px;
  box-sizing: border-box;
}

/* Make the property grid flexible; desktop keeps two columns, mobile stacks */
.property-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

/* Panels, gallery, thumbs */
.panel { background:#fff; padding:12px; border-radius:8px; border:1px solid #eee; box-sizing:border-box; }
.gallery .main-img img { width:100%; height:auto; display:block; border-radius:6px; object-fit:cover; }

/* Thumbnails row: allow horizontal scroll on small screens */
.thumbs {
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom:6px;
}
.thumbs img {
  width:80px;
  height:60px;
  object-fit:cover;
  cursor:pointer;
  border-radius:6px;
  border:1px solid #ddd;
  flex: 0 0 auto;
}

/* Price and badges */
.price { font-size:22px; color:#ff6a00; font-weight:700; margin-top:6px; }
.badge { display:inline-block; background:#0a7a3f; color:#fff; padding:4px 8px; border-radius:12px; font-size:12px; margin-left:8px; }

/* Recommended card grid */
.recommended .card-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
}

/* ACTIONS row */
.action-btn, .fav-btn, .cta-wa { box-sizing:border-box; }

/* YouTube embed responsive */
.youtube-embed { width:100%; max-width:100%; }
.youtube-embed iframe { width:100%; height:auto; aspect-ratio:16 / 9; display:block; }

/* ========== MOBILE: stack everything & adjust spacing ========== */
@media (max-width: 768px) {

  /* stack main and aside */
  .property-grid {
    display: block !important;
    width: 100%;
  }
  .property-grid main,
  .property-grid aside {
    width: 100% !important;
    display: block !important;
    margin-bottom: 16px !important;
  }

  /* ensure panels are full width and padded nicely */
  .panel { padding:12px; border-radius:8px; }

  /* gallery: main image responsive and thumbs smaller */
  .gallery .main-img { width:100%; }
  .thumbs img { width:72px; height:56px; }

  /* description text comfortable line length */
  section { word-wrap:break-word; }

  /* features / meta rows stack vertically */
  section[style*="display:flex"], .meta-row, .price {
    display:block !important;
  }

  /* actions: stack buttons */
  .panel > div[style*="display:flex"] {
    display:flex !important;
    flex-direction:column !important;
    gap:10px;
    align-items:stretch !important;
  }
  .action-btn, .fav-btn, .cta-wa { width:100% !important; text-align:center; }

  /* recommended: single column list on mobile */
  .recommended .card-grid {
    display:block !important;
  }
  .recommended .card-grid > * {
    width:100% !important;
    margin-bottom:12px;
  }

  /* reduce typography scale slightly on mobile */
  h1 { font-size:20px; line-height:1.2; }
  .price { font-size:18px; }
  .muted { font-size:14px; }

  /* gallery container spacing */
  .gallery { margin-top:12px; }

  /* ensure iframe minimum height on small devices */
  .youtube-embed iframe { min-height:200px; aspect-ratio:16/9; }

  /* avoid horizontal overflow anywhere */
  html, body, .container, .property-grid, .panel, .gallery, .thumbs { overflow-x:hidden !important; }

  /* smaller thumb tap targets can be increased visually using padding area */
  .thumbs img { touch-action:manipulation; padding:2px; }
}

/* keep desktop unchanged for widths above 768px but ensure recommended grid adjusts */
@media (min-width: 769px) {
  .property-grid { grid-template-columns: 1fr 360px; }
  .recommended .card-grid { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
}

/* Defensive: make image tags responsive if any inline CSS blocks them */
img { max-width:100%; height:auto; display:block; }


/* Ensure marketplace listing images show on mobile */
.listing img,
.list-grid img,
.card img,
.listing .thumb img,
.property .featured-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Prevent accidental hiding/collapse on small screens */
@media (max-width:768px) {
  .listing img, .list-grid img, .card img { max-width:100% !important; }
  .listing, .list-grid, .card { overflow: visible !important; }
  img[loading="lazy"] { display:block; } /* ensure lazy images render */
}