/* Home page (GR + EN) specific rules: hero mobile CTA + hero cluster switching.
   Loaded after site.min.css on / and /en/. (Previously inline <style> in both index.html files;
   the rest of the old inline "critical CSS" duplicated site.min.css verbatim and was dropped.) */
.sf-hero-mobile-cta {
  display: none;
}

.sf-cluster--mobile {
  display: none !important;
}

@media (max-width:768px) {
  .sf-cluster--desktop {
    display: none !important;
  }
  .sf-cluster--mobile {
    display: flex !important;
    flex-direction: column;
    width: 100%;
  }
  .sf-hero-inner {
    align-items: flex-end !important;
    padding-block: calc(var(--sf-header-height-mobile) + 16px) 24px !important;
  }
  .sf-hero-tabs {
    display: none !important;
  }
  .sf-hero-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 60px); /* clear the fixed contact bubble */
    min-height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--sf-radius-button);
    background: transparent;
    color: var(--sf-white);
    font-family: var(--sf-font-heading);
    font-size: var(--sf-text-button);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--sf-duration-fast) var(--sf-ease-out), color var(--sf-duration-fast) var(--sf-ease-out);
  }
  .sf-hero-mobile-cta:is(:hover, :focus-visible) {
    background: var(--sf-white);
    color: var(--sf-black);
  }
}