/* diaspora.ro desktop homepage reference surface — desktop only.
   Mobile remains the existing .main source of truth. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.desktop-reference-home { display: none; }
.desktop-reference-topband { display: none; }

@media (min-width: 901px) {
  .homepage-body {
    --reference-blue: #0757a5;
    --reference-deep-blue: #003f82;
    --reference-orange: #f58220;
    --reference-ink: #173b68;
    background: #f3f8fd !important;
    color: var(--reference-ink) !important;
  }

  .homepage-body > .desktop-homepage.desktop-reference-home {
    display: block !important;
    width: 100%;
    overflow: hidden;
    background: #f3f8fd !important;
  }
  .homepage-body > .desktop-homepage:not(.desktop-reference-home),
  .homepage-body > .main { display: none !important; }

  .desktop-reference-topband {
    display: block;
    position: relative;
    z-index: 120;
    min-height: 20px;
    background: #07529a;
    color: #fff;
    font-size: 9px;
    line-height: 20px;
  }
  .desktop-reference-topband__inner {
    width: min(1180px, calc(100% - 72px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: 20px;
    gap: 6px;
  }
  .desktop-reference-topband nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
  }
  .desktop-reference-topband a,
  .desktop-reference-language {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .desktop-reference-topband a:hover,
  .desktop-reference-topband a:focus-visible { text-decoration: underline; }
  .desktop-reference-flag {
    width: 11px;
    height: 8px;
    border-radius: 1px;
    display: inline-block;
    background: linear-gradient(90deg, #002b7f 0 33.33%, #fcd116 33.33% 66.66%, #ce1126 66.66%);
  }

  .homepage-body .site-header-stack {
    background: #fff !important;
    border-bottom: 1px solid #e5ebf1 !important;
    box-shadow: 0 2px 8px rgba(17, 59, 105, .08) !important;
  }
  .homepage-body .topbar {
    width: min(1180px, calc(100% - 72px));
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 auto;
    padding: 0 !important;
    gap: 20px !important;
    background: #fff !important;
  }
  .homepage-body .tb-logo {
    gap: 7px !important;
    min-width: 232px;
  }
  .homepage-body .tb-logo img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
  }
  .homepage-body .tb-logo-txt {
    color: #0959a5 !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    letter-spacing: -.06em !important;
  }
  .homepage-body .tb-logo-txt span { color: #f58220 !important; }
  .homepage-body .tb-live { display: none !important; }
  .homepage-body .tb-desktop-quick-nav {
    order: 2;
    display: flex !important;
    align-items: stretch;
    align-self: stretch;
    gap: 0 !important;
    margin: 0 !important;
    flex: 1;
    justify-content: center;
  }
  .homepage-body .tb-desktop-quick-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: #173b68 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap;
  }
  .homepage-body .tb-desktop-quick-nav a:hover,
  .homepage-body .tb-desktop-quick-nav a:focus-visible,
  .homepage-body .tb-desktop-quick-nav .tb-news-link { color: #f58220 !important; }
  .homepage-body .tb-news-link__dot { display: none; }
  .homepage-body .tb-right {
    order: 3;
    margin: 0 !important;
    gap: 6px !important;
  }
  .homepage-body .btn-in {
    padding: 7px 10px !important;
    border: 1px solid #e6ebf0 !important;
    background: #fff !important;
    color: #173b68 !important;
    font-size: 10px !important;
  }
  .homepage-body .btn-reg {
    padding: 8px 13px !important;
    border-radius: 18px !important;
    background: #f58220 !important;
    box-shadow: none !important;
    font-size: 10px !important;
  }
  .homepage-body .site-menu-trigger { display: none !important; }
  .homepage-body #dpr-global-language { order: 4; }
  .homepage-body #dpr-global-language-select {
    border: 0 !important;
    background: transparent !important;
    color: #173b68 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  .desktop-reference-hero {
    min-height: 178px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
      linear-gradient(90deg, rgba(2, 74, 145, .96) 0%, rgba(4, 106, 185, .78) 42%, rgba(4, 106, 185, .12) 78%),
      url('/assets/img/hero-diaspora-city.jpg') center 48% / cover no-repeat;
    color: #fff;
  }
  .desktop-reference-hero__copy {
    width: min(1180px, calc(100% - 72px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 18px 0 20px;
  }
  .desktop-reference-kicker {
    display: block;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .22em;
    font-weight: 800;
    opacity: .92;
    margin-bottom: 7px;
  }
  .desktop-reference-hero h1 {
    margin: 0 0 5px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: .99;
    letter-spacing: -.04em;
    font-weight: 900;
  }
  .desktop-reference-hero h1 strong { color: #ff9b2d; }
  .desktop-reference-hero p {
    margin: 0 0 9px;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 600;
  }
  .desktop-reference-search {
    display: flex;
    width: min(370px, 45vw);
    height: 28px;
    align-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    color: #6a7890;
    box-shadow: 0 4px 12px rgba(0, 40, 90, .18);
  }
  .desktop-reference-search > span { padding-left: 11px; font-size: 16px; line-height: 1; }
  .desktop-reference-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 8px;
    color: #173b68;
    font: 600 9px inherit;
  }
  .desktop-reference-search button {
    height: 22px;
    min-width: 66px;
    margin-right: 3px;
    border: 0;
    border-radius: 13px;
    background: #f58220;
    color: #fff;
    font: 800 9px inherit;
    cursor: pointer;
  }
  .desktop-reference-search button:hover,
  .desktop-reference-search button:focus-visible { background: #d96c0b; }
  .desktop-reference-hero__visual {
    position: absolute;
    inset: 0 0 0 58%;
    z-index: 1;
    pointer-events: none;
  }
  .desktop-reference-hero__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 106, 185, .5), transparent 30%);
  }
  .desktop-reference-hero__message {
    position: absolute;
    top: 19px;
    right: max(32px, 5vw);
    z-index: 2;
    color: #fff;
    font: italic 800 clamp(15px, 2vw, 24px)/1.05 Georgia, serif;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 41, 91, .5);
  }
  .desktop-reference-hero__message strong { color: #fff; }
  .desktop-reference-hero__visual img {
    position: absolute;
    right: 8%;
    bottom: 12px;
    width: clamp(120px, 19vw, 220px);
    height: auto;
    opacity: .9;
    filter: brightness(0) invert(1);
  }

  .desktop-reference-services {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    min-height: 76px;
    background: #fff;
    border-bottom: 1px solid #e1e9f0;
    box-shadow: 0 1px 4px rgba(31, 74, 116, .08);
  }
  .desktop-reference-services a {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 7px 4px;
    border-right: 1px solid #edf1f5;
    color: #173b68;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
  }
  .desktop-reference-services a:hover,
  .desktop-reference-services a:focus-visible { background: #f4f9ff; transform: translateY(-1px); }
  .desktop-reference-services strong { font-size: 9px; line-height: 1.15; }
  .desktop-reference-services small { max-width: 105px; color: #7890a8; font-size: 6.5px; line-height: 1.15; }
  .desktop-reference-service-icon,
  .card-icon {
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    line-height: 1;
  }
  .desktop-reference-service-icon {
    width: 29px;
    height: 29px;
    margin-bottom: 2px;
    border-radius: 9px;
    font-size: 16px;
    box-shadow: 0 3px 7px rgba(24, 82, 145, .18);
  }
  .service-blue, .card-blue { background: #147fe5; }
  .service-orange, .card-orange { background: #f58220; }
  .service-green, .card-green { background: #159a7d; }
  .service-purple, .card-purple { background: #7c43c9; }
  .service-pink, .card-pink { background: #e62f78; }
  .service-indigo, .card-indigo { background: #4f48d6; }
  .card-cyan { background: #1299a8; }
  .card-navy { background: #18528d; }

  .desktop-reference-content {
    width: min(1180px, calc(100% - 72px));
    margin: 0 auto;
    padding: 9px 0 12px;
  }
  .desktop-reference-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 6px;
  }
  .desktop-reference-section-title h2 {
    margin: 0;
    color: #174b80;
    font-size: 14px;
    letter-spacing: -.02em;
  }
  .desktop-reference-section-title a {
    color: #174b80;
    font-size: 8px;
    font-weight: 800;
    text-decoration: none;
  }
  .desktop-reference-section-title a:hover,
  .desktop-reference-section-title a:focus-visible { color: #f58220; text-decoration: underline; }
  .desktop-reference-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .desktop-reference-card {
    position: relative;
    display: flex;
    min-height: 86px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe6ef;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(25, 78, 122, .08);
    color: #173b68;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .desktop-reference-card:hover,
  .desktop-reference-card:focus-visible {
    border-color: #7bb7eb;
    box-shadow: 0 6px 14px rgba(25, 78, 122, .16);
    transform: translateY(-2px);
    outline: none;
  }
  .desktop-reference-card img {
    display: block;
    width: 100%;
    height: 42px;
    flex: 0 0 42px;
    object-fit: cover;
    object-position: center 45%;
    filter: saturate(.9);
  }
  .desktop-reference-card .card-icon {
    position: absolute;
    top: 33px;
    left: 7px;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 5px;
    font-size: 9px;
    box-shadow: 0 2px 4px rgba(24, 62, 102, .18);
  }
  .desktop-reference-card strong {
    margin: 6px 7px 1px 31px;
    font-size: 8px;
    line-height: 1.1;
  }
  .desktop-reference-card small {
    display: block;
    min-height: 20px;
    margin: 0 7px 2px;
    color: #6f88a0;
    font-size: 6.4px;
    line-height: 1.18;
  }
  .desktop-reference-card b {
    margin: auto 7px 6px;
    color: #1769b2;
    font-size: 6.5px;
    font-weight: 800;
  }

  .homepage-body > .footer {
    margin-top: 0 !important;
    background: #07529a !important;
    color: #fff !important;
  }
  .homepage-body > .footer::before {
    height: 3px;
    background: linear-gradient(90deg, #1260cc 0 34%, #ffd700 34% 66%, #ce1126 66%);
  }
  .homepage-body > .footer .footer-brand { padding: 7px 36px 4px !important; }
  .homepage-body > .footer .footer-brand-logo { font-size: 17px !important; }
  .homepage-body > .footer .footer-brand-sub,
  .homepage-body > .footer .footer-col-t,
  .homepage-body > .footer .footer-col-links a,
  .homepage-body > .footer .footer-bottom { color: #fff !important; }
  .homepage-body > .footer .footer-cols {
    grid-template-columns: repeat(5, 1fr) !important;
    padding: 5px 36px 0 !important;
  }
  .homepage-body > .footer .footer-col { padding: 0 18px 14px 0 !important; }
  .homepage-body > .footer .footer-col-t { margin-bottom: 5px !important; font-size: 8px !important; }
  .homepage-body > .footer .footer-col-links a { padding: 1px 0 !important; font-size: 8px !important; line-height: 1.15 !important; }
  .homepage-body > .footer .footer-bottom { padding: 5px 36px !important; font-size: 7px !important; border-top-color: rgba(255,255,255,.18) !important; }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .desktop-reference-topband__inner,
  .desktop-reference-content,
  .desktop-reference-hero__copy,
  .homepage-body .topbar { width: calc(100% - 36px); }
  .homepage-body .tb-logo { min-width: 188px; }
  .homepage-body .tb-desktop-quick-nav a { padding: 0 7px; font-size: 9px !important; }
  .desktop-reference-services strong { font-size: 8px; }
  .desktop-reference-services small { font-size: 5.5px; }
  .desktop-reference-card-grid { gap: 4px; }
}