/* sdkgranit (template granit): adaptive layout.
   >= 1240px: the original fixed 1200px design (the logo is part of the header picture, so the picture is never stretched);
   768-1239px: fluid width; < 768px: one column. */
.header a.logo-qr { margin-left: 1020px; margin-top: 20px; }

@media (max-width: 1239px) {
  .header {
    width: auto; height: auto; min-height: 330px; box-sizing: border-box; position: relative;
    display: flex; flex-direction: column;
    padding: 160px 0 0; background-position: left top;      /* picture at its own size: the logo stays sharp in the corner */
  }
  .header a.logo:not(.logo-qr) { top: 0; left: 0; }        /* click area over the logo in the picture */
  .header a.logo.logo-qr { top: 20px; right: 20px; left: auto; width: 114px; height: auto; margin: 0; }
  .header a.logo.logo-qr img { width: 100% !important; }
  .header .adr { position: static; width: auto; margin: 0 0 16px 24px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
}
@media (max-width: 767px) {
  .header { min-height: 0; padding-top: 160px; }              /* address below the light panel with the logo */
  .header a.logo.logo-qr { display: none; }                  /* CBR QR code: no use on the phone itself */
  .header .adr { margin: 0 0 12px 16px; font-size: 13px; }
  .header .adr span { font-size: 16px; }
}
/* Shared part: content, left menu, footer, tables, phones. Header rules are site-specific (top of file). */
.inner img { max-width: 100%; height: auto; }
.inner iframe, .inner video { max-width: 100%; }
/* top menu: tabs share the 780px strip, so a 7th tab (shown to logged-in users) no longer drops to a second row; 6 tabs stay 127px */
.header .topmenu ul { display: flex; gap: 2px; }
.header .topmenu ul li { float: none; flex: 0 1 127px; min-width: 0; margin-right: 0; }

/* frontend editing (logged-in editors): Joomla prints an edit link and a tooltip in every module and article.
   Cassiopeia hides the tooltips until hover; these old templates had no rules, so the texts pushed the menus out of place. */
.mod-menu, .mod-custom, .moduletable { position: relative; }
.jmodedit { position: absolute; top: 0; right: 0; z-index: 900; padding: 1px 6px; font-size: 12px; line-height: 18px; color: #333 !important;
  background: rgba(255,255,255,.85); border: 1px solid #58595a; border-radius: 4px; text-decoration: none; }
.jmodedit::before { content: "\270E"; }
[role="tooltip"]:not(.show) { display: none; position: absolute; z-index: 1070; top: 22px; right: 0; padding: .5em; max-width: 300px;
  font-size: 12px; line-height: 1.4; color: #000; text-align: left; background: #fff; border: 1px solid #6d757e; border-radius: 4px;
  box-shadow: 0 0 .5rem rgba(0,0,0,.5); }
:hover + [role="tooltip"], :focus + [role="tooltip"] { display: block; }

/* short pages: the content area grows, the footer stays at the bottom of the screen */
.main { display: flex; flex-direction: column; min-height: 100vh; }
.main > * { flex: none; }
.main > .content { flex: 1 0 auto; }

/* ---------- narrow monitors and tablets ---------- */
@media (max-width: 1239px) {
  .main { width: auto; box-shadow: none; }
  .header .bread, .header .topsearch, .header .toplink { display: none; }
  /* top menu: a full-width row of tabs at the bottom of the header */
  .header .topmenu { position: static; order: 9; flex: 1 1 100%; width: auto; height: auto; margin: auto 0 0; }
  .header .topmenu ul { display: flex; gap: 2px; }
  .header .topmenu ul li { float: none; flex: 1 1 0; width: auto; height: 60px; margin: 0; background-size: 100% 200%; background-position: 0 100%; }
  .header .topmenu ul li:hover { background-size: 100% 200%; background-position: 0 0; }
  .topmenu ul li a { height: 60px !important; font-size: 15px; }

  .content { width: auto; padding: 30px 3%; }
  .inner { float: none; width: auto; overflow: auto; }          /* takes the space next to the left menu; wide tables scroll inside */
  .footer { height: auto; min-height: 110px; padding: 10px 16px; box-sizing: border-box; background-size: 100% 100%; }   /* footer picture is 120px tall: stretch it to the taller footer */
  .footer p { margin-left: 0 !important; display: inline-block; text-align: left; }
  /* tabs (ext_tss) assume all tab titles fit in one row; let them wrap and put the content below them */
  .inner dl.tabs { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .inner dl.tabs > dt { float: none; flex: none; margin-top: 4px; }
  .inner dl.tabs > dd { float: none; order: 1; flex: 1 1 100%; width: 100%; margin: 0; }
  .inner dl.tabs > .tabs_clr { order: 2; flex: 1 1 100%; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 767px) {
  body { font-size: 14px; }
  .header .topmenu ul { flex-wrap: wrap; }
  .header .topmenu ul li { flex: 1 1 calc(33.333% - 2px); height: 50px; }
  .topmenu ul li a { height: 50px !important; font-size: 14px; padding: 0 6px !important; line-height: 1.15; }

  .content { padding: 16px; }
  .leftmenu { float: none; width: auto; margin: 0 0 16px; border-left: 0; border-right: 0; }
  .leftmenu ul { width: auto; }
  .leftmenu ul li.parent a { width: auto; box-sizing: border-box; }
  .leftmenu ul.mod-menu > li.parent:not(.active) > ul { display: none; }   /* only the section of the current page is open (top level only) */
  .leftmenu ul li.parent ul li a { padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
  .inner p, .inner li { text-align: left !important; }           /* justified text leaves wide gaps on a narrow screen */
  .inner table { table-layout: auto; }
  .inner iframe[src*="2gis"] { height: 400px; }
  h2 { font-size: 20px; }
  .footer { line-height: 18px; }
  .footer span { margin-left: 0; display: block; }
}
@media (max-width: 459px) {
  .header .topmenu ul li { flex-basis: calc(50% - 2px); }
}