/* Halaman dalam — Profil, Pendaftaran, Berita, Arsip, Artikel */

.pp3-menu a.is-current { background: var(--pp3-green-100); color: var(--pp3-green-800); }
.pp3-back { display: none; }
.pp3-wrap-narrow { max-width: 820px; }
.pp3-section-tight { padding: 56px 0; }

.pp3-btn-green { background: var(--pp3-green-700); color: #fff !important; box-shadow: 0 8px 20px rgba(11, 77, 50, .25); }
.pp3-btn-green:hover { background: var(--pp3-green-800); }
.pp3-btn-outline { border: 1.5px solid var(--pp3-line); color: var(--pp3-green-800) !important; background: #fff; }
.pp3-btn-outline:hover { border-color: var(--pp3-green-600); }

/* Unit pendidikan: 5 jenjang (TK, SMP, SMA, SMK, Salafiyah) */
@media (min-width: 1025px) {
  .pp3-units { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .pp3-units .pp3-unit-body { padding: 30px 18px 20px; }
  .pp3-units .pp3-unit-body h3 { font-size: 17px; }
}
.pp3-unit-img.is-placeholder { display: grid; place-items: center; color: var(--pp3-gold); }
.pp3-unit-img.is-placeholder > .pp3-ico { width: 64px; height: 64px; stroke-width: 1.4; }

/* ---------- Banner judul ---------- */
.pp3-pagehero { padding: 64px 0 72px; color: #fff; }
.pp3-pagehero .pp3-eyebrow { color: var(--pp3-gold-soft); }
.pp3-pagehero h1 { max-width: 780px; font-size: clamp(30px, 4.4vw, 50px); }
.pp3-pagehero p { max-width: 640px; margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, .8); }
.pp3-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.pp3-crumbs a:hover { color: var(--pp3-gold-soft); }
.pp3-crumbs a:last-child, .pp3-crumbs span:last-child { color: #fff; }

/* ---------- Profil ---------- */
.pp3-vm { max-width: 860px; margin: 0 auto; text-align: center; color: #fff; }
.pp3-vm .pp3-eyebrow { color: var(--pp3-gold-soft); }
.pp3-vm .pp3-arabic { font-size: 34px; margin-bottom: 4px; }
.pp3-vm blockquote { margin: 8px 0 0; font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.4; }

.pp3-timeline { position: relative; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.pp3-timeline::before { content: ""; position: absolute; left: 47px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--pp3-gold), var(--pp3-green-600)); }
.pp3-timeline li { position: relative; display: flex; gap: 28px; padding-bottom: 32px; }
.pp3-tl-year { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 96px; height: 44px; border-radius: 999px; background: var(--pp3-green-800); color: var(--pp3-gold-soft); font-weight: 800; box-shadow: 0 0 0 6px #fff; }
.pp3-tl-body { padding: 20px 24px; flex: 1; border-radius: 16px; background: var(--pp3-cream); }
.pp3-tl-body h3 { font-size: 18px; color: var(--pp3-green-900); margin-bottom: 6px; }
.pp3-tl-body p { color: var(--pp3-muted); font-size: 15px; }

.pp3-award { display: flex; align-items: center; gap: 24px; max-width: 760px; margin: 16px auto 0; padding: 28px 32px; border-radius: 22px; background: linear-gradient(135deg, #fff8e3, #f6e7b8); border: 1px solid #ecd58f; }
.pp3-award-ico { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--pp3-gold); color: var(--pp3-green-900); }
.pp3-award-ico .pp3-ico { width: 36px; height: 36px; }
.pp3-award span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a6a10; }
.pp3-award strong { display: block; margin: 2px 0 6px; font-size: 21px; color: var(--pp3-green-900); line-height: 1.3; }
.pp3-award p { font-size: 15px; color: #5b5030; }

.pp3-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pp3-feature { padding: 32px 28px; border-radius: var(--pp3-radius); background: #fff; box-shadow: var(--pp3-shadow); }
.pp3-feature-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; background: var(--pp3-green-100); color: var(--pp3-green-700); flex: none; }
.pp3-feature-ico .pp3-ico { width: 28px; height: 28px; }
.pp3-feature h3 { font-size: 19px; color: var(--pp3-green-900); margin-bottom: 8px; }
.pp3-feature p { font-size: 15px; color: var(--pp3-muted); }

.pp3-facilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pp3-facility { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--pp3-line); border-radius: 16px; transition: border-color .2s, box-shadow .2s; }
.pp3-facility:hover { border-color: var(--pp3-green-600); box-shadow: var(--pp3-shadow); }
.pp3-facility > span { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--pp3-green-800); color: var(--pp3-gold-soft); }
.pp3-facility .pp3-ico { width: 26px; height: 26px; }
.pp3-facility strong { display: block; color: var(--pp3-green-900); }
.pp3-facility small { color: var(--pp3-muted); font-size: 14px; }

.pp3-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 48px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 95% 0%, rgba(212, 166, 42, .35), transparent 50%), linear-gradient(135deg, var(--pp3-green-700), var(--pp3-green-900)); }
.pp3-cta h2 { font-size: clamp(22px, 2.6vw, 30px); }
.pp3-cta p { margin-top: 8px; color: rgba(255, 255, 255, .8); }

/* ---------- Pendaftaran ---------- */
.pp3-quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -100px; position: relative; z-index: 2; }
.pp3-quicklinks a { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 18px; background: #fff; box-shadow: var(--pp3-shadow); transition: transform .2s; }
.pp3-quicklinks a:hover { transform: translateY(-4px); }
.pp3-quicklinks span { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--pp3-gold-soft); color: var(--pp3-green-900); }
.pp3-quicklinks .pp3-ico { width: 24px; height: 24px; }
.pp3-quicklinks strong { display: block; color: var(--pp3-green-900); }
.pp3-quicklinks small { color: var(--pp3-muted); font-size: 13px; }

.pp3-reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pp3-reg { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--pp3-shadow); }
.pp3-reg-img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0 !important; background: var(--pp3-green-100); }
.pp3-reg-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.pp3-reg-img:hover img { transform: scale(1.04); }
.pp3-reg-img span { position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: 10px; background: var(--pp3-gold); color: var(--pp3-green-900); font-weight: 800; font-size: 14px; }
.pp3-reg-body { display: flex; flex-direction: column; gap: 12px; padding: 22px; flex: 1; }
.pp3-reg-body h3 { font-size: 20px; color: var(--pp3-green-900); }
.pp3-reg-cs { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--pp3-cream); margin-bottom: 4px; }
.pp3-reg-cs > span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--pp3-green-100); color: var(--pp3-green-700); }
.pp3-reg-cs small { display: block; font-size: 12px; color: var(--pp3-muted); }
.pp3-reg-cs strong { display: block; font-size: 14px; line-height: 1.3; color: var(--pp3-green-900); }
.pp3-reg-cs a { font-size: 14px; font-weight: 600; color: var(--pp3-green-600); }
.pp3-reg-body .pp3-btn { justify-content: center; }
.pp3-reg-site { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pp3-green-700); }

.pp3-salafiah { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 24px 28px; border-radius: 20px; background: #fff; border: 1px dashed var(--pp3-green-600); }
.pp3-salafiah .pp3-feature-ico { margin: 0; }
.pp3-salafiah > div:nth-child(2) { flex: 1; }
.pp3-salafiah h3 { font-size: 18px; color: var(--pp3-green-900); }
.pp3-salafiah p { color: var(--pp3-muted); font-size: 15px; }

.pp3-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.pp3-steps li { position: relative; padding: 28px 22px; border-radius: 18px; border: 1px solid var(--pp3-line); }
.pp3-step-num { position: absolute; top: 18px; right: 20px; font-size: 40px; font-weight: 800; line-height: 1; color: var(--pp3-green-100); }
.pp3-steps h3 { font-size: 17px; color: var(--pp3-green-900); margin-bottom: 6px; }
.pp3-steps p { font-size: 14px; color: var(--pp3-muted); }

/* ---------- Berita & arsip ---------- */
.pp3-filter { display: flex; gap: 8px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.pp3-filter::-webkit-scrollbar { display: none; }
.pp3-filter a { flex: none; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--pp3-line); font-size: 14px; font-weight: 600; color: #34463d; white-space: nowrap; transition: all .2s; }
.pp3-filter a:hover, .pp3-filter a.is-active { background: var(--pp3-green-800); border-color: var(--pp3-green-800); color: #fff; }
.pp3-grid-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pp3-grid-news.is-prestasi .pp3-card { border-top: 4px solid var(--pp3-gold); }

.pp3-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.pp3-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--pp3-line); font-weight: 700; color: var(--pp3-green-800); }
.pp3-pagination .page-numbers.current { background: var(--pp3-green-800); border-color: var(--pp3-green-800); color: #fff; }
.pp3-pagination a.page-numbers:hover { border-color: var(--pp3-green-600); }

.pp3-prestasi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -110px; position: relative; z-index: 2; }
.pp3-prestasi-strip div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: var(--pp3-shadow); }
.pp3-prestasi-strip .pp3-ico { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--pp3-gold-soft); color: #8a6a10; }
.pp3-prestasi-strip strong { font-size: 22px; color: var(--pp3-green-900); line-height: 1.1; }
.pp3-prestasi-strip span { font-size: 13px; color: var(--pp3-muted); }

.pp3-empty { max-width: 520px; margin: 0 auto; text-align: center; padding: 40px 0; }
.pp3-empty > .pp3-ico { width: 56px; height: 56px; color: var(--pp3-green-600); margin-bottom: 12px; }
.pp3-empty h2 { font-size: 26px; color: var(--pp3-green-900); margin-bottom: 8px; }
.pp3-empty p { color: var(--pp3-muted); margin-bottom: 24px; }
.pp3-404 { display: block; font-size: clamp(90px, 16vw, 150px); font-weight: 800; line-height: 1; color: var(--pp3-green-100); -webkit-text-stroke: 2px var(--pp3-green-600); }
.pp3-search { display: flex; margin: 0 auto 20px; max-width: 400px; border: 1.5px solid var(--pp3-line); border-radius: 999px; overflow: hidden; }
.pp3-search input { flex: 1; min-width: 0; padding: 12px 18px; border: 0; font: inherit; outline: none; }
.pp3-search button { width: 52px; border: 0; background: var(--pp3-green-700); color: #fff; }

/* ---------- Karya Ilmiah Guru ---------- */
.pp3-card-author { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--pp3-green-700); }
.pp3-card-author .pp3-ico { color: var(--pp3-gold); }
.pp3-essays { display: grid; gap: 24px; max-width: 980px; margin: 0 auto; }
.pp3-essay { display: grid; grid-template-columns: 300px 1fr; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--pp3-shadow); transition: transform .25s, box-shadow .25s; }
.pp3-essay:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(6, 50, 31, .14); }
.pp3-essay-img { background: var(--pp3-green-100); }
.pp3-essay-img img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.pp3-essay-body { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 32px; border-left: 4px solid var(--pp3-gold); }
.pp3-essay-body h2 { font-size: 24px; line-height: 1.3; color: var(--pp3-green-900); }
.pp3-essay-body .pp3-card-author { margin: 10px 0 0; font-size: 14px; }
.pp3-essay-body p { margin: 14px 0 18px; color: var(--pp3-muted); font-size: 15px; }
.pp3-essay-body .pp3-link { margin-top: auto; }

/* ---------- Artikel ---------- */
.pp3-article-head { padding: 56px 0 120px; color: #fff; }
.pp3-article-head h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.2; margin-top: 14px; }
.pp3-tag-light { background: var(--pp3-gold); color: var(--pp3-green-900); }
.pp3-article-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.pp3-article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pp3-article-cover { margin: -84px 0 32px; border-radius: 22px; overflow: hidden; box-shadow: var(--pp3-shadow); position: relative; z-index: 2; }
.pp3-article-cover img { width: 100%; max-height: 520px; object-fit: cover; }
.pp3-article .pp3-prose { padding: 40px 0 8px; }
.pp3-article-cover + .pp3-prose { padding-top: 8px; }
.pp3-article-head + .pp3-wrap > .pp3-prose:first-child { margin-top: -84px; position: relative; z-index: 2; padding: 36px 32px 8px; background: #fff; border-radius: 22px 22px 0 0; }

.pp3-prose { font-size: 17px; line-height: 1.8; color: #263a30; }
.pp3-prose > * + * { margin-top: 1.1em; }
.pp3-prose h2, .pp3-prose h3, .pp3-prose h4 { margin-top: 1.6em; color: var(--pp3-green-900); }
.pp3-prose h2 { font-size: 26px; }
.pp3-prose h3 { font-size: 21px; }
.pp3-prose a { color: var(--pp3-green-600); text-decoration: underline; text-underline-offset: 3px; }
.pp3-prose img { height: auto; border-radius: 14px; margin: 0 auto; }
.pp3-prose p:has(> img:only-child) img, .pp3-prose figure img { width: 100%; max-width: 100%; }
.pp3-prose figure { margin-left: 0; margin-right: 0; }
.pp3-prose figcaption { font-size: 14px; color: var(--pp3-muted); text-align: center; margin-top: 8px; }
.pp3-prose blockquote { margin: 1.5em 0; padding: 20px 24px; border-left: 4px solid var(--pp3-gold); border-radius: 0 14px 14px 0; background: var(--pp3-cream); font-weight: 600; color: var(--pp3-green-900); }
.pp3-prose blockquote p { margin: 0; }
.pp3-prose ul, .pp3-prose ol { padding-left: 1.4em; }
.pp3-prose li + li { margin-top: .4em; }
.pp3-prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.pp3-prose th, .pp3-prose td { padding: 10px 12px; border: 1px solid var(--pp3-line); text-align: left; }
.pp3-prose th { background: var(--pp3-cream); }
.pp3-prose iframe { max-width: 100%; border-radius: 14px; }
.pp3-prose .wp-block-gallery, .pp3-prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pp3-prose .gallery br { display: none; }
.pp3-prose-page { max-width: none; }

.pp3-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 32px 0 64px; padding-top: 24px; border-top: 1px solid var(--pp3-line); }
.pp3-share > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--pp3-green-900); margin-right: 6px; }
.pp3-share a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff !important; }
.pp3-share .is-wa { background: #25d366; }
.pp3-share .is-fb { background: #1877f2; }

/* =========================================================
   TABLET (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .pp3-feature-grid, .pp3-reg-grid { grid-template-columns: repeat(2, 1fr); }
  .pp3-facilities { grid-template-columns: repeat(2, 1fr); }
  .pp3-steps { grid-template-columns: repeat(2, 1fr); }
  .pp3-grid-news { grid-template-columns: repeat(2, 1fr); }
  .pp3-units { grid-template-columns: repeat(3, 1fr); }
  .pp3-back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: -4px; border-radius: 12px; color: var(--pp3-green-800); background: var(--pp3-green-100); }
  .pp3-back .pp3-ico { width: 22px; height: 22px; }
}

/* =========================================================
   HP (≤ 720px)
   ========================================================= */
@media (max-width: 720px) {
  .pp3-pagehero { padding: 36px 0 48px; }
  .pp3-pagehero p { font-size: 15px; }
  .pp3-crumbs { margin-bottom: 14px; font-size: 13px; }
  .pp3-section-tight { padding: 40px 0; }

  .pp3-timeline::before { left: 35px; }
  .pp3-timeline li { gap: 14px; padding-bottom: 20px; }
  .pp3-tl-year { width: 72px; height: 38px; font-size: 14px; }
  .pp3-tl-body { padding: 16px 18px; }
  .pp3-award { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .pp3-award strong { font-size: 18px; }

  .pp3-feature-grid, .pp3-reg-grid, .pp3-facilities { grid-template-columns: 1fr; }
  .pp3-feature { padding: 24px; }
  .pp3-facility { padding: 16px; }
  .pp3-cta { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  .pp3-cta .pp3-btn { width: 100%; justify-content: center; }

  .pp3-quicklinks { grid-template-columns: 1fr; gap: 10px; margin-top: -70px; }
  .pp3-quicklinks a { padding: 14px 16px; }
  .pp3-reg-img { aspect-ratio: 4 / 3; }
  .pp3-salafiah { flex-direction: column; align-items: flex-start; padding: 22px; }
  .pp3-salafiah .pp3-btn { width: 100%; justify-content: center; }
  .pp3-steps { grid-template-columns: 1fr; gap: 12px; }
  .pp3-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px; }
  .pp3-steps .pp3-feature-ico { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .pp3-step-num { font-size: 30px; top: 12px; right: 14px; }

  .pp3-filter { margin: 0 -16px 20px; padding: 0 16px 4px; }
  .pp3-grid-news { grid-template-columns: 1fr; gap: 14px; }
  .pp3-grid-news .pp3-card { flex-direction: row; }
  .pp3-grid-news .pp3-card-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 120px; }
  .pp3-grid-news .pp3-card-body { padding: 12px 14px; }
  .pp3-grid-news .pp3-card h3 { font-size: 15px; }
  .pp3-grid-news .pp3-card p { display: none; }
  .pp3-grid-news .pp3-card-meta { margin-bottom: 6px; font-size: 12px; flex-wrap: wrap; gap: 6px; }
  .pp3-prestasi-strip { grid-template-columns: 1fr; gap: 10px; margin-top: -80px; }
  .pp3-essay { grid-template-columns: 1fr; }
  .pp3-essay-img img { min-height: 0; aspect-ratio: 16 / 9; }
  .pp3-essay-body { padding: 20px; border-left: 0; border-top: 4px solid var(--pp3-gold); }
  .pp3-essay-body h2 { font-size: 19px; }

  .pp3-article-head { padding: 32px 0 90px; }
  .pp3-article-cover { margin: -64px 0 20px; border-radius: 16px; }
  .pp3-article-head + .pp3-wrap > .pp3-prose:first-child { margin-top: -64px; padding: 24px 18px 8px; }
  .pp3-prose { font-size: 16px; line-height: 1.75; }
  .pp3-share a { flex: 1; justify-content: center; }
  .pp3-share > span { width: 100%; }
}