/* Step 35D - ikon lokal, breadcrumb, dan layout halaman dalam. */

/* Ikon garis lokal: ringan, konsisten, tanpa CDN atau font eksternal. */
.ui-line-icon{
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  border:1px solid #cfe0f2;
  border-radius:14px;
  color:var(--ds-brand-700);
  background:linear-gradient(145deg,#f5f9ff,#e6f1fc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.ui-line-icon>i,.ui-line-icon>i::before,.ui-line-icon>i::after{position:absolute;display:block;box-sizing:border-box;content:""}
.ui-line-icon>i{top:50%;left:50%;transform:translate(-50%,-50%)}
.ui-line-icon-sm{width:28px;height:28px;flex-basis:28px;border-radius:9px}
.ui-line-icon-large{width:64px;height:64px;flex-basis:64px;border-radius:18px}

.ui-line-icon-medical>i,.ui-line-icon-emergency>i{width:24px;height:24px}
.ui-line-icon-medical>i::before,.ui-line-icon-medical>i::after,
.ui-line-icon-emergency>i::before,.ui-line-icon-emergency>i::after{
  top:50%;left:50%;border-radius:999px;background:currentColor;transform:translate(-50%,-50%)
}
.ui-line-icon-medical>i::before,.ui-line-icon-emergency>i::before{width:23px;height:4px}
.ui-line-icon-medical>i::after,.ui-line-icon-emergency>i::after{width:4px;height:23px}
.ui-line-icon-emergency{color:#b4232c;border-color:#f4c8cc;background:linear-gradient(145deg,#fff,#fff2f3)}

.ui-line-icon-calendar>i{width:25px;height:23px;border:2px solid currentColor;border-radius:5px}
.ui-line-icon-calendar>i::before{top:5px;left:-2px;width:25px;height:2px;background:currentColor;box-shadow:6px -8px 0 -1px currentColor,17px -8px 0 -1px currentColor}
.ui-line-icon-calendar>i::after{top:11px;left:5px;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:7px 0 currentColor,14px 0 currentColor,0 6px currentColor,7px 6px currentColor}

.ui-line-icon-doctor>i{width:12px;height:12px;border:2px solid currentColor;border-radius:50%}
.ui-line-icon-doctor>i::before{top:14px;left:-7px;width:26px;height:15px;border:2px solid currentColor;border-bottom:0;border-radius:16px 16px 0 0}
.ui-line-icon-doctor>i::after{top:14px;right:-9px;width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:-3px 0 0 -2px #eef6ff}

.ui-line-icon-registration>i,.ui-line-icon-document>i{width:21px;height:27px;border:2px solid currentColor;border-radius:4px}
.ui-line-icon-registration>i::before,.ui-line-icon-document>i::before{top:7px;left:4px;width:10px;height:2px;background:currentColor;box-shadow:0 6px currentColor,0 12px currentColor}
.ui-line-icon-registration>i::after{right:-7px;bottom:-5px;width:13px;height:13px;border:3px solid #edf6ff;border-radius:50%;background:currentColor;box-shadow:inset 0 0 0 3px currentColor}

.ui-line-icon-bed>i{width:27px;height:17px;border-bottom:3px solid currentColor;border-left:3px solid currentColor}
.ui-line-icon-bed>i::before{left:3px;bottom:3px;width:22px;height:10px;border:2px solid currentColor;border-radius:4px 4px 0 0}
.ui-line-icon-bed>i::after{left:5px;bottom:5px;width:7px;height:6px;border-radius:3px;background:currentColor}

.ui-line-icon-laboratory>i{width:14px;height:27px;border:2px solid currentColor;border-top:0;border-radius:0 0 9px 9px;transform:translate(-50%,-50%) rotate(24deg)}
.ui-line-icon-laboratory>i::before{top:-3px;left:-4px;width:18px;height:3px;border-radius:2px;background:currentColor}
.ui-line-icon-laboratory>i::after{right:1px;bottom:2px;left:1px;height:9px;border-radius:0 0 6px 6px;background:currentColor;opacity:.32}

.ui-line-icon-radiology>i{width:27px;height:22px;border:2px solid currentColor;border-radius:5px}
.ui-line-icon-radiology>i::before{top:4px;left:7px;width:9px;height:9px;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 0 3px rgba(19,88,176,.13)}
.ui-line-icon-radiology>i::after{bottom:-6px;left:6px;width:12px;height:2px;background:currentColor}

.ui-line-icon-pharmacy>i{width:28px;height:14px;border:2px solid currentColor;border-radius:999px;transform:translate(-50%,-50%) rotate(-35deg)}
.ui-line-icon-pharmacy>i::before{top:-2px;left:11px;width:2px;height:14px;background:currentColor}
.ui-line-icon-pharmacy>i::after{top:0;right:0;width:11px;height:10px;border-radius:0 999px 999px 0;background:currentColor;opacity:.2}

.ui-line-icon-clock>i{width:25px;height:25px;border:2px solid currentColor;border-radius:50%}
.ui-line-icon-clock>i::before{top:4px;left:11px;width:2px;height:8px;background:currentColor;transform-origin:bottom}
.ui-line-icon-clock>i::after{top:11px;left:11px;width:7px;height:2px;background:currentColor;transform:rotate(25deg);transform-origin:left}

.ui-line-icon-location>i{width:22px;height:27px;border:2px solid currentColor;border-radius:50% 50% 50% 0;transform:translate(-50%,-50%) rotate(-45deg)}
.ui-line-icon-location>i::before{top:6px;left:6px;width:6px;height:6px;border:2px solid currentColor;border-radius:50%}

.ui-line-icon-search>i{width:20px;height:20px;border:2px solid currentColor;border-radius:50%}
.ui-line-icon-search>i::after{right:-8px;bottom:-5px;width:10px;height:2px;border-radius:3px;background:currentColor;transform:rotate(45deg)}
.ui-line-icon-info>i{width:25px;height:25px;border:2px solid currentColor;border-radius:50%}
.ui-line-icon-info>i::before{top:5px;left:10px;width:3px;height:3px;border-radius:50%;background:currentColor}
.ui-line-icon-info>i::after{top:10px;left:10px;width:3px;height:9px;border-radius:2px;background:currentColor}
.ui-line-icon-image>i{width:27px;height:22px;border:2px solid currentColor;border-radius:5px}
.ui-line-icon-image>i::before{top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:currentColor}
.ui-line-icon-image>i::after{right:3px;bottom:3px;left:3px;height:10px;border-radius:2px;background:linear-gradient(135deg,transparent 36%,currentColor 37% 58%,transparent 59%),linear-gradient(45deg,currentColor 0 48%,transparent 49%);opacity:.8}

/* State tombol hero tidak lagi menghasilkan teks dan latar berwarna sama. */
.home-hero .btn-primary:hover,.home-hero .btn-primary:focus-visible{
  color:var(--ds-brand-900);
  background:#e8f2ff;
  box-shadow:0 12px 28px rgba(0,20,52,.28);
}
.home-hero .btn-outline:hover,.home-hero .btn-outline:focus-visible{
  color:var(--ds-brand-900);
  border-color:#fff;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,20,52,.24);
}
.home-visit-links .ui-line-icon{width:42px;height:42px;flex-basis:42px;color:var(--ds-brand-700);background:#fff}

/* Emblem darurat: simbol medis jelas tanpa tampilan seperti tombol putih polos. */
.footer-emergency-icon.ui-line-icon{
  width:58px;
  height:58px;
  flex-basis:58px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px rgba(0,12,35,.24);
}
.footer-emergency-icon.ui-line-icon>i{
  width:36px;
  height:36px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#d84c56,#a91f2b);
  box-shadow:0 7px 17px rgba(117,13,25,.35),inset 0 1px 0 rgba(255,255,255,.28);
}
.footer-emergency-icon.ui-line-icon>i::before{width:19px;height:4px;background:#fff}
.footer-emergency-icon.ui-line-icon>i::after{width:4px;height:19px;background:#fff}

/* Breadcrumb publik */
.public-breadcrumb{border-bottom:1px solid var(--ds-neutral-200);background:#fff}
.public-breadcrumb ol{display:flex;min-height:46px;align-items:center;gap:.55rem;margin:0;padding:0;overflow:hidden;list-style:none}
.public-breadcrumb li{display:flex;min-width:0;align-items:center;gap:.55rem;color:var(--ds-neutral-600);font-size:.75rem;white-space:nowrap}
.public-breadcrumb li+li::before{color:var(--ds-neutral-400);content:"/"}
.public-breadcrumb a{color:var(--ds-brand-700);font-weight:700;text-decoration:none}
.public-breadcrumb a:hover{text-decoration:underline}
.public-breadcrumb span[aria-current]{display:block;overflow:hidden;color:var(--ds-neutral-700);font-weight:650;text-overflow:ellipsis}

/* Standar hero dan konten halaman dalam */
.page-hero.compact{padding-block:clamp(2.75rem,5vw,4.5rem)}
.page-hero.compact>.container-wide{max-width:1180px}
.page-hero.compact h1{max-width:920px;margin:.7rem 0 .75rem;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.08;letter-spacing:-.045em}
.page-hero.compact p{max-width:760px;margin:0;color:#dcecff;font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.7}
.page-hero.compact :is(.career-back-link,.cost-back-link,.education-back-link){display:none}

.service-detail-layout,.announcement-detail-layout,.event-detail-layout,.cost-detail-layout,
.education-detail-layout,.career-detail-layout,.download-detail-layout,.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.article-main,.event-detail-main,.cost-detail-main,.education-detail-main,.career-detail-main,.download-detail-main{min-width:0}
.article-side,.event-detail-side,.cost-detail-side,.education-detail-side,.career-apply-card,.download-detail-side{
  position:sticky;
  top:112px;
  border-color:var(--ds-neutral-200);
  border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-sm);
}
.article-side h2,.article-side h3,.event-detail-side h2,.cost-detail-side h2,
.education-detail-side h2,.career-apply-card h2,.download-detail-side h2{color:var(--ds-brand-900)}
.article-cover,.content-detail-cover{
  overflow:hidden;
  margin:0 0 1.75rem;
  border:1px solid var(--ds-neutral-200);
  border-radius:var(--ds-radius-xl);
  background:var(--ds-neutral-100);
  box-shadow:var(--ds-shadow-sm);
}
img.article-cover,.content-detail-cover>img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.content-detail-cover figcaption{padding:.7rem 1rem;color:var(--ds-neutral-600);background:#fff;font-size:.72rem}
.article-main>.prose,.event-detail-main>.prose,.cost-detail-main>.prose,
.education-detail-main>.prose,.career-detail-main>.prose,.download-detail-main>.prose{max-width:76ch}
.prose{color:var(--ds-neutral-750);line-height:1.85}
.prose :is(h2,h3){margin-top:1.8em;letter-spacing:-.025em}
.prose img{max-width:100%;height:auto;border-radius:var(--ds-radius-md)}
.article-back{margin-top:2rem;padding-top:1.5rem}
.content-wrap{padding-block:clamp(2rem,4vw,3.5rem)}
.profile-detail-shell{gap:1.25rem}
.profile-detail-intro,.polyclinic-detail-hero{
  border-color:var(--ds-neutral-200);
  border-radius:var(--ds-radius-xl);
  box-shadow:var(--ds-shadow-sm);
}
.profile-detail-columns{gap:1.25rem}
.profile-detail-content,.profile-detail-side{border-radius:var(--ds-radius-lg)}
.profile-detail-side{position:sticky;top:112px}

/* Kartu daftar bergambar */
.image-card,.service-directory-card{transition:transform var(--ds-transition),border-color var(--ds-transition),box-shadow var(--ds-transition)}
.image-card:hover,.service-directory-card:hover{border-color:var(--ds-brand-300);box-shadow:var(--ds-shadow-md);transform:translateY(-4px)}
.image-card>img,.service-directory-card .content-card-cover img{transition:transform .35s ease,filter .35s ease}
.image-card:hover>img,.service-directory-card:hover .content-card-cover img{filter:saturate(1.05) contrast(1.02);transform:scale(1.035)}
.image-card:focus-visible{outline:3px solid var(--ds-focus-ring);outline-offset:3px}
.image-card .ui-line-icon{margin-bottom:.8rem}
.service-card-top{align-items:center}
.service-card-meta span{display:flex;align-items:center;gap:.35rem}
.service-card-meta b{min-width:42px;color:var(--ds-neutral-700);font-size:.68rem}
.service-card-link span{transition:transform var(--ds-transition)}
.service-directory-card:hover .service-card-link span{transform:translateX(4px)}
.empty-state .ui-line-icon{margin-inline:auto}

@media(max-width:920px){
  .service-detail-layout,.announcement-detail-layout,.event-detail-layout,.cost-detail-layout,
  .education-detail-layout,.career-detail-layout,.download-detail-layout,.article-layout{grid-template-columns:1fr}
  .article-side,.event-detail-side,.cost-detail-side,.education-detail-side,.career-apply-card,.download-detail-side{position:static}
  .profile-detail-side{position:static}
}

@media(max-width:620px){
  .public-breadcrumb ol{min-height:42px}
  .public-breadcrumb li{font-size:.68rem}
  .page-hero.compact{padding-block:2.35rem}
  .page-hero.compact h1{font-size:2rem}
  .footer-emergency-icon.ui-line-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px}
  .mobile-action-bar>a .ui-line-icon{width:26px;height:26px;flex-basis:26px;border:0;border-radius:8px;box-shadow:none}
  .mobile-action-bar>a .ui-line-icon>i{transform:translate(-50%,-50%) scale(.7)}
}

@media(prefers-reduced-motion:reduce){
  .image-card,.service-directory-card,.service-card-link span{transition:none}
}