/*
 * Laposta Nieuwsbrief import in Elementor – Frontend Grid Styles
 *
 * All visual properties are driven by CSS custom properties (variables) that
 * are injected inline by the shortcode renderer based on the plugin settings.
 * You can override any variable on .laposta-nl-grid via the "Extra CSS" field
 * on the settings page, or by adding CSS in your theme.
 *
 * Available variables (with their defaults):
 *   --laposta-primary   : #0073aa   (accent / button / link colour)
 *   --laposta-card-bg   : #ffffff   (card background)
 *   --laposta-card-text : #333333   (card body text)
 *   --laposta-radius    : 8px       (card corner radius)
 *   --laposta-font      : inherit   (font-family)
 *   --laposta-cols      : 3         (number of columns at full width)
 */

/* ── Grid container ─────────────────────────────────────────────────────────── */

.laposta-nl-grid {
	/* Fallback values – overridden by inline style injected by PHP. */
	--laposta-primary:   #0073aa;
	--laposta-card-bg:   #ffffff;
	--laposta-card-text: #333333;
	--laposta-radius:    8px;
	--laposta-font:      inherit;
	--laposta-cols:      3;

	display: grid;
	grid-template-columns: repeat(var(--laposta-cols), minmax(0, 1fr));
	gap: 1.5rem;
	font-family: var(--laposta-font);
	/* Small padding so card box-shadows are never clipped at the edges. */
	padding: 4px;
	list-style: none;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

/* ── Responsive breakpoints ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.laposta-nl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.laposta-nl-grid {
		grid-template-columns: 1fr;
	}

	/* Cap the image height on mobile so the portrait screenshot
	   doesn't make the card excessively tall. */
	.laposta-nl-card__img-wrap {
		max-height: 260px;
		aspect-ratio: unset;
	}
}

/* ── Card ───────────────────────────────────────────────────────────────────── */

.laposta-nl-card {
	background:     var(--laposta-card-bg);
	color:          var(--laposta-card-text);
	border-radius:  var(--laposta-radius);
	overflow:       hidden;
	box-shadow:     0 2px 10px rgba(0, 0, 0, 0.08);
	display:        flex;
	flex-direction: column;
	transition:     box-shadow 0.22s ease;
	min-width:      0;
	max-width:      100%;
}

/* Only deepen the shadow on hover — no translateY so the card
   never escapes the Elementor widget boundary. */
.laposta-nl-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

/* ── Card image ─────────────────────────────────────────────────────────────── */

.laposta-nl-card__img-wrap {
	display:    block;
	overflow:   hidden;
	/* Natural screenshot ratio from Laposta (226 × 268). */
	aspect-ratio: 226 / 268;
	background: #f0f0f0;
}

.laposta-nl-card__img {
	width:      100%;
	height:     100%;
	max-width:  100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.3s ease;
}

/* Zoom only when the .laposta-nl-zoom modifier class is present.
   The shortcode always adds it; the widget makes it optional. */
.laposta-nl-card:hover .laposta-nl-zoom .laposta-nl-card__img {
	transform: scale(1.05);
}

/* ── Card body ──────────────────────────────────────────────────────────────── */

.laposta-nl-card__body {
	padding:        1.1rem 1.25rem 1.35rem;
	display:        flex;
	flex-direction: column;
	flex:           1;
	gap:            0.45rem;
}

/* ── Title ──────────────────────────────────────────────────────────────────── */

.laposta-nl-card__title {
	font-size:   1rem;
	font-weight: 600;
	line-height: 1.4;
	margin:      0;
}

.laposta-nl-card__title a {
	color:           var(--laposta-card-text);
	text-decoration: none;
}

.laposta-nl-card__title a:hover {
	color:           var(--laposta-primary);
	text-decoration: underline;
}

/* ── Date ───────────────────────────────────────────────────────────────────── */

.laposta-nl-card__date {
	display:     block;
	font-size:   0.82rem;
	line-height: 1.3;
	opacity:     0.65;
}

/* ── Excerpt ────────────────────────────────────────────────────────────────── */

.laposta-nl-card__excerpt {
	font-size:   0.9rem;
	line-height: 1.6;
	margin:      0;
	flex:        1;
}

/* ── Read-more button ───────────────────────────────────────────────────────── */

.laposta-nl-card__btn {
	display:          inline-block;
	margin-top:       auto;
	padding:          0.45rem 1rem;
	background:       var(--laposta-primary);
	color:            #fff !important;
	border-radius:    calc(var(--laposta-radius) * 0.6);
	font-size:        0.85rem;
	font-weight:      600;
	text-decoration:  none !important;
	align-self:       flex-start;
	transition:       filter 0.2s ease, background 0.2s ease;
	border:           none;
	cursor:           pointer;
}

.laposta-nl-card__btn:hover {
	filter:          brightness(1.12);
	text-decoration: none !important;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */

.laposta-nl-empty {
	color:       #666;
	font-style:  italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIST VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.laposta-nl-list {
	--laposta-primary:   #0073aa;
	--laposta-card-bg:   #ffffff;
	--laposta-card-text: #333333;
	--laposta-radius:    8px;
	--laposta-font:      inherit;

	display:        flex;
	flex-direction: column;
	gap:            1.5rem;
	padding:        4px;
	font-family:    var(--laposta-font);
	list-style:     none;
	margin:         0;
	width:          100%;
	max-width:      100%;
	box-sizing:     border-box;
}

/* In list view the card is a horizontal row */
.laposta-nl-list .laposta-nl-card {
	flex-direction: row;
	align-items:    stretch;
}

.laposta-nl-list .laposta-nl-card__img-wrap {
	width:         200px;
	min-width:     200px;
	aspect-ratio:  1 / 1;
	/* Override the default portrait ratio for a square thumb in list mode */
	border-radius: var(--laposta-radius) 0 0 var(--laposta-radius);
	flex-shrink:   0;
}

/* On mobile, collapse back to column */
@media (max-width: 600px) {
	.laposta-nl-list .laposta-nl-card {
		flex-direction: column;
	}

	.laposta-nl-list .laposta-nl-card__img-wrap {
		width:      100%;
		min-width:  0;
		aspect-ratio: 226 / 120;
		max-height: 200px;
		border-radius: var(--laposta-radius) var(--laposta-radius) 0 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TIMELINE VIEW  –  centered badge, alternating left / right cards
   ═══════════════════════════════════════════════════════════════════════════ */

.laposta-nl-timeline {
	--laposta-primary:   #0073aa;
	--laposta-card-bg:   #ffffff;
	--laposta-card-text: #333333;
	--laposta-radius:    8px;
	--laposta-font:      inherit;

	position:       relative;
	display:        flex;
	flex-direction: column;
	font-family:    var(--laposta-font);
	width:          100%;
	box-sizing:     border-box;
}

/* ── Each item: 2 equal columns + badge spanning both ───────────────────── */

.laposta-nl-timeline__item {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	column-gap:            2.5rem;
	grid-template-rows:    auto auto;
	row-gap:               2rem;   /* space between badge and card = visible line segment */
	padding:               1.25rem 0;
	position:              relative;
}

/* Line segment per item — runs from BELOW the badge down to the bottom of the
   item. Because it starts under the badge and the next item's segment starts
   under its own badge, there is a clean gap around every badge on ANY
   background colour (no surface-colour trick needed). */
.laposta-nl-timeline__item::after {
	content:        '';
	position:       absolute;
	left:           50%;
	transform:      translateX(-50%);
	top:            4.4rem;  /* gap below the badge before the line starts */
	bottom:         0;
	width:          2px;
	background:     var(--laposta-primary);
	opacity:        0.18;
	pointer-events: none;
	z-index:        0;
}

/* ── Date badge — spans full width → justify-self:center = exactly 50% ─── */

.laposta-nl-timeline__badge {
	grid-column:     1 / -1;
	grid-row:        1;
	justify-self:    center;
	position:        relative;
	z-index:         1;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         0.38rem 1.1rem;
	background:      var(--laposta-primary);
	color:           #fff;
	font-size:       0.8rem;
	font-weight:     700;
	letter-spacing:  0.07em;
	text-transform:  none;
	border-radius:   999px;
	white-space:     nowrap;
	box-shadow:      0 2px 8px rgba(0, 0, 0, 0.15);
	transition:      transform 0.2s ease;
}

.laposta-nl-timeline__item:hover .laposta-nl-timeline__badge {
	transform: scale(1.06);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.laposta-nl-timeline .laposta-nl-card {
	flex-direction: column;
	max-width:      320px;
	box-shadow:     0 2px 10px rgba(0, 0, 0, 0.08);
}

.laposta-nl-timeline .laposta-nl-card__img-wrap {
	aspect-ratio:  16 / 9;
	max-height:    160px;
	border-radius: var(--laposta-radius) var(--laposta-radius) 0 0;
}

/* Odd: left column, pushed right so it hugs the center line */
.laposta-nl-timeline__item:nth-child(odd) .laposta-nl-card {
	grid-column:  1;
	grid-row:     2;
	margin-left:  auto;
	margin-right: 0;
}

/* Even: right column, left edge of the column = hugs the center line */
.laposta-nl-timeline__item:nth-child(even) .laposta-nl-card {
	grid-column:  2;
	grid-row:     2;
	margin-right: auto;
	margin-left:  0;
}

/* ── Mobile: single column, line on the left ─────────────────────────────── */
@media (max-width: 700px) {
	.laposta-nl-timeline__item {
		grid-template-columns: 1fr;
		padding:               1.25rem 0 1.25rem 3rem;
		row-gap:               1rem;
	}

	.laposta-nl-timeline__item::after {
		left:      10px;
		transform: none;
		top:       3rem;
	}

	.laposta-nl-timeline__badge {
		grid-column:  1;
		justify-self: start;
	}

	.laposta-nl-timeline__item:nth-child(odd) .laposta-nl-card,
	.laposta-nl-timeline__item:nth-child(even) .laposta-nl-card {
		grid-column:  1;
		grid-row:     2;
		margin-left:  0;
		margin-right: 0;
		max-width:    100%;
	}
}