.clinic-gallery-page { max-width: 1180px; margin: 0 auto; color: #34536b; font-family: "DM Sans", sans-serif; }
.clinic-gallery-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 35px; padding: 39px; border: 1px solid #deebf1; border-radius: 23px; background: linear-gradient(115deg, #fff, #e7f4f8); }
.clinic-gallery-eyebrow { color: #44889c; font-size: 9px; font-weight: 700; line-height: 1.8; letter-spacing: .1em; }
.clinic-gallery-hero h1 { margin: 14px 0; color: #294c6b; font: 800 43px/1.2 "Manrope", sans-serif; letter-spacing: -.04em; }
.clinic-gallery-hero p { max-width: 670px; margin: 0; color: #7a909f; font-size: 15px; line-height: 1.85; }
.clinic-gallery-hero-icon { display: grid; width: 88px; height: 88px; flex-shrink: 0; place-items: center; border: 1px solid #d1e7ec; border-radius: 25px; background: linear-gradient(135deg, #fff, #d4ebf1); color: #3d8da2; font-size: 36px; }
.clinic-gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.clinic-gallery-heading h2, .clinic-gallery-empty h2, .clinic-gallery-section h2 { margin: 0; color: #34556f; font: 700 23px/1.4 "DM Sans", sans-serif; letter-spacing: -.025em; }
.clinic-gallery-heading > span { flex-shrink: 0; color: #8b9da9; font-size: 12px; }
.clinic-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.clinic-gallery-card { min-width: 0; overflow: hidden; margin: 0; border: 1px solid #e0ebf1; border-radius: 17px; background: #fff; box-shadow: 0 7px 22px #294d7005; }
.clinic-gallery-card > a { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #eaf3f7; }
.clinic-gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.clinic-gallery-card a:hover img { transform: scale(1.035); }
.clinic-gallery-expand { position: absolute; right: 14px; bottom: 14px; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #ffffff8a; border-radius: 10px; background: #ffffffed; color: #3d738a; font-size: 14px; }
.clinic-gallery-card figcaption { padding: 16px 18px; color: #56748a; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.clinic-gallery-empty { padding: 50px 25px; border: 1px dashed #d3e5eb; border-radius: 20px; background: #fff; text-align: center; }
.clinic-gallery-empty > span { display: grid; width: 62px; height: 62px; place-items: center; margin: 0 auto 20px; border-radius: 19px; background: linear-gradient(135deg, #e6f6f3, #e2eff9); color: #438b9b; font-size: 27px; }
.clinic-gallery-empty p { max-width: 510px; margin: 16px auto 24px; color: #8296a4; font-size: 14px; line-height: 1.85; }
.clinic-gallery-empty a { display: inline-flex; min-height: 44px; align-items: center; gap: 15px; padding: 11px 18px; border-radius: 10px; background: #2c6c87; color: #fff; font-size: 13px; font-weight: 600; }
.clinic-gallery-section { margin-top: 32px; }
.clinic-gallery-section p { margin-top: 14px; color: #7a909f; font-size: 14px; line-height: 1.9; white-space: pre-line; }
.clinic-gallery-pagination { margin-top: 30px; }
.clinic-gallery-page a:focus-visible { outline: 3px solid #478ca2; outline-offset: 4px; }
body.gallery-lightbox-open { overflow: hidden; }
.gallery-lightbox { width: min(1100px, calc(100vw - 40px)); height: min(820px, calc(100dvh - 40px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #ffffff24; border-radius: 22px; background: #11273c; color: #e2edf5; font-family: "DM Sans", sans-serif; box-shadow: 0 24px 90px #07172766; }
.gallery-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.gallery-lightbox::backdrop { background: #071624df; backdrop-filter: blur(7px); }
.gallery-lightbox [hidden] { display: none; }
.gallery-lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border-bottom: 1px solid #ffffff10; }
.gallery-lightbox-toolbar h2 { margin: 0 0 3px; color: #ecf5fb; font: 600 16px/1.5 "DM Sans", sans-serif; }
.gallery-lightbox-toolbar [data-gallery-counter] { color: #92afc3; font-size: 11px; line-height: 1.6; }
.gallery-lightbox button { display: grid; width: 44px; height: 44px; flex-shrink: 0; place-items: center; border: 1px solid #ffffff24; border-radius: 13px; background: #ffffff0d; color: #e7f4fc; font-size: 18px; transition: background .15s; cursor: pointer; }
.gallery-lightbox button:hover { background: #ffffff26; }
.gallery-lightbox button:focus-visible { outline: 3px solid #83cbdc; outline-offset: 3px; }
.gallery-lightbox-stage { position: relative; display: flex; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: hidden; background: #0b1c2c; touch-action: pan-y pinch-zoom; }
.gallery-lightbox-stage .gallery-lightbox-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-lightbox-stage .gallery-lightbox-image[hidden] { display: none; }
.gallery-lightbox-stage > button { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); background: #11273cd9; }
.gallery-lightbox-previous { left: 16px; }
.gallery-lightbox-next { right: 16px; }
.gallery-lightbox-loading, .gallery-lightbox-error { max-width: 75%; margin: 0; padding: 20px; color: #b1c9da; font-size: 14px; line-height: 1.8; text-align: center; }
.gallery-lightbox-details { max-height: 150px; overflow-y: auto; padding: 17px 24px 20px; text-align: center; }
.gallery-lightbox-details p { margin: 0; color: #e0edf6; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.gallery-lightbox-details > span { display: block; margin-top: 6px; color: #7896ab; font-size: 10px; line-height: 1.8; }
@media (max-width: 600px) { .gallery-lightbox { width: calc(100vw - 20px); height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 18px; } .gallery-lightbox-toolbar { padding: 13px 15px; } .gallery-lightbox-previous { left: 9px; } .gallery-lightbox-next { right: 9px; } .gallery-lightbox-details { padding: 15px 18px; } }
@media (prefers-reduced-motion: reduce) { .gallery-lightbox button { transition: none; } }
@media (max-width: 950px) { .clinic-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) { .clinic-gallery-hero { gap: 15px; padding: 26px 22px; margin-bottom: 25px; border-radius: 20px; } .clinic-gallery-hero h1 { font-size: 34px; } .clinic-gallery-hero p { font-size: 13px; } .clinic-gallery-hero-icon { width: 49px; height: 49px; border-radius: 15px; font-size: 24px; } .clinic-gallery-heading { align-items: start; } .clinic-gallery-heading h2 { font-size: 20px; } .clinic-gallery-grid { grid-template-columns: 1fr; gap: 17px; } .clinic-gallery-empty { padding: 35px 22px; } .clinic-gallery-empty h2 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .clinic-gallery-card img { transition: none; } }