/*
 Theme Name: Astra Child
 Template: astra
 Author: NeoByte
 Description: Child Theme for Astra
 Version: 1.0.0
 Text Domain: astra-child
*/

/* ΕΔΩ μέσα θα βάζεις ΟΛΟ το custom CSS */


/* ==========================================================================
   NeoByte Services — same modern look, but site-like colors + NO section BG
   ========================================================================== */

.neobyte-services{
  /* no background εδώ επίτηδες */
  padding: clamp(52px, 5vw, 84px) 0;
}

.neobyte-services__inner{
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* HEADER */
.neobyte-services__header{
  text-align: center;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

.neobyte-services .ns-subtitle{
  margin: 0 0 10px;
  color: #d94a8a;               /* site pink */
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 700;
  font-size: 12px;
}

.neobyte-services .ns-title{
  margin: 0;
  color: #1a1a1a;               /* near-black */
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  font-family: Georgia, "Times New Roman", Times, serif; /* editorial-ish */
}

/* GRID -> one “white panel” container (like screenshot) */
.neobyte-services__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.8vw, 22px);

  background: #ffffff;          /* panel */
  border: 1px solid #f2d6df;    /* soft pink border */
  border-radius: 22px;
  padding: clamp(22px, 3vw, 38px);

  box-shadow: 0 18px 55px rgba(20, 10, 15, .08);
  position: relative;
  overflow: hidden;
}

/* subtle inner sheen (not a BG, just a tiny highlight inside the panel) */
.neobyte-services__grid::before{
  content:"";
  position:absolute;
  inset: -60px -80px auto -80px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%,
    rgba(217,74,138,.10),
    rgba(217,74,138,0) 70%);
  pointer-events:none;
  filter: blur(2px);
}

/* CARD */
.neobyte-services .ns-card{
  grid-column: span 4;
  position: relative;
  border-radius: 18px;
  padding: 18px 18px 16px;

  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border: 1px solid rgba(242,214,223,.75);
  box-shadow: 0 10px 26px rgba(20, 10, 15, .06);

  transition:
    transform .55s cubic-bezier(.2,.9,.2,1),
    box-shadow .55s cubic-bezier(.2,.9,.2,1),
    border-color .55s cubic-bezier(.2,.9,.2,1),
    background .55s cubic-bezier(.2,.9,.2,1);
  overflow: hidden;
}

/* gradient ring (very subtle, site colors) */
.neobyte-services .ns-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(217,74,138,.22),
    rgba(255,255,255,.85),
    rgba(217,74,138,.12)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .65;
  pointer-events:none;
}

/* soft shine sweep on hover */
.neobyte-services .ns-card{
  --ns-shine-x: -60%;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    linear-gradient(115deg,
      transparent 0%,
      rgba(217,74,138,.06) 35%,
      rgba(217,74,138,.12) 45%,
      rgba(217,74,138,.06) 55%,
      transparent 70%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, var(--ns-shine-x) 0;
  transition:
    transform .55s cubic-bezier(.2,.9,.2,1),
    box-shadow .55s cubic-bezier(.2,.9,.2,1),
    border-color .55s cubic-bezier(.2,.9,.2,1),
    background-position .85s cubic-bezier(.2,.9,.2,1);
}

/* NUMBER -> keep your 01/02/03 but style like “badge” */
.neobyte-services .ns-card__number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;

  background: rgba(217,74,138,.10);
  color: #d94a8a;
  border: 1px solid rgba(217,74,138,.18);

  font-weight: 800;
  letter-spacing: .10em;
  font-size: 12px;

  margin-bottom: 14px;
}

/* Title/desc */
.neobyte-services .ns-card__title{
  margin: 0 0 10px;
  color: #1a1a1a;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 650;
}

.neobyte-services .ns-card__desc{
  margin: 0 0 16px;
  color: #5b5b5b;
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 46ch;
}

/* CTA */
.neobyte-services .ns-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  color: #d94a8a;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;

  padding: 6px 0;
  opacity: .92;
  transition: transform .35s cubic-bezier(.2,.9,.2,1), opacity .35s cubic-bezier(.2,.9,.2,1);
}

.neobyte-services .ns-card__cta::after{
  content:"→";
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
}

/* Hover */
.neobyte-services .ns-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 48px rgba(20, 10, 15, .10);
  border-color: rgba(217,74,138,.28);
  --ns-shine-x: 130%;
}

.neobyte-services .ns-card:hover .ns-card__cta{
  transform: translateY(-1px);
  opacity: 1;
}

.neobyte-services .ns-card:hover .ns-card__cta::after{
  transform: translateX(4px);
}

/* Entrance animation (subtle) */
@media (prefers-reduced-motion: no-preference){
  .neobyte-services .ns-card{
    opacity: 0;
    transform: translateY(10px);
    animation: ns-soft-in .75s cubic-bezier(.2,.9,.2,1) both;
  }
  .neobyte-services .ns-card:nth-child(1){ animation-delay: .06s; }
  .neobyte-services .ns-card:nth-child(2){ animation-delay: .14s; }
  .neobyte-services .ns-card:nth-child(3){ animation-delay: .22s; }
}

@keyframes ns-soft-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 980px){
  .neobyte-services .ns-card{ grid-column: span 6; }
}

@media (max-width: 640px){
  .neobyte-services__inner{ width: min(1120px, calc(100% - 28px)); }
  .neobyte-services__grid{ padding: 20px; }
  .neobyte-services .ns-card{ grid-column: span 12; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .neobyte-services .ns-card{
    animation: none !important;
    transition: none !important;
  }
}