/*
 * components.css - reusable pieces not tied to any single page:
 * buttons, media wrappers and post cards.
 */

/* --- Primary button (Get Started): solid Soft Coral --- */
.cn-btn-outline {
    display: inline-block;
    background-color: var(--cn-cta-color);
    color: var(--cn-white);
    border: 2px solid var(--cn-cta-color);
    padding: 14px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--cn-primary-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.cn-btn-outline:hover {
    background-color: var(--cn-indigo);
    border-color: var(--cn-indigo);
    color: var(--cn-white);
    transform: scale(1.05);
}

/* --- Secondary button (outline) --- */
.cn-btn-ghost {
    display: inline-block;
    background-color: transparent;
    color: var(--cn-text-color);
    border: 2px solid var(--cn-text-color);
    padding: 14px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--cn-primary-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.cn-btn-ghost:hover {
    background-color: var(--cn-text-color);
    color: var(--cn-background-color);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .cn-btn-outline,
    .cn-btn-ghost { font-size: 16px; padding: 14px 40px; }
}


/* ==========================================================================
   MEDIA & IMAGES
   ========================================================================== */

.cn-image-wrapper {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
}

.cn-fluid-image {
    width: 100%;
    max-width: 100%; 
    height: auto;    
    border-radius: 12px; 
    object-fit: cover;

}

.cn-image-bleed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: -40px;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.cn-image-bleed .cn-fluid-image {
    border-radius: 0;
    width: 100%;
}

@media (min-width: 769px) {
    .cn-image-bleed .cn-fluid-image {
        max-width: 800px;
        width: auto;
    }
}

/* ==========================================================================
   POST CARDS
   ========================================================================== */
.cn-post-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.cn-post-card {
    background-color: var(--cn-surface-color);
    border-radius: 16px;
    box-shadow: var(--cn-shadow-soft);
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.cn-post-card-image {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cn-post-card-image .cn-fluid-image {
    border-radius: 16px 16px 0 0;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.cn-post-card-content {
    padding: 25px;
}

.cn-post-card-title {
    font-size: 22px;
    margin-bottom: 10px;
}

.cn-post-card-title a {
    color: var(--cn-secondary-color);
    text-decoration: none;
}

.cn-post-card-meta {
    font-family: var(--cn-primary-font);
    font-size: 14px;
    color: var(--cn-text-muted);
    margin-bottom: 15px;
}

.cn-post-card-excerpt p {
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}

.cn-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.cn-pagination .nav-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.cn-pagination a {
    color: var(--cn-secondary-color);
    font-weight: bold;
    text-decoration: none;
}

@media (min-width: 769px) {
    .cn-post-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* ==========================================================================
   BULLET LIST (dot markers in the accent colour)
   ========================================================================== */
.cn-list-dots {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

.cn-list-dots li {
	position: relative;
	padding-left: 22px;
	font-size: 0.95rem;
	line-height: 1.4;
}

.cn-list-dots li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cn-coral);
}

/* ==========================================================================
   LOCKUP (lotus + wordmark stacked)
   ========================================================================== */
.cn-lockup {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.cn-lockup__lotus {
	width: 64px;
	color: var(--cn-lotus-color);
}

.cn-lockup__wordmark {
	width: 160px;
	color: var(--cn-indigo);
}

.cn-lockup__lotus svg,
.cn-lockup__wordmark svg {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 900px) {
	.cn-lockup__lotus { width: 80px; }
}

/* ==========================================================================
   FORM CONTROLS (Fluent Forms, scoped to a .cn-form wrapper)
   ========================================================================== */
.cn-form .ff-el-input--label label {
	font-family: var(--cn-primary-font);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cn-indigo);
}

.cn-form .ff-el-group {
	margin-bottom: 18px;
}

.cn-form .ff-el-form-control {
	font-family: var(--cn-primary-font);
	font-size: 1rem;
	padding: 13px 14px;
	border: 1px solid var(--cn-border-subtle);
	border-radius: 10px;
	background: var(--cn-white);
	color: var(--cn-black);
}

.cn-form .ff-el-form-control:focus {
	outline: 2px solid var(--cn-violet);
	outline-offset: 1px;
	border-color: var(--cn-violet);
}

.cn-form .ff-btn-submit {
	font-family: var(--cn-primary-font);
	font-weight: 700;
	font-size: 1rem;
	width: 100%;
	padding: 15px 20px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
}
/* ==========================================================================
   SPLIT SECTION (two halves: brand + content)
   --------------------------------------------------------------------------
   Stacks on mobile, sits side by side from 900px. The halves carry no colour
   of their own: use the cn-bg-* utilities or a page modifier.
   ========================================================================== */
.cn-split {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.cn-split__half {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 40px 24px 48px;
	box-sizing: border-box;
	text-align: left;
}

.cn-split__inner {
	width: 100%;
	max-width: 460px;
}

@media (min-width: 900px) {
	.cn-split {
		flex-direction: row;
	}

	.cn-split__half {
		flex: 1 1 50%;
		padding: 64px 56px;
	}
}

/* ==========================================================================
   SHELF (titled band holding a scroll row or a card grid)
   --------------------------------------------------------------------------
   Not specific to the library: any page can wrap a row of cards in a shelf.
   ========================================================================== */
.cn-shelf {
    margin: 0;
    padding-bottom: 50px;
    background-color: rgba(255, 255, 255, 0.4);
}

/* Alternating backgrounds give a stack of shelves some vertical rhythm */
section.cn-shelf:nth-of-type(even) {
    background-color: transparent;
}

.cn-shelf__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: column;
    padding-top: 50px;
}

.cn-shelf__title {
	margin: 0;
}

.cn-shelf__all {
	flex: none;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cn-coral);
	text-decoration: none;
	white-space: nowrap;
}

.cn-shelf__all:hover,
.cn-shelf__all:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   SCROLL ROW (horizontal shelf)
   --------------------------------------------------------------------------
   The next card peeks in from the right edge, which is what tells a thumb
   the row scrolls. Snap points keep cards from stopping half shown.
   ========================================================================== */

.cn-scroll-row {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    padding-inline: 10vw;
}

.cn-scroll-row::-webkit-scrollbar {
	display: none;
}

.cn-scroll-row > * {
	scroll-snap-align: start;
	flex: 0 0 78%;
	max-width: 300px;
}

@media (min-width: 700px) {
	.cn-scroll-row > * {
		flex-basis: 40%;
	}
}

@media (min-width: 1000px) {
	.cn-scroll-row > * {
		flex-basis: 25%;
	}
}

/* ==========================================================================
   RESOURCE CARD
   ========================================================================== */
.cn-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.cn-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--cn-radius-card, 16px);
	background-color: var(--cn-lavender, #E8E4F3);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Every card keeps the same 16/9 media box, whatever the media kind. Image
   resources used to switch to a 3/4 portrait ratio, which made the Sacred Art
   shelf noticeably taller than every other shelf. object-fit:cover on the
   thumb crops art to fit rather than changing the card height. */

.cn-card__badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cn-white);
	background: rgba(42, 46, 109, 0.78);
	backdrop-filter: blur(4px);
}

.cn-card__title {
    margin-top: 15px;
    min-height: 2.6em;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
}

.cn-card:hover .cn-card__media,
.cn-card:focus-visible .cn-card__media {
	outline: 2px solid var(--cn-violet);
	outline-offset: 2px;
}

/* ==========================================================================
   CARD GRID (a shelf seen in full)
   ========================================================================== */
.cn-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 65px;
    margin-bottom: 35px;
}

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

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

/* The card thumbnail, defined once. It fills the media box and is cropped to
   the box's aspect ratio. The crop stays centred by default: YouTube serves
   hqdefault.jpg at 480x360, with black letterbox bars baked into the top and
   bottom of widescreen videos, and a centred crop is what removes them. */
.cn-card__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Artwork has no letterbox bars, so its crop is anchored to the top edge and
   everything trimmed comes off the bottom. Keeps faces and figures in frame
   on the portrait paintings in the Sacred Art shelf. */
.cn-card--image .cn-card__thumb {
    object-position: center top;
}