/* ==========================================================================
   Tropic Home - единичен имот (B2.3)
   Източник: makets/final/assets/maket.css, редове 507-633 - копирани 1:1
   (разпределението е в tropichome/README.md). Забранените свойства тук са
   само там, където ги има макетът: height 520px на .gal (само снимки),
   position:absolute за бутона „Всички снимки" върху снимките, fixed лентата
   .imot-bar и lightbox-ът. Допълненията извън макета са най-долу.
   ========================================================================== */

.gal {
  position: relative; /* котва за бутона „Всички снимки" */
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  height: 520px; /* разрешено: само снимки */
  margin-top: 24px;
}
.gal a { position: relative; display: block; min-height: 0; border-radius: 4px; }
.gal a img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.gal a:nth-child(1) { grid-row: 1 / 3; border-radius: var(--r-card) 4px 4px var(--r-card); }
.gal a:nth-child(3) { border-radius: 4px var(--r-card) 4px 4px; }
.gal a:nth-child(5) { border-radius: 4px 4px var(--r-card) 4px; }
.gal a:hover img { filter: brightness(.92); }
.gal__all { position: absolute; right: 16px; bottom: 16px; }
.gal__all svg { width: 18px; height: 18px; }
.gal-m { display: none; }
@media (max-width: 767px) {
  .gal { display: none; }
  .gal-m { display: grid; margin-top: 16px; }
  .gal-m__track {
    grid-area: 1 / 1;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    border-radius: var(--r-img);
    scrollbar-width: none;
  }
  .gal-m__track::-webkit-scrollbar { display: none; }
  .gal-m__track a { flex: 0 0 100%; scroll-snap-align: start; }
  .gal-m__track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .gal-m__count { grid-area: 1 / 1; align-self: end; justify-self: end; margin: 12px; z-index: 1; }
}

.imot-head { display: grid; gap: 14px; padding-block: 28px 8px; }
.imot-head .crumbs { color: var(--c-muted); }
.imot-head .crumbs a:hover { color: var(--c-primary); }
.imot-head h1 { overflow-wrap: anywhere; }

.imot-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: calc(var(--gap) * 2); align-items: start; padding-block: 24px var(--sp-section); }
.imot-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-block); min-width: 0; }
.imot-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.imot-sec > h2 { font-size: var(--t-h3); line-height: 1.25; }
.imot-promise { font-family: var(--f-head); font-weight: 600; font-size: var(--t-lead); line-height: 1.5; color: var(--c-text); }
.imot-desc { color: var(--c-muted); }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); margin: 0; }
.specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.specs dt { color: var(--c-muted); font-size: 15px; }
.specs dd { margin: 0; font-weight: 600; font-size: 15px; }
.infra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gap); list-style: none; }
.infra li { display: flex; align-items: center; gap: 10px; }
.infra svg { width: 20px; height: 20px; color: var(--c-accent); flex: none; }
.genplan { display: block; justify-self: start; max-width: 100%; }
.genplan img { border-radius: var(--r-img); border: 1px solid var(--c-border); }
.layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.layout-card { display: grid; gap: 10px; align-content: start; padding: 8px 8px 16px; border: 1px solid var(--c-border); border-radius: var(--r-card); background: #fff; }
.layout-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--c-surface); border-radius: var(--r-img); }
.layout-card h3 { font-size: 17px; line-height: 1.35; padding-inline: 8px; }
.layout-card p { padding-inline: 8px; font-size: 15px; color: var(--c-muted); }
.layout-card .btn { margin-inline: 8px; }
.map-frame { border-radius: var(--r-img); border: 1px solid var(--c-border); }
.map-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-img); }

.imot-side {
  position: sticky; top: calc(var(--header-h) + 24px);
  display: grid; gap: 14px;
  padding: 28px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(15, 30, 36, .06);
}
.imot-side__from { color: var(--c-muted); font-size: 15px; }
.imot-side__price { font-family: var(--f-head); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: var(--c-text); }
.imot-side__usd { color: var(--c-muted); font-size: 15px; }
.imot-side hr { border: 0; border-top: 1px solid var(--c-border); margin: 4px 0; width: 100%; }
.imot-side ul { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.imot-side li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.imot-side li svg { width: 18px; height: 18px; color: var(--c-accent); flex: none; margin-top: 1px; }
.imot-side .note { font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.imot-bar { display: none; }
@media (max-width: 1023px) {
  .imot-layout { grid-template-columns: minmax(0, 1fr); }
  .imot-side { position: static; }
  .layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .specs, .infra, .layouts { grid-template-columns: 1fr; }
  .imot-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--c-border);
    box-shadow: 0 -8px 24px rgba(15, 30, 36, .08);
  }
  .imot-bar__price { display: grid; line-height: 1.2; }
  .imot-bar__price small { color: var(--c-muted); font-size: 13px; }
  .imot-bar__price strong { font-family: var(--f-head); font-weight: 800; font-size: 20px; }
  body.has-imot-bar { padding-bottom: 84px; }
}

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  grid-template-rows: auto 1fr auto;
  background: rgba(10, 18, 22, .94);
  color: #fff;
}
.lb.is-open, .lb:target { display: grid; }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.lb__count { font-weight: 600; font-size: 15px; }
.lb__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 0; color: #fff; cursor: pointer; text-decoration: none;
}
.lb__btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.lb__btn svg { width: 24px; height: 24px; }
.lb__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 20px; min-height: 0; }
.lb__stage img { justify-self: center; max-height: 78vh; width: auto; max-width: 100%; object-fit: contain; border-radius: 8px; }
.lb__cap { text-align: center; padding: 14px 20px 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }
@media (max-width: 767px) {
  .lb__stage { grid-template-columns: 1fr; padding: 0; }
  .lb__stage .lb__prev, .lb__stage .lb__next { display: none; }
  .lb__stage img { max-height: 70vh; border-radius: 0; }
}

/* ==========================================================================
   Допълнения по правило (PLAN 4.10 „Имот без галерия"; TASKS B2.3):
   под 5 снимки - мрежа с наличните (1 = 16:9, 2-4 = равни клетки), без
   галерия - featured image 16:9. Ъглите следват bento-то (radius на снимките,
   не overflow). Описанието от редактора може да е няколко абзаца.
   ========================================================================== */
.gal.gal--few { grid-template-rows: minmax(0, 1fr); }
.gal.gal--few a:nth-child(n) { grid-row: auto; border-radius: 4px; }
.gal.gal--n1 { grid-template-columns: minmax(0, 1fr); height: auto; }
.gal.gal--n1 a:nth-child(n) { border-radius: var(--r-card); }
.gal.gal--n1 a img { height: auto; aspect-ratio: 16 / 9; }
.gal.gal--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal.gal--n2 a:nth-child(1) { border-radius: var(--r-card) 4px 4px var(--r-card); }
.gal.gal--n2 a:nth-child(2) { border-radius: 4px var(--r-card) var(--r-card) 4px; }
.gal.gal--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gal.gal--n3 a:nth-child(1) { border-radius: var(--r-card) 4px 4px var(--r-card); }
.gal.gal--n3 a:nth-child(3) { border-radius: 4px var(--r-card) var(--r-card) 4px; }
.gal.gal--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gal.gal--n4 a:nth-child(1) { border-radius: var(--r-card) 4px 4px 4px; }
.gal.gal--n4 a:nth-child(2) { border-radius: 4px var(--r-card) 4px 4px; }
.gal.gal--n4 a:nth-child(3) { border-radius: 4px 4px 4px var(--r-card); }
.gal.gal--n4 a:nth-child(4) { border-radius: 4px 4px var(--r-card) 4px; }
.imot-desc > * + * { margin-top: 1em; }
.imot-desc a { color: var(--c-primary); text-decoration: underline; }