/* ============================================================
   FOOTER  —  Figma "footer" component (node 257:22672)
   Target: Betheme footer template <footer id="mfn-footer-template">
   Selectors prefixed with #mfn-footer-template to beat builder CSS.

   Structure (two Be Builder sections, each one Column-Text item):
     • .trsys-footer-main   -> logo + socials / divider / 4 nav columns
                               (Products[placeholder] · Solutions[8 links,
                               2 sub-cols] · About · Contacts + CTA)
     • .trsys-footer-bottom -> copyright (left) · go-to-top (right)

   Two flat navy bands per Figma: main #0a2546, bottom bar #071b33.
   ============================================================ */

:root{
  --tf-navy:    #0a2546;   /* main band (Figma Rectangle 19)            */
  --tf-navy-dk: #071b33;   /* bottom bar (Figma Rectangle 20)          */
  --tf-accent:  #3b9dc4;   /* headings / hover (Figma)                 */
  --tf-light:   #f4f4f4;   /* body text on navy (Figma)                */
  --tf-grey:    #c8c7c9;   /* products placeholder (Figma Rectangle 25)*/
}

/* ---- bands + section padding (override builder defaults) ---------- */
#mfn-footer-template{ background:var(--tf-navy-dk); }
#mfn-footer-template .mcb-section{ background:transparent; }

#mfn-footer-template .mcb-section-ftrmain{ background:var(--tf-navy); }
#mfn-footer-template .mcb-section-ftrmain > .mcb-section-inner{ padding:54px 0 40px; }

#mfn-footer-template .mcb-section-ftrbot{ background:var(--tf-navy-dk); }
/* Be renders this section's inner as a flex row, which shrink-wraps the lone
   column; force block flow so the column spans full width (copyright ↔ to-top). */
#mfn-footer-template .mcb-section-ftrbot > .mcb-section-inner{ padding:14px 0; display:block; }
/* Be sizes the lone column as a content-shrunk flex item; collapse the whole
   wrapper chain to plain full-width blocks so the copyright/to-top justify
   edge-to-edge across the full container. */
#mfn-footer-template .mcb-section-ftrbot .mcb-wrap,
#mfn-footer-template .mcb-section-ftrbot .mcb-wrap-inner,
#mfn-footer-template .mcb-section-ftrbot .mcb-column,
#mfn-footer-template .mcb-section-ftrbot .mcb-column-inner,
#mfn-footer-template .mcb-section-ftrbot .column_attr{
  display:block; width:100%; max-width:100%; float:none; flex:none;
}

/* neutralise Be column wrappers so our own layout drives spacing */
#mfn-footer-template .mcb-column-inner,
#mfn-footer-template .column_attr{ margin:0; padding:0; }

/* ------------------------------------------------------------------ */
/* TOP ROW — logo (left) + social icons (right)                        */
/* ------------------------------------------------------------------ */
#mfn-footer-template .tf-top{
  display:flex; align-items:center; justify-content:space-between;
}
#mfn-footer-template .tf-logo{ display:inline-block; line-height:0; }
#mfn-footer-template .tf-logo img{ height:40px; width:auto; display:block; }

#mfn-footer-template .tf-social{ display:flex; gap:21px; }
#mfn-footer-template .tf-soc{
  width:30px; height:30px; border-radius:50%;
  background:var(--tf-light); color:var(--tf-navy);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
#mfn-footer-template .tf-soc i{ line-height:1; }
#mfn-footer-template .tf-soc:hover{
  background:var(--tf-accent); color:#fff; transform:translateY(-2px);
}

/* ---- divider line (Figma Vector 1) ------------------------------- */
#mfn-footer-template .tf-divider{
  height:1px; margin:22px 0 32px;
  background:linear-gradient(90deg, rgba(59,157,196,.55), rgba(59,157,196,.12));
}

/* ------------------------------------------------------------------ */
/* COLUMNS — Products · Solutions · About · Contacts                   */
/* ------------------------------------------------------------------ */
#mfn-footer-template .tf-cols{
  display:grid;
  grid-template-columns:110px 660px 190px 270px;
  column-gap:16px;
}
#mfn-footer-template .tf-col{ min-width:0; }

/* ---- Figma footer v2 (node 257:22672): 3 columns —
   Solutions | (Products + ISO badge stacked ABOVE About us) | Contacts.
   Reordered from the old 4-col row (Products|Solutions|About|Contacts) purely via
   grid placement — no HTML change: Products moves out of the leading column and
   stacks over About us; Solutions leads; Contacts stays right. Desktop only, so the
   768–959 two-col grid and the ≤767 mobile stack keep their own layouts. */
@media(min-width:960px){
  #mfn-footer-template .tf-cols{
    grid-template-columns:660px 240px 1fr;   /* Solutions | Products+About | Contacts */
    grid-template-rows:auto auto;
    align-items:start;
    column-gap:40px; row-gap:22px;
  }
  #mfn-footer-template .tf-col-solutions{ grid-column:1; grid-row:1 / span 2; }
  #mfn-footer-template .tf-col-products { grid-column:2; grid-row:1; }
  #mfn-footer-template .tf-col-about    { grid-column:2; grid-row:2; }
  #mfn-footer-template .tf-col-contacts { grid-column:3; grid-row:1 / span 2; }
}

/* column heading */
#mfn-footer-template .tf-h{
  font-family:var(--tr-font);
  font-weight:400; font-size:16px; line-height:20px;
  color:var(--tf-accent); text-transform:uppercase; letter-spacing:.02em;
  margin:0 0 10px; padding:0;          /* Figma heading→first-row gap ≈10px */
}
/* Products/Solutions/About headings are footer-btn LINKS (Contacts stays a
   plain 400 label). Bold 600 per Figma; hover = accent underline reveal. */
#mfn-footer-template .tf-h a{
  color:inherit; text-decoration:none; font-weight:600;
  display:inline-block; padding-bottom:3px;
  background:linear-gradient(var(--tf-accent), var(--tf-accent)) left 100% / 0% 1.5px no-repeat;
  transition:background-size .25s ease;
}
#mfn-footer-template .tf-h a:hover{ background-size:100% 1.5px; }

/* link lists */
#mfn-footer-template .tf-links{
  list-style:none; margin:0; padding:0;
  display:grid; row-gap:11px;
}
#mfn-footer-template .tf-links--2col{
  grid-auto-flow:column;
  grid-template-rows:repeat(4, auto);
  grid-template-columns:auto auto;
  column-gap:34px; row-gap:11px;
  justify-content:start;
}
/* line-height:0 kills the inline strut so each row's height == the link box
   (the grid row-gap alone controls the gap) → Figma 29px row pitch. */
#mfn-footer-template .tf-links li{ margin:0; padding:0; line-height:0; }
/* Figma "footer-btn" (component set 290:22712): Montserrat 400, light text;
   hover = an accent (#3b9dc4) underline that reveals left-to-right. */
#mfn-footer-template .tf-links a{
  font-family:var(--tr-font);
  font-weight:400; font-size:12px; line-height:15px;
  color:var(--tf-light); text-decoration:none; white-space:nowrap;
  display:inline-block; padding-bottom:3px;
  background:linear-gradient(var(--tf-accent), var(--tf-accent)) left 100% / 0% 1.5px no-repeat;
  transition:background-size .25s ease;
}
#mfn-footer-template .tf-links a:hover{ background-size:100% 1.5px; }

/* products column: ISO 9001:2015 CERTIFIED badge (Figma footer "Layer_1" 1759:5004)
   — replaces the old grey placeholder box. Light SVG on the dark footer. */
#mfn-footer-template .tf-iso{
  display:block; width:120px; height:auto; margin-top:6px;
}
/* the badge is a link that downloads the ISO 9001:2015 certificate PDF
   (per-language href wired into the footer content). */
#mfn-footer-template .tf-iso-link{ display:inline-block; line-height:0; cursor:pointer; }
#mfn-footer-template .tf-iso-link .tf-iso{ transition:opacity .2s ease; }
#mfn-footer-template .tf-iso-link:hover .tf-iso{ opacity:.8; }

/* ---- contacts column (right aligned) ----------------------------- */
#mfn-footer-template .tf-col-contacts{ text-align:right; }
/* CONTACTS heading is light #F4F4F4 in Figma (the other 3 headings are accent) */
#mfn-footer-template .tf-col-contacts .tf-h{ color:var(--tf-light); }
#mfn-footer-template .tf-address{
  font-style:normal; font-family:var(--tr-font);
  font-weight:400; font-size:12px; line-height:27px; color:var(--tf-light);
  white-space:nowrap;
}
#mfn-footer-template .tf-address a{ color:var(--tf-light); text-decoration:none; }
#mfn-footer-template .tf-address a:hover{ color:var(--tf-accent); }

/* CTA pill — Figma "primary-btn-light" (component set 290:22740).
   Default = pill r50, linear gradient #28609A (right) -> #0E2034 (left).
   Hover   = flat solid #28609A with a 2px #28609A border. Text stays #F4F4F4. */
#mfn-footer-template .tf-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-sizing:border-box;
  margin-top:24px;
  min-width:250px; height:38px; padding:0 22px;
  border-radius:50px;
  background:linear-gradient(to left, #28609A 0%, #0E2034 100%);
  color:var(--tf-light); text-decoration:none;
  font-family:var(--tr-font);
  font-weight:600; font-size:16px; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
  transition:background .25s ease;
}
/* hover = flat solid #28609A (Figma also adds a same-colour 2px border, which is
   visually identical to the solid fill — so no border is needed, and dropping it
   avoids the transparent-border corner artifact on the default gradient state). */
#mfn-footer-template .tf-cta:hover,
#mfn-footer-template .tf-cta:focus-visible{
  background:#28609A;
}
#mfn-footer-template .tf-cta-arrow{ width:18px; height:18px; flex:none; }

/* ------------------------------------------------------------------ */
/* BOTTOM BAR — copyright + go-to-top                                  */
/* ------------------------------------------------------------------ */
#mfn-footer-template .trsys-footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
}
#mfn-footer-template .tf-copy{
  font-family:var(--tr-font);
  font-weight:400; font-size:16px; line-height:20px;
  color:var(--tf-light); text-transform:uppercase; letter-spacing:.01em;
}
#mfn-footer-template .tf-totop{
  width:44px; height:44px; border-radius:6px;
  background:var(--tf-light); color:var(--tf-navy);
  display:flex; align-items:center; justify-content:center; flex:none;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
#mfn-footer-template .tf-totop:hover{
  background:var(--tf-accent); color:#fff; transform:translateY(-2px);
}
#mfn-footer-template .tf-totop svg{ width:20px; height:20px; }

/* ------------------------------------------------------------------ */
/* RESPONSIVE (Betheme breakpoints 959 / 767)                          */
/* ------------------------------------------------------------------ */
@media (max-width:959px){
  #mfn-footer-template .tf-cols{
    grid-template-columns:1fr 1fr; column-gap:40px; row-gap:40px;
  }
  #mfn-footer-template .tf-col-contacts{ text-align:left; }
  #mfn-footer-template .tf-links a,
  #mfn-footer-template .tf-address{ white-space:normal; }
}
/* ---- PHONE ≤767 — Figma "footer-mobile" (node 1269:45288) ---------
   Single-column stack, reordered vs the desktop DOM:
     CTA (full-width) · Продукти(+box) · Решения(+links) · За нас(+link)
     · [divider] · Контакти(+address) · centered © (no go-to-top).
   The CTA lives inside the Contacts column in the markup; to lift it to
   the top and drop the address to the bottom WITHOUT touching the markup
   (or the desktop CSS), the Contacts column is set display:contents so
   its heading / address / CTA become direct flex items of .tf-cols and
   can be individually ordered. Font sizes/colours are unchanged (they
   already match Figma — accent 16 headings, 12 links, light Контакти). */
@media (max-width:767px){
  #mfn-footer-template .mcb-section-ftrmain > .mcb-section-inner{ padding:38px 0 34px; }

  /* logo (left) + socials (right) stay on one row (Figma) */
  #mfn-footer-template .tf-top{ flex-direction:row; align-items:center; }

  /* single-column flex stack */
  #mfn-footer-template .tf-cols{ display:flex; flex-direction:column; gap:20px; }

  /* hoist the Contacts column's children into the stack for reordering */
  #mfn-footer-template .tf-col-contacts{ display:contents; }

  #mfn-footer-template .tf-cols > .tf-col-solutions{ order:1; }
  #mfn-footer-template .tf-cols > .tf-col-products { order:2; }
  #mfn-footer-template .tf-cols > .tf-col-about    { order:3; }
  #mfn-footer-template .tf-col-contacts .tf-cta    { order:0; }  /* CTA → top    */
  #mfn-footer-template .tf-col-contacts .tf-h      { order:4; }  /* Контакти     */
  #mfn-footer-template .tf-col-contacts .tf-address{ order:5; }  /* address → end */

  /* CTA full-width at the top */
  #mfn-footer-template .tf-cta{ width:100%; min-width:0; margin:0; }

  /* Решения — single column of links (was a 2-col sub-grid) */
  #mfn-footer-template .tf-links--2col{
    grid-auto-flow:row; grid-template-columns:1fr; grid-template-rows:auto;
    column-gap:0;
  }
  #mfn-footer-template .tf-links{ row-gap:16px; }
  #mfn-footer-template .tf-links a,
  #mfn-footer-template .tf-address{ white-space:normal; }

  /* Контакти — left aligned, with the Figma divider line above it */
  #mfn-footer-template .tf-col-contacts .tf-h,
  #mfn-footer-template .tf-col-contacts .tf-address{ text-align:left; }
  #mfn-footer-template .tf-col-contacts .tf-h{ position:relative; margin:6px 0 0; padding-top:26px; }
  #mfn-footer-template .tf-col-contacts .tf-h::before{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:linear-gradient(90deg, rgba(59,157,196,.55), rgba(59,157,196,.12));
  }

  /* bottom bar — centered copyright, no go-to-top (Figma mobile) */
  #mfn-footer-template .mcb-section-ftrbot > .mcb-section-inner{ padding:20px 0; }
  #mfn-footer-template .trsys-footer-bottom{ justify-content:center; text-align:center; }
  #mfn-footer-template .tf-copy{ text-align:center; }
  #mfn-footer-template .tf-totop{ display:none; }
}