/* ==========================================================================
   Conference page (page-templates/template-media.php)
   Figma: VNF (Copy), node 7043:13482. Ported from tomcamau/css/media.css.

   Only what is specific to this page lives here. The button is .btn--deep
   (buttons.css), the page heading uses the type scale from typography.css and
   the poster uses the global .media ratio box from layout.css.
   ========================================================================== */
.seminars {
	background: var(--c-bg);
}

.seminars__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* --- Page heading --------------------------------------------------------- */
.seminars__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	text-align: center;
}

.seminars__eyebrow {
	font-family: var(--font-num);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
	letter-spacing: 1.75px;
	text-transform: uppercase;
	color: var(--c-ink-deep);
}

.seminars__title {
	max-width: 972px;
	font-weight: var(--fw-bold);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--c-ink-pure);
}

/* --- Card ----------------------------------------------------------------- */
.seminar {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-md);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-md);
	background: var(--c-surface);
}

.seminar__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.seminar__title {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	color: var(--c-ink-navy);
}

/* The poster is a Canva export at 1400x864; the design draws it at exactly
   that ratio, so it is set here rather than left to the row height. */
.seminar__poster {
	--media-ratio: 1400 / 864;

	border-radius: var(--radius-input-lg);
}

/* --- Info boxes (chủ trì, phối hợp, quy mô…) ------------------------------ */
.seminar__facts {
	display: grid;
	gap: var(--space-sm);
}

.fact {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-3xs);
	padding: var(--space-sm);
	border: 1px solid var(--c-info-border);
	border-radius: var(--radius-sm);
	background: var(--c-info-bg);
	font-size: var(--fs-body);
	line-height: var(--lh-relaxed);
	color: var(--c-ink-pure);
}

.fact__value { font-weight: var(--fw-semibold); }

/* --- Date / time / venue chips -------------------------------------------- */
.seminar__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-2xs);
	list-style: none;
}

.seminar__meta li {
	padding: var(--space-2xs) 13px;
	border: 1px solid var(--c-chip-soft-border);
	border-radius: var(--radius-pill);
	background: var(--c-chip-soft-bg);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	line-height: var(--lh-tight);
	color: var(--c-primary);
}

.seminar__body .btn {
	align-self: flex-start;
	width: fit-content;
}

/* Button without a link: grey pill with a one-line note under it. */
.seminar__cta-off {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	align-items: flex-start;
}

.seminar__cta-note {
	display: flex;
	gap: var(--space-2xs);
	align-items: center;
	font-weight: var(--fw-medium);
	font-size: var(--fs-label);
	line-height: var(--lh-normal);
	color: var(--c-ink-note);
	margin-top: var(--space-xs);
}

/* --- Desktop: two columns, every other card mirrored ----------------------
   align-items: flex-start is load-bearing. With stretch the poster would be
   pulled to the height of the text column and lose its aspect ratio, which is
   what the static site does and what this port deliberately does not. */
@media (min-width: 1024px) {
	.seminar {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-lg);
    padding: var(--space-lg);
	}

	.seminar--reverse { flex-direction: row-reverse; }

	.seminar__body,
	.seminar__poster {
		flex: 1 1 0;
		min-width: 0;
	}

	.seminar__facts { grid-template-columns: 1fr 1fr; }

	/* A long box fills its column instead of leaving a hole beside it. */
	.fact--tall { grid-row: span 2; }
}

/* --- Entrance --------------------------------------------------------------
   Every child of .seminars__inner (the heading and each conference card)
   reveals on its own as it scrolls into view. Keyframes, not a transition, to
   keep to the pattern of the other pages; `reveal-up` is defined in home.css. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .seminars__inner > [data-reveal]:not(.is-revealed) {
    opacity: 0;
  }

  .has-reveal .seminars__inner > [data-reveal].is-revealed {
    animation: reveal-up var(--reveal-dur) var(--ease) backwards;
  }
}