/* ==========================================================================
   Page layout - Контакти, rendered by contacts.tpl.

   Composition only. Every value is from the Contacts frame (1006:2551).

   That frame carries the +5 whole-frame shift in its FOOTER - 168/1062/959
   where five of the eight sit at 163/1057/954 - but its content is not
   shifted: the breadcrumb, the map block and the panel's column all sit at the
   same 366/406 as every other frame. Checked before using any of these.

   Its content block is the one thing that does disagree: the map image is
   1184 wide and the form card's right edge lands on 1550, both saying 1184
   where the other frames' hero blocks say 1188. 1188 at x366 is centred on the
   1920 canvas (366 gutters both sides) and 1184 is not, so 1188 wins and the
   form card moves 1088 -> 1092. Recorded per the Container Debt Rule.
   ========================================================================== */

.p-contacts{ background:var(--c-field); }

.p-contacts__crumbs{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:20px auto 0;   /* y121, 20px under the 101px header band */
}

/* --- the page's h1 ------------------------------------------------------ */
/* Not in the frame, which draws no title: a hidden line until the critique
   (28 Sep 2026). The Blog's head and the article page's - 40 under the
   crumbs, 40 over the block - at the Headline role, 30 below 1120. */

.p-contacts__head{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:40px auto 0;
}
.p-contacts__head .c-heading{
  font-size:var(--c-fs-headline);
  line-height:var(--c-lh-serif);
}
@media (max-width: 1119px){
  .p-contacts__head .c-heading{ font-size:var(--c-fs-display-sm); }
}

/* --- the office panel over the map -------------------------------------- */
/* Block 1188x548 at y159, same slot the other inner pages give their hero.
   The panel is 299 wide over the left - Rectangle 162 reports x665 w299 and
   occupies 366..665, the same far-edge reporting the Services hero's panel
   does. */

.p-contacts__map{
  position:relative;
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  /* 1188x548 is 2.168; the aspect is what survives a narrower page. */
  aspect-ratio:1188 / 548;
  /* But the panel over it is NOT fluid: its stack closes on the 548 exactly -
     30 + 220 + 42 + 220 + 36 - and none of those five numbers is a fraction
     of anything. So the aspect ratio alone let the block get shorter than its
     own content between 1120 and 1359, where the container is no longer 1188:
     at 1120 the block came out 494 and `overflow:hidden` cut 35px off the
     second office - its «Виж на картата» button, i.e. the one control in
     the panel. The floor is the panel's own closing height and it is inert at
     1360 and above, where the aspect already gives 548. Below 1120 the panel
     stops being an overlay (the block below) and the floor lifts with it. */
  min-height:548px;
  margin:40px auto 0;   /* 40 under the h1 */
  border-radius:var(--c-r-surface);
  overflow:hidden;
  box-shadow:var(--c-sh-photo);
}

/* The map is the page's uploaded picture, cover-cropped into the block. */
.p-contacts__map__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.p-contacts__panel{
  position:absolute;
  left:0; top:0;
  width:299px;
  height:100%;
  display:flex;
  flex-direction:column;
  /* 30 above the first pill, 36 below the last button, 42 between the two
     office blocks: 30 + 220 + 42 + 220 + 36 = 548.

     The right inset is 24, not 40. The pill is 235 wide (406..641) inside a
     panel that ends at 665, so at 40 it does not fit - the same overflow into
     the padding the hero title makes. 40 left / 24 right is what the frame
     draws. */
  padding:30px 24px 36px 40px;
  gap:42px;
  /* the page hero's solved tint - the same dark wash over an image, and the
     map has no clean layer of its own to regress against */
  background:rgba(28,28,28,.85);
  color:var(--c-white);
}

/* An office block: pill, address, phone, button - 220 tall from the pill's top
   to the button's bottom, measured identically on both. */

.p-contacts__office{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* a flex child would otherwise stretch */
}

/* Both rows are the 14px label size on a 16px line, not the 16px body - solved
   by advance width, not by their boxes: the address wraps to three lines of
   162 / 182 / 91 in a 195px column, which 14px reproduces to a pixel and no
   other size comes near, and "+359 894 703 287" measures 112 against 14px's
   112.8. The 195 is kept even though the column is wider, because it is what
   gives the address the three lines the frame breaks it into.

   The frame indents both rows to x446, leaving 40px for an icon. Neither icon
   has an export - there is no clean layer export for any unbuilt frame - so
   they sit flush at 406 rather than leaving a visible hole where an asset
   should be. Move them to a 40px icon column when the icons land. */

.p-contacts__office__address{
  /* pill bottom 224 -> address box 238 */
  margin:14px 0 0;
  width:195px;
  font:400 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-white);
}

.p-contacts__office__phone{
  /* address box bottom 286 -> phone box 310 */
  margin:24px 0 0;
  font:400 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-white);
}
.p-contacts__office__phone a{ transition:color var(--c-ease); }
.p-contacts__office__phone a:hover{ color:var(--c-gold); }

.p-contacts__office__cta{
  /* phone box bottom 326 -> button 360 */
  margin-top:34px;
}
/* 143x49 with the light button's usual 29px of padding each side. */
.p-contacts__office__cta .c-btn{ height:49px; min-width:143px; padding:0 29px; }

/* --- text cards beside the form ----------------------------------------- */
/* The form card is 462 at the container's right edge and the text column is
   600 at its left. The frame centres the text column against the form: the
   cards run 770..1310 inside the card's 747..1333, 23px clear at each end. */

/* 600 + 126 + 462 is the 1188, so the pair is the frame's own row written as
   fractions of what that gutter leaves - and it shrinks the two columns
   rather than the space between them. */
.p-contacts__body{
  width:min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  margin:40px auto;     /* y747, 40 under the map block's 707 bottom, and 40
                           above the footer's 1373 top */
  display:grid;
  grid-template-columns:minmax(0, 600fr) minmax(0, 462fr);
  column-gap:126px;
  /* `start`, not the frame's `center`: the frame centred TWO cards against
     the form. Since 28 Sep 2026 there is one - «Пишете ни» said what the
     form beside it says and was dropped (critique) - and one short card
     centred on a 586px form floated in 180px of nothing above and below.
     Top-aligned, it reads as the note beside the form it is. */
  align-items:start;
}

/* When the CMS row has no content there is no left column at all, and the form
   still has to sit in its own column rather than sliding left. */
.p-contacts__form{ grid-column:2; }

.p-contacts__cards{
  grid-column:1;
  display:grid;
  gap:66px;             /* the frame's two cards: 1 ends 1007, 2 starts 1073 */
}

.p-contacts__card{
  /* The frame's cards were a fixed 237 and this was its floor; with one card
     top-aligned beside the form the floor only added empty cream under three
     lines of copy, so the card takes its content's height. */
  padding:20px 40px 40px;
}

.p-contacts__card .c-card__body{ margin-top:19px; }
/* The prose's 28px paragraph gap is between paragraphs; under the last one
   it only stacked on the card's own 40. */
.p-contacts__card .c-prose > p:last-child{ margin-bottom:0; }

/* Prose is .c-prose in typography.css - four templates render CMS copy
   and this block used to be copied into each of their stylesheets. */

/* --- the controller's own post-back messages ---------------------------- */
/* contacts.php validates on a plain POST and hands back $err (already HTML,
   with <br /> separators) and $text. No frame draws either, so they reuse the
   system's error red and its success panel. */

.p-contacts__err,
.p-contacts__note{
  margin:0 0 16px;
  padding:16px;
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
}
.p-contacts__err{
  background:var(--c-cream);
  border:1px solid var(--c-error);
  color:var(--c-error);
}
.p-contacts__note{
  background:var(--c-cream);
  border:1px solid var(--c-green);
  color:var(--c-ink);
}

/* ==========================================================================
   Below 1120 - the office panel and the form pair stop being side by side.

   The panel is a fixed 299 over a 1188 map block and the two columns are 600
   and 462 with 126 between them. Both hold their proportions all the way
   down; what neither holds is its content - the panel's own address column is
   195 wide inside a 299 panel, so a proportional panel is a 195px column
   inside 150px of space, and a 462 form column becomes a form.
   ========================================================================== */

@media (max-width: 1119px){
  .p-contacts__body{
    grid-template-columns:minmax(0, 1fr);
    row-gap:40px;
  }
  /* The form is `grid-column:2` so that an empty CMS row cannot slide it
     left; with one column there is no second column to name. */
  .p-contacts__form{ grid-column:1; }
  .p-contacts__cards{ grid-column:1; gap:40px; }
  .p-contacts__panel{
    position:static;
    width:100%;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    gap:32px;
  }
  /* The panel is no longer over the map, so the map is a block of its own and
     the two stack. The wash goes with the panel - it exists to hold white
     type over a photograph, and there is no photograph behind it here. */
  .p-contacts__map{
    display:flex;
    flex-direction:column;
    aspect-ratio:auto;
    height:auto;
    /* the 548 floor is the OVERLAY panel's closing height and there is no
       overlay from here down */
    min-height:0;
    overflow:visible;
    box-shadow:none;
  }
  .p-contacts__map__img{
    aspect-ratio:1188 / 548;
    height:auto;
    border-radius:var(--c-r-surface);
    box-shadow:var(--c-sh-photo);
  }
  .p-contacts__office{ flex:1 1 260px; }
}

@media (max-width: 639px){
  .p-contacts__head{ margin-top:24px; }
  .p-contacts__map{ margin-top:24px; gap:20px; }
  .p-contacts__panel{
    flex-direction:column;
    gap:32px;
    padding:24px;
    border-radius:var(--c-r-surface);
  }
  /* `flex:1 1 260px` is a WIDTH in the row above and a HEIGHT here, and it
     put 90px of nothing between the two offices. */
  .p-contacts__office{ flex:0 0 auto; }
  .p-contacts__office__address{ width:auto; }
  .p-contacts__card{ padding:20px 24px 24px; }
  .p-contacts__body{ margin-block:24px; row-gap:24px; }
  .p-contacts__cards{ gap:20px; }
}