/*
 * Theme-agnostic via CSS custom properties — a theme can override any
 * --icna-cards-* value without editing this file. Sane fallbacks are
 * baked into every declaration below so the grid looks reasonable with
 * zero theme customization. Accent defaults to icnacalgary.com's own
 * brand green (#009240, taken from the active theme's Additional CSS —
 * see docs/CUSTOM-CARDS-DISPLAY-1-task-notes.md), not an invented color.
 */
.icna-cards-grid {
	display: grid;
	grid-template-columns: var( --icna-cards-columns, repeat( auto-fill, minmax(240px, 1fr) ) );
	gap: var( --icna-cards-gap, 20px );
	margin: var( --icna-cards-margin, 1.5em 0 );
	/* Default grid behavior already stretches items to the tallest row —
	   stated explicitly so equal card heights across a row are guaranteed
	   by layout, never a fixed height. */
	align-items: stretch;
}

.icna-cards-empty {
	grid-column: 1 / -1;
	opacity: 0.7;
}

.icna-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var( --icna-cards-radius, 10px );
	background: var( --icna-cards-bg, #fff );
	box-shadow: var( --icna-cards-shadow, 0 1px 3px rgba(0,0,0,0.12) );
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.icna-card:hover {
	box-shadow: var( --icna-cards-shadow-hover, 0 4px 14px rgba(0,0,0,0.16) );
}

.icna-card-face {
	/* Grows to fill the card's stretched height so a short card sitting
	   next to a tall one in the same row never looks lopsided. */
	flex: 1 0 auto;
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: var( --icna-cards-padding, 1.25rem );
	font: inherit;
	color: inherit;
}

.icna-card-icon {
	width: var( --icna-cards-icon-size, 36px );
	height: var( --icna-cards-icon-size, 36px );
	object-fit: contain;
	padding: 10px;
	border-radius: 50%;
	background: var( --icna-cards-accent-soft, rgba(0,146,64,0.08) );
	margin-bottom: var( --icna-cards-gap-sm, 0.5rem );
}

.icna-card-title {
	margin: 0 0 0.375rem;
	font-size: var( --icna-cards-title-size, 1.1em );
	color: var( --icna-cards-title-color, var( --icna-cards-accent, #009240 ) );
}

.icna-card-teaser {
	margin: 0;
	color: var( --icna-cards-text-color, inherit );
	opacity: 0.8;
}

.icna-card-indicator {
	position: absolute;
	top: var( --icna-cards-padding, 1.25rem );
	right: var( --icna-cards-padding, 1.25rem );
	width: 10px;
	height: 10px;
	border-right: 2px solid var( --icna-cards-accent, #009240 );
	border-bottom: 2px solid var( --icna-cards-accent, #009240 );
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.icna-card-face[aria-expanded="true"] .icna-card-indicator {
	transform: rotate(-135deg);
}

/*
 * Three panel types share one box model: the closed-face flip detail, the
 * drilldown "parent" (icon + one-liner + section tiles), and each drilldown
 * section's own detail. Exactly one of a card's panels is ever unhidden at
 * a time (enforced by cards.js), so they can safely share this styling.
 */
.icna-card-detail,
.icna-card-parent,
.icna-card-section-detail {
	position: relative;
	padding: 0 var( --icna-cards-padding, 1.25rem ) var( --icna-cards-padding, 1.25rem );
	border-top: 2px solid var( --icna-cards-accent, #009240 );
	/* The reveal itself has no transition otherwise — [hidden] toggles
	   display:none instantly, which can't be transitioned. This keyframe
	   animation runs the moment the element becomes renderable (i.e. the
	   instant `hidden` is removed), giving a soft fade/slide-in instead of
	   an abrupt pop, without touching how `hidden` itself works. */
	animation: icna-card-reveal 0.25s ease;
}

@keyframes icna-card-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.icna-card-detail[hidden],
.icna-card-parent[hidden],
.icna-card-section-detail[hidden] {
	display: none;
}

.icna-card-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 0;
	background: var( --icna-cards-close-bg, rgba(0,0,0,0.06) );
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.icna-card-back {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 12px 0 10px;
	border-radius: 999px;
	border: 0;
	background: var( --icna-cards-close-bg, rgba(0,0,0,0.06) );
	color: inherit;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.icna-card-detail-body,
.icna-card-section-body {
	/* Generous breathing room below the accent divider (matches the front
	   face's padding); the rhythm WITHIN the content is tightened below. */
	padding-top: var( --icna-cards-padding, 1.25rem );
}

.icna-card-detail-body :first-child,
.icna-card-section-body :first-child {
	margin-top: 0;
}

.icna-card-detail-body :last-child,
.icna-card-section-body :last-child {
	margin-bottom: 0;
}

.icna-card-detail-body h1,
.icna-card-detail-body h2,
.icna-card-detail-body h3,
.icna-card-detail-body h4,
.icna-card-detail-body h5,
.icna-card-detail-body h6,
.icna-card-section-body h1,
.icna-card-section-body h2,
.icna-card-section-body h3,
.icna-card-section-body h4,
.icna-card-section-body h5,
.icna-card-section-body h6 {
	margin: 0 0 0.4rem;
	line-height: 1.25;
}

.icna-card-detail-body p,
.icna-card-section-body p {
	margin: 0 0 0.75rem;
}

/* Drilldown parent panel — icon + one-liner + a mini-grid of section tiles. */
.icna-card-oneliner {
	padding-top: var( --icna-cards-padding, 1.25rem );
	margin: 0 0 0.9rem;
	color: var( --icna-cards-text-color, inherit );
	opacity: 0.85;
	line-height: 1.5;
}

.icna-card-section-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(140px, 1fr) );
	gap: 0.6rem;
}

.icna-card-section-tile {
	text-align: left;
	padding: 0.7rem 0.85rem;
	border-radius: var( --icna-cards-radius-sm, 8px );
	border: 1px solid var( --icna-cards-accent, #009240 );
	background: var( --icna-cards-accent-soft, rgba(0,146,64,0.08) );
	color: var( --icna-cards-accent-ink, var( --icna-cards-accent, #009240 ) );
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.icna-card-section-tile:hover {
	background: var( --icna-cards-accent, #009240 );
	color: #fff;
}

/* Drilldown section-detail panel — mirrors .icna-card-title's treatment so a
   section reads as a natural continuation of the card, not a new context.
   padding-top clears the absolutely-positioned Back (left) + Close (right)
   buttons, which both sit in a 10-38px band — 1.25rem alone (this panel's
   normal "gap below the divider") isn't enough and the title overlapped
   Back before this was added. */
.icna-card-section-title {
	padding-top: calc( 28px + var( --icna-cards-gap-sm, 0.5rem ) + 10px );
	margin: 0 0 0.375rem;
	font-size: var( --icna-cards-title-size, 1.05em );
	color: var( --icna-cards-title-color, var( --icna-cards-accent, #009240 ) );
}

.icna-card-section-detail .icna-card-section-body {
	padding-top: 0;
}