/* KEN Degree College - media gallery (public grid, video embeds, lightbox)
   and the media manager screens under /media/.
   Loaded after style.css and reuses its colour variables. */

/* display:flex / display:grid below would otherwise beat the browser default
   for [hidden], so keep hidden meaning hidden. */
[hidden]{display:none!important}

/* ---------------------------------------------------------------------------
   Public gallery grid
   --------------------------------------------------------------------------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.media-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ken-line);border-radius:16px;overflow:hidden;box-shadow:var(--ken-soft-shadow);transition:box-shadow .2s,transform .2s}
.media-card:hover{box-shadow:var(--ken-shadow);transform:translateY(-3px)}
.media-frame{position:relative;display:block;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#eef3fb,#fff4d8);border:0;padding:0;margin:0;cursor:pointer;overflow:hidden}
.media-frame img,.media-frame video{width:100%;height:100%;object-fit:cover;transition:transform .35s,opacity .3s ease}
.media-card:hover .media-frame img{transform:scale(1.05)}
.media-card.is-short .media-frame{aspect-ratio:9/16}
.media-body{padding:14px 16px 16px}
.media-body h3{color:var(--ken-navy);font-size:15px;font-weight:900;line-height:1.3;margin:0}
.media-body p{color:var(--ken-muted);font-size:13px;line-height:1.5;margin-top:6px}
.media-tag{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(7,27,77,.86);color:#fff;font-size:11px;font-weight:900;letter-spacing:.02em}
.media-date{display:block;margin-top:8px;color:var(--ken-muted);font-size:12px;font-weight:800}
/* "5 photos" badge on a Campus Photos tile that holds an album */
.media-count{position:absolute;right:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(245,169,21,.95);color:var(--ken-navy);font-size:11px;font-weight:900;letter-spacing:.02em;pointer-events:none}
.media-count:before{content:"";width:11px;height:9px;border:2px solid var(--ken-navy);border-radius:2px;box-shadow:3px -3px 0 -2px var(--ken-navy),3px -3px 0 0 rgba(245,169,21,.95)}
.lightbox-count{display:block;margin-top:6px;color:rgba(255,255,255,.65);font-size:12px;font-weight:800;letter-spacing:.04em}

/* Play badge used on video tiles */
.media-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:60px;height:60px;border-radius:50%;background:rgba(7,27,77,.82);border:2px solid rgba(255,255,255,.85);box-shadow:0 10px 26px rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.media-play:after{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.media-frame:hover .media-play,.media-frame:focus-visible .media-play{background:var(--ken-amber);transform:translate(-50%,-50%) scale(1.08)}
.media-frame:hover .media-play:after,.media-frame:focus-visible .media-play:after{border-left-color:var(--ken-navy)}
.media-frame:focus-visible{outline:3px solid var(--ken-amber);outline-offset:2px}

.media-empty{color:var(--ken-muted);text-align:center;padding:26px 0}

/* ---------------------------------------------------------------------------
   YouTube embeds - a poster image is shown first and the iframe is only
   created when the visitor clicks, so no YouTube code loads with the page.
   --------------------------------------------------------------------------- */
/* One player at a time, with the picker underneath. */
.video-stage{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start;background:#fff;border:1px solid var(--ken-line);border-radius:18px;padding:18px;box-shadow:var(--ken-soft-shadow)}
.video-stage .yt-facade,.video-stage .video-file{border-radius:14px;overflow:hidden}
.video-stage .yt-facade.is-short,.video-stage .video-file.is-short{max-width:340px;margin-inline:auto}
.video-file{position:relative;width:100%;aspect-ratio:16/9;background:#071b4d}
.video-file.is-short{aspect-ratio:9/16}
.video-file video{width:100%;height:100%;object-fit:contain;background:#000}
.video-info{align-self:center}
.video-info h3{color:var(--ken-navy);font-size:19px;font-weight:900;line-height:1.28;margin:0}
.video-info p{color:var(--ken-muted);font-size:14.5px;line-height:1.6;margin-top:8px}
.video-info .yt-note{margin-top:12px}
.video-info .yt-note[hidden]{display:none!important}

.video-selector-label{margin:26px 0 12px;color:var(--ken-navy);font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.video-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.video-chip{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:10px;text-align:left;background:#fff;border:1px solid var(--ken-line);border-radius:14px;box-shadow:var(--ken-soft-shadow);font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.video-chip:hover{transform:translateY(-2px);box-shadow:var(--ken-shadow)}
.video-chip:focus-visible{outline:3px solid var(--ken-amber);outline-offset:2px}
.video-chip.is-active{border-color:var(--ken-amber);box-shadow:0 0 0 2px rgba(245,169,21,.3)}
.video-chip img,.video-chip video{width:100px;height:58px;object-fit:cover;border-radius:9px;background:#eef3fb}
.video-chip video{background:#000}
.video-chip-body{min-width:0}
.video-chip strong{display:block;color:var(--ken-navy);font-size:13.5px;font-weight:900;line-height:1.3}
.video-chip small{display:block;margin-top:4px;color:var(--ken-muted);font-size:11.5px;font-weight:800}
.yt-facade{position:relative;width:100%;aspect-ratio:16/9;background:#071b4d;overflow:hidden}
.yt-facade.is-short{aspect-ratio:9/16;max-height:640px}
.yt-facade button{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent!important;box-shadow:none!important;border-radius:0;cursor:pointer;display:block}
.yt-facade img{width:100%;height:100%;object-fit:cover;transition:transform .35s,filter .35s}
.yt-facade button:hover img{transform:scale(1.04);filter:brightness(.9)}
.yt-facade button:focus-visible{outline:3px solid var(--ken-amber);outline-offset:-3px}
.yt-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:54px;border-radius:14px;background:rgba(214,32,32,.94);box-shadow:0 12px 30px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:.2s}
.yt-badge:after{content:"";margin-left:4px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.yt-facade button:hover .yt-badge{background:#ff0000;transform:translate(-50%,-50%) scale(1.07)}
.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-note{display:block;margin-top:10px;color:var(--ken-muted);font-size:12px;font-weight:800}

/* ---------------------------------------------------------------------------
   Lightbox
   --------------------------------------------------------------------------- */
.media-lightbox{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:56px 18px;background:rgba(4,12,32,.93)}
.media-lightbox.open{display:flex}
.media-lightbox figure{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px;align-items:center;margin:0}
.media-lightbox img,.media-lightbox video{max-width:100%;max-height:78vh;border-radius:12px;box-shadow:0 26px 70px rgba(0,0,0,.5);background:#000}
/* max-width is derived from the viewport height so a tall or wide player
   always fits on screen without distorting its aspect ratio. */
.media-lightbox .lightbox-frame{position:relative;width:min(1100px,92vw);max-width:calc(76vh*16/9);aspect-ratio:16/9}
.media-lightbox .lightbox-frame.is-short{width:min(420px,86vw);max-width:calc(76vh*9/16);aspect-ratio:9/16}
.media-lightbox .media-date{color:rgba(255,255,255,.7)}
.media-lightbox .lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
.media-lightbox figcaption{color:#fff;text-align:center;max-width:820px;font-size:14px;line-height:1.5}
.media-lightbox figcaption strong{display:block;font-size:16px;font-weight:900;margin-bottom:2px}
.lightbox-btn{position:absolute;z-index:2;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:24px;font-weight:900;line-height:1;box-shadow:none!important;cursor:pointer;padding:0;min-height:0}
.lightbox-btn:hover{background:var(--ken-amber)!important;color:var(--ken-navy)!important;transform:none}
.lightbox-close{top:16px;right:16px}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox-prev:hover,.lightbox-next:hover{transform:translateY(-50%)}
body.lightbox-open{overflow:hidden}

/* ---------------------------------------------------------------------------
   Alerts shared by the login and manager screens
   --------------------------------------------------------------------------- */
.media-alert{margin:0 0 18px;padding:13px 16px;border-radius:12px;border:1px solid var(--ken-line);background:var(--ken-light);color:var(--ken-navy);font-size:14px;font-weight:800;line-height:1.5}
.media-alert-ok{background:#eaf7ee;border-color:#bfe3ca;color:#14532d}
.media-alert-warn{background:var(--ken-amber-soft);border-color:rgba(217,139,0,.35);color:#6b4400}
.media-alert-error{background:#fdecec;border-color:#f3c2c2;color:#8a1c1c}
.media-alert code{background:rgba(7,27,77,.07);border-radius:4px;padding:1px 5px;font-size:13px}

/* ---------------------------------------------------------------------------
   Media manager
   --------------------------------------------------------------------------- */
.admin-body{background:var(--ken-light)}
.admin-bar{background:#fff;border-bottom:1px solid var(--ken-line);box-shadow:0 8px 26px rgba(7,27,77,.08)}
.admin-bar-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.admin-bar .brand img{width:56px;height:56px}
.admin-bar .brand-text strong{font-size:24px}
.admin-bar-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.admin-user{color:var(--ken-muted);font-size:13px;font-weight:800}
.admin-signout{color:var(--ken-navy);font-size:13px;font-weight:900;text-decoration:underline}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--ken-line)}
.admin-tabs a{padding:13px 16px;color:var(--ken-muted);font-size:13.5px;font-weight:900;border-bottom:3px solid transparent}
.admin-tabs a:hover{color:var(--ken-navy)}
.admin-tabs a.is-active{color:var(--ken-navy);border-bottom-color:var(--ken-amber)}
.admin-main{padding:26px 0 60px}
.admin-hint{color:var(--ken-muted);font-size:13px;line-height:1.55}
.admin-optional{color:var(--ken-muted);font-size:12px;font-weight:700}
.admin-empty{background:#fff;border:1px dashed var(--ken-line);border-radius:14px;padding:28px;text-align:center;color:var(--ken-muted);font-weight:800}
.admin-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.admin-stats div{background:#fff;border:1px solid var(--ken-line);border-radius:14px;padding:16px;text-align:center}
.admin-stats strong{display:block;color:var(--ken-navy);font-size:26px;font-weight:900;line-height:1.1}
.admin-stats span{display:block;color:var(--ken-muted);font-size:12px;font-weight:800;margin-top:4px}
.admin-forms{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:30px}
.admin-forms h2{font-size:20px}
.admin-list .section-top{margin-top:8px}
.admin-item{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;background:#fff;border:1px solid var(--ken-line);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:var(--ken-soft-shadow)}
.admin-item.is-hidden{opacity:.62;border-style:dashed}
.admin-thumb{position:relative;border-radius:12px;overflow:hidden;background:#eef3fb;aspect-ratio:4/3}
.admin-thumb img,.admin-thumb video{width:100%;height:100%;object-fit:cover}
.admin-type{position:absolute;left:8px;top:8px;padding:4px 9px;border-radius:999px;background:rgba(7,27,77,.86);color:#fff;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.admin-slot{position:absolute;left:8px;right:8px;bottom:8px;padding:4px 9px;border-radius:8px;background:rgba(245,169,21,.95);color:var(--ken-navy);font-size:10px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-fields{min-width:0}
.admin-edit{gap:10px}
.admin-edit label{font-size:13px}
.admin-edit input,.admin-edit select{min-height:42px;margin-top:4px}
.admin-edit textarea{min-height:64px;margin-top:4px}
.admin-add-news{margin-bottom:28px}

/* Server check page */
.check-list{display:grid;list-style:none;margin:16px 0 0;padding:0;border:1px solid var(--ken-line);border-radius:12px;overflow:hidden}
.check-list li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px;align-items:center;padding:11px 16px;font-size:14px;border-bottom:1px solid var(--ken-line)}
.check-list li:nth-child(odd){background:var(--ken-soft)}
.check-list li:last-child{border-bottom:0}
.check-list strong{color:var(--ken-navy)}
.check-list code{color:var(--ken-muted);font-size:12.5px;word-break:break-all}
.check-reason{display:block;margin-top:4px;color:#8a1c1c;font-size:12.5px;font-style:normal;font-weight:700}
.check-badge{display:inline-block;margin-right:8px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.check-badge-ok{background:#eaf7ee;color:#14532d;border:1px solid #bfe3ca}
.check-badge-bad{background:#fdecec;color:#8a1c1c;border:1px solid #f3c2c2}
.check-badge-warn{background:var(--ken-amber-soft);color:#6b4400;border:1px solid rgba(217,139,0,.35)}
.check-code{margin-top:10px;padding:16px;border-radius:12px;background:var(--ken-navy);color:#fff;font-family:Consolas,"Courier New",monospace;font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-all;overflow-x:auto}
.admin-item-news{grid-template-columns:minmax(0,1fr)}
.admin-nothumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ken-muted);font-size:12px;font-weight:800;text-align:center;padding:10px}
.admin-format-help{margin-top:-4px}
.admin-format-help summary{color:var(--ken-navy);font-size:13px;font-weight:900;cursor:pointer}
.admin-format-help .list{margin-top:10px!important}
.admin-format-help li{font-size:13px}
.admin-format-help code{background:#eef3fb;border-radius:4px;padding:1px 5px;font-size:12.5px}
.admin-photos{margin-top:18px;padding-top:16px;border-top:1px solid var(--ken-line)}
.admin-photos h3{color:var(--ken-navy);font-size:14px;font-weight:900;margin-bottom:10px}
.admin-photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:14px}
.admin-photo-strip figure{margin:0;display:grid;gap:6px}
.admin-photo-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--ken-line)}
.admin-photo-strip form{margin:0}
.admin-photo-strip button{width:100%}
.admin-edit-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.admin-edit button{width:max-content}
.admin-meta{color:var(--ken-muted);font-size:12px;font-weight:800;margin:12px 0 10px}
.admin-meta a{color:var(--ken-navy);text-decoration:underline}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px}
.admin-actions form{margin:0}
.admin-actions button.admin-btn{min-height:38px!important;padding:9px 14px!important;border-radius:9px!important;border:1px solid var(--ken-line)!important;background:#fff!important;color:var(--ken-navy)!important;font:inherit!important;font-size:12px!important;font-weight:900!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;cursor:pointer}
.admin-actions button.admin-btn:hover{background:var(--ken-amber-soft)!important;transform:none!important}
.admin-actions button.admin-btn:disabled{opacity:.45;cursor:not-allowed}
.admin-actions button.admin-btn-on{background:#eaf7ee!important;border-color:#bfe3ca!important;color:#14532d!important}
.admin-actions button.admin-btn-danger{background:#fdecec!important;border-color:#f3c2c2!important;color:#8a1c1c!important}
.admin-actions button.admin-btn-danger:hover{background:#f9d7d7!important}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media(max-width:1120px){
  .video-stage{grid-template-columns:1fr}
  .yt-facade.is-short{max-width:420px;margin-inline:auto}
  .admin-stats{grid-template-columns:repeat(3,1fr)}
  .admin-forms{grid-template-columns:1fr}
}
@media(max-width:720px){
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .media-body{padding:12px}
  .media-body h3{font-size:13px}
  .media-body p{font-size:12px}
  .media-lightbox{padding:64px 10px}
  .lightbox-prev{left:6px}
  .lightbox-next{right:6px}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .admin-item{grid-template-columns:1fr}
  .admin-thumb{max-width:260px}
  .admin-edit-row{grid-template-columns:1fr}
}