/* =========================================================
   SERVICES MEGA MENU V6
   7 services — 4 top + 3 centred below
   ========================================================= */


/* Use an 8-column internal grid so second row can center */
.mega-menu[data-mega="services"] .services-mega-grid {
  display: grid !important;

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

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

  gap:
    12px !important;

  min-height:
    300px !important;

  align-self:
    stretch !important;
}


/* ---------------------------------------------------------
   TOP ROW — 4 equal cards
   --------------------------------------------------------- */

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(1) {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(2) {
  grid-column: 3 / span 2 !important;
  grid-row: 1 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(3) {
  grid-column: 5 / span 2 !important;
  grid-row: 1 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(4) {
  grid-column: 7 / span 2 !important;
  grid-row: 1 !important;
}


/* ---------------------------------------------------------
   SECOND ROW — 3 centered cards
   --------------------------------------------------------- */

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(5) {
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(6) {
  grid-column: 4 / span 2 !important;
  grid-row: 2 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(7) {
  grid-column: 6 / span 2 !important;
  grid-row: 2 !important;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

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

  padding:
    15px 14px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    12px !important;
}


/* ---------------------------------------------------------
   Vessel registration icon — proper centering
   --------------------------------------------------------- */

.mega-menu[data-mega="services"]
.services-mega-grid
a[href="/vessel-registration.html"]
.mega-icon {
  display:
    grid !important;

  place-items:
    center !important;
}


.mega-menu[data-mega="services"]
.services-mega-grid
a[href="/vessel-registration.html"]
.mega-icon svg {
  width:
    20px !important;

  height:
    20px !important;

  display:
    block !important;

  margin:
    0 !important;

  transform:
    none !important;
}


/* ---------------------------------------------------------
   Typography stays readable but not congested
   --------------------------------------------------------- */

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

  line-height:
    1.2 !important;

  font-weight:
    800 !important;
}


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

  line-height:
    1.4 !important;

  display:
    -webkit-box !important;

  -webkit-line-clamp:
    2 !important;

  -webkit-box-orient:
    vertical !important;

  overflow:
    hidden !important;
}


/* ---------------------------------------------------------
   Left panel exactly matches right grid height
   --------------------------------------------------------- */

.mega-menu[data-mega="services"] .services-mega-layout {
  align-items:
    stretch !important;
}


.mega-menu[data-mega="services"] .services-mega-intro {
  min-height:
    300px !important;

  height:
    auto !important;

  align-self:
    stretch !important;
}


/* ---------------------------------------------------------
   Medium desktop fallback
   --------------------------------------------------------- */

@media (max-width: 1200px) {

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

    grid-template-rows:
      auto !important;

    min-height:
      auto !important;
  }


  .mega-menu[data-mega="services"] .services-mega-grid > a {
    grid-column:
      auto !important;

    grid-row:
      auto !important;

    min-height:
      90px !important;
  }

}


/* ==========================================================
   DESCENDER FIX — REGISTRATION / MANNING / LICENSING / TRAINING
   Prevent letters like g, y, p from being cut at the bottom
   ========================================================== */
@media (min-width: 1101px){

  .services-mega-v2 a,
  .services-mega-v2 a span,
  .services-mega-v2 .mega-card,
  .services-mega-v2 .mega-card span,
  .services-menu-v6 a,
  .services-menu-v6 a span,
  .services-menu-v6 .mega-card,
  .services-menu-v6 .mega-card span,
  .services-rail a,
  .services-rail a span,
  .services-strip a,
  .services-strip a span,
  .services-tabs a,
  .services-tabs a span {
    line-height: 1.35 !important;
    padding-bottom: 2px !important;
    overflow: visible !important;
  }

  .services-mega-v2 a,
  .services-menu-v6 a,
  .services-rail a,
  .services-strip a,
  .services-tabs a {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }

  .services-mega-v2 svg,
  .services-menu-v6 svg,
  .services-rail svg,
  .services-strip svg,
  .services-tabs svg {
    flex-shrink: 0 !important;
  }
}