/* =========================================================
   SERVICES — 8 CARDS / 4 × 2
   ========================================================= */

.mega-menu[data-mega="services"] .services-mega-grid {
  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(2,minmax(96px,1fr)) !important;

  gap:
    12px !important;
}


.mega-menu[data-mega="services"] .services-mega-grid > a {
  min-height:
    96px !important;

  padding:
    14px !important;

  align-items:
    center !important;
}


.mega-menu[data-mega="services"] .services-mega-grid b {
  font-size:
    12px !important;
}


.mega-menu[data-mega="services"] .services-mega-grid small {
  font-size:
    9px !important;

  line-height:
    1.45 !important;
}



/* =========================================================
   FLAG STATES — 16 REGISTRIES
   ========================================================= */

.mega-menu[data-mega="flags"] .registry-mega-layout {
  grid-template-columns:
    310px minmax(0,1fr) !important;

  gap:
    34px !important;

  align-items:
    stretch !important;

  padding-top:
    26px !important;

  padding-bottom:
    26px !important;
}


.mega-menu[data-mega="flags"] .registry-mega-intro {
  min-height:
    254px !important;
}


.mega-menu[data-mega="flags"] .registry-mega-intro h3 {
  font-size:
    30px !important;

  line-height:
    1.02 !important;
}


.mega-menu[data-mega="flags"] .registry-mega-intro p {
  font-size:
    11.5px !important;

  line-height:
    1.55 !important;
}



/* 4 × 4 registry layout */
.mega-menu[data-mega="flags"] .registry-mega-grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(4,1fr) !important;

  gap:
    9px 10px !important;

  align-self:
    stretch !important;
}



/* compact flag cards */
.mega-menu[data-mega="flags"] .registry-mega-grid > a {
  min-width:
    0 !important;

  min-height:
    55px !important;

  padding:
    8px 10px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    10px !important;

  border:
    1px solid rgba(12,114,160,.13) !important;

  border-radius:
    7px !important;

  background:
    rgba(255,255,255,.91) !important;

  overflow:
    hidden !important;

  transition:
    transform .27s cubic-bezier(.22,1,.36,1),
    background .27s ease,
    border-color .27s ease,
    box-shadow .27s ease !important;
}



/* real vector flags */
.mega-menu[data-mega="flags"] .registry-mega-grid .flag-mini > i {
  width:
    42px !important;

  height:
    29px !important;

  flex:
    0 0 42px !important;

  display:
    block !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border:
    1px solid rgba(10,89,128,.15) !important;

  border-radius:
    4px !important;

  background:
    #fff !important;

  box-shadow:
    0 2px 6px rgba(5,48,70,.07) !important;
}


.mega-menu[data-mega="flags"] .registry-mega-grid .flag-mini > i img {
  width:
    100% !important;

  height:
    100% !important;

  display:
    block !important;

  object-fit:
    cover !important;
}



/* flag name */
.mega-menu[data-mega="flags"] .registry-mega-grid .flag-mini b {
  color:
    #0a2638 !important;

  font-size:
    10.5px !important;

  line-height:
    1.22 !important;

  font-weight:
    800 !important;
}



/* inverted hover */
.mega-menu[data-mega="flags"] .registry-mega-grid > a:hover {
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(71,205,239,.46) !important;

  background:
    linear-gradient(
      145deg,
      #073651 0%,
      #075479 58%,
      #086b91 100%
    ) !important;

  box-shadow:
    0 11px 22px rgba(4,67,97,.12) !important;
}


.mega-menu[data-mega="flags"] .registry-mega-grid > a:hover b {
  color:
    #ffffff !important;
}


.mega-menu[data-mega="flags"] .registry-mega-grid > a:hover i {
  border-color:
    rgba(131,231,251,.68) !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1400px) {

  .mega-menu[data-mega="services"] .services-mega-grid {
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }


  .mega-menu[data-mega="flags"] .registry-mega-grid {
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }

}


@media (max-width: 1120px) {

  .mega-menu[data-mega="services"] .services-mega-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    grid-template-rows:
      auto !important;
  }


  .mega-menu[data-mega="flags"] .registry-mega-grid {
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    grid-template-rows:
      auto !important;
  }

}