/* =========================================================
   SMA Al-Qona'ah — modern refresh v2 (2026-09-17)
   Appearance only. No markup or functionality changed.
   Revert = delete sma-visual-refresh.php + the sma-theme folder.
   NOTE: never set height on .splide__track/__list/__slide —
   Splide computes its transform from those.
   ========================================================= */

:root{
  --g:#1f8a4c;            /* deeper, richer green */
  --g-dark:#15653a;
  --g-soft:#eef7f1;
  --ink:#16202a;
  --muted:#5d6b7a;
  --line:#e8edf1;
  --page:#f6f8f9;         /* soft page background so white cards pop */
  --r:16px;
  --sh:0 1px 2px rgba(16,32,24,.05), 0 8px 24px rgba(16,32,24,.08);
  --sh-lg:0 8px 20px rgba(16,32,24,.10), 0 24px 48px rgba(16,32,24,.10);
}

/* ---------- page canvas ---------- */
body{ background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased; }
.site_content{ background:transparent; }

/* ---------- HERO ---------- */
.homeslide{ max-height:clamp(300px,44vw,560px); overflow:hidden; position:relative; }
.homeslide img{
  height:clamp(300px,44vw,560px) !important;
  width:100% !important;
  object-fit:cover !important;
  object-position:center 32%;
  border-radius:0 !important;
}
/* subtle depth at the bottom of the hero */
.homeslide::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.28));
  pointer-events:none; z-index:2;
}

/* ---------- school title bar ---------- */
.mad__school{
  background:#fff !important;
  border-radius:var(--r);
  box-shadow:var(--sh);
  margin:22px auto 14px;
  padding:22px 26px !important;
}
.mad__school h1,.mad__school h2,.mad__school a{ color:var(--g) !important; font-weight:800 !important; }

/* ---------- ticker ---------- */
.mad_ticker{ border-radius:12px; overflow:hidden; box-shadow:var(--sh); margin-bottom:26px; }

/* ---------- SECTION HEADINGS: bigger, with an accent bar ---------- */
.site_content h2,
.four_block_post h2,
.mading_quotes h2,
.mading_guru h2,
.home_videos h2{
  font-size:clamp(19px,2vw,26px) !important;
  font-weight:800 !important;
  color:var(--ink) !important;
  letter-spacing:-.02em;
  padding-bottom:10px;
  margin-bottom:18px !important;
  position:relative;
}
.site_content h2::after,
.four_block_post h2::after,
.home_videos h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:4px; border-radius:99px;
  background:linear-gradient(90deg,var(--g),#5cc98a);
}
.mading_quotes h2::after, .mading_guru h2::after{ left:50%; transform:translateX(-50%); }

/* ---------- CARDS: white, rounded, real depth ---------- */
.news_editorial,
.four_block_post,
.mading_gallery,
.home_videos{
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:26px !important;
  margin-bottom:26px !important;
}

/* inner tiles */
.news_editorial a,
.four_block_post a{ border-radius:12px; }
.site_content [class*="__item"],
.site_content article{
  border-radius:12px; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.site_content [class*="__item"]:hover,
.site_content article:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }

/* photos: vivid, not washed out */
.site_content img:not(.homeslide img){
  border-radius:12px;
  filter:saturate(1.06) contrast(1.02);
}

/* ---------- Latest Agenda (parallax block) ---------- */
.parallax{
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sh);
  margin-bottom:26px !important;
}

/* ---------- gallery strip ---------- */
.mading_gallery img{ border-radius:12px; transition:transform .3s ease; }
.mading_gallery img:hover{ transform:scale(1.03); }

/* ---------- quotes ---------- */
.mading_quotes{
  border-radius:var(--r);
  box-shadow:var(--sh);
  margin-bottom:26px !important;
  background:linear-gradient(135deg,var(--g),#2fae66) !important;
  /* the theme gives this block a fixed height; give the quote room so it
     is not clipped mid-sentence */
  height:auto !important;
  min-height:0 !important;
  padding:34px 24px 40px !important;
  overflow:visible !important;
  display:flex; flex-direction:column; justify-content:center;
}
.mading_quotes > *{ height:auto !important; overflow:visible !important; }
.mading_quotes *{ color:#fff !important; }
.mading_quotes p{ font-size:clamp(16px,1.6vw,21px); line-height:1.8; }

/* ---------- buttons ---------- */
.site_content a[class*="read"],
.site_content .btn, a.mad__btn{
  display:inline-block;
  border-radius:999px !important;
  padding:.6em 1.4em !important;
  font-weight:700 !important;
  background:var(--g) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(31,138,76,.25);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.site_content a[class*="read"]:hover,
.site_content .btn:hover, a.mad__btn:hover{
  background:var(--g-dark) !important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(31,138,76,.35);
}

/* ---------- navigation ---------- */
.mad__header{ background:#fff; box-shadow:0 1px 0 var(--line); }
.mad__nav a{ font-weight:600; transition:color .18s ease; }
.mad__nav a:hover{ color:var(--g) !important; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ letter-spacing:-.015em; line-height:1.3; }
h3{ font-weight:700; }
p{ line-height:1.75; color:var(--muted); }

/* ---------- video thumbnails ---------- */
.home_videos .sma-yt{ border-radius:12px; box-shadow:var(--sh); transition:transform .25s ease; }
.home_videos .sma-yt:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }

/* ---------- mobile ---------- */
@media (max-width:768px){
  .homeslide, .homeslide img{ height:clamp(200px,52vw,320px) !important; max-height:clamp(200px,52vw,320px) !important; }
  .news_editorial,.four_block_post,.mading_gallery,.home_videos{ padding:18px !important; margin-bottom:18px !important; }
  .mad__school{ padding:18px !important; text-align:center; }
  h1{ font-size:clamp(20px,5.5vw,28px) !important; }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }