/* ==========================================================================
   Page layout - one property offer, rendered by property.tpl.

   Components come from css/system/*.css and files/tpl_site/components/.
   This file carries only what is specific to this page's composition:
   placement, grid and section rhythm. If a rule here would be useful on a
   second page, it belongs in a component instead.

   Every value is from the Listing frame (1006:1692), which is NOT one of the
   three shifted frames: its footer sits at 163/1057 and its divider at 954,
   with the majority. Node x maps to page x unchanged.

   ONE CONTAINER WIDTH. The frame carried three, all centred on 1920 - 1020
   for the head, the gallery and the spec bar (450..1470), 1188 for the
   description and amenities cards, and the system's own 1278 for the closing
   section. Since 24 Sep 2026 every section's box is the nav's 1278
   (321..1599); the two narrower widths were hand placement.

   The page's vertical structure, as measured:

     header      0..101
     head        crumbs box 121, title box 150, deal row 177..209
     gallery     209..757    819 photo + 200 ink rail
     spec bar    787..893
     cards       923..1210   644 + 38 + 506
     broker      1251..1499  full bleed, warm wash
     similar     heading box 1539, rule 1611, cards 1651..1911
     footer      from 1971
   ========================================================================== */

/* Field Grey, not white and not cream: the page ground samples #f7f7f7 at zero
   spread everywhere the frame leaves it bare, above the header rule and below
   it alike. */
/* THE CONTAINER, AS A RELATIONSHIP. Every section is the nav's 1278, the
   same min() .c-container is - the 1020 and 1188 the frame drew are gone
   (see the header above).

   --p-prop-inset is the closing section's left inset, which is a computed
   distance rather than a width: it was (100% - 1278) / 2, which is NEGATIVE
   below 1278 and pushed the «Вижте подобни имоти» heading off the left edge of
   every phone. Floored at the page gutter it is 321 at 1920 and the gutter
   everywhere the container has stopped fitting. */
.p-prop{
  --p-prop-w: min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  --p-prop-inset: max(var(--c-page-gutter), (100% - var(--c-container)) / 2);
  background:var(--c-field);
  padding-bottom:34px;      /* the carousel's photos end 1931, footer band 1971 */
}

/* --- head: breadcrumb, title, the deal line ----------------------------- */

.p-prop__head{
  width:var(--p-prop-w);
  margin:20px auto 0;       /* crumbs box y121, 20 under the 101 header band */
}

/* The buttons are taken out of flow: on the frame «Свържете се» runs from
   y150 to y191 while the title box ends at 171 and the location pin opens at
   177 - the two overlap in y and clear each other only in x. Left in flow they
   would push the deal row 20px down.

   TWO of them since 23 Sep 2026 - «Обадете се» and «Пишете ни», the client's
   mock-up, which draws the pair at the frame's own 242x41 each with the second
   ending where the one used to. 242 + 12 + 242 = 496; the 12 is the form
   card's field gap, the system's usual interval between two siblings. */
.p-prop__titlerow{
  position:relative;
  margin-top:15px;          /* title box y150, 15 under the crumbs' 135 */
  padding-right:516px;      /* the pair's 496 plus the 20 it needs to clear */
}

.p-prop__actions{
  position:absolute;
  right:0;
  top:6px;                  /* centred on the h1's first 53px line: (53 - 41) / 2 */
  display:flex;
  gap:12px;
}

/* THE PAGE'S H1, IN THE SERIF, AT THE PAGE-HERO'S ROLE (critique, 28 Sep
   2026). The frame set it 20/500 Roboto - measured exactly (371 against
   372.6 at 20px, the «П»'s stem 1.16x Regular's) and still a break of the
   Serif-Heads-Only Rule, and the smallest heading on a page whose section
   headings are 48. It is the Headline, 40 on the serif's 1.333, the same h1
   every inner page's hero now carries; below 1120, 30. At 1920 the button
   pair leaves it 762 and «Под наем в София двустаен Изток ID 2195387» sets
   on two lines. */
.p-prop__title{
  margin:0;
  font:400 var(--c-fs-headline)/var(--c-lh-serif) var(--c-serif);
  color:var(--c-ink);
}

/* 242x41. Frame 78 is a FRAME node, not a text box, so both numbers are the
   button's own and both are taken: the system's 50 height and its label-plus-40
   width are what this one instance disagrees with, and half-taking a
   measurement is worse than taking none. The label is 14px, not the button's
   usual 16 - it inks 86 against 86.0 at 14/700, where 16/400 is already 94.9
   and 16/700 is 101. A min-width rather than a width, so a longer label still
   fits. One instance, so it is set here rather than in buttons.css. */
.p-prop__titlerow .c-btn{
  height:41px;
  min-width:242px;
  /* 12, not the primary button's 16: the left edge is inset 9, 6, 3 and 1 on
     the first four rows and full by the tenth, which is a 12px arc - a 10 would
     read 7, 5, 2, 1 and a 16 would still be 4 in at row ten. */
  border-radius:var(--c-r-pill);
  font-size:var(--c-fs-label);
}

/* The row is 32 tall because the location pin is: the frame draws it 29x32 at
   y177 with the two 20px strings centred against it. */
.p-prop__deal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 30px;             /* the district's ink ends 628, the price's opens 659 */
  margin:10px 0 20px;       /* 10 under the h1's line box; 20 over the gallery */
  font:400 var(--c-fs-nav)/24px var(--c-sans);
  color:var(--c-ink);
}

.p-prop__where{ display:inline-flex; align-items:center; gap:5px; }
/* The card meta row's own pin, drawn at the frame's 29 rather than its
   intrinsic 22. Width is the constant - location.svg is 22x24, so setting a
   height here would squash it. */
.p-prop__where__icon{ width:29px; height:auto; flex:0 0 auto; }

/* Estate Green at 700, the only saturated thing in the head - and 24, not
   the frame's 20 (critique, 28 Sep 2026). Under a 40px h1 a 20px price read
   as a caption to the title, and it is the second thing a visitor looks for.
   24/700 sans is a pair the system already sets (the footer's values); the
   price stays sans because it is data, not a heading. The struck-through
   old price keeps the line's 20. */
.p-prop__price{ font-size:var(--c-fs-title); font-weight:700; color:var(--c-green); }
.p-prop__price s{ font-size:var(--c-fs-nav); }
.p-prop__price s{ margin-right:8px; font-weight:400; color:var(--c-muted); }

/* --- gallery: 819x548 stage against a 200px ink rail -------------------- */
/* The two are FLUSH - the photo's right edge and the rail's left edge are both
   x1269 - so the radius is left-only on one and right-only on the other, and
   the seam the frame draws is the photograph itself ending. */

.p-prop__gallery{
  width:var(--p-prop-w);
  margin:0 auto;            /* the deal row's own 32px box ends exactly at 209 */
  display:flex;
  height:548px;
}

.p-prop__stage{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  border-radius:var(--c-r-surface) 0 0 var(--c-r-surface);
  overflow:hidden;
  box-shadow:var(--c-sh-photo);
  background:var(--c-ink);
}
.p-prop__stage__img,
.p-prop__stage__video{
  display:block;
  width:100%; height:100%;
  border:0;
}
.p-prop__stage__img{ object-fit:cover; cursor:zoom-in; }
/* With one photograph there is no rail, so the stage keeps all four corners. */
.p-prop__stage--full{ border-radius:var(--c-r-surface); }

/* Soft Ink at zero spread, top to bottom. 24 above the first tile and 26 below
   the last, which is what four 108s and three 22s leave inside 548; 20 to the
   left of the tiles and 17 to their right, which is the frame's own asymmetry
   and is left as measured. */
.p-prop__rail{
  flex:0 0 200px;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:24px 17px 26px 20px;
  background:var(--c-ink);
  border-radius:0 var(--c-r-surface) var(--c-r-surface) 0;
}

.p-prop__thumb{
  position:relative;
  flex:1 1 0;
  min-height:0;
  padding:0;
  border:0;
  background:none;
  border-radius:var(--c-r-control);
  overflow:hidden;
  cursor:pointer;
}
.p-prop__thumb img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

/* The frame draws no selected state, because it draws no interaction. The one
   stroke it does put on a tile is the 1px Hairline Gold around «Вижте още», so
   that is what marks the tile currently on the stage - the frame's own device,
   not a new one. Inset, so it cannot shift the image inside it. */
.p-prop__thumb.is-current{
  outline:1px solid var(--c-gold);
  outline-offset:-1px;
}

/* «Вижте още 18 снимки»: a tint over the fourth photograph, inside a 1px gold
   stroke sampled #c2a170 on all four edges. The tint is 0.75 rather than the
   hero panel's 0.85 - the tile's darkest, 5th-percentile and mean luminances
   all solve to 0.74-0.76 against the three untinted tiles beside it, which is
   one reading under one assumption and is recorded as such. */
.p-prop__more{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:rgba(28,28,28,.75);
  border:1px solid var(--c-gold);
  border-radius:inherit;
  font:400 var(--c-fs-nav)/23px var(--c-sans);
  color:var(--c-white);
}

/* Once «Вижте още» is taken, the rail holds every photograph and scrolls. The
   tiles stop sharing the 548 and take the 108 the four of them measured. */
.p-prop__rail.is-expanded{ overflow-y:auto; scrollbar-width:thin; }
.p-prop__rail.is-expanded .p-prop__thumb{ flex:0 0 108px; }

.p-prop__thumb--video img{ opacity:.55; }
.p-prop__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-white);
}
.p-prop__play svg{ width:40px; height:40px; }

/* --- the spec bar ------------------------------------------------------- */
/* 1020x106 of Paper Cream on the card radius. 12 above the heading, 32 to its
   left, 22 below the icon row. */

.p-prop__spec{
  width:var(--p-prop-w);
  margin:30px auto 0;       /* y787, 30 under the gallery's 757 */
  padding:12px 32px 22px;
  background:var(--c-cream);
  border-radius:var(--c-r-card);
  box-shadow:var(--c-sh-card);
}

/* 18px Playfair - OFF the system's scale, and one instance. «Характеристики»
   inks 140 against 142.5 at 18/400; 20px inks 156 and 16px inks 125. The ink
   height agrees: 16 is 18 x Playfair's 0.908 cap-to-descender. Local to this
   bar on purpose, and not written into DESIGN.md on a single reading.

   The rule is the heading plus 14, which is .c-heading--title's own behaviour
   one size down: 142.5 + 14 = 156.5 against the frame's 157, and it sits on
   the box bottom with no gap, in Estate Green, 4px tall - all three measured
   here exactly as they were on the card titles. */
.p-prop__spec__head{
  display:inline-block;
  margin:0;
  font:400 18px/23px var(--c-serif);
  color:var(--c-ink);
}
.p-prop__spec__head::after{
  content:"";
  display:block;
  width:calc(100% + 14px);
  height:4px;
  background:var(--c-green);
}

/* A LABEL/VALUE LIST ON AN EVEN GRID (critique, 28 Sep 2026). It was up to
   six 12px captions beside 32px glyphs at the frame's uniform 63px gap,
   which ended at x866 of a 1278 bar and named nothing: «95 кв. м», «ново».
   Now every item is its label - Caption, Muted - over its value at Body 16,
   in auto-fit tracks with a 150 floor, so ten items fill the bar at 1920 in
   one row of seven and a second of three, and the columns line up between
   the rows. The glyphs went: four of the ten facts have none in the set, and
   the label is what names the fact. */
.p-prop__specs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px var(--c-inset);
  margin:16px 0 0;
  padding:0;
}

.p-prop__spec-item{ min-width:0; }
.p-prop__spec-item dt{
  font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-muted);
}
.p-prop__spec-item dd{
  margin:4px 0 0;
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
  color:var(--c-ink);
}

/* --- description + amenities ------------------------------------------- */
/* 644 and 506 with 38 between them across the 1188. Both are .c-card - Paper
   Cream, 20px radius, 40px sides - but the frame insets them 20 top and bottom
   rather than 40, and that is what makes the 287 close: 20 + 44 heading + 26 +
   141 copy + 11 + 25 link + 20. The 36 and 41 side insets are the two ends of
   a hand-placed 40. */

/* 644 and 506 with 38 between them. Written as fractions of what is left
   after that 38, so the pair resolves to exactly 644 / 506 at the frame's
   1188 (644 + 506 = 1150 = 1188 - 38) and stays in proportion below it -
   where `justify-content:space-between` used to hold both cards at their 1920
   size and simply widen the gap between them until the row left the page. */
.p-prop__cards{
  width:var(--p-prop-w);
  margin:30px auto 0;       /* cards y923, 30 under the spec bar's 893 */
  display:grid;
  grid-template-columns:minmax(0, 644fr) minmax(0, 506fr);
  column-gap:38px;
}

.p-prop__desc,
.p-prop__amen{
  min-height:287px;         /* the frame draws both at 287; real copy varies */
  display:flex;
  flex-direction:column;
  padding:20px var(--c-pad);
}

/* .c-heading--title's rule is the heading plus 14 and it needs the heading to
   shrink-wrap; a flex column would stretch it to the card and take the rule
   with it. The frame's own two rules here are 212 under a 111px heading and
   435 under a 208px one - they disagree with each other, so the twelve
   instances that agree on +14 across Services, Обучения, Contacts and Екип
   win, and these two are carried as hand-dragged boxes. */
.p-prop__desc > .c-heading,
.p-prop__amen > .c-heading{ align-self:flex-start; }

/* The rule's bottom is 990 and the copy opens at 1016. Seven lines - the
   frame's own block, on a 19px pitch then and the Prose role's 24 now. The
   live remarks run to 1292 characters, so the clamp is doing real work rather
   than reproducing a placeholder.

   THE MEASURE IS THE SYSTEM'S 521 (critique, 28 Sep 2026), not the card's
   614 inner column, which set about 80 characters a line. 521 is 68, and
   the card keeps its 644fr track - the two-column row is unchanged and the
   difference is card air to the right of the copy. */
.p-prop__desc__body{
  margin-top:26px;
  max-width:var(--c-measure);
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.p-prop__desc__body p{ margin:0; }
.p-prop__desc.is-open .p-prop__desc__body{
  display:block;
  overflow:visible;
}

/* Right-aligned and 16px rather than .c-more's 20: it inks 116 with its arrow,
   where the section links this design draws elsewhere are half again as wide.
   Pushed to the card's bottom rather than spaced under the copy - the frame
   puts it 20 above the card's edge, which is the same rule the team card's
   «Виж повече» follows whatever the text above it does. */
.p-prop__more-btn{
  align-self:flex-end;
  margin-top:auto;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  font:400 var(--c-fs-body)/19px var(--c-sans);
  color:var(--c-green);
}
.p-prop__more-btn:hover{ color:var(--c-ink); }

/* Two columns of 16/19. The frame draws a distinct 40x40 glyph beside each
   entry; `attributes.icon` (sql/2026-09-17-attributes-icon.sql) carries the
   file name for the rows that have one and the label sits alone for the rows
   that don't yet - docs/known-issues.md #43. */
.p-prop__amen__list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
  font:400 var(--c-fs-body)/19px var(--c-sans);
  color:var(--c-ink);
}
.p-prop__amen-item{ display:flex; align-items:center; gap:12px; }
.p-prop__amen__icon{ height:40px; width:auto; flex:0 0 auto; }

/* --- the broker strip --------------------------------------------------- */
/* 1920x248 of the warm wash. Like the Екип band it is a tint over a blurred
   photograph and there is no clean export for it, so it takes the flat
   --c-wash fallback the system states for exactly this case. The band's own
   samples, for whenever the layer lands: #deccbd at the left margin and
   #c2b2a5 at the centre and the right. */

.p-prop__broker{
  height:248px;
  margin-top:41px;          /* band y1251, 41 under the card row's 1210 */
  background:var(--c-wash);
}

/* 211 photo | 217 name | 290 contacts | the rest, at a 62px gap - which puts
   the four columns at 366/639/918/1270 against the frame's 370/641/920/1272.
   The two 2px Soft Ink dividers land at 856 and 1208 against 858 and 1210. */
.p-prop__broker__inner{
  width:var(--p-prop-w);
  height:100%;
  margin:0 auto;
  display:grid;
  /* Fractions of what the three 62px gaps leave: 211 + 217 + 290 + 284 is
     1002, and 1188 - 3 x 62 is 1002, so the row is the frame's own four
     columns at 1188 and stays in proportion under it. */
  grid-template-columns:minmax(0, 211fr) minmax(0, 217fr) minmax(0, 290fr) minmax(0, 284fr);
  column-gap:62px;
  align-items:center;
}

/* The agency variant: no portrait and no «Запознайте се с» column, so the two
   that remain are centred rather than left where the four-column grid put
   them. See property.tpl - 219 of the 489 live offers have no broker. */
.p-prop__broker--agency .p-prop__broker__inner{
  width:var(--p-prop-w);
  grid-template-columns:minmax(0, 290fr) minmax(0, 400fr);
  justify-content:center;
  max-width:752px;          /* 290 + 62 + 400, the pair at its designed size */
}

/* Square, and 211 is its cap rather than its width: the column it sits in is
   a fraction now, and a fixed 211 inside a 180px track is an overflow. */
.p-prop__broker__photo{
  width:100%; max-width:211px;
  aspect-ratio:1;
  height:auto;
  object-fit:cover;
  border-radius:var(--c-r-surface);
}

/* The frame tops all three text columns at a fixed inset rather than centring
   them - 1288, 1288 and 1292 against a band that opens at 1251 - and they are
   set that way here so a one-line name and a two-line one start in the same
   place. Only the photograph is centred, which is what the frame does with it
   (1269..1480 against a band centred on 1375). The columns still stretch to the
   full 248 so the dividers can measure against the band. */
.p-prop__broker__who,
.p-prop__broker__contacts,
.p-prop__broker__cta{
  align-self:stretch;
  padding-top:37px;
}
.p-prop__broker__cta{ padding-top:41px; }

.p-prop__broker__who,
.p-prop__broker__contacts{ position:relative; }

/* The divider is 164 of the band's 248 - vertically centred, 2px, Soft Ink
   sampled #222121. It hangs off the column's right edge rather than sitting in
   the middle of the gap, which is where the frame draws it. */
.p-prop__broker__who::after,
.p-prop__broker__contacts::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  width:2px; height:164px;
  background:var(--c-ink);
}

.p-prop__broker__lead{
  margin:0;
  font:400 var(--c-fs-nav)/23px var(--c-sans);
  color:var(--c-ink);
}

/* 24/700 on a 28px line - the two lines' ink measures 93 and 112 against 93.8
   and 112.9 at 24/700, and their pitch is 28. */
.p-prop__broker__name{
  margin:25px 0 0;
  font:700 var(--c-fs-title)/28px var(--c-sans);
  color:var(--c-ink);
}
.p-prop__broker__role{
  margin:23px 0 0;
  font:400 var(--c-fs-nav)/22px var(--c-sans);
  color:var(--c-ink);
}

/* The frame draws a handset and an envelope beside these two rows. Both are
   real exports now (siteassets/phone.svg, mail.svg, docs/known-issues.md
   #43) and replace the written label the row carried while neither had one -
   the label itself stays in the DOM as a .c-sr node, since the icon alone
   (alt="") gives the link no accessible name.

   29 under the «Контакти» line and 40 between the two, which puts the values'
   ink where the frame centres them against its glyphs: 1348 and 1412 on a
   64px pitch. */
.p-prop__broker__row{
  margin:40px 0 0;
  display:flex;
  align-items:center;
  gap:12px;
  font:400 var(--c-fs-nav)/24px var(--c-sans);
  color:var(--c-ink);
}
.p-prop__broker__lead + .p-prop__broker__row{ margin-top:29px; }
.p-prop__broker__row__icon{ height:22px; width:auto; flex:0 0 auto; }
.p-prop__broker__row a{ transition:color var(--c-ease); }
.p-prop__broker__row a:hover{ color:var(--c-green); }

/* The frame centres the button on the ask line - the text inks 1277..1595 and
   the button 1365..1508, both centred on 1436. */
.p-prop__broker__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.p-prop__broker__ask{
  margin:0;
  font:400 var(--c-fs-nav)/24px var(--c-sans);
  color:var(--c-ink);
}
/* The frame's own text box for this line is 329x43 - two lines of 21.5 - and
   the render shows one only because the box was dragged wider than the column
   it sits in. Two is what the box says. */
.p-prop__broker__cta .c-btn{ margin-top:19px; }

/* --- «Вижте подобни имоти» ------------------------------------------------- */
/* The section is full width and only the heading is contained, because the
   carousel bleeds. Its inset is computed off the container so the two cannot
   drift apart, and it is a percentage of the page rather than of the viewport:
   100vw counts the scrollbar and this page is always taller than one screen. */

.p-prop__similar{
  margin-top:40px;          /* heading box y1539, 40 under the band's 1499 */
}

.p-prop__similar > .c-heading{
  margin-left:var(--p-prop-inset);
}

/* The frame draws the row mid-scroll: cards at -81, 356, 793, 1230 and 1667,
   a 437 pitch that is the property card's 420 plus the system's 17px gutter,
   with one card off the left edge and two off the right. It rests here with
   its first card on the container's own left edge and bleeds to the right, and
   the 321 inset is computed from the container rather than written twice. */
/* A slider above 640 (js1/page-property.js, slider.css); the scroll rules
   are the row without the script. */
.p-prop__track{
  margin-top:33px;          /* cards y1651, 37 under the rule's 1614 */
  padding:6px var(--p-prop-inset);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--p-prop-inset);
  scrollbar-width:none;
}
.p-prop__track::-webkit-scrollbar{ display:none; }
.p-prop__track > .c-slider__track{ --c-slider-gap:var(--c-gutter); }
.p-prop__slide{ width:420px; }

/* ==========================================================================
   Below 1120 - the broker strip stops being a four-column band.

   It is the one object on this page that needs a composition rather than a
   ratio: four columns of 211 / 217 / 290 / 284 hold their proportions all the
   way down and are still unreadable long before 640 - at a 592px page they
   are 85 / 88 / 117 / 115, and the ask line ran off the right edge. So it
   takes the shape the mobile frame draws it in, two breakpoints early: the
   portrait beside the name, the contacts under both, and the ask beside its
   button. The frame's band is 395 tall against the desktop's 248 and draws
   neither of the two 2px dividers.
   ========================================================================== */

@media (max-width: 1119px){
  /* THE BUTTON PAIR LEAVES THE TITLE'S ROW HERE, not at 640. Out of flow it
     reserves 516 of the head's width, and at a 640 page that left the <h1> 76px
     to set itself in; at 1120 the title still has 504, which holds every live
     name on two lines at most. So the head takes the column the 393 frame
     draws - title, deal line, then the buttons - and the buttons keep their
     own 242 each until the phone rule below splits the width between them. */
  .p-prop__head{ display:flex; flex-direction:column; }
  .p-prop__titlerow{ display:contents; }
  /* the mobile Display, the same step every inner page's h1 takes here */
  .p-prop__title{ order:1; margin-top:15px; font-size:var(--c-fs-display-sm); }
  .p-prop__deal{ order:2; margin-bottom:0; }
  .p-prop__actions{
    order:3;
    position:static;
    margin:16px 0;
  }

  .p-prop__broker{
    height:auto;
    margin-top:24px;
    padding:32px 0;
  }
  .p-prop__broker__inner{
    width:auto;
    padding-inline:var(--c-page-gutter);
    /* The portrait's column is the portrait, not a fraction - a 193fr track
       at a 852px band left 283px of nothing between the photograph and the
       name it introduces. 37 is the frame's own gap at 393, where it leaves
       the second column the 131 it draws. */
    grid-template-columns:max-content minmax(0, 1fr);
    column-gap:37px;
    row-gap:24px;
    align-items:start;
  }
  .p-prop__broker--agency .p-prop__broker__inner{
    max-width:none;
    grid-template-columns:minmax(0, 1fr);
  }
  .p-prop__broker__who,
  .p-prop__broker__contacts,
  .p-prop__broker__cta{
    align-self:start;
    padding-top:0;
  }
  .p-prop__broker__contacts,
  .p-prop__broker__cta{ grid-column:1 / -1; }
  /* Nothing to divide once the columns are rows. */
  .p-prop__broker__who::after,
  .p-prop__broker__contacts::after{ content:none; }
  /* «Готови ли сте да работим заедно?» at x14 with «Обадете се» at x228 on
     the same row, rather than the 1920 band's centred stack. */
  .p-prop__broker__cta{
    flex-direction:row;
    align-items:center;
    /* Together, not at the two ends of the band: the frame's 14-and-228 pair
       is 200 apart on a 393 screen and would be 800 apart on a 900 one. The
       393 overlay puts them back at the frame's own distance. */
    justify-content:flex-start;
    gap:var(--c-pad);
    text-align:left;
  }
  .p-prop__broker__cta .c-btn{ margin-top:0; flex:0 0 auto; }
  .p-prop__broker__name{ margin-top:16px; }
  .p-prop__broker__role{ margin-top:14px; }

  /* THE COLUMN GOES ONE STEP DOWN. At the band's 1920 sizes «Запознайте се с»
     advances 150.7 into a column the frame draws 131 wide and broke onto a
     second line under its own last word.

     The NAME is solved and unambiguous: its widest mobile line inks 93 where
     «Драгомир» advances 94.1 at 20/700, against 112.9 at the desktop's 24,
     and its two lines sit on a 23px pitch, which is 20 x the system's own
     1.172. So 24 -> 20.

     The three smaller strings are NOT unanimous and are taken at one step
     rather than at their own numbers: «Запознайте се с» inks 107 (14px
     advances 105.5, 16 advances 120.6), the role's two lines sit on an 18px
     pitch, which is 16 x 1.172 exactly, and «Контакти» - the OTHER instance
     of the same lead class - inks 51, which is smaller than either. Three
     readings across 13, 14 and 16 for what is one style at 1920 is hand
     drawing, so they take the system's step below 20 and the spread is
     recorded rather than averaged. */
  /* «Готови ли сте да работим заедно?» at x14 and «Обадете се» at x228 -
     the frame's own row, which only makes sense at the frame's own width. */
  .p-prop__broker__cta{ justify-content:space-between; gap:var(--c-gutter); }

  .p-prop__broker__lead,
  .p-prop__broker__role,
  .p-prop__broker__row,
  .p-prop__broker__ask{
    font-size:var(--c-fs-body);
    line-height:var(--c-lh-sans);
  }
  .p-prop__broker__name{
    font-size:var(--c-fs-nav);
    line-height:23px;
  }
}

/* The mobile frame closes the page with the landing page's own section link
   and the 1920 Listing frame closes it with nothing, so it is declared off
   here and turned on in the 393 overlay below. */
.p-prop__all{ display:none; }

/* ==========================================================================
   393 - the mobile Listing frame, siteassets/frames-mobile/Listing.png.

   The frame recomposes three of this page's objects rather than shrinking
   them: the gallery turns through ninety degrees, the spec bar's six items
   become a two-column grid, and the broker strip stops being a four-column
   band. Everything else is the same object at the page gutter.

   ONE MEASURED DEVIATION, taken deliberately. The frame draws its three
   panels - the spec bar, Описание and Удобства - 377 wide at x5, where its
   own property cards are 361 at x16 and x18. That is two gutters on one
   frame, 8 and 16, and the 16 is the one all four mobile frames agree on for
   the header logo, the footer column and the breadcrumb. So the panels take
   the page gutter with everything else and the frame's 5 is read as hand
   placement. `cards.css`'s 24px card padding already comes from the same
   reading (x5 -> x29).
   ========================================================================== */

@media (max-width: 639px){

  /* «Виж всички имоти» ends 2423 and the footer band opens 2439. */
  .p-prop{ padding-bottom:16px; }

  /* --- head ------------------------------------------------------------ */

  /* The button row sits under the title and the deal line: the frame draws
     the title across the full 350 of the column and puts its one button
     («Свържете се» then, «Обадете се» and «Пишете ни» now) on a row of its
     own, 345 wide. `display:contents` on the title row is what lets the
     head order the two around the deal line without moving either in the
     markup - the button is inside the row and the deal line is not.

     THE FRAME PUTS IT AFTER THE THUMBNAILS and this puts it before them, and
     that is the one place the mobile composition does not follow the render:
     the gallery is a sibling of the head, so the button cannot cross it
     without moving in the DOM, and a call-to-action above the fold is the
     better of the two ways to be wrong about it. */
  /* The head is already a column from 1119 down (the button pair, above);
     what changes at 393 is the measured rhythm the mobile frame draws.
     AND THE ROW'S OWN 15px TOP MOVES HERE WITH IT. `display:contents` stops
     `.p-prop__titlerow` generating a box, and that box was carrying
     `margin-top:15px` - so the `<h1>` sat hard against its breadcrumb, 0px
     where the frame draws 20. docs/known-issues.md #67. */
  .p-prop__title{ order:1; margin-top:20px; }
  .p-prop__deal{ order:2; margin-top:7px; }   /* pin y235, 7 under the title box's 224 */
  .p-prop__actions{
    margin-top:23px;        /* button y669; on this page it lands above the gallery */
    /* AND A BOTTOM, which it shipped without: it is the last thing in the head
       and `.p-prop__gallery` has only `margin:0 auto`, so the button ended
       exactly where the gallery began. The frame's comparable gap is 16.
       docs/known-issues.md #68. */
    margin-bottom:16px;
  }
  /* The mobile frame draws ONE full-width button; the pair splits that width
     between them rather than stacking two 345-wide bars above the gallery. */
  .p-prop__titlerow .c-btn{
    flex:1 1 0;
    min-width:0;
  }

  /* The district's ink ends 212 and the price opens 222, against the 1920
     frame's 30. */
  .p-prop__deal{ gap:10px; flex-wrap:wrap; }

  /* --- gallery: the stage and the rail change axis --------------------- */
  /* Full bleed, both of them: the frame draws the photograph 393x262 at x0
     and the rail's own dark band 393x112 under it, edge to edge, which is the
     only place on this page where anything reaches the screen edge. 393x262
     is 1.500 - the same 3:2 the property card's photograph holds at every
     width, and the aspect is what is kept rather than the height. */
  .p-prop__gallery{
    width:100%;
    height:auto;
    flex-direction:column;
  }
  .p-prop__stage{
    flex:0 0 auto;
    aspect-ratio:3 / 2;
    border-radius:0;
  }
  .p-prop__stage--full{ border-radius:0; }

  /* 112 of Soft Ink holding 153x102 tiles at a 158 pitch - 5 of padding on
     every side and 5 between, which is what 3 x 153 + 2 x 5 + 2 x 5 = 479
     against a 393 band means: the third tile is drawn half off the edge, so
     the rail scrolls sideways here exactly as it scrolls down at 1920. */
  .p-prop__rail{
    flex:0 0 auto;
    flex-direction:row;
    gap:5px;
    padding:5px;
    /* the snap area is inset by THIS and not by the padding above - see
       .c-rail in slider.css, docs/known-issues.md #66 */
    scroll-padding-inline:5px;
    border-radius:0;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .p-prop__rail::-webkit-scrollbar{ display:none; }
  .p-prop__thumb{
    flex:0 0 153px;
    height:102px;
    scroll-snap-align:start;
  }
  /* The expanded rail is the same row, longer. */
  .p-prop__rail.is-expanded{ overflow-y:hidden; }
  .p-prop__rail.is-expanded .p-prop__thumb{ flex:0 0 153px; }
  .p-prop__more{ font-size:var(--c-fs-label); }

  /* --- the spec bar ---------------------------------------------------- */
  /* Two columns, as the frame drew its six - stated rather than left to the
     150 floor, which gives two at 393 and one at 320. A value longer than
     its column wraps under its own label. The padding is the phone's card
     inset. */
  .p-prop__spec{ padding:12px 24px 18px; }
  .p-prop__specs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px 12px;
    margin-top:12px;
  }

  /* --- description + amenities ----------------------------------------- */
  /* 20 between the stacked cards, which is `cards.css`'s own mobile figure
     and is measured on this very frame: Характеристики ends 909 and Описание
     opens 929. The 287 floor is the 1920 card's. */
  .p-prop__cards{
    grid-template-columns:minmax(0, 1fr);
    row-gap:20px;
    margin-top:20px;
  }
  .p-prop__desc,
  .p-prop__amen{
    min-height:0;
    padding:20px 24px;
  }

  /* The frame's own portrait, 193 square against the desktop's 211. */
  .p-prop__broker__photo{ max-width:193px; }
  .p-prop__broker{ padding:25px 0 30px; }
  .p-prop__broker__inner{ column-gap:37px; }

  /* --- «Вижте подобни имоти» --------------------------------------------- */
  /* THE CAROUSEL STACKS. The frame draws its two similar offers one above the
     other at x18, 23 apart, and not as a rail - which is why this object is
     not in DESIGN.md's list of the five that do become one. */
  .p-prop__track{
    margin-top:21px;        /* cards y1864, 21 under the rule's 1843 */
    padding:0 var(--c-page-gutter);
    overflow-x:visible;
  }
  .p-prop__track > .c-slider__track{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:23px;
    width:auto;
  }
  .p-prop__slide{ width:auto; }

  /* The frame closes the page with the landing page's own section link,
     centred, where the 1920 Listing frame closes it with nothing. It is drawn
     only here for that reason. */
  .p-prop__all{
    display:flex;
    justify-content:center;
    margin-top:31px;        /* link box y2400, 31 under the last card's 2369 */
  }
}