/*
 * Components shared by the templates: video thumbnail, card, grid, section heading, tiles.
 */

/* ---------- video thumbnail ---------- */
.feu-yt { object-fit: cover; aspect-ratio: 16 / 9; }   /* YouTube's 4:3 pictures (inc/video.php) shown 16:9 */
.feu-thumb { position: relative; display: block; overflow: hidden; border-radius: var(--feu-radius-lg); background: var(--wp--preset--color--fill); aspect-ratio: 16 / 9; }
.feu-thumb img, .feu-thumb__blank { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--feu-ease); }
.feu-thumb__play {
	position: absolute; left: 50%; top: 50%; display: grid; place-items: center;
	width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%);
	background: rgb(255 253 248 / .85); color: var(--wp--preset--color--brand); box-shadow: 0 6px 20px rgb(0 0 0 / .25);
	transition: transform .3s var(--feu-ease), background-color .3s var(--feu-ease);
}
.feu-thumb__play svg { width: 26px; height: 26px; margin-left: 3px; color: #6b1f24; }
.feu-thumb--card .feu-thumb__play { width: 46px; height: 46px; }
.feu-thumb--card .feu-thumb__play svg { width: 20px; height: 20px; }
.feu-thumb--thumb .feu-thumb__play { width: 30px; height: 30px; }
.feu-thumb--thumb .feu-thumb__play svg { width: 14px; height: 14px; margin-left: 2px; }
/* cards and small thumbnails: the badge in the corner, the picture stays clear */
.feu-thumb--card .feu-thumb__play, .feu-thumb--thumb .feu-thumb__play { left: .6rem; top: auto; bottom: .6rem; transform: none; }
.feu-thumb--thumb .feu-thumb__play { left: .35rem; bottom: .35rem; }
.feu-thumb.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.feu-thumb--hero { box-shadow: 0 12px 20px -12px var(--feu-shadow-strong); }

/* ---------- card ---------- */
.feu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.feu-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--feu-radius-lg);
	box-shadow: 0 1px 2px var(--feu-shadow); transition: transform .3s var(--feu-ease), box-shadow .3s var(--feu-ease);
}
.feu-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px var(--feu-shadow-strong); }
.feu-card .feu-thumb { border-radius: 0; }
.feu-card:hover .feu-thumb img { transform: scale(1.04); }
.feu-card:hover .feu-thumb__play { transform: scale(1.08); }
.feu-card__body { display: grid; gap: .45rem; padding: 1rem 1.1rem 1.15rem; }
.feu-card__title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: 1.32rem; font-weight: 600; line-height: 1.15; }
.feu-card__title a { color: var(--wp--preset--color--text); text-decoration: none; }
.feu-card__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is clickable */
.feu-card { position: relative; }
.feu-card__title a:hover { color: var(--wp--preset--color--brand); }
.feu-card__meta { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--xs); }
/* the speaker's name, linked to their list (feu_speaker_html in inc/article.php) */
.feu-speaker { color: inherit; text-decoration: none; }
.feu-speaker:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.feu-card .feu-speaker { position: relative; z-index: 1; }   /* above the link that covers the card */

/* ---------- sections ---------- */
.feu-section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.feu-section--alt { background: color-mix(in srgb, var(--wp--preset--color--fill) 55%, var(--wp--preset--color--bg)); }
.feu-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; padding-bottom: .8rem; border-bottom: 1px solid var(--feu-border-strong); }
.feu-section__title { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem); font-weight: 500; }
.feu-section__title a { color: inherit; text-decoration: none; }
.feu-section__title a:hover { color: var(--wp--preset--color--brand); }

/* ---------- breadcrumb, chips (rubriques, tags): on posts, pages and lists ---------- */
.feu-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1.2rem; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
.feu-crumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.feu-crumbs a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.feu-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.feu-chips a { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: var(--wp--preset--color--fill); color: var(--wp--preset--color--brand); font-size: var(--wp--preset--font-size--sm); font-weight: 500; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.feu-chips a:hover { background: var(--wp--preset--color--brand); color: var(--feu-on-brand); }

@media (max-width: 1100px) { .feu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.feu-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.feu-section__head { flex-wrap: wrap; }
	.feu-section__head .feu-arrow-link { font-size: .8rem; }
	/* cards become rows: thumbnail left, text right */
	.feu-grid .feu-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; }
	.feu-grid .feu-card .feu-thumb { height: 100%; aspect-ratio: auto; min-height: 100px; }
	.feu-grid .feu-card__body { padding: .75rem .9rem; gap: .3rem; }
	.feu-grid .feu-card__title { font-size: 1.1rem; }
	.feu-grid .feu-card .feu-eyebrow { font-size: .75rem; }   /* 12px at least */
}

/* ---------- "Déjà vue" (feu.js, from this browser's memory) ---------- */
.feu-seen { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; margin: 0; padding: .1rem .55rem; border-radius: 999px; background: var(--wp--preset--color--fill); color: var(--wp--preset--color--text-secondary); font-size: var(--wp--preset--font-size--xs); font-weight: 600; }
.feu-seen--article { margin-top: .6rem; }