/* 40-services.css — extracted from main.css */

/* ========== SERVICES (clean) ========== */
.section.services{
  padding:64px 0 80px;
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(30,115,190,.06), transparent 60%),
    radial-gradient(900px 520px at 92% 110%, rgba(15,26,43,.05), transparent 60%),
    #f7fbff;
}

/* ---------- Grid (desktop defaults) ---------- */
.svc-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(4,minmax(0,1fr)); /* 4 wide */
}
@media (max-width:1200px){
  .svc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* 3 wide */
}

/* ---------- Card base ---------- */
.svc-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(12,36,97,.06);
  border-radius:20px;
  padding:22px 22px 18px;
  box-shadow:0 14px 34px rgba(10,30,60,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .18s ease, box-shadow .18s ease;
  cursor:pointer;
  overflow:visible;         /* allows floating dropdown */
}
.svc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(10,30,60,.12);
}
.svc-card.active{ z-index:2; }

/* Header area */
.svc-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding-top:12px;
  text-align:center;
}
.svc-card h3{
  margin:0;
  color:#0b214a;
  letter-spacing:.2px;
  font-weight:800;
}

/* Icon badge */
.svc-icon{
  width:72px; height:72px; border-radius:18px;
  display:grid; place-items:center;
  background:rgba(30,115,190,.08);
  box-shadow:inset 0 0 0 1px rgba(30,115,190,.18), 0 6px 16px rgba(10,30,60,.08);
  margin-bottom:4px;
}
.svc-icon svg{ width:40px; height:40px; }

/* Details content (list + link) */
.svc-details ul{ margin:0 0 8px; padding-left:18px; color:#23324a; }
.svc-details li{ margin:4px 0; }
.svc-link{
  display:inline-block; margin-top:8px;
  color:#1e73be; font-weight:700; text-decoration:none;
}
.svc-link:hover{ text-decoration:underline; }

/* ---------- Desktop behavior: floating dropdown (no row stretch) ---------- */
@media (min-width:981px){
  .svc-grid{ row-gap:40px; }

  /* Base dropdown (no direction yet) */
  .svc-details{
    position:absolute;
    left:12px;
    right:12px;
    background:#fff;
    border:1px solid rgba(12,36,97,.08);
    border-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.16);
    padding:14px 16px;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }

  /* When JS says "open downward" */
  .svc-card.open-down .svc-details{
    top:calc(100% - 10px);
    bottom:auto;
    transform:translateY(8px);
  }

  /* When JS says "open upward" */
  .svc-card.open-up .svc-details{
    bottom:calc(100% - 10px);
    top:auto;
    transform:translateY(-8px);
  }

  /* Visible state */
  .svc-card.active .svc-details{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  /* Caret base */
  .svc-card::after{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    background:#fff;
    border-left:1px solid rgba(12,36,97,.08);
    border-top:1px solid rgba(12,36,97,.08);
    box-shadow:-3px -3px 8px rgba(0,0,0,.06);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }

  /* Caret when opening downward (like now) */
  .svc-card.active.open-down::after{
    top:calc(100% - 10px);
    left:40px;
    transform:rotate(45deg);
    opacity:1;
  }

  /* Caret when opening upward */
  .svc-card.active.open-up::after{
    bottom:calc(100% - 10px);
    left:40px;
    transform:rotate(225deg); /* points down towards the card */
    opacity:1;
  }
}


/* ---------- Mobile & tablet (≤980px): 2 per row, no row stretch ---------- */
@media (max-width:980px){
  /* Force flex layout so we can do two-per-row reliably */
  .svc-grid{
    display:flex !important;
    flex-wrap:wrap;
    gap:18px;
    justify-content:center;
    align-items:flex-start;
  }

  /* Two per row */
  .svc-card{
    flex:0 1 calc(50% - 9px);
    width:auto;
    max-width:none;
    min-width:160px;                 /* keeps cards from getting too narrow */
    position:relative;
  }

  /* Floating details below the card (doesn't push neighbour) */
  .svc-details{
    position:absolute;
    top:100%; left:0; right:0;
    background:#fff;
    border:1px solid rgba(12,36,97,.10);
    border-radius:14px;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
    padding:12px 16px;
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:10;
  }
  .svc-card.active .svc-details{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }

  /* Optional: subtle lift and caret */
  .svc-card.active{ z-index:20; transform:translateY(-2px); }
  .svc-card.active::after{
    content:""; position:absolute; top:calc(100% - 8px); left:40px;
    width:10px; height:10px; background:#fff;
    border-left:1px solid rgba(12,36,97,.10);
    border-top:1px solid rgba(12,36,97,.10);
    transform:rotate(45deg);
    box-shadow:-2px -2px 6px rgba(0,0,0,.05);
    z-index:5;
  }
}

/* NOTE: Do NOT add a ≤560px rule that sets .svc-card { width:100% } 
   if you want to keep 2 per row on the smallest phones. */

/* Uniform header layout: icon row + title row */
.svc-head{
  display: grid;
  grid-template-rows: 72px auto;   /* row 1 = icon, row 2 = title */
  row-gap: 12px;
  align-items: center;
  justify-items: center;
}

/* Title: reserve space for up to 2 lines so all cards match height */
.svc-head h3{
  line-height: 1.25;
  min-height: 2.6em;               /* ≈ space for 2 lines at 1.3em */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.svc-details{
  max-height: none !important;
  overflow: visible !important;
}

/* ===== Services modal (mobile/tablet only) ===== */
@media (max-width: 980px){
  .svc-modal-backdrop{
    position: fixed; inset: 0;
    background: rgba(3,8,20,.55);
    backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 10050;
  }
  .svc-modal-backdrop.is-open{
    opacity: 1; pointer-events: auto;
  }

  .svc-modal{
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    z-index: 10051;
  }
  .svc-modal.is-open{ display: flex; }

  .svc-dialog{
    width: min(92vw, 520px);
    border-radius: 16px;
    background: linear-gradient(180deg, #f7faff, #ffffff);
    border: 1px solid rgba(12,36,97,.08);
    box-shadow: 0 18px 48px rgba(0,0,0,.25);
    overflow: hidden;
    transform: translateY(10px);
    transition: transform .22s ease;
  }
  .svc-modal.is-open .svc-dialog{ transform: translateY(0); }

  .svc-dialog__head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: #1e73be; color: #fff; font-weight: 700;
  }
  .svc-dialog__title{ margin: 0; font-size: 1rem; letter-spacing: .2px; }
  .svc-dialog__close{
    all: unset; cursor: pointer; color: #fff; font-size: 22px;
    padding: 6px 8px; border-radius: 8px;
  }
  .svc-dialog__close:hover{ background: rgba(255,255,255,.12); }

  .svc-dialog__body{
    padding: 14px 18px;
    color: #23324a;
  }
  .svc-dialog__body ul{ margin: 6px 0 0; padding-left: 18px; }
  .svc-dialog__body li{ margin: 6px 0; }
}


/* Keep the dropdowns above the next section */
.section.services {
  position: relative;
  isolation: isolate;   /* new stacking context */
  z-index: 1;
  overflow: visible;
}