/**
 * SDAweb Calendar Sync — card grid view styles.
 */

.sdaweb-gcal--card {
	width: 100%;
}

.sdaweb-gcal-card__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: var( --sdaweb-gcal-spacing );
}

.sdaweb-gcal-card {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	padding: 12px;
	background: var( --sdaweb-gcal-color-surface );
	border: 1px solid var( --sdaweb-gcal-color-border );
	border-inline-start: 4px solid var( --sdaweb-gcal-event-color, var( --sdaweb-gcal-color-accent ) );
	border-radius: var( --sdaweb-gcal-radius );
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sdaweb-gcal-card:hover {
	border-color: var( --sdaweb-gcal-color-primary );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
}

.sdaweb-gcal-card.is-cancelled {
	opacity: 0.55;
	text-decoration: line-through;
}

.sdaweb-gcal-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var( --sdaweb-gcal-color-surface-alt );
	border-radius: calc( var( --sdaweb-gcal-radius ) - 2px );
	padding: 8px;
	min-width: 64px;
}

.sdaweb-gcal-card__day {
	font-size: 1.75rem;
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	line-height: 1;
	color: var( --sdaweb-gcal-color-primary );
}

.sdaweb-gcal-card__month {
	font-size: 0.75rem;
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --sdaweb-gcal-color-text-muted );
}

.sdaweb-gcal-card__weekday {
	font-size: 0.6875rem;
	color: var( --sdaweb-gcal-color-text-muted );
	margin-top: 2px;
}

/*
 * Multi-day date column variants. Same-month range ("4–8") uses a
 * slightly smaller day glyph so the en-dash fits comfortably; the
 * weekday line shows the start–end abbreviations ("man–fre"). Cross-month
 * ranges ("30 APR ↓ 5 MAI") stack vertically with a small arrow marker.
 * The card itself gains an `is-multi-day` class so themes/extenders can
 * style the wrapper if they want.
 */

.sdaweb-gcal-card__date.is-range--same-month .sdaweb-gcal-card__day {
	font-size: 1.4rem;
	letter-spacing: -0.02em;
}

.sdaweb-gcal-card__date.is-range--cross-month {
	gap: 1px;
}

.sdaweb-gcal-card__date.is-range--cross-month .sdaweb-gcal-card__day,
.sdaweb-gcal-card__day-end {
	font-size: 1.2rem;
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	line-height: 1;
	color: var( --sdaweb-gcal-color-primary );
}

.sdaweb-gcal-card__month-end {
	font-size: 0.6875rem;
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --sdaweb-gcal-color-text-muted );
}

.sdaweb-gcal-card__range-arrow {
	color: var( --sdaweb-gcal-color-text-muted );
	font-size: 0.875rem;
	line-height: 1;
	margin: 1px 0;
	opacity: 0.7;
}

.sdaweb-gcal-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sdaweb-gcal-card__title {
	font-size: var( --sdaweb-gcal-font-size-base );
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	margin: 0;
	color: var( --sdaweb-gcal-color-text );
	line-height: 1.35;
}

.sdaweb-gcal-card__title a {
	color: inherit;
	text-decoration: none;
}

.sdaweb-gcal-card__title a:hover,
.sdaweb-gcal-card__title a:focus-visible {
	color: var( --sdaweb-gcal-color-primary );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sdaweb-gcal-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: var( --sdaweb-gcal-font-size-sm );
	color: var( --sdaweb-gcal-color-text-muted );
	font-variant-numeric: tabular-nums;
}

.sdaweb-gcal-card__alllday {
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	color: var( --sdaweb-gcal-color-primary );
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

.sdaweb-gcal-card__calendar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sdaweb-gcal-card__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --sdaweb-gcal-event-color, var( --sdaweb-gcal-color-accent ) );
	flex: 0 0 auto;
}

.sdaweb-gcal-card__location {
	color: var( --sdaweb-gcal-color-text-muted );
	font-size: var( --sdaweb-gcal-font-size-sm );
}

.sdaweb-gcal-card__description {
	color: var( --sdaweb-gcal-color-text-muted );
	font-size: var( --sdaweb-gcal-font-size-sm );
	margin-top: 4px;
}

/*
 * "No more events" footer — printed below the card grid as a quiet
 * end-of-list signal — for example "Ingen flere
 * hendelser" treatment.
 */
.sdaweb-gcal-card__footer {
	margin: 12px 0 0;
	padding: 8px 0;
	text-align: center;
	color: var( --sdaweb-gcal-color-text-muted );
	font-size: var( --sdaweb-gcal-font-size-sm );
	font-style: italic;
}

/*
 * Section grouping (card_grouping = day | week | month).
 * One <section> per group, each with its own <h3> heading and its own grid.
 * When grouping = none, the renderer emits a single section with no <h3> —
 * this block has no effect, keeping the ungrouped output byte-identical to
 * pre-0.7.0 builds.
 */

.sdaweb-gcal--card .sdaweb-gcal-card__section + .sdaweb-gcal-card__section {
	margin-top: 20px;
}

.sdaweb-gcal-card__section-heading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 10px;
	padding: 8px 12px;
	border-inline-start: 3px solid var( --sdaweb-gcal-color-primary, currentColor );
	border-radius: var( --sdaweb-gcal-radius );
	background: rgba( 128, 128, 128, 0.06 );
	font-size: var( --sdaweb-gcal-font-size-base );
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	line-height: 1.3;
	color: inherit;
}

@supports ( background: color-mix( in srgb, currentColor 4%, transparent ) ) {
	.sdaweb-gcal-card__section-heading {
		background: color-mix( in srgb, currentColor 4%, transparent );
	}
}

.sdaweb-gcal-card__section-label {
	min-width: 0;
	overflow-wrap: break-word;
	text-transform: capitalize;
}

.sdaweb-gcal-card__section-count {
	flex: 0 0 auto;
	font-size: var( --sdaweb-gcal-font-size-sm );
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var( --sdaweb-gcal-color-text-muted );
	white-space: nowrap;
}

@media print {
	.sdaweb-gcal-card__section-heading {
		break-after: avoid-page;
		page-break-after: avoid;
	}
}