/* ==========================================================================
   d_nextplanner — layanan.css
   Only used by layanan.html.
   ========================================================================== */

/* --- wedding: alternating image/text rows -------------------------------- */

.svc-list { display: grid; gap: 18px; }

.svc {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.svc--flip .svc-media { order: 2; }

.svc-media { min-height: 100%; background: var(--cream); }
.svc-media img { height: 100%; min-height: 380px; }

.svc-body { padding: 44px 44px 40px; }
.svc-index {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
}
.svc-body h3 { margin-bottom: 16px; }
.svc-desc { margin: 0 0 26px; color: var(--muted); max-width: 52ch; }

.svc-points { padding-top: 4px; border-top: 1px solid var(--line); }
.svc-points li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14.5px;
}
.svc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 9px;
  height: 1px;
  background: var(--accent);
}

.svc-price {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -.02em;
}
.svc-price a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  border-bottom: 1px solid var(--line);
}
.svc-price a:hover { border-color: var(--accent); }

/* --- pendampingan cards -------------------------------------------------- */

.damping {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.damping-card {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.damping-card h3 { margin-bottom: 14px; }
.damping-card > p { color: var(--muted); font-size: 14.5px; }
.damping-card ul {
  margin: 8px 0 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.damping-card li { padding: 5px 0; }
.damping-card li::before { content: "· "; color: var(--accent); }

.damping-price {
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.025em;
}
.damping-price small {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .03em;
}

.damping-card--bundle {
  background: var(--ink);
  color: #f7f2ea;
  border-color: var(--ink);
}
.damping-card--bundle .svc-index { color: var(--accent-light); }
.damping-card--bundle > p,
.damping-card--bundle ul,
.damping-card--bundle small { color: var(--muted-dark); }
.damping-card--bundle ul,
.damping-card--bundle .damping-price { border-color: var(--line-dark); }

.damping-note {
  max-width: 68ch;
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

/* --- institusi ----------------------------------------------------------- */

.inst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.inst {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.inst figure { aspect-ratio: 16 / 10; overflow: hidden; }
.inst figure img { height: 100%; transition: transform .7s var(--ease); }
.inst:hover figure img { transform: scale(1.04); }
.inst > div { display: flex; flex-direction: column; flex: 1; padding: 34px 32px 32px; }
.inst h3 { margin-bottom: 14px; }
.inst > div > p { color: var(--muted); font-size: 14.5px; }
.inst .svc-price { margin-top: auto; padding-top: 24px; }

/* --- add-ons ------------------------------------------------------------- */

.addons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
}
.addons li {
  padding: 28px 24px 26px 0;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.addons li:nth-child(4n) { border-right: 0; }
.addons li:nth-child(n+5) { border-bottom: 0; }
.addons h4 { margin-bottom: 8px; font-family: var(--sans); font-size: 15.5px; font-weight: 600; }
.addons p { margin: 0 0 16px; font-size: 13.5px; }
.addons span {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--accent-light);
  letter-spacing: -.02em;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .damping { grid-template-columns: 1fr 1fr; }
  .inst-grid { grid-template-columns: 1fr; }
  .addons { grid-template-columns: 1fr 1fr; }
  .addons li:nth-child(2n) { border-right: 0; }
  .addons li:nth-child(n+5) { border-bottom: 1px solid var(--line-dark); }
  .addons li:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 900px) {
  .svc, .svc--flip { grid-template-columns: 1fr; }
  .svc--flip .svc-media { order: 0; }
  .svc-media img { min-height: 260px; }
  .svc-body { padding: 32px 26px 30px; }
}

@media (max-width: 620px) {
  .damping { grid-template-columns: 1fr; }
  .addons { grid-template-columns: 1fr; }
  .addons li { border-right: 0; padding-right: 0; }
  .addons li:nth-child(n+5) { border-bottom: 1px solid var(--line-dark); }
  .addons li:last-child { border-bottom: 0; }
  .damping-card { padding: 26px 22px; }
  .inst > div { padding: 26px 22px; }
  .svc-body { padding: 28px 22px; }
}