.sdl-frontend { max-width: 1100px; margin: 0 auto; }
/* The theme's own "回首頁" breadcrumb line, shown above the page content —
   hidden only on pages that render this shortcode (scoped via :has() so
   breadcrumbs on the rest of the site are untouched). */
body:has(.sdl-frontend) .entry-crumbs { display: none; }
.sdl-frontend .sdl-breadcrumb { margin: 0 0 16px; font-size: 14px; }
.sdl-frontend .sdl-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.sdl-frontend .sdl-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .15s ease, transform .15s ease;
}
.sdl-frontend .sdl-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }
.sdl-frontend .sdl-card-thumb {
	height: 195px;
	background-size: cover;
	background-position: center;
	background-color: #f2f2f2;
}
.sdl-frontend .sdl-card-thumb-school { background-color: #eef3ff; }
.sdl-frontend .sdl-card-thumb-folder { background-color: #fff8e5; }
.sdl-frontend .sdl-card-thumb-file { display: flex; align-items: center; justify-content: center; background-color: #fbeaea; }
.sdl-frontend .sdl-pdf-label { font-weight: 700; color: #b32d2e; }
.sdl-frontend .sdl-card-thumb-video {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background-color: #e8f0fe;
	color: #1a73e8;
}
.sdl-frontend .sdl-video-play { font-size: 30px; line-height: 1; }
.sdl-frontend .sdl-video-label { font-weight: 700; }
.sdl-frontend .sdl-card-title { padding: 12px 14px 4px; font-weight: 700; font-size: 18px; color: #222; line-height: 1.3; }
.sdl-frontend .sdl-card-meta { padding: 0 14px 14px; font-size: 13px; color: #777; }
.sdl-frontend .sdl-empty { color: #777; }
.sdl-frontend .sdl-subheading { margin: 24px 0 12px; font-size: 15px; font-weight: 600; color: #444; }

/* Quick-nav: links to every other public category (and its folders)
   while browsing one — no need to go back to the school page to switch.
   Each category and its own folders (including school-exclusive ones)
   are boxed together as one "group" so it's clear at a glance which
   category a folder belongs to, instead of every category and folder
   sitting as indistinguishable pills in one flat row. */
.sdl-frontend .sdl-quick-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 14px;
	background: #f6f7f7;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
}
/* Sibling switcher: one short row of "what else is at this level", however
   deep the folder is. The breadcrumb above handles going back up, so this
   never has to list the whole library the way the old grouped box did. */
.sdl-frontend .sdl-quick-nav-siblings { align-items: center; gap: 6px; }
.sdl-frontend .sdl-quick-nav-label {
	flex: 0 0 auto;
	margin-right: 4px;
	color: #666;
	font-size: 13px;
}
.sdl-frontend .sdl-quick-nav-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 6px 12px 8px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	/* iOS Safari/Chrome (both run on WebKit) can leave the rounded-corner
	   mask stale after this box's width changes post-first-paint (e.g. once
	   fonts finish loading and the "圖片"-label + wrapped pills reflow wider),
	   producing a warped blob instead of a clean 12px-rounded rectangle.
	   overflow:hidden plus the mask-image trick forces WebKit to recompute
	   the corner clip against the box's final size. Harmless everywhere else. */
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
.sdl-frontend .sdl-quick-nav-group-active { border-color: #2271b1; background: #f5fafd; }
.sdl-frontend .sdl-quick-nav-subrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-left: 8px;
	margin-left: 2px;
	border-left: 1px dashed #cfd2d6;
}
.sdl-frontend .sdl-quick-nav-pill {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: #222;
	transition: background-color .12s ease;
}
.sdl-frontend .sdl-quick-nav-pill:hover { background: #eef1f3; }
.sdl-frontend .sdl-quick-nav-pill.sdl-quick-nav-current { color: #2271b1; }
.sdl-frontend .sdl-quick-nav-pill-sub {
	padding: 4px 12px;
	border-radius: 999px;
	background: #f6f7f7;
	border: 1px solid #e2e4e7;
	font-size: 13px;
	font-weight: 400;
	color: #333;
}
.sdl-frontend .sdl-quick-nav-pill-sub:hover { box-shadow: 0 0 0 2px #2271b1 inset; background: #fff; }
.sdl-frontend .sdl-quick-nav-pill-sub.sdl-quick-nav-current { background: #eef6fc; border-color: #2271b1; color: #2271b1; font-weight: 600; }

/* Google Drive-style file cards: a small header bar (type icon + filename)
   above the thumbnail, instead of the filename sitting under the image. */
.sdl-frontend .sdl-file-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px 8px;
	border-bottom: 1px solid #f0f0f0;
}
.sdl-frontend .sdl-file-card-icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: #ea4335;
}
.sdl-frontend .sdl-file-card-icon.sdl-icon-pdf { background: #d93025; }
.sdl-frontend .sdl-file-card-icon.sdl-icon-video { background: #1a73e8; }
.sdl-frontend .sdl-file-card-icon.sdl-icon-youtube { background: #ff0000; }
.sdl-frontend .sdl-file-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sdl-frontend .sdl-file-card .sdl-card-thumb { height: 170px; }
.sdl-lightbox-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,0.85);
	display: flex; align-items: center; justify-content: center;
	z-index: 99999; padding: 30px;
}
.sdl-lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 6px; }
/* Image preview only: swipes are handled in JS (touch-action:none keeps the
   browser from panning instead), a tap on the picture steps to the next one,
   and the picture never becomes a native drag ghost. */
.sdl-lightbox-overlay:not(.sdl-lightbox-pdf):not(.sdl-lightbox-video) {
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.sdl-lightbox-overlay:not(.sdl-lightbox-pdf):not(.sdl-lightbox-video) img {
	cursor: pointer;
	-webkit-user-drag: none;
	will-change: transform;
}
.sdl-lightbox-counter {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 13px;
	pointer-events: none;
}
.sdl-lightbox-close {
	position: absolute; top: 20px; right: 30px; color: #fff; font-size: 28px;
	cursor: pointer; background: none; border: none;
}

/* Left/right arrows for stepping through every image in the current
   folder/category without closing the lightbox and clicking the next
   thumbnail — hidden automatically when there's only one image to show. */
.sdl-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.15);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sdl-lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.sdl-lightbox-prev { left: 20px; }
.sdl-lightbox-next { right: 20px; }

/* Full-page PDF preview, Google Drive-style: a white toolbar with a "×"
   at the LEFT plus the filename, PDF filling the rest via an iframe using
   the browser's own PDF viewer. Closing returns to the page underneath —
   nothing opens in a separate tab. */
.sdl-lightbox-overlay.sdl-lightbox-pdf {
	background: #525659;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
}
.sdl-lightbox-pdf-toolbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 52px;
	padding: 0 16px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.sdl-lightbox-pdf-close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #444;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.sdl-lightbox-pdf-close:hover { background: #f0f0f0; }
.sdl-lightbox-pdf-title {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sdl-lightbox-pdf-frame {
	flex: 1 1 auto;
	width: 100%;
	border: none;
	background: #525659;
}

/* Full-page video preview — reuses the same white top-left-close toolbar
   as the PDF preview, with the video centered below via native controls. */
.sdl-lightbox-overlay.sdl-lightbox-video {
	background: #202124;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
}
.sdl-lightbox-video-wrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 20px;
}
.sdl-lightbox-video-el {
	max-width: 100%;
	max-height: 100%;
}


/* A YouTube video's card: its poster frame with a play badge, so it reads
   as a video at a glance. Playback happens in the overlay below. */
.sdl-frontend .sdl-yt-thumb {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: #202124;
}
.sdl-frontend .sdl-yt-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 44px;
	border-radius: 11px;
	background: rgba(255, 0, 0, .92);
	box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.sdl-frontend .sdl-yt-play::after {
	content: '';
	position: absolute;
	left: 24px;
	top: 12px;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
}
/* The embedded player fills the overlay, keeping 16:9. */
.sdl-lightbox-youtube .sdl-lightbox-video-wrap { padding: 0; }
.sdl-youtube-frame {
	width: 100%;
	height: 100%;
	max-width: 1600px;
	aspect-ratio: 16 / 9;
	border: none;
	background: #000;
}