.diploma-media-page { min-height: 70vh; color: #18344f; background: #f5f9fd; }
.diploma-media-hero { padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem clamp(3rem, 6vw, 4.75rem); text-align: center; color: #fff; background: linear-gradient(125deg, #174f88, #2678bd 55%, #66b6e6); }
.diploma-media-hero > p { margin: 0 0 .7rem; color: #e3f4ff; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.diploma-media-hero h1 { margin: 0; color: #fff; font-size: clamp(2.1rem, 6vw, 4.35rem); line-height: 1.1; }
.diploma-media-hero > span { display: block; width: min(100%, 42rem); margin: 1rem auto 0; color: #eef8ff; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; }
.diploma-media-hero a { display: inline-flex; margin-top: 1.5rem; padding: .65rem 1rem; color: #fff; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; background: rgba(255,255,255,.08); text-decoration: none; font-weight: 700; }
.diploma-media-hero a:is(:hover, :focus-visible) { background: rgba(255,255,255,.18); }
.diploma-media-main { width: min(90rem, calc(100% - 2rem)); margin: auto; padding: clamp(3rem, 7vw, 5.75rem) 0; }
.diploma-media-heading { margin-bottom: 2.5rem; text-align: center; }
.diploma-media-heading p { margin: 0 0 .4rem; color: #2678bd; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.diploma-media-heading h2 { margin: 0; color: #123a5c; font-size: clamp(1.8rem, 4vw, 3rem); }
.diploma-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: min(100%, 66rem); margin-inline: auto; }
.diploma-category-card { min-width: 0; min-height: 10rem; padding: 1.15rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; color: #17324d; background: #fff; border: 1px solid #d7e3ed; border-radius: .8rem; box-shadow: 0 .25rem .8rem rgba(19,60,85,.06); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
.diploma-category-card:is(:hover, :focus-visible) { color: #17324d; border-color: #8db8dc; box-shadow: 0 .45rem 1rem rgba(19,60,85,.1); }
.diploma-category-code { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; color: #1565c0; background: #edf6fd; border: 1px solid #c8dfef; border-radius: .6rem; font-size: .82rem; font-weight: 850; }
.diploma-category-copy { display: block; }
.diploma-category-copy small, .diploma-category-copy strong, .diploma-category-copy > span { display: block; }
.diploma-category-copy small { margin-bottom: .25rem; color: #2678bd; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.diploma-category-copy strong { margin-bottom: .3rem; color: #123a5c; font-size: 1rem; line-height: 1.3; }
.diploma-category-copy > span { color: #607589; font-size: .78rem; line-height: 1.4; }
.diploma-category-card > b { justify-self: end; color: #1565c0; font-size: 1.15rem; }
.diploma-collection-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; width: min(100%, 76rem); margin-inline: auto; }
.diploma-category-grid + .diploma-collection-media { margin-top: 2rem; }
.diploma-collection-media > img { display: block; width: 100%; height: clamp(16rem, 30vw, 25rem); padding: .4rem; object-fit: contain; background: #fff; border: 1px solid rgba(19,60,85,.13); border-radius: 1rem; box-shadow: 0 .5rem 1.4rem rgba(19,60,85,.12); cursor: zoom-in; transition: transform .22s ease, box-shadow .22s ease; }
.diploma-collection-media > img:is(:hover, :focus-visible) { transform: translateY(-.2rem); box-shadow: 0 .85rem 1.9rem rgba(19,60,85,.2); }
.diploma-document-card { min-width: 0; overflow: hidden; margin: 0; background: #fff; border: 1px solid #d7e3ed; border-radius: 1rem; box-shadow: 0 .5rem 1.4rem rgba(19,60,85,.11); }
.diploma-document-card > a { display: grid; height: 100%; color: #123a5c; text-decoration: none; }
.diploma-document-card img { display: block; width: 100%; aspect-ratio: .71; padding: .45rem; object-fit: contain; background: #f8fbfd; border-bottom: 1px solid #e0e9f0; transition: transform .22s ease; }
.diploma-document-card > a:is(:hover, :focus-visible) img { transform: scale(1.015); }
.diploma-document-card > a:focus-visible { outline: 3px solid #2678bd; outline-offset: -3px; }
.diploma-document-meta { display: grid; gap: .45rem; align-content: start; padding: 1rem 1.1rem 1.15rem; }
.diploma-document-meta strong { color: #123a5c; font-size: .95rem; line-height: 1.35; }
.diploma-document-meta small { color: #1565c0; font-weight: 800; }
.diploma-pdf-placeholder { display: grid; place-items: center; aspect-ratio: .71; color: #fff; background: #2678bd; font-size: 2.5rem; font-weight: 900; letter-spacing: .08em; }
.diploma-plus-tile { display: none; }
body.sse-editing .diploma-plus-tile { display: grid; place-items: center; align-self: stretch; min-height: 10rem; margin: 0; color: #075985; background: #eef8ff; border: 3px dashed #2684c7; border-radius: 1rem; cursor: pointer; box-shadow: inset 0 0 0 1px #fff; }
body.sse-editing .diploma-plus-tile > span { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; background: #fff; border: 3px solid currentColor; border-radius: 50%; font: 400 3.25rem/1 system-ui, sans-serif; }
body.sse-editing .diploma-plus-tile:is(:hover, :focus-visible) { transform: translateY(-2px); outline: 4px solid rgba(56,189,248,.35); outline-offset: 3px; }
body.sse-editing .diploma-collection-grid > .diploma-plus-tile { min-height: 10rem; }
body.sse-editing .diploma-collection-media > .diploma-plus-tile { min-height: 28rem; }
body.sse-editing .diploma-collection-media > .diploma-plus-tile:only-child { width: min(100%, 12rem); min-height: 7rem; justify-self: center; border-width: 2px; border-style: dotted; border-radius: .7rem; }
body.sse-editing .diploma-collection-media > .diploma-plus-tile:only-child > span { width: 3rem; height: 3rem; border-width: 2px; font-size: 2.1rem; }
.diploma-existing-collection-link { margin-bottom: 2rem; }
.diploma-media-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); grid-auto-flow: row dense; gap: clamp(.85rem, 2vw, 1.4rem); align-items: stretch; }
.diploma-media-content:empty::before { content: "Media can be added here with Sharkawy Content Studio."; grid-column: 1 / -1; padding: 3rem 1rem; color: #607589; border: 2px dashed #bfd4e6; border-radius: 1rem; text-align: center; }
.diploma-media-content > :where(p,figure,.wp-block-image), .diploma-media-content .gallery-item { min-width: 0; margin: 0 !important; }
.diploma-media-content img { display: block; width: 100%; height: clamp(16rem, 28vw, 23rem); padding: .35rem; object-fit: cover; background: #fff; border: 1px solid rgba(19,60,85,.13); border-radius: 1rem; box-shadow: 0 .5rem 1.4rem rgba(19,60,85,.12); transition: transform .22s ease, box-shadow .22s ease; }
.diploma-media-page.is-certificates .diploma-media-content img { object-fit: contain; }
.diploma-media-content img:is(:hover, :focus-visible) { transform: translateY(-.2rem); box-shadow: 0 .85rem 1.9rem rgba(19,60,85,.2); }
.diploma-media-content :where(.wp-block-gallery,.gallery) { display: contents; }
.diploma-media-switcher { display: flex; justify-content: center; gap: .65rem; margin-top: 2.5rem; }
.diploma-media-switcher a { padding: .7rem 1.1rem; color: #0d47a1; background: #fff; border: 1px solid #b8cde2; border-radius: 999px; font-weight: 750; text-decoration: none; }
.diploma-media-switcher a[aria-current="page"] { color: #fff; background: #1565c0; border-color: #1565c0; }
.fellowship-lightbox { position: fixed; z-index: 999998; inset: 0; display: grid; place-items: center; padding: 4rem; background: rgba(3,14,27,.92); }
.fellowship-lightbox[hidden] { display: none; }
.fellowship-lightbox img { max-width: min(88vw, 80rem); max-height: 84vh; object-fit: contain; border-radius: .65rem; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45); }
.fellowship-lightbox button { position: fixed; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; color: #fff; background: rgba(21,101,192,.9); border: 1px solid rgba(255,255,255,.8); border-radius: 50%; cursor: pointer; font-size: 1.5rem; }
.fellowship-lightbox-close { top: 1.25rem; right: 1.25rem; }
.fellowship-lightbox-prev { top: 50%; left: 1.25rem; transform: translateY(-50%); }
.fellowship-lightbox-next { top: 50%; right: 1.25rem; transform: translateY(-50%); }
.fellowship-lightbox button:focus-visible { outline: 3px solid #66b2ff; outline-offset: 3px; }
body.sse-editing .diploma-media-content > img { cursor: pointer; }
@media (max-width: 56rem) { .diploma-category-grid { grid-template-columns: 1fr; width: min(100%, 38rem); } .diploma-category-card { min-height: 7.5rem; } }
@media (max-width: 37.5rem) {
  .diploma-media-main { width: min(100% - 1.25rem, 90rem); }
  .diploma-media-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .diploma-media-content img { height: 12rem; border-radius: .7rem; }
  .diploma-collection-media > img { height: 15rem; border-radius: .7rem; }
  .fellowship-lightbox { padding: 3.5rem .75rem; }
}
@media (prefers-reduced-motion: reduce) { .diploma-media-content img { transition: none; } }