/* =====================================================================
 * frise.css — styling for the modern Frise chronologique. (Robert Blok)
 * Scoped entirely under .am-frise so it never touches the rest of the site.
 * ===================================================================== */
.am-frise {
	--f-yellow: var(--an-yellow, #FBE023);
	--f-yellow-dp: var(--an-yellow-dp, #E6C500);
	--f-ink: var(--an-ink, #1B1C1E);
	--f-soft: var(--an-ink-soft, #5c6268);
	--f-line: var(--an-line, #e7e7e2);
	--f-surface: var(--an-surface, #fff);
	position: relative;
	margin: 4px 0 40px;
	color: var(--f-ink);
}

/* ---- header ---------------------------------------------------------- */
.am-frise-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; flex-wrap: wrap;
	position: sticky; top: 0; z-index: 6;
	padding: 12px 2px; margin-bottom: 6px;
	background: linear-gradient(var(--f-surface) 72%, rgba(255,255,255,0));
	backdrop-filter: saturate(1.1) blur(2px);
}
.am-frise-meta { font-size: 15px; font-weight: 600; color: var(--f-soft); }
.am-frise-count { white-space: nowrap; }
.am-frise-tools { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; justify-content: flex-end; }
.am-frise-search {
	flex: 1 1 260px; max-width: 420px;
	font: inherit; padding: 9px 14px;
	border: 1px solid var(--f-line); border-radius: 999px; background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.am-frise-search:focus { outline: none; border-color: var(--f-yellow-dp); box-shadow: 0 0 0 3px rgba(251,224,35,.25); }
.am-frise-order {
	font: inherit; font-weight: 600; white-space: nowrap;
	padding: 9px 14px; border: 1px solid var(--f-line); border-radius: 999px;
	background: #fff; cursor: pointer; transition: background .15s, border-color .15s;
}
.am-frise-order:hover { background: #faf9f4; border-color: #dcdcd4; }

/* ---- decade nav ------------------------------------------------------ */
.am-frise-nav {
	display: flex; gap: 8px; flex-wrap: wrap;
	position: sticky; top: 58px; z-index: 5;
	padding: 4px 0 12px;
}
.am-frise-dec {
	font-size: 13px; font-weight: 700; letter-spacing: .01em;
	padding: 5px 11px; border-radius: 999px;
	background: #f3f1e6; color: var(--f-ink) !important; text-decoration: none !important;
	border: 1px solid transparent; transition: background .15s, border-color .15s, transform .05s;
}
.am-frise-dec:hover { background: var(--f-yellow); border-color: var(--f-yellow-dp); }
.am-frise-dec:active { transform: translateY(1px); }

/* ---- progress -------------------------------------------------------- */
.am-frise-progress { height: 3px; border-radius: 3px; background: var(--f-line); overflow: hidden; margin: 2px 0 22px; transition: opacity .5s; }
.am-frise-progress.is-done { opacity: 0; height: 0; margin: 0; }
.am-frise-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--f-yellow), var(--f-yellow-dp)); transition: width .3s ease; }

/* ---- timeline spine -------------------------------------------------- */
.am-frise-line { position: relative; padding-left: 30px; }
.am-frise-line::before {
	content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px;
	background: linear-gradient(var(--f-yellow), var(--f-line) 90%);
	border-radius: 3px;
}

.am-frise-decade { margin: 0 0 10px; }
.am-frise-dec-title {
	font-size: 30px; font-weight: 800; letter-spacing: -.02em;
	margin: 26px 0 12px -30px; padding-left: 30px;
	position: relative; color: var(--f-ink);
	border: 0 !important; background: none !important;
}
.am-frise-dec-title span { color: var(--f-yellow-dp); }

/* ---- year node ------------------------------------------------------- */
.am-frise-year {
	position: relative; margin: 0 0 18px;
	opacity: 1; transform: none;
}
.am-frise-year.is-in { animation: amFriseIn .5s ease both; }
@keyframes amFriseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.am-frise-y-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.am-frise-y-dot {
	position: absolute; left: -30px; top: 3px;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--f-yellow); border: 3px solid var(--f-surface);
	box-shadow: 0 0 0 2px var(--f-yellow-dp);
}
.am-frise-y-num { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.am-frise-y-count { font-size: 12.5px; font-weight: 600; color: var(--f-soft); background: #f3f1e6; padding: 2px 9px; border-radius: 999px; }

/* ---- works ----------------------------------------------------------- */
.am-frise-works { display: flex; flex-wrap: wrap; gap: 8px; }
.am-frise-work {
	display: inline-flex; flex-direction: column; gap: 1px;
	max-width: 300px; text-decoration: none !important;
	padding: 8px 13px; border: 1px solid var(--f-line); border-radius: 12px;
	background: var(--f-surface); color: var(--f-ink) !important;
	transition: border-color .15s, box-shadow .15s, transform .1s, background .15s;
}
.am-frise-work:hover { border-color: var(--f-yellow-dp); box-shadow: 0 6px 18px rgba(20,20,20,.08); transform: translateY(-2px); background: #fffef5; }
.am-frise-w-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.am-frise-w-title { font-size: 14px; font-weight: 600; line-height: 1.25; }
.am-frise-w-city { font-size: 12px; color: var(--f-soft); }

/* ---- work cards with a photo ----------------------------------------
   A card that has a main image becomes a small picture card of a fixed
   size, so a row of them lines up whatever the photo's aspect ratio is.
   The frame is only shown while the card carries .has-img: frise.js drops
   that class when the file turns out to be missing, and the card falls
   back to the plain text form instead of showing a broken image.
   RobertBlok.com - Fullstack development
   ------------------------------------------------------------------- */
.am-frise-work.has-img { width: 208px; max-width: 208px; padding: 8px 8px 10px; gap: 8px; }
.am-frise-w-thumb { display: none; }
.am-frise-work.has-img .am-frise-w-thumb {
	display: block; height: 124px; border-radius: 8px; overflow: hidden;
	background: #f3f1e6; line-height: 0;
}
.am-frise-work.has-img .am-frise-w-thumb img {
	width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.am-frise-work.has-img .am-frise-w-text { padding: 0 5px; }

.am-frise-empty { color: var(--f-soft); padding: 20px 0; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 720px) {
	.am-frise-head { position: static; }
	.am-frise-nav { top: 0; }
	.am-frise-tools { justify-content: stretch; }
	.am-frise-dec-title { font-size: 24px; }
	.am-frise-work { max-width: 100%; flex: 1 1 100%; }
	.am-frise-work.has-img { width: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.am-frise-year, .am-frise-work { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Sticky bars below the site header.
   The skin header is itself sticky, so `top: 0` slid the frise toolbar
   and the decade bar underneath it, and the decade bar had no background,
   so the cards showed through between the buttons. --an-header-h is kept
   up to date by the skin (resources/skin.js) with the header's real height.

   RobertBlok.com — Fullstack development
   ===================================================================== */
.am-frise-head { top: var(--an-header-h, 0px); }
.am-frise-nav {
	top: calc(var(--an-header-h, 0px) + 58px);
	background: var(--f-surface);
	box-shadow: 0 10px 12px -12px rgba(20, 20, 20, .18);
}
@media (max-width: 720px) {
	/* One swipeable row of decades instead of three rows of buttons. */
	.am-frise-nav {
		top: var(--an-header-h, 0px);
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 8px 16px 10px;
	}
	.am-frise-nav::-webkit-scrollbar { display: none; }
	.am-frise-dec { flex: 0 0 auto; }
}
@media (max-width: 720px) {
	/* Search field and sort button wrap instead of running off the screen.
	   RobertBlok.com — Fullstack development */
	.am-frise-tools { flex-wrap: wrap; flex-basis: 100%; min-width: 0; }
	.am-frise-search { flex: 1 1 100%; min-width: 0; width: 100%; }
	.am-frise-order { flex: 0 0 auto; }
}