/* ==========================================================
   SERVICES PAGE
   Megan James Hair
   Luxury Card Layout
========================================================== */

/* =========================
   ROOT
========================= */

:root{
  --bg:#000;
  --text:#c0c0c0;

  --gold:#c09745;
  --gold-hover:#d6b067;

  --card-bg:linear-gradient(145deg,#0a0b0d,#13161c);
  --card-border:rgba(255,255,255,.08);

  --radius:14px;
  --transition:.28s ease;
}

/* =========================
   BASE
========================= */

body{
  background:var(--bg);
  color:var(--text);
}

/* wrapper (optional if used elsewhere) */

.site-wrapper{
  width:min(92%,1200px);
  margin:auto;
  padding-top:110px;
}

/* =========================
   INTRO
========================= */

.services-page{
  max-width:1100px;
  margin:120px auto 60px;
  padding:0 20px;
}

.services-intro{
  text-align:center;
  margin-bottom:42px;
}

.services-intro h1{
  color:#e8e8e8;
  font-size:2.2rem;
  margin-bottom:12px;
}

.services-intro p{
  max-width:720px;
  margin:auto;
  line-height:1.7;
  color:var(--color-text);
}

/* =========================
   GRID
========================= */

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
/* =====Services Category Headers===== */
.services-category {
  grid-column: 1 / -1;
  margin: 3rem 0 1rem;
}

.services-category:first-child {
  margin-top: 0;
}

.services-category h2 {
  font-size: 2rem;
  color: var(--color-accent);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: .5rem;
  margin: 0;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* =========================
   CARD
========================= */

.service-card{

  /* default accent */

  --accent:var(--gold);

  position:relative;
  overflow:hidden;

  padding:22px;

  border-radius:var(--radius);

  border: 1px solid rgba(255,255,255,.08);

  background:var(--card-bg);

  box-shadow:
      0 8px 30px rgba(0,0,0,.45);

  transition:
      transform var(--transition),
      border-color var(--transition),
      box-shadow var(--transition);
}

/* glow */

.service-card::before{

  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb,var(--accent) 70%,transparent),
      transparent 65%
    );

  opacity:.38;

  transition:opacity var(--transition);

  pointer-events:none;
}

/* top accent line */

.service-card::after{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:2px;

  background:var(--accent);

  opacity:.75;
}

/* hover */

.service-card:hover{
  transform: translateY(-6px);

  border-color: var(--gold);

  box-shadow:
      0 12px 36px rgba(0,0,0,.6),
      0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent);
}

.service-card:hover::before{
  opacity:.62;
}

.service-card:active{
  transform:translateY(-2px);

  border: 1px solid var(--color-accent);

  box-shadow:
      0 12px 36px rgba(0,0,0,.6),
      0 0 0 1px rgba(192,151,69,.25);
}

/* =========================
   TYPOGRAPHY
========================= */

.service-card h2{

  margin:0 0 10px;

  color:var(--accent);

  font-size:1.3rem;

  font-weight:600;
}

.service-card p{

  margin-bottom:14px;

  line-height:1.65;

  color:rgba(255,255,255,.75);
}

.service-card ul{

  margin:0 0 16px;

  padding:0;

  list-style:none;
}

.service-card li{

  position:relative;

  padding-left:18px;

  margin-bottom:7px;

  color:rgba(255,255,255,.68);

  line-height:1.45;
}

.service-card li::before{

  content:"•";

  position:absolute;

  left:0;

  color:var(--accent);

  font-size:1rem;
}

/* =========================
   LINKS
========================= */

.service-card a{

  display:inline-block;

  color:var(--accent);

  text-decoration:none;

  font-weight:600;

  letter-spacing:.4px;

  transition:
      color var(--transition),
      transform var(--transition);
}

.service-card a:hover{

  color:#fff;

  transform:translateX(4px);
}

/* =========================
   ACCENTS
========================= */

.accent-gold{
  --accent:#c09745;
}

.accent-blue{
  --accent:#439cf5;
}

.accent-teal{
  --accent:#0badc0;
}

.accent-fuschia{
  --accent:#a82fc9;
}

.accent-rose { 
  --accent:#d98ca6; }
  
.accent-emerald { 
  --accent:#08cb76; }

.accent-yellow { 
  --accent:#f0d84f; }

/* =========================
   FOOTER
========================= */

.site-footer{

  margin-top:60px;

  padding:40px 10px;

  background:#000;

  color:var(--text);
}

.footer-inner{

  display:flex;

  flex-wrap:wrap;

  justify-content:space-between;

  gap:20px;

  max-width:1200px;

  margin:auto;
}

.footer-col{

  flex:1 1 220px;

  text-align:center;
}

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

  .services-intro h1{
    font-size:2rem;
  }

  .service-card{
    padding:20px;
  }

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

  .site-wrapper{
    width:95%;
    padding-top:95px;
  }

  .services-page{
    margin-top:100px;
  }

  .services-intro h1{
    font-size:1.7rem;
  }

  .service-card{
    padding:18px;
  }

  .service-card h2{
    font-size:1.15rem;
  }

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width:480px){

  .services-intro h1{
    font-size:1.45rem;
  }

  .service-card p,
  .service-card li{
    font-size:.88rem;
  }

}