/* ==========================================================================
   Page layout - Наеми / Продажби, rendered by search-properties.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.

   Every value is from the Search frame (1006:1231), which is one of the five
   frames that do NOT carry the whole-frame 5px shift: its footer sits at
   163/1057 and its divider at 954, like the Landing, Listing, Academy and
   Careers frames.

   The page is three bands:

     header      0..101
     map + panel map painted 337..1093 x 133..796; the panel's labels open at
                 x1108 y153 and its last row ends at 780
     results     heading box at y827, its rule at y899, cards at y939..1219
     footer      from y1319

   The container is the system's 1278 centred (321..1599). The panel's right
   edge is the frame's one real ambiguity: three field rows stop at 1545 and
   two checkbox rows run to 1600, so the frame disagrees with itself by 55px.
   Resolved in favour of 1599 - the container - because that is the only
   reading that makes the panel a panel, and because the real option text needs
   the width the Latin placeholder did not.
   ========================================================================== */

.p-search{
  background:var(--c-field);
  /* the card row's bottom is 1219 and the footer band opens at 1319 */
  padding-bottom:100px;
}

/* --- the map / filter band ---------------------------------------------- */
/* Two columns inside the container: 321..1108 for the map, 1108..1599 for the
   panel - 787 and 491. */

/* The 787/491 pair was a page coordinate and is now the relationship it
   always was: the two tracks are fractions of the container, so they resolve
   to exactly 787 and 491 at the designed 1278 and shrink together below it.
   minmax(0, Nfr) rather than a bare Nfr because both tracks hold something
   with a min-content width - 167 map paths on one side and a field row on the
   other - and a bare fr floors at min-content and pushes the page sideways.
   The width itself comes from .c-container in base.css. */
.p-search__band{
  padding-top:32px;          /* map top y133, 32 under the 101px header band */
  display:grid;
  grid-template-columns:minmax(0, 787fr) minmax(0, 491fr);
  align-items:start;
}

/* The map's painted ink opens at x337, 16 inside the container. */
.p-search__map{ margin-left:16px; }

/* THE MAP'S SHADOW. The landing page casts one off the frosted base under its
   map (`.p-home__map-shadow`, a clipped silhouette carrying a 15px shadow);
   this page draws the map on flat Field Grey with no base, so the shadow is
   cast off the artwork itself. `drop-shadow` takes the union of the 167 paths
   - their alpha, not their box - which is why it is this and not `box-shadow`:
   the map is a city outline, not a rectangle.

   It is the photograph shadow's own geometry (--c-sh-photo, 0 4px 10px at 25%)
   restated as a filter, because a filter cannot take a box-shadow token.

   It depends on the artwork staying opaque: an unmapped district is filled
   with the page ground rather than left transparent for exactly this reason -
   see the note in css/system/map.css. */
.p-search__map .c-map__svg{
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* The panel's first label opens at y153, 20 below the map's own top. */
.p-search__filters{
  margin-top:20px;
  display:grid;
  /* The panel's whole vertical rhythm is one number. A label's box bottom sits
     12 above its control and a control's bottom sits 12 above the next label,
     on all six of the frame's rows - 153/183, 245/276, 338/369, 431/463,
     497/528, 590/622 - with the 19px line box of 16px type in between. The 12
     above is `.c-field__label`'s own margin; this is the 12 below. */
  row-gap:12px;
}
/* The phone's «Филтри» closes the panel with `hidden`, which the grid above
   would otherwise outrank. */
.p-search__filters[hidden]{ display:none; }

/* Row 1 is 118 + 120 + 159 at a 20px gap on the frame, row 2 is 221 + 202 at
   14. The first widths of each row are kept and the last grows to the panel's
   right edge - which is also what puts row 3's checkbox at x1343, exactly
   where the frame draws it (1108 + 221 + 14). */
/* Ratios, not widths. `118px 120px 1fr` and `221px 1fr` resolved to the
   frame's own 118 / 120 / 213 and 221 / 256 only while the panel was exactly
   491 wide; the moment it was not, every one of the fixed columns held its
   1920 size and the single `1fr` absorbed the whole difference - at a 920px
   panel «Тип имот» came out 662 beside a 118px «Реф. номер». Written as
   fractions they still resolve to the frame's numbers at 491 (118 + 120 + 213
   + two 20px gaps, and 221 + 256 + one 14px gap) and stay in proportion at
   every other width. */
.p-search__row{ display:grid; align-items:end; }
.p-search__row--three{ grid-template-columns:118fr 120fr 213fr; column-gap:20px; }
.p-search__row--two  { grid-template-columns:221fr 256fr;       column-gap:14px; }

/* The promoted checkbox sits on the field's own centre line, not the label's. */
.p-search__inline{
  display:flex;
  align-items:center;
  height:var(--c-field-h-tall);
}

.p-search__group{
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.p-search__group > .c-field__label{ padding:0; }

/* «Вид строителство»: five boxes on one row, 16px apart, each label 6px clear
   of its box. Drawn only when a controller can filter on it. */
.p-search__checkrow{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
}

/* «Година на строителство»: the range box beside its Завършен/В строеж pair,
   one row - not the panel's generic two-column grid, whose 221fr/256fr
   proportions assume two field-shaped children rather than a range and a
   checkbox pair. The range keeps the panel's own measured 221px (Цена,
   Квадратура); the pair takes what is left and wraps under it below that. */
.p-search__yearrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
}
.p-search__yearrow > .c-range{
  flex:1 1 221px;
  max-width:221px;
}
.p-search__yearrow > .p-search__checkrow{
  flex:1 1 auto;
}

/* «Допълнителни филтри»: the frame is four 136px columns holding an
   11-character Latin placeholder; the real names run to «Интернет/Окабеляване»
   at 188px, so this is the same grid two-up at the panel's width. The 12px row
   gap is the frame's own 34px pitch less the 22px box. */
.p-search__checkgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:12px;
}

/* --- results ------------------------------------------------------------- */

/* .c-container carries the width; this file only says what is inside it. */

/* The heading's box opens at y827, 30 under the map's 796 bottom. */
/* HEADING LEFT, CONTROL RIGHT - the row's own relationship, not a coordinate.

   The frame hand-places the sort control at x790, and the 97px gap that used
   to put it there was measured from the section rule's fixed 372 out of x321.
   The rule tracks its heading now (typography.css), so 97 from the heading's
   own edge moves the control every time the result count changes width -
   «Резултати - 3» and «Резултати - 326» are 40px apart. A control that walks
   with the number of results is worse than one that is not where the frame
   drew it, and there are three supports for the right edge: this page's OWN
   mobile frame draws it there (the block below already did it that way), and
   the landing page's four section heads are `space-between` around exactly
   this pair. `layout`, 27 Aug 2026.

   The wrap still matters and is why this is flex rather than a grid: below
   about 640 the heading, its rule and the control do not fit on one row. */
.p-search__results-head{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  column-gap:var(--c-pad);
  row-gap:12px;
  margin-top:30px;
}

/* THE HEAD IS THE PAGE'S H1 (critique, 28 Sep 2026): «324 имота под наем в
   Лозенец», not «Резултати - 324». So it takes the Headline role every visible
   h1 does - 40 on the serif's 1.333 - rather than the section heading's 48,
   and below 1120 the mobile Display, 30, as the offer page's h1 steps
   (page-property.css). A long district name wraps between words, and the
   rule tracks whatever width the heading ends up. */
.p-search__results-head .c-heading{
  font-size:var(--c-fs-headline);
  line-height:var(--c-lh-serif);
}
@media (max-width: 1119px){
  .p-search__results-head .c-heading{ font-size:var(--c-fs-display-sm); }
}

/* The icon's box opens at y848, 21 under the heading's own box top.
   `margin-left:auto` and not `justify-content` on the row: the pair wraps
   below about 640, and on a line of its own a justified row puts its single
   item back on the left where the auto margin still holds it right. */
.p-search__sort{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:21px;
  margin-left:auto;
  color:var(--c-green);
}

.p-search__sort-icon{
  width:45px; height:45px;
  flex:0 0 auto;
}

/* The frame draws no field box around the label - it is the word and the glyph
   in Estate Green, nothing else. The control underneath is a real <select> so
   the keyboard and the screen reader still get the choice; only its chrome
   goes. */
.p-search__sort-select{
  appearance:none;
  padding:0;
  background:none;
  border:0;
  color:var(--c-green);
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
  cursor:pointer;
}

/* --- the card grid: 3 x 420x280 ----------------------------------------- */
/* The frame's own row is 318..1602 - 3x420 with a 17px gutter and then a 7px
   one, the identical asymmetry the landing frame's property row carries 20px
   further right. Two gutters disagreeing inside one row is hand placement, not
   a rule, so the row is normalised onto the Blog grid: three 420s centred in
   the 1278 container, which puts the painted edges (2px of shadow bleed each
   side) on 321 and 1599.

   The 14px row gap is the Blog grid's, measured on six identical gaps between
   rows of the same 420x280 card. The only property-card row gap in the file is
   the landing frame's 18, and that one sits between rows of different heights.

   The rule's bottom is 902 and the cards' top is 939. */
.p-search__grid{
  /* already inside .p-search__results, which IS the container */
  margin:37px 0 0;
  display:grid;
  grid-template-columns:repeat(3, 420px);
  justify-content:center;
  gap:14px 7px;
}

/* --- empty state (invented - no frame draws one) ------------------------ */

.p-search__empty{
  margin:37px 0 0;
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
  color:var(--c-ink);
}
.p-search__empty a{
  color:var(--c-green);
  text-decoration:underline;
}

/* --- pagination --------------------------------------------------------- */
/* Not in the frame - the frame draws three results and one row. 489 live rows
   at 15 a page need one. The 40 is the Blog page's own pager rhythm. */

.p-search__pager{ margin-top:40px; }

/* ==========================================================================
   The mobile-only objects, declared here in their OFF state.

   Two things the mobile Search frame draws that the desktop one does not: a
   panel title and the «Карта» / «Разширено търсене» disclosure row. Both are
   hidden above 640 rather than absent from the markup, so nothing has to be
   built twice.

   There used to be a third. The «Търси» / «Изчисти търсене» commit pair was
   mobile-only while the desktop panel committed on change; it is drawn at
   every width since 23 Sep 2026 and is declared below, in its ON state.
   ========================================================================== */

.p-search__title,
.p-search__filterbar,
.p-search__disclose{ display:none; }

/* «Разширено търсене» is the PHONE'S (below). Above 640 every filter is open:
   it was folded there too for a day (critique, 28 Sep 2026) and put back at
   the client's call - the map, not the panel, is what stands between the
   title and the results on a desktop, so the fold hid filters and moved the
   results by nothing. The toggle sets at the panel's 16 rather than the
   section link's 20 - it is a control inside a form, the same call
   page-property.css and page-videos.css make for .c-more inside a block. */
.p-search__more-toggle{ font-size:var(--c-fs-body); }
.p-search__more-toggle > span{ transition:transform var(--c-ease); }
.p-search__more-toggle[aria-expanded="true"] > span{ transform:rotate(90deg); }

/* The «Карта» and «Изчисти търсене» controls are a 1px Estate Green stroke
   over the page ground: sampled #1e5d43 on the top edge of both and #f7f7f7
   inside both, on the mobile Search frame. That is not one of the system's
   four fills, and two instances on one frame is a local measurement rather
   than a system rule (DESIGN.md's own test), so it lives here as a page
   object built on .c-btn's geometry instead of becoming a fifth variant.

   The frame draws them 44 tall; the component's 50 wins, which is the call
   buttons.css already recorded for the eleven mobile buttons that measure
   41 / 42 / 44 / 50 with no majority. */
.p-search__ghost{
  background:none;
  border:1px solid var(--c-green);
  color:var(--c-green);
  border-radius:var(--c-r-control);
  font-weight:400;
  transition:background var(--c-ease), color var(--c-ease);
}
.p-search__ghost:hover{
  background:var(--c-green);
  color:var(--c-white);
}

/* THE COMMIT PAIR, at every width. The mobile frame's own row is 217 + 13 +
   129 = 359: «Търси» carries .c-btn--block and fills its track, and the clear
   control takes its content. `auto` rather than the frame's 129fr, because at
   the component's 16px «Изчисти търсене» needs 128 of ink and its own sides -
   more than a 129fr track of a 361 column gives it, and the label broke onto
   two lines. The same relationship holds in the 491 desktop panel and in the
   full-width one between 640 and 1119, so nothing here is width-specific. The
   12 on top of the form's own 12px row gap sets the pair apart from the last
   filter row as the one thing on the panel that acts. */
.p-search__commit{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:13px;
  margin-top:12px;
}

/* The two fieldsets are one grid item now that they share a disclosure
   wrapper, so the form's own 12px row rhythm is restated inside it. */
.p-search__more:not([hidden]){
  display:grid;
  row-gap:12px;
}

/* ==========================================================================
   Below 1360 - the card row's three 420s do not fit a shrinking container.
   ========================================================================== */

@media (max-width: 1359px){
  /* The floor is 420, the card's own designed width, not .c-grid--3's 260:
     a 260 floor packs FOUR tracks into the 1278 container and the row would
     go from three-up to four-up as the page gets NARROWER. With 420 it goes
     3 -> 2 -> 1, which is the only monotonic reading. The gaps are the
     frame's own and do not change. */
  .p-search__grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    justify-content:stretch;
  }
}

/* ==========================================================================
   Below 1120 - the map and the panel stop being side by side.

   The panel goes first. That is the mobile frame's own order (it draws the
   panel and puts the map behind a control below it) and it is the right order
   above 640 too: the filters are what the page is for, and a map the width of
   the screen is a second way in rather than the first.
   ========================================================================== */

@media (max-width: 1119px){
  .p-search__band{
    grid-template-columns:minmax(0, 1fr);
    row-gap:32px;
  }
  .p-search__filters{ order:1; margin-top:0; }
  .p-search__map{ order:2; margin-left:0; }
}

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

@media (max-width: 639px){

  /* The frame's own bottom margin: the last card's photograph ends at 1230
     and the footer band opens at 1257. The desktop 100 is a 1920 number. */
  .p-search{ padding-bottom:27px; }

  /* The title the frame draws and the desktop frame does not. It sits under
     the header band with no gap of its own - the frame's box opens at y126,
     six under the logo's 120, and the header's own 20px of padding-bottom is
     already that space. */
  /* AND A BOTTOM OF 21, which it shipped without: `.p-search__band` opens with
     `padding-top:0`, so the heading's rule ended exactly where the first field
     label began. The frame puts that label 21 under the rule.
     docs/known-issues.md #68. */
  .p-search__title{ display:block; margin-bottom:21px; }
  .p-search__band{ padding-top:0; row-gap:20px; }

  /* Row 1 stays THREE-UP at 393, which is the one row of the panel the frame
     does not stack: 96 / 98 / 129 at x14 / x126 / x240, two 16px gaps, 355 of
     a 361 column. Kept as the ratio rather than as three widths so it fills
     the column exactly. */
  .p-search__row--three{
    grid-template-columns:96fr 98fr 129fr;
    column-gap:16px;
  }

  /* Everything else stacks - Цена at y296, Квадратура at y385 and Локация at
     y470 are each the full 360 of the frame's column. */
  .p-search__row--two{
    grid-template-columns:minmax(0, 1fr);
    row-gap:12px;
  }

  /* «Карта» left, «Разширено търсене →» right, on one row at y540. The row is
     drawn only when the script is there to make the two controls mean
     something; `hidden` comes off in js1/page-search.js. */
  .p-search__disclose:not([hidden]){
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--c-gutter);
    margin-top:8px;
  }

  /* THE FILTER BAR - the panel behind one control, results first (critique,
     28 Sep 2026). The panel alone stood ~800px tall on a phone and the first
     card came under it. «Филтри» is the page's own ghost control (the
     «Карта» / «Изчисти търсене» object above), carrying the count of filters
     set; under it, one caption line names them, so a filtered page never
     looks like the unfiltered one. The caption is --c-fs-caption in Soft Ink:
     metadata about the list, which is that size's role in this system. */
  .p-search__filterbar:not([hidden]){
    display:grid;
    justify-items:start;
    row-gap:8px;
  }
  .p-search__filterbar .p-search__ghost{ padding-inline:30px; }
  .p-search__summary{
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:4px 12px;
    font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
    color:var(--c-ink);
  }
  /* «Лозенец, Бояна» is one item with a comma in it, so the items part on a
     middle dot, not on the gap alone */
  .p-search__summary > span:not(:last-child)::after{ content:" \00B7"; }
  /* THE PANEL'S THREE CONTROLS TAKE THE COMPONENT'S OWN 16px, and this block
     is what is left of the 12 they used to carry. Settled by the `typeset`
     pass, 27 Aug 2026; it was open question 19's second half.

     The 12 was measured and it was exact - «Изчисти търсене» inks 96 where
     12px advances 95.95, «Търси» 35 against 35.14 at 12/700, «Карта» 31
     against 32.72, and «Разширено търсене» 133 against 132.2 at 14/600. What
     it was NOT is a system value. 12 is --c-fs-caption, whose role in this
     system is a price badge, a consent line, a file name and a placeholder:
     metadata, never an action. These four are the panel's only commit and its
     two disclosures, i.e. the most important controls on the mobile Search
     page, and every other button in the system - at both widths - is the
     component's 16.

     And the other frame that draws a search panel disagrees with this one:
     the mobile LANDING frame boxes «Търси» at 48, which is 16 to the pixel.
     The same word, one step apart, on two frames of the same file - which is
     what made it a tie rather than a measurement.

     The 12 was load-bearing only because the frame's three pills are fixed
     widths: at 16 «Изчисти търсене» needs 128 of ink plus its 30 of padding
     against a 129 pill. They are not fixed widths here - the commit row is a
     ratio of the column - so the row is what gives way, below. */
  /* 95 wide around 33 of advance - 30 a side, not the base's 32. */
  .p-search__disclose .p-search__ghost{ padding-inline:30px; }

  /* The commit row itself is declared above, for every width. At 361 the
     clear control's sides come in to 15 so «Търси» keeps a usable track. */
  .p-search__commit .p-search__ghost{ width:100%; padding-inline:15px; }

  /* The heading and the sort control share the frame's y679: both boxes open
     on it, so the desktop's 21px nudge goes. The right edge is the desktop's
     behaviour too now, so only the gap and the nudge are said here (icon at
     x231 of 393). */
  .p-search__results-head{ column-gap:12px; }
  .p-search__sort{ margin-top:0; }

  /* 10 between cards, and it is the photograph's own pitch: 738 -> 989 at a
     241px card. The desktop 14 is the Blog grid's. */
  .p-search__grid{ gap:10px; margin-top:24px; }
}