/* Reaching Kulsum: uses the health library hero, buttons and closing panel from health-library.css. */
.rk-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.rk-head { max-width: 720px; margin-bottom: 1.5rem; }
.dc-page .rk-head h2 { margin-bottom: .35rem; }
.dc-page .rk-head p { margin: 0; color: var(--muted); }
.rk-card { border: 1px solid var(--line); border-radius: 22px; background: #fff; }

/* Map and address */
.rk-locate { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.rk-map { min-height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #eaf1f9; }
.rk-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.rk-address { padding: clamp(1.4rem, 3vw, 2rem); }
.rk-address address { margin: 0 0 1.25rem; color: #2c4560; font-size: 1rem; font-style: normal; line-height: 1.7; }
.rk-address address strong { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
/* Address actions sit in one row, icon to the left of the label. */
.rk-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.rk-actions .dc-btn { gap: .45rem; min-height: 52px; padding: .55rem .5rem; font-size: .82rem; line-height: 1.25; text-align: left; }
.rk-actions .dc-btn .bi { font-size: 1.1rem; }
.rk-btn-line { border-color: #cfdcec; background: #fff; color: var(--kih-blue); cursor: pointer; }
.rk-btn-line:hover { border-color: var(--kih-blue); color: var(--kih-blue); }
.rk-contacts { display: grid; gap: .25rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px dashed var(--line); list-style: none; }
.rk-contacts li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .75rem; padding: .45rem 0; font-size: .9rem; }
.rk-contacts .bi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--kih-blue-soft); color: var(--kih-blue); }
.rk-contacts span { color: var(--muted); font-weight: 500; }
.rk-contacts a { color: var(--ink); font-weight: 600; text-decoration: none; }
.rk-contacts a:hover { color: var(--kih-blue); text-decoration: underline; }

/* Ways to get here: the three cards share one row down to tablet width. */
.rk-band { background: #f6f9fd; }
.rk-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
/* Icon and title share the top row; the text and link span the card below. */
.rk-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: center; column-gap: .85rem; padding: 1.4rem; }
.rk-icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; background: var(--kih-blue); color: #fff; font-size: 1.25rem; }
.rk-mode p, .rk-mode .rk-link { grid-column: 1 / -1; }
.rk-mode h3 { margin: 0; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.dc-page .rk-mode p { align-self: start; margin: 1rem 0; color: #3a5068; font-size: .88rem; line-height: 1.65; }
.rk-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding: 0; border: 0; background: none; color: var(--kih-red); font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.rk-link:hover { color: var(--kih-red-dark); text-decoration: underline; text-underline-offset: 3px; }
.rk-mode .rk-link { justify-self: start; }

/* Before your visit */
.rk-visit { align-items: flex-end; }
.rk-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 2rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.rk-checklist li { display: flex; gap: .6rem; color: #d3e2f3; font-size: .92rem; line-height: 1.55; }
.rk-checklist .bi { flex-shrink: 0; color: #fff; font-size: 1.05rem; }
.rk-page a:focus-visible, .rk-page button:focus-visible { outline: 2px solid var(--kih-blue); outline-offset: 3px; }
.rk-page .dc-hero a:focus-visible, .rk-visit a:focus-visible { outline-color: #fff; }

@media (max-width: 991.98px) {
    .rk-locate { grid-template-columns: 1fr; }
    .rk-map, .rk-map iframe { min-height: 320px; }
    .rk-visit { align-items: flex-start; }
}
@media (max-width: 767.98px) { .rk-modes, .rk-checklist { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
    /* Hero button stays compact and left-aligned on phones. */
    .rk-hero-actions { margin-top: 1.25rem; }
    .rk-hero-actions .dc-btn { min-height: 42px; padding: .55rem 1.1rem; font-size: .85rem; }
    .rk-actions { gap: .5rem; }
    .rk-actions .dc-btn { gap: .3rem; min-height: 50px; padding: .45rem .35rem; font-size: .74rem; }
    .rk-actions .dc-btn .bi { font-size: .95rem; }
    /* Label above value, icon spanning both lines. */
    .rk-contacts li { grid-template-columns: 34px 1fr; row-gap: 0; }
    .rk-contacts .bi { grid-row: span 2; }
    .rk-contacts span { font-size: .8rem; }
}