/*
 * 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 and the WordPress login form, scoped to a
   .cn-form wrapper)
   ========================================================================== */
.cn-form .ff-el-input--label label,
.cn-form .login-username label,
.cn-form .login-password label {
	font-family: var(--cn-primary-font);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cn-indigo);
}

.cn-form .ff-el-group,
.cn-form .login-username,
.cn-form .login-password,
.cn-form .login-remember {
	margin: 0 0 18px;
}

.cn-form .ff-el-form-control,
.cn-form .login-username .input,
.cn-form .login-password .input {
	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,
.cn-form .login-username .input:focus,
.cn-form .login-password .input:focus {
	outline: 2px solid var(--cn-violet);
	outline-offset: 1px;
	border-color: var(--cn-violet);
}

.cn-form .ff-btn-submit,
.cn-form .login-submit .button {
	font-family: var(--cn-primary-font);
	font-weight: 700;
	font-size: 1rem;
	width: 100%;
	padding: 15px 20px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
}

/* Brand colour for everything Fluent Forms paints with its primary
   (submit button, payment summary). */
.cn-form {
	--fluentform-primary: var(--cn-cta-color);
}

/* WordPress login form: what Fluent Forms gives its own fields for free */
.cn-form .login-username .input,
.cn-form .login-password .input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
}

.cn-form .login-remember label {
	font-size: 0.9rem;
	color: var(--cn-text-muted);
}

.cn-form .login-submit .button {
	background-color: var(--cn-cta-color);
	color: var(--cn-white);
}

.cn-form form .ff-btn-submit:not(.ff_btn_no_style):hover,
.cn-form .login-submit .button:hover {
	background-color: var(--cn-indigo);
}

/* Choice chips (radio fields shown as buttons, e.g. donation amounts):
   three per row on phones, one row from 769px. The plugin joins them into
   a segmented bar and stacks them under 768px with !important borders, so
   the border rules need !important to win. */
.cn-form .ff_list_buttons .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cn-space-2);
}

.cn-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check {
	display: block;
	flex: 1 1 calc(33.333% - var(--cn-space-2));
	margin: 0;
}

.cn-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: var(--cn-space-3) var(--cn-space-2);
	text-align: center;
	font-family: var(--cn-primary-font);
	font-size: 1rem;
	font-weight: 600;
	color: var(--cn-indigo);
	background-color: var(--cn-white);
	border: 1px solid var(--cn-border-subtle) !important;
	border-radius: var(--cn-radius-pill) !important;
	box-shadow: none !important;
}

.cn-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
	color: var(--cn-indigo);
	border-color: var(--cn-cta-color) !important;
}

.cn-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within > span {
	background-color: var(--cn-white);
	outline: 2px solid var(--cn-violet);
	outline-offset: 2px;
}

.cn-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span {
	color: var(--cn-white);
	background-color: var(--cn-cta-color);
	border-color: var(--cn-cta-color) !important;
}

@media (min-width: 769px) {
	.cn-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check {
		flex-basis: 0;
	}
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   EMBED (responsive player wrapper)
   ========================================================================== */
/* 16:9 for video and a fixed height for audio players. Moved here from
   pages/resources.css: any page can hold an embed, not only the library.

   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;
}

/* ==========================================================================
   SURFACE (solid panel over the brand backdrop)
   --------------------------------------------------------------------------
   The backdrop gradient sits behind every page (app-shell.css), so long text
   needs something solid under it. .cn-surface is that panel; --card floats it
   with rounded corners and a soft shadow.
   ========================================================================== */
.cn-surface {
    box-sizing: border-box;
    background-color: var(--cn-surface-color);
    padding: var(--cn-space-6) var(--cn-space-5);
    text-align: left;
}

.cn-surface--card {
    margin-inline: var(--cn-space-3);
    border-radius: var(--cn-radius-xl);
    box-shadow: var(--cn-shadow-soft);
}

@media (min-width: 769px) {
    .cn-surface {
        padding: var(--cn-space-8) var(--cn-space-7);
    }

    .cn-surface--card {
        max-width: var(--cn-reading-width);
        margin-inline: auto;
    }
}

/* ==========================================================================
   PROSE (whatever the editor produced: posts, pages, legal text)
   --------------------------------------------------------------------------
   The only place editor HTML is styled. Left aligned against the centred
   .cn-section default, one vertical rhythm, and the reading measure.
   ========================================================================== */
.cn-prose {
    max-width: var(--cn-measure);
    margin-inline: auto;
    text-align: left;
    color: var(--cn-text-color);
    font-size: var(--cn-reading-size);
    line-height: var(--cn-leading-body);
}

/* One rhythm: no margins on children, a gap between siblings */
.cn-prose > * {
    margin-top: 0;
    margin-bottom: 0;
}

.cn-prose > * + * {
    margin-top: 1.1em;
}

/* Nothing opens with a gap, whatever it is (headings carry a larger one) */
.cn-prose > :first-child {
    margin-top: 0;
}

/* Undo base.css's fixed paragraph metrics and measure inside prose */
.cn-prose p,
.cn-prose li {
    font-size: inherit;
    line-height: inherit;
    max-width: none;
    text-align: left;
}

.cn-prose h1,
.cn-prose h2,
.cn-prose h3,
.cn-prose h4 {
    text-align: left;
    line-height: var(--cn-leading-tight);
}

.cn-prose > :is(h1, h2, h3, h4) {
    margin-top: 1.8em;
}

.cn-prose > :is(h1, h2, h3, h4) + * {
    margin-top: 0.6em;
}

.cn-prose ul,
.cn-prose ol {
    padding-left: 1.4em;
}

.cn-prose li + li {
    margin-top: 0.4em;
}

.cn-prose a {
    color: var(--cn-primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cn-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--cn-radius-md);
}

.cn-prose blockquote {
    margin-inline: 0;
    padding-left: var(--cn-space-4);
    border-left: 4px solid var(--cn-cta-color);
    font-style: italic;
}

/* Players pasted into the editor (oEmbed iframes carry fixed width/height
   attributes): fluid 16:9 and square corners, for the reason given in EMBED. */
.cn-prose iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Justified paragraphs. Used by articles only (single.php): the brand manual
   asks for ragged-right text, and this is the owner's exception for articles,
   at every width (decided 7 Oct 2026, see 13-DECISIONES). */
.cn-prose--justified p {
    text-align: justify;
    hyphens: auto;
}

/* ==========================================================================
   READING (template-parts/reading.php: one post or page)
   --------------------------------------------------------------------------
   The head sits on the backdrop, like the home hero; the content goes on a
   surface card. Pages and posts share it.
   ========================================================================== */
.cn-reading__head {
    box-sizing: border-box;
    max-width: var(--cn-reading-width);
    margin-inline: auto;
    padding: var(--cn-space-5) var(--cn-space-5) var(--cn-space-6);
    text-align: left;
}

.cn-reading__title {
    margin-bottom: var(--cn-space-3);
}

.cn-reading__meta {
    font-size: 14px;
    color: var(--cn-text-muted);
}

.cn-reading__image {
    margin: 0 0 var(--cn-space-6);
}

.cn-reading__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cn-radius-md);
}