/* UK Hospitals, feature "areas": borough pages, topic pages, hub borough grid. Uses the brand tokens from ukhc.css. */
.ukhc-areas-grid{list-style:none;margin:12px 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ukhc-areas-grid a{display:block;height:100%;box-sizing:border-box;background:var(--ukhc-card);border:1px solid var(--ukhc-line);border-bottom:4px solid var(--ukhc-line);border-radius:var(--ukhc-radius);padding:12px 14px;text-decoration:none;color:var(--ukhc-text)}
.ukhc-areas-grid a:hover{border-bottom-color:var(--ukhc-teal)}
.ukhc-areas-grid strong{display:block;color:var(--ukhc-teal);font-size:1.05rem;text-decoration:underline;text-underline-offset:2px}
.ukhc-areas-grid span{display:block;font-size:.9rem;color:var(--ukhc-muted)}
.ukhc-areas-links{columns:2;column-gap:24px;padding-left:20px}
.ukhc-areas-list{list-style:none;margin:8px 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ukhc-areas-list li{background:var(--ukhc-card);border:1px solid var(--ukhc-line);border-radius:var(--ukhc-radius);padding:10px 14px}
.entry-content .ukhc-areas-list p{margin:.15rem 0;font-size:.95rem;line-height:1.45}
.ukhc-areas-list .ukhc-areas-name{font-weight:700;font-size:1.02rem}
.ukhc-areas-tags .ukhc-tag{margin:2px 4px 2px 0}
.ukhc-areas-jump{background:var(--ukhc-card);border:1px solid var(--ukhc-line);border-radius:var(--ukhc-radius);padding:12px 16px;margin:10px 0}
.ukhc-areas-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.ukhc-areas-jump a{display:inline-block;padding:4px 0}
.ukhc-areas-ae li{margin:.3rem 0}
.entry-content .ukhc-areas-table th[scope=row]{font-weight:400}
.entry-content .ukhc-areas-table th[scope=row] a{font-weight:700}
.ukhc-areas [hidden]{display:none!important}
.entry-content .ukhc-areas-grid,.entry-content .ukhc-areas-list,.entry-content .ukhc-areas-jump ul{margin-left:0;margin-right:0;padding-left:0}
.ukhc-areas-table a[href^="tel:"]{white-space:nowrap}
/* tap targets at least 24px high (WCAG 2.2, 2.5.8; QA finding 13) */
.ukhc-areas-fold>p>a,.ukhc-areas-table th[scope=row] a,.ukhc-areas-table a[href^="tel:"],.ukhc-areas-list a,.ukhc-areas-links a,.ukhc-areas-ae a{display:inline-block;min-height:24px;padding:2px 0;box-sizing:border-box}
/* long topic lists: one closed group per borough */
.ukhc-areas-fold{border:1px solid var(--ukhc-line);border-radius:var(--ukhc-radius);background:var(--ukhc-card);margin:8px 0}
.ukhc-areas-fold>summary{cursor:pointer;padding:10px 14px;display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;list-style:none}
.ukhc-areas-fold>summary::-webkit-details-marker{display:none}
.ukhc-areas-fold>summary::before{content:"";flex:none;width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--ukhc-teal);transition:transform .15s}
.ukhc-areas-fold[open]>summary::before{transform:rotate(90deg)}
.entry-content .ukhc-areas-fold>summary h2{margin:0;padding:0;border:0;font-size:1.2rem}
.ukhc-areas-fold>summary:hover h2{color:var(--ukhc-teal)}
.ukhc-areas-fold>:not(summary){margin-left:14px;margin-right:14px}
.entry-content .ukhc-areas-fold>table{width:calc(100% - 28px)}
.ukhc-areas-fold[open]{padding-bottom:6px}
@media (max-width:640px){
  .ukhc-areas-links{columns:1}
  .ukhc-areas-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ukhc-areas-grid a{padding:10px 12px}
  .ukhc-areas-list{grid-template-columns:1fr}
  /* phones: three-column tables become one block per pharmacy, each cell labelled */
  .entry-content .ukhc-areas-table:has(td[data-label]) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
  .entry-content .ukhc-areas-table tr:has(td[data-label]){display:block;border:1px solid var(--ukhc-line);border-radius:6px;margin:0 0 8px;padding:8px 10px}
  .entry-content .ukhc-areas-table tr:has(td[data-label]) th,.entry-content .ukhc-areas-table td[data-label]{display:block;border:0;padding:2px 0}
  .entry-content .ukhc-areas-table td[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--ukhc-ink)}
}
@media (max-width:340px){.ukhc-areas-grid{grid-template-columns:1fr}}