/* ==========================================
   PROFIL-SEKOLAH.CSS
   ========================================== */

/* ── Hero Header (split: gambar kiri, teks kanan) ── */
.ps-hero {
  background: var(--bg-soft);
  padding: 64px 0 0;
  overflow: hidden;
}
.ps-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: flex-end;
  min-height: 420px;
}

/* Kiri: gambar dengan lingkaran merah */
.ps-hero-img {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
}
.ps-hero-img::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--primary);
  z-index: 0;
}
.ps-hero-img::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 370px; height: 370px;
  border-radius: 50%;
  border: 2px dashed rgba(138,31,45,0.35);
  z-index: 0;
}
.ps-hero-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  object-fit: contain;
  display: block;
}
.ps-hero-img-placeholder {
  position: relative; z-index: 1;
  font-size: 10rem; line-height: 1;
  padding-bottom: 16px;
}

/* Kanan: teks */
.ps-hero-body {
  padding: 0 0 64px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ps-hero-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--ink-soft);
  margin-bottom: 20px;
}
.ps-hero-breadcrumb a { color: var(--ink-soft); }
.ps-hero-breadcrumb a:hover { color: var(--primary); }
.ps-hero-breadcrumb svg { width: 13px; height: 13px; }
.ps-hero-breadcrumb .current { color: var(--ink); font-weight: 600; }
.ps-hero-body h1 {
  font-size: 3rem; font-weight: 800;
  line-height: 1.1; margin: 0 0 20px;
  color: var(--ink);
}
.ps-hero-body h1 .red { color: var(--primary); }
.ps-hero-body p {
  font-size: 1rem; color: var(--ink-soft);
  line-height: 1.75; margin: 0 0 32px;
  max-width: 480px;
}
.ps-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--primary); color: #fff;
  font-size: 0.95rem; font-weight: 700;
  padding: 13px 28px; border-radius: 8px;
  transition: background .15s ease, transform .15s ease;
  width: fit-content;
}
.ps-hero-cta:hover { background: var(--primary-dark); transform: translateY(-2px); }
.ps-hero-cta svg { width: 16px; height: 16px; }

/* ── Section umum ── */
.ps-section { padding: 80px 0; }
.ps-section.bg-soft { background: var(--bg-soft); }
.ps-section-label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: .08em; color: var(--primary);
  margin-bottom: 10px;
}
.ps-section-title {
  font-size: 2rem; font-weight: 800;
  color: var(--ink); margin: 0 0 8px;
}
.ps-divider {
  width: 48px; height: 4px;
  background: var(--primary); border-radius: 4px;
  margin: 0 0 40px;
}

/* ── Visi Misi (kiri konten, kanan foto) ── */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.vm-content { display: flex; flex-direction: column; gap: 32px; }

/* Blok visi */
.vm-block { display: flex; gap: 20px; align-items: flex-start; }
.vm-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary);
  color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.vm-icon svg { width: 22px; height: 22px; }
.vm-block-body h3 {
  font-size: 1.1rem; font-weight: 800;
  margin: 0 0 8px; color: var(--ink);
}
.vm-block-body p {
  font-size: 0.95rem; color: var(--ink-soft);
  line-height: 1.7; margin: 0;
}

/* Misi list bernomor merah */
.vm-misi-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.vm-misi-list li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 0.95rem; color: var(--ink-soft); line-height: 1.65;
}
.vm-misi-list li .num {
  font-size: 0.95rem; font-weight: 800;
  color: var(--primary); flex-shrink: 0;
  min-width: 18px;
}
.vm-tagline {
  font-style: italic; font-size: 0.9rem;
  color: var(--ink-soft); margin: 8px 0 0;
  line-height: 1.6;
}

/* Foto kanan visi misi */
.vm-photo {
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
}
.vm-photo img {
  width: 100%; max-width: 460px;
  object-fit: contain; display: block;
  position: relative; z-index: 1;
}
.vm-photo-placeholder {
  font-size: 10rem; line-height: 1;
}

/* ── Akreditasi (gambar kiri, teks kanan) ── */
.akreditasi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.akreditasi-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
  position: relative;
}
.akreditasi-img img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover; display: block;
}
.akreditasi-img-placeholder {
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--primary-light), #f0e8e8);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
}
.akreditasi-badge-big {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff;
  font-size: 0.82rem; font-weight: 700;
  padding: 6px 16px; border-radius: 100px;
  margin-bottom: 20px;
}
.akreditasi-badge-big svg { width: 14px; height: 14px; }
.akreditasi-body h2 {
  font-size: 2rem; font-weight: 800;
  margin: 0 0 16px; color: var(--ink);
}
.akreditasi-body p {
  font-size: 0.97rem; color: var(--ink-soft);
  line-height: 1.75; margin: 0 0 28px;
}
.akreditasi-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.astat {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.astat .lbl { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .05em; margin-bottom: 4px; }
.astat .val { font-size: 1.1rem; font-weight: 800; color: var(--ink); }

/* ── Fasilitas ── */
.fasilitas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fasilitas-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fasilitas-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(31,27,36,0.1); }
.fasilitas-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.fasilitas-card h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.fasilitas-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* ── Prestasi ── */
.prestasi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.prestasi-card {
  background: #fff; border-radius: var(--radius-md);
  padding: 24px; border: 1px solid var(--border);
  display: flex; gap: 16px; align-items: flex-start;
  box-shadow: var(--shadow-card);
}
.prestasi-year {
  background: var(--primary); color: #fff;
  font-size: 0.78rem; font-weight: 800;
  padding: 4px 10px; border-radius: 6px;
  flex-shrink: 0; margin-top: 2px;
}
.prestasi-card p { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.4; }

/* ── Responsive ── */
@media (max-width: 991px) {
  .ps-hero .container { grid-template-columns: 1fr; min-height: auto; }
  .ps-hero-img { order: 2; padding: 40px 0 0; }
  .ps-hero-body { order: 1; padding: 0 0 32px; }
  .ps-hero-body h1 { font-size: 2.2rem; }
  .vm-grid { grid-template-columns: 1fr; gap: 40px; }
  .vm-photo { order: -1; }
  .akreditasi-grid { grid-template-columns: 1fr; gap: 40px; }
  .fasilitas-grid { grid-template-columns: repeat(2, 1fr); }
  .prestasi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ps-hero-body h1 { font-size: 1.8rem; }
  .ps-hero-img::before { width: 240px; height: 240px; }
  .ps-hero-img::after { width: 265px; height: 265px; }
  .fasilitas-grid { grid-template-columns: 1fr; }
  .prestasi-grid { grid-template-columns: 1fr; }
  .akreditasi-stats { grid-template-columns: 1fr 1fr; }
}