/* -------------------------
   Layout listing css (improved)
   ------------------------- */
:root{
  --max-w:1200px;
  --card-bg:#fff;
  --border:#e6e6e6;
  --text:#222;
  --muted:#6b6b6b;
  --surface-muted:#eef1f4;
  --surface-soft:#f8fafc;
  --accent:#0d6efd;
  --link:#0b4ebd;
  --link-hover:#083b8f;
  --link-visited:#5a2ca0;
  --shadow-soft:0 8px 22px rgba(15,23,42,.04);
  --shadow-strong:0 14px 28px rgba(15,23,42,.28);
}

/* Layout */
.layout-row{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  align-items:flex-start;
  max-width:var(--max-w);
  margin:18px auto;
  padding:0 12px;
  width:100%;
  box-sizing:border-box;
}
.col-main{
  flex:1 1 auto;
  min-width:0;
}
.col-side{
  flex:0 0 280px;
  width:280px;
  min-width:0;
  position:sticky;
  top:18px;
  align-self:flex-start;
}

/* Cards */
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
  position:relative;
  contain: paint layout;
  box-sizing:border-box;
}
.muted{ color:var(--muted); }
.list{ display:flex; flex-direction:column; gap:16px; }

/* Ad card */
.ad-card{
  background:linear-gradient(135deg,#fff 0%,#fff 58%,#f8fbff 100%);
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(15,23,42,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ad-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#0b4ebd,#16a34a);
}
.ad-card:hover{
  transform:translateY(-2px);
  border-color:rgba(11,78,189,.22);
  box-shadow:0 18px 42px rgba(15,23,42,.13);
}
.ad-card:target{
  outline:3px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(13,110,253,.18);
}
.ad-row{
  display:flex;
  gap:14px;
  align-items:stretch;
  padding:0 14px 0 0;
  min-height:280px;
}
.ad-main-link{
  min-width:0;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  color:inherit;
}
.ad-main-link,
.ad-main-link:hover,
.ad-main-link:focus-visible,
.ad-main-link:active{
  text-decoration:none;
}
.ad-main-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:8px;
}

.ad-media-stack{
  flex:0 0 170px;
  width:170px;
  min-height:280px;
  min-width:0;
  align-self:stretch;
}

/* Image wrapper - predictable aspect */
.ad-media-frame{
  width:100%;
  aspect-ratio: 4 / 5;
  height:100%;
  min-height:280px;
  position:relative;
  overflow:hidden;
  border-radius:0 14px 14px 0;
  background:var(--surface-muted);
  box-shadow:0 12px 26px rgba(15,23,42,.16);
}
.ad-media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,0) 52%,rgba(15,23,42,.34) 100%);
  pointer-events:none;
  z-index:3;
}
.simple-carousel-fill{ height:100%; }
.ad-image{
    width: 100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
.ad-card:hover .ad-image{
  transform:scale(1.025);
}
.simple-carousel{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.simple-carousel-slide{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  transform:scale(1.035);
  transition:opacity .75s ease, transform 5s ease;
  pointer-events:none;
}
.simple-carousel-slide.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  z-index:2;
}
.ad-photo-badge{
  position:absolute;
  right:8px;
  top:8px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.78);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  backdrop-filter:blur(6px);
}
.ad-rating-overlay{
  position:absolute;
  left:0;
  bottom:8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:calc(100% - 12px);
  padding:6px 9px 6px 10px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,rgba(15,23,42,.94),rgba(31,41,55,.84));
  border-left:3px solid #f4b400;
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1;
  box-shadow:var(--shadow-strong);
  backdrop-filter:blur(4px);
  white-space:nowrap;
  z-index:4;
}
.ad-rating-score{
  font-variant-numeric:tabular-nums;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.ad-rating-stars{
  color:#f4b400;
  letter-spacing:-1px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.ad-rating-count{
  color:rgba(255,255,255,.82);
  font-weight:500;
}

/* Content */
.ad-content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  padding:14px 0;
}
.ad-title-primary{
  font-size:18px;
  color:var(--text);
  font-weight:800;
  line-height:1.22;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:4px 0 8px;
}
.ad-facts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 8px;
}
.ad-fact-chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
}
.ad-owner-status{
  gap:6px;
  background:#f8fafc;
  color:#475569;
  border-color:#cbd5e1;
}
.ad-owner-status.is-loading,
.ad-owner-status.is-offline{
  display:none;
}
.ad-owner-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.16);
}
.ad-owner-status.is-online{
  background:#ecfdf5;
  color:#047857;
  border-color:#a7f3d0;
}
.ad-owner-status.is-online::before{
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.18);
}
.ad-desc{
  font-size:15px;
  font-weight:400;
  color:var(--muted);
  margin:8px 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ad-card-actions{
  display:flex;
  align-items:center;
  margin:12px 0 0;
  justify-content:flex-start;
}
.ad-card-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #0b4ebd;
  background:linear-gradient(135deg,#0b4ebd,#0f766e);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 12px 24px rgba(11,78,189,.24);
}
.ad-card-cta:hover,
.ad-card-cta:focus-visible{
  background:linear-gradient(135deg,#083b8f,#115e59);
  border-color:#083b8f;
  color:#fff;
  text-decoration:none;
}
.ad-card-cta:focus-visible{
  outline:2px solid #0b4ebd;
  outline-offset:2px;
}

/* Small buttons / related grid (kept minimal) */
.related-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.small-btn{
  display:inline-block;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid var(--border);
  text-decoration:none;
  font-size:15px;
  background:#fff;
  color:var(--text);
  width:100%;
  text-align:left;
  box-sizing:border-box;
}

.seo-content,
.seo-content p,
.seo-content li{
  font-size:15px;
  line-height:1.75;
}
.seo-content ul,
.seo-content ol{
  padding-left:20px;
}
.seo-content a,
.empty-state-note a{
  color:var(--link);
  font-weight:600;
  text-decoration:none;
}
.seo-content a:visited,
.empty-state-note a:visited{
  color:var(--link-visited);
}
.seo-content a:hover,
.seo-content a:active,
.empty-state-note a:hover,
.empty-state-note a:active{
  color:var(--link-hover);
}
.seo-content a:focus-visible,
.empty-state-note a:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
  border-radius:4px;
}
.seo-content table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
  font-size:14px;
  line-height:1.65;
  overflow:hidden;
  border:1px solid var(--border);
}
.seo-content caption{
  caption-side:top;
  text-align:left;
  font-weight:600;
  margin-bottom:8px;
  color:var(--text);
}
.seo-content th,
.seo-content td{
  border:1px solid var(--border);
  padding:10px 12px;
  vertical-align:top;
}
.seo-content thead th{
  background:var(--surface-soft);
  color:var(--text);
}
.seo-content tbody tr:nth-child(even){
  background:rgba(15,23,42,.02);
}
.seo-content-block{
  margin-top:14px;
}
.seo-content-block:first-child{
  margin-top:0;
}
.seo-content-block-before{
  margin-bottom:12px;
}
.related-category-ads{
  margin:18px 0 0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.related-category-ads__head{
  margin-bottom:12px;
}
.related-category-ads__title{
  margin:0;
  font-size:21px;
  line-height:1.25;
  color:#12202f;
}
.related-category-ads__text{
  margin:6px 0 0;
  color:#566575;
  font-size:14px;
  line-height:1.6;
}
.related-category-ads__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.related-category-ads__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:48px;
  padding:11px 13px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:13px;
  background:#f8fafc;
  color:#172033;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-decoration:none;
  box-shadow:none;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.related-category-ads__link--primary{
  border-color:rgba(15,118,110,.32);
  background:#ecfdf5;
  color:#0f766e;
}
.related-category-ads__link::after{
  content:'>';
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#f1f5f9;
  color:#0f766e;
  font-size:14px;
  font-weight:800;
}
.related-category-ads__link:hover,
.related-category-ads__link:focus-visible{
  color:#0f766e;
  border-color:rgba(15,118,110,.35);
  box-shadow:0 10px 18px rgba(15,118,110,.10);
  transform:translateY(-1px);
  text-decoration:none;
}
.related-category-ads__link:focus-visible{
  outline:2px solid #0f766e;
  outline-offset:3px;
}
.faq-content-block{
  margin-top:8px;
}
.faq-content-block h2{
  margin:0 0 14px;
  font-size:22px;
  line-height:1.3;
}
.faq-accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.faq-accordion-item{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.faq-toggle{
  width:100%;
  border:0;
  background:#fff;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  padding:15px 16px;
  font:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1.45;
  cursor:pointer;
}
.faq-toggle:hover{
  background:var(--surface-soft);
}
.faq-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.faq-toggle-text{
  flex:1 1 auto;
}
.faq-toggle-arrow{
  flex:0 0 auto;
  width:18px;
  height:18px;
  color:#0f172a;
  transition:transform .22s ease;
}
.faq-accordion-item.is-open .faq-toggle-arrow{
  transform:rotate(180deg);
}
.faq-answer{
  padding:0 16px 16px;
  color:#374151;
}
.faq-answer[hidden]{
  display:none;
}
.faq-answer p{
  margin:0;
}
.related-cities-title{
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:8px;
}
.related-grid + .related-cities-title{
  margin-top:16px;
}
.col-side .card + .card{
  margin-top:14px;
}
.empty-state-note{
  margin:0;
}
.seo-disclaimer-wrap{
  max-width:var(--max-w);
  margin:12px auto;
  padding:0 12px;
}

/* LQIP / blur-up for first images */
.lcp-img{
  filter: blur(10px);
  transition: filter .4s ease, opacity .25s ease, transform .25s ease;
  opacity:0.98;
  will-change: filter, opacity;
}
.lcp-loaded{ filter: blur(0); opacity:1; transform:none; }

/* Small optimization for reduced motion */
@media (prefers-reduced-motion: reduce){
  .ad-card, .lcp-img, .ad-image, .simple-carousel-slide { transition:none !important; }
}

/* Responsive adjustments */
@media (max-width: 860px){
  .layout-row{
    flex-direction:column;
    gap:12px;
  }
  .col-main, .col-side{
    width:100%;
    min-width:0;
  }
  .col-side{
    position:static;
    top:auto;
  }
  .seo-content table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .related-category-ads__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .related-grid{
    grid-template-columns:1fr;
  }
  .related-category-ads__grid{
    grid-template-columns:1fr;
  }
}