/*
 * resources.css - the library: shelves, cards, the single resource view.
 * Structure comes from components.css; this file adds only what the library
 * needs on top of it.
 */

/* ==========================================================================
   LIBRARY HEAD
   ========================================================================== */
.cn-library__head {
    text-align: center;
    padding-bottom: 35px;
    padding-top: 30px;
}

.cn-library__empty {
	color: var(--cn-text-muted);
}

/* ==========================================================================
   SINGLE RESOURCE
   ========================================================================== */
.cn-resource__type {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cn-coral);
	text-decoration: none;
}

.cn-resource__head h1 {
	margin: 0 0 20px;
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	line-height: 1.15;
}

.cn-resource__media {
	margin-bottom: 24px;
}

.cn-resource__media img,
.cn-resource__media audio {
	width: 100%;
	height: auto;
	border-radius: var(--cn-radius-card, 16px);
	display: block;
}

.cn-resource__body {
	max-width: 66ch;
}

.cn-resource__download {
	margin-top: 24px;
}

.cn-resource__back {
	margin-top: 32px;
	font-size: 0.9rem;
}

/* Responsive embed, 16:9 for video and a fixed height for audio players.

   Square corners on purpose. YouTube and SoundCloud embeds are out-of-process
   iframes, rendered in a separate process, and Chrome cannot route clicks into
   that process through a rounded clip. Tested both ways: border-radius plus
   overflow:hidden on this wrapper swallowed every click, and moving the radius
   onto the iframe itself did too. Any radius here breaks the player, so the
   cards carry the rounded look and embeds stay rectangular. */
.cn-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--cn-indigo);
}

.cn-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cn-embed--audio {
	aspect-ratio: auto;
	height: 166px;
	background: transparent;
}

/* ==========================================================================
   SKETCH ALIGNMENT (Large centered cards with edge peeks)
   ========================================================================== */

.cn-scroll-row > * {
scroll-snap-align: center;
flex: 0 0 80%; /* Large cards per sketch */
max-width: 450px;
}

@media (min-width: 700px) {
.cn-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.cn-card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   CARD ALIGNMENT LOCKS
   ========================================================================== */


/* Lock the media container and force the image to fill it uniformly */
.cn-card__media {
    position: relative;
    width: 100%;
    overflow: hidden;
}