/* Additions on top of the exported Webflow CSS (webflow.css). Keep this file small. */

/* Contact + cookie forms: same spacing as Webflow's .w-form, without webflow.js attaching its form handler. */
.tap-form { margin: 0 0 15px; }

/* contact.js status line */
[data-contact-status] { margin: 1rem 0 0; font-size: .875rem; }
[data-contact-status].is-error { color: #c0392b; }
[data-contact-status]:empty { display: none; }

/* Cookie banner: webflow.css hides .fs-cc-banner2_component / .fs-cc-prefs2_component (display:none);
   consent.js sets an inline display when they should show. */
.cookies [hidden] { display: none !important; }
.fs-cc-prefs2_component { align-items: center; justify-content: center; }
.fs-cc-banner2_text a { text-decoration: underline; }

/* Language switcher: 4 entries instead of 2. The list was sized for two rows, let it grow and keep the rows tight. */
.locales-list { display: flex; flex-direction: column; }
.locate_wrap { white-space: nowrap; }
.locate_text { min-width: 5.5rem; }

/* Long translations (RU/ES/FR/DE/IT): the desktop nav is centred over the bar, so a longer menu runs into the language
   switcher / demo button. Slightly tighter type + gaps keep it clear (budget: ~750px of menu, demo label <= ~14 chars). */
.nav_menu_link, .nav_menu_text { white-space: nowrap; }
.button { max-width: 100%; }
@media (min-width: 992px) {
  :lang(ru) .nav_menu_items, :lang(es) .nav_menu_items, :lang(tr) .nav_menu_items, :lang(uk) .nav_menu_items { grid-column-gap: 1rem; }
  :lang(ru) .nav_menu_link, :lang(es) .nav_menu_link, :lang(tr) .nav_menu_link, :lang(uk) .nav_menu_link { font-size: .9375rem; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  :lang(ru) .nav_menu_items, :lang(es) .nav_menu_items, :lang(tr) .nav_menu_items, :lang(uk) .nav_menu_items { grid-column-gap: .25rem; }
  :lang(ru) .nav_menu_link, :lang(es) .nav_menu_link, :lang(tr) .nav_menu_link, :lang(uk) .nav_menu_link { font-size: .8125rem; }
  :lang(ru) .nav_container > .button, :lang(es) .nav_container > .button, :lang(tr) .nav_container > .button, :lang(uk) .nav_container > .button { font-size: .8125rem; padding-left: .75rem; padding-right: .75rem; }
}

/* Markdown-rendered bodies: standalone images behave like Webflow rich-text figures (centered, max 60% of the column). */
.w-richtext p > img:only-child { display: block; max-width: 60%; height: auto; margin: 10px auto; }

/* A standalone body image tagged full-width spans the whole column (e.g. a banner). */
.w-richtext figure.w-richtext-align-fullwidth > div { display: block; }
.w-richtext figure.w-richtext-align-fullwidth img { width: 100%; max-width: 100%; height: auto; }

/* Build adds width/height attributes (CLS); Webflow classes only set width, so keep the aspect ratio. */
img { height: auto; }

/* Longer translations (RU): let the 3-word hero heading wrap instead of overflowing the viewport. */
html:is([lang="ru"],[lang="es"],[lang="pt-BR"],[lang="pt"],[lang="fr"],[lang="de"],[lang="it"]) .hero_heading.text-align-center.heading-style-h1.side { flex-flow: wrap; }

/* Blog index in a locale with few translated posts: English cards carry a small "In English" label. */
.cms_card_lang { display: inline-block; padding: .125rem .5rem; border: 1px solid currentColor; border-radius: 999px; font-size: .75rem; line-height: 1.4; opacity: .75; }
.cms_card_info .cms_card_lang { margin-top: .5rem; }
.blog_subtitle .cms_card_lang { margin-left: .75rem; }

/* Blog hero + post hero (.hero_layout.blog in blog.hbs and post.hbs): title and date sit UNDER
   the image instead of on top of it. Event banners (SBC, SiGMA, iGB) arrive with their own copy
   baked in - event name, dates, stand - and the overlaid title landed straight on it.
   The aspect ratio moves from the box to the image, keeping each breakpoint's existing crop, so
   posts look as before. The exception is phones: the box was portrait (2/2.25, 2/3) only to make
   room for the overlay, which would slice a wide banner, so it becomes landscape too. */
.hero_layout.blog { aspect-ratio: auto; display: block; overflow: visible; }
.hero_layout.blog .blog_image {
  position: static; display: block; width: 100%; height: auto;
  aspect-ratio: 2.39; object-fit: cover; border-radius: inherit;
}
.hero_layout.blog .blog_overlay_image {
  position: static; background-color: transparent;
  color: var(--text-color--text-primary); padding: 1.25rem 0 0;
}
.hero_layout.blog .blog_subtitle { color: var(--text-color--text-secondary); }
/* Same crop at every width, so a hero is framed on a phone exactly as on a desktop. The box also no
   longer pulls up under the sticky header (margin-top was -7.25rem), which used to cover the top of
   the image - harmless when the title was overlaid at the bottom, not when the image is the content. */
@media screen and (max-width: 767px) {
  .hero_layout.blog { margin-top: 0; }
  .hero_layout.blog .blog_overlay_image { padding: 1.25rem 1.25rem 0; }
}
@media screen and (max-width: 479px) { .hero_layout.blog .blog_overlay_image { padding: 1.25rem 1rem 0; } }