/* =============================================================================
   listing-detail.css — premium image-led detail page
   Big hero photograph, refined two-column layout, subtle paper-white sticky
   buy box. Light theme throughout.
   ============================================================================= */

.ft-listing-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 8px var(--space-lg) var(--gap-section);
  align-items: start;
}

.ft-listing-detail-main h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 8px 0 12px;
  color: var(--clr-text-primary);
}

/* ============================================================================
   PHOTO GALLERY — premium image treatment
   ============================================================================ */
.ft-listing-photos {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 28px;
  border: 1px solid var(--clr-border-soft);
  box-shadow: var(--shadow-sm);
}

.ft-listing-photo-main {
  display: block;
  position: relative;
  background: #F0F2F2;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ft-listing-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* When the placeholder fallback is used inside the main area */
.ft-listing-photo-main .ft-listing-photo-placeholder {
  position: absolute;
  inset: 0;
  height: 100%;
}

.ft-listing-photo-strip {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--clr-border-soft);
  overflow-x: auto;
  background: #fff;
}
.ft-listing-photo-strip::-webkit-scrollbar { height: 4px; }
.ft-listing-photo-strip::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 2px; }
.ft-listing-photo-strip button {
  width: 72px;
  height: 72px;
  border: 1px solid var(--clr-border);
  background: #fff;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.ft-listing-photo-strip button:hover { border-color: var(--clr-text-primary); }
.ft-listing-photo-strip button.active {
  border-color: #E47911;
  border-width: 2px;
  padding: 0;
  box-shadow: 0 0 0 2px rgba(228, 121, 17, 0.18);
}
.ft-listing-photo-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================================
   ABOUT / FEATURE BLOCKS
   ============================================================================ */
.ft-listing-about {
  background: #fff;
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}
.ft-listing-about h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--clr-border-soft);
  letter-spacing: -0.008em;
  color: var(--clr-text-primary);
  position: relative;
}
.ft-listing-about h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--clr-primary);
}
.ft-listing-about p,
.ft-listing-about div {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--clr-text-primary);
}

/* Features grid (two-column checklist) */
.ft-listing-features-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.ft-listing-features-grid li {
  font-size: 14.5px;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.ft-listing-features-grid li svg {
  width: 16px;
  height: 16px;
  color: var(--clr-success);
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .ft-listing-features-grid { grid-template-columns: 1fr; }
  .ft-listing-about { padding: 20px; }
}

/* ============================================================================
   STICKY PANEL — refined buy-box
   ============================================================================ */
.ft-sticky-panel {
  position: sticky;
  top: 16px;
  background: #fff;
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  align-self: start;
  box-shadow: var(--shadow-sm);
}
.ft-sticky-panel-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--clr-text-primary);
}
.ft-sticky-panel-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clr-success);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 16px;
  padding: 3px 10px;
  background: var(--clr-success-bg);
  border: 1px solid var(--clr-success-border);
  border-radius: var(--radius-pill);
}
.ft-sticky-panel-verified svg { width: 13px; height: 13px; }

.ft-sticky-panel-contact { font-size: 14.5px; margin-bottom: 16px; }
.ft-sticky-panel-contact ul { list-style: none; padding: 0; margin: 0; }
.ft-sticky-panel-contact li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--clr-text-primary);
  border-bottom: 1px solid var(--clr-border-soft);
}
.ft-sticky-panel-contact li:last-child { border-bottom: 0; }
.ft-sticky-panel-contact li svg {
  width: 16px;
  height: 16px;
  color: var(--clr-text-muted);
  flex-shrink: 0;
}
.ft-sticky-panel-contact a {
  color: var(--clr-link);
  text-decoration: none;
  font-weight: 500;
}
.ft-sticky-panel-contact a:hover { color: var(--clr-link-hover); text-decoration: underline; }

.ft-sticky-panel-hours {
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--clr-border-soft);
}
.ft-sticky-panel-hours summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--clr-text-primary);
  padding: 6px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ft-sticky-panel-hours summary::-webkit-details-marker { display: none; }
.ft-sticky-panel-hours summary::after {
  content: "+";
  font-size: 18px;
  color: var(--clr-text-muted);
  font-weight: 400;
  line-height: 1;
}
.ft-sticky-panel-hours[open] summary::after { content: "−"; }
.ft-sticky-panel-hours-list { list-style: none; padding: 0; margin: 8px 0 0; }
.ft-sticky-panel-hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--clr-text-secondary);
}
.ft-sticky-panel-hours-list li span:first-child { font-weight: 700; color: var(--clr-text-primary); }

.ft-listing-disclaimer {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--clr-warning-bg);
  border-left: 3px solid var(--clr-featured-border);
  border-radius: 2px 4px 4px 2px;
  font-size: 12px;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}

/* ============================================================================
   NEARBY + RELATED
   ============================================================================ */
.ft-listing-nearby { margin-top: 40px; }
.ft-listing-nearby h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--clr-text-primary);
  letter-spacing: -0.012em;
}

.ft-listing-related-links {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--clr-page-bg-soft);
  border: 1px solid var(--clr-border-soft);
  border-radius: var(--radius-md);
}
.ft-listing-related-links h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--clr-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ft-listing-related-links ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px 24px;
  font-size: 13.5px;
}
.ft-listing-related-links a { color: var(--clr-link); }
.ft-listing-related-links a:hover { color: var(--clr-link-hover); text-decoration: underline; }

@media (max-width: 960px) {
  .ft-listing-detail { grid-template-columns: 1fr; gap: 24px; }
  .ft-sticky-panel { position: static; }
}

/* ============================================================================
   SEARCH RESULTS LAYOUT (province + city pages)
   ============================================================================ */
.ft-search-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-top: 20px;
}
.ft-filter-rail {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 14px;
  align-self: start;
  position: sticky;
  top: 16px;
}
.ft-filter-group {
  padding: 16px 0;
  border-top: 1px solid var(--clr-border-soft);
}
.ft-filter-group:first-child { border-top: 0; padding-top: 0; }
.ft-filter-group h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--clr-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ft-filter-group ul { list-style: none; padding: 0; margin: 0; }
.ft-filter-group li {
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.4;
}
.ft-filter-group li.active a {
  font-weight: 700;
  color: var(--clr-text-primary);
}
.ft-filter-group a { color: var(--clr-link); }
.ft-filter-group a:hover { color: var(--clr-link-hover); text-decoration: underline; }

.ft-results-summary {
  font-size: 14px;
  color: var(--clr-text-secondary);
  margin: 0 0 20px;
}
.ft-results-summary strong { color: var(--clr-text-primary); font-weight: 700; }

.ft-results-grid {
  display: grid;
  gap: var(--gap-card);
}
.ft-results-grid.ft-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ft-results-grid.ft-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ft-results-grid.ft-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ft-results-grid.ft-grid-cols-1 { grid-template-columns: 1fr; }
@media (max-width: 1280px) { .ft-results-grid.ft-grid-cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  {
  .ft-results-grid.ft-grid-cols-4,
  .ft-results-grid.ft-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px)  {
  .ft-search-layout { grid-template-columns: 1fr; }
  .ft-filter-rail   { position: static; }
}
@media (max-width: 520px)  {
  .ft-results-grid.ft-grid-cols-4,
  .ft-results-grid.ft-grid-cols-3,
  .ft-results-grid.ft-grid-cols-2 { grid-template-columns: 1fr; }
}

/* expand-search + related categories (matches home.css patterns) */
.ft-expand-search { margin-top: 48px; }
.ft-expand-search h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--clr-text-primary);
  letter-spacing: -0.008em;
}
.ft-related-categories { margin-top: 48px; }
.ft-related-categories h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--clr-text-primary);
  letter-spacing: -0.008em;
}