/**
 * Card Styles
 *
 * @package revival
 */

 :root {
	--card-shadow: 0 0px 4px rgba(16, 34, 35, 0.1), 0 12px 19px -4px rgba(16, 34, 35, 0.13);

	/* ---------------------------------------------------------------
	   Shared card tokens.
	   Every card component (archive, event, video) reads from these, so
	   the type ladder and surface treatment stay in sync from one place.
	   --------------------------------------------------------------- */
	--card-border-color: var(--neutral-light);
	--card-surface: var(--white);
	--card-radius: var(--radius-xxl);

	--card-padding-inline: var(--space-s);
	--card-padding-block-start: calc(var(--space-xs) * 1.2);
	--card-padding-block-end: var(--space-xs);

	/* Title */
	--card-title-size: calc(var(--text-l) * 0.73);
	--card-title-weight: 460;
	--card-title-leading: 1.3;
	--card-title-gap: 5px;

	/* Secondary meta — scripture, event date/time/location */
	--card-meta-size: var(--text-s);
	--card-meta-weight: 450;

	/* Tertiary meta — dates, bylines */
	--card-meta-small-size: var(--text-xs);
	--card-meta-small-weight: 450;

	/* Space above the bottom-pinned meta row */
	--card-meta-offset: calc(var(--space-xs) * .85);

	/* Featured image dim on hover */
	--card-media-tint-top: rgba(16, 34, 35, 0.02);
	--card-media-tint-bottom: rgba(16, 34, 35, 0.06);
	--card-media-tint-hover-top: rgba(16, 34, 35, 0.26);
	--card-media-tint-hover-bottom: rgba(16, 34, 35, 0.40);
}

 .card {
    transition: box-shadow var(--transition-duration) var(--transition-timing), 
                transform var(--transition-duration) var(--transition-timing);
    border-radius: var(--card-radius);
}

.card--elevated {
	box-shadow: var(--box-shadow-m) !important;
}

.card--elevated:hover {
	box-shadow: var(--box-shadow-m) !important;
}

.card--static,
.card--static:hover {
    transform: none;
    box-shadow: none;
}

a.card__link {
	color: var(--text-dark);
    transition: color var(--transition-duration) var(--transition-timing);
}

a.card__link:hover {
	color: var(--text-dark) !important;
}

a.card__link:hover svg {
	fill: var(--text-dark) !important;
}

/**
 * Archive Card
 *
 * Generic card: media on top, heading, date. Bordered surface with the media
 * sitting flush inside it — the card does the clipping, so the media needs
 * no radius of its own.
 */

.archive-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-radius);
	background: var(--card-surface);
	box-shadow: none;
	overflow: hidden;
	font-family: var(--text-font-family);
}

.card a.archive-card__media img,
.card div.archive-card__media img {
    border-radius: 0 !important;
}

.card a.archive-card__media,
.card div.archive-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    display: block;
}

.card a.archive-card__media--placeholder {
    overflow: hidden;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card a.archive-card__media img,
.card div.archive-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-card__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding-inline: var(--card-padding-inline);
	padding-block-start: var(--card-padding-block-start);
	padding-block-end: var(--card-padding-block-end);
}

.archive-card__heading {
	margin: 0 0 var(--card-title-gap);
	font-size: var(--card-title-size);
	font-weight: var(--card-title-weight);
	line-height: var(--card-title-leading);
	font-family: var(--text-font-family);
}

.archive-card--post .archive-card__heading {
    font-size: 35px;
    font-weight: 200;
    line-height: 1;
    font-family: var(--heading-font-family);
}

.archive-card__excerpt {
	margin: 0;
	font-size: var(--card-meta-size);
	font-weight: var(--card-meta-weight);
	line-height: 1.45;
	color: var(--neutral-semi-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.archive-card--post .archive-card__excerpt {
	margin: 13px 0 0;
    font-size: 16px;
	line-height: 1.25;
	-webkit-line-clamp: 3;
}

/* Pinned to the bottom so cards in a row align regardless of title length. */
.archive-card__date {
	margin-block-start: auto;
	padding-block-start: var(--card-meta-offset);
	font-size: var(--card-meta-small-size);
	font-weight: var(--card-meta-small-weight);
	color: var(--neutral-semi-dark);
}

.archive-card__media--placeholder {
	aspect-ratio: 16/9;
	background-color: var(--neutral-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--neutral-semi-light);
	transition: color var(--transition-duration) var(--transition-timing);
}

.archive-card__media--placeholder:hover {
	color: var(--neutral-semi-light);
}

.archive-card__media--placeholder img,
.archive-card__media--placeholder svg {
    width: 28%;
    max-width: 5rem;
    height: auto;
    object-fit: contain;
    opacity: 0.35;
}

.card .archive-card__media--placeholder,
.card .archive-card__media--placeholder:hover {
    color: var(--neutral-semi-light) !important;
}

/**
 * Archive Card — Stretched Link Pattern
 */

/* Media wrapper — gives the absolutely-positioned save button a positioning context. */
.archive-card__media-wrapper {
	position: relative;
}

/* Stretched link: heading anchor extends to fill the whole card. */
.archive-card .archive-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Save button wrapper — sits above both the stretched link and the media overlay. */
.archive-card .save-button-wrapper {
	position: absolute;
	top: var(--space-s);
	right: var(--space-s);
	z-index: 10;
}

/* Bookmark / save button. */
.archive-card__bookmark {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-circle);
	background-color: var(--bg-ultra-light);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--card-heading-color, var(--text-dark));
	box-shadow: var(--box-shadow-m);
	transition: transform var(--transition-duration) var(--transition-timing);
}

.archive-card__bookmark:hover {
	transform: scale(1.1);
}

/**
 * Event Card
 *
 * Vertical event card: media on top, title, stacked meta rows.
 * Icons stay on this one — date, time and location are three similar-looking
 * values, so the icon is what tells them apart.
 */

 .event-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--text-dark);
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-radius);
	background: var(--card-surface);
	box-shadow: none;
	overflow: hidden;
	font-family: var(--text-font-family);
}

.event-card:hover {
	color: var(--text-dark);
}

.event-card__media {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	display: block;
}

.event-card__media--placeholder {
	background-color: var(--neutral-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--neutral-semi-light);
}

.event-card__media--placeholder img,
.event-card__media--placeholder svg {
	width: 28%;
	max-width: 5rem;
	height: auto;
	object-fit: contain;
	opacity: 0.35;
}

.event-card__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding-inline: var(--card-padding-inline);
	padding-block-start: var(--card-padding-block-start);
	padding-block-end: var(--card-padding-block-end);
}

.event-card__title {
	margin: 0 0 var(--card-title-gap);
	font-size: var(--card-title-size);
	font-weight: var(--card-title-weight);
	line-height: var(--card-title-leading);
	font-family: var(--text-font-family);
}

/* Meta pins to the bottom so cards in a row align regardless of title length. */
.event-card__meta {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-xs) * .4);
	margin-block-start: auto;
	padding-block-start: var(--card-meta-offset);
	font-size: var(--card-meta-size);
	font-weight: var(--card-meta-weight);
	line-height: 1.4;
	color: var(--neutral-semi-dark);
}

.event-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--space-xs) * .8);
}

.video-collection__item-body {
	line-height: 1.1;
}

.video-collection__thumb {
	position: relative;
	flex: 0 0 105px;
	aspect-ratio: 16/9;
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--neutral-light);
}

.video-collection__duration, .video-card__duration {
	pointer-events: none;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 1;
	padding: 5px 9px;
	border-radius: 100px;
	background: rgba(0,0,0,.65);
	backdrop-filter: blur(40px);
	color: white;
	font-size: 14px;
	font-weight: 665;
	line-height: 1;
}

.video-collection__duration {
	font-size: 12px;
	right: 5px;
	bottom: 5px;
	padding: 3px 5px;
}

/* Media overlay — a soft tint so light thumbnails don't bleed into the
   content area. The card border defines the edges.
   The video card handles its own overlay in video-card.css. */
.card .archive-card__media::after,
.event-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		var(--card-media-tint-top),
		var(--card-media-tint-bottom)
	);
}

/* Hover: these cards have no video preview, so the image dims instead.
   Gradients don't interpolate reliably, so the dim is a separate layer
   whose opacity animates. */
   .card .archive-card__media::before,
   .event-card__media::before {
	   content: "";
	   position: absolute;
	   inset: 0;
	   z-index: 2;
	   pointer-events: none;
	   opacity: 0;
	   background: linear-gradient(
		   to bottom,
		   var(--card-media-tint-hover-top),
		   var(--card-media-tint-hover-bottom)
	   );
	   transition: opacity var(--transition-duration) var(--transition-timing);
   }
   
   .archive-card:hover .archive-card__media::before,
   .event-card:hover .event-card__media::before {
	   opacity: 1;
   }

/* Standalone thumbnails keep the full ring — nothing else defines their edge. */
.video-collection__thumb::after,
.single-video__up-next-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--neutral-light-trans-20);
	background: linear-gradient(
		to bottom,
		var(--card-media-tint-top),
		var(--card-media-tint-bottom)
	);
}


.image-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--neutral-light);
	color: var(--neutral-semi-light);
}

.image-fallback svg {
	fill: currentColor;
}