/* =========================================================
SAVAGE CONFLICTS - FEATURES PAGE
Dark Medieval Scroll Feature Cards
Author: Gwezie
========================================================= */

:root {
  --ink: #f9eac8;
  --brown-light: #7c5731;
  --brown-dark: #301c10;
  --brown-deep: #1b1007;
  --gold: #d8b267;
  --gold-bright: #ffe6ac;
}

/* PAGE BACKGROUND */
body.features-page {
  background:
    radial-gradient(900px 500px at 30% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 700px at 100% 100%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(#1a1410, #0c0906);
  font-family: "Cinzel", Georgia, serif;
  color: var(--ink);
}

/* PAGE STRUCTURE */
.features-container {
  max-width: 1200px;
  margin: 4rem auto 5rem;
  padding: 0 24px;
}

.page-title {
  text-align:center;
  font-size:56px;
  margin-bottom:10px;

  font-family: "Cinzel", serif;

  background:linear-gradient(180deg,#ffd776,#b48a2e);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:0 0 14px rgba(255,215,120,.35);
}

.page-subtitle {
  text-align: center;
  font-size: 1.18rem;
  margin-bottom: 3.5rem;
  color: #e9d4b0;
  opacity: .9;
}

/* GRID */
.sc-feature-grid {
  display: grid;
  gap: 2.2rem;
}

@media(min-width: 700px) { 
  .sc-feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(min-width: 1100px) { 
  .sc-feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   FEATURE CARD
========================================================= */
.sc-feature-card {
  position: relative;
  padding: 1.8rem 1.6rem 2.2rem;
  border-radius: 12px;

  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,.4), transparent 65%),
    linear-gradient(#3e2818, #26170d, #1a0f08);

  border: 2px solid #6c4a24;

  box-shadow:
    0 18px 35px rgba(0,0,0,.45),
    inset 0 0 15px rgba(0,0,0,.5),
    inset 0 0 45px rgba(80,60,35,.35);

  transition: transform .25s ease, 
             box-shadow .25s ease, 
             filter .25s ease;
}

/* Hover */
.sc-feature-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 42px rgba(0,0,0,.6),
    0 0 25px rgba(255,215,140,.25),
    inset 0 0 25px rgba(255,255,255,.15);
  filter: brightness(1.07) contrast(1.07);
}

/* SCROLL BANDS */
.sc-feature-card::before,
.sc-feature-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 26px;
  background: linear-gradient(
    to right,
    rgba(60,40,20,.7),
    rgba(255,240,200,.25),
    rgba(60,40,20,.7)
  );
  border-radius: 50px;
  opacity: .45;
  filter: blur(1.3px);
}

.sc-feature-card::before { top: -22px; }
.sc-feature-card::after {
  bottom: -22px;
  transform: rotate(180deg);
}

/* TEXT */
.sc-feature-card h3 {
  margin: 0 0 .6rem;
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--gold-bright);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.sc-feature-card h3::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: .45rem;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-bright),
    var(--gold),
    transparent
  );
  opacity: .95;
  border-radius: 2px;
}

.sc-feature-card p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.62;
  color: #f0e2c8;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}


/* =========================================================
   ⭐ FIX: CENTER THE LAST CARD ON DESKTOP
========================================================= */
@media (min-width:1100px) {
  .sc-feature-grid > article:last-child {
    grid-column: 2;
  }
}