/* Arantoe YouTube Importer: front page sections. Own styling; colours follow the theme. */
.arantoe-yt-home { display: grid; gap: 2.5rem; margin-block: 1.5rem; }
.arantoe-yt-sec { --arantoe-cols: 3; min-width: 0; }
.arantoe-yt-note { padding: .6rem .9rem; border: 1px dashed currentColor; opacity: .7; }

.arantoe-yt-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding-bottom: .4rem; border-bottom: 2px solid currentColor; }
.arantoe-yt-sec__title { margin: 0; font-size: 1.2rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
.arantoe-yt-sec__all { font-size: .85rem; white-space: nowrap; }

.arantoe-yt-item__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #1b1b1b; }
.arantoe-yt-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arantoe-yt-item__ph { display: block; width: 100%; height: 100%; }
.arantoe-yt-item__dur { position: absolute; right: .4rem; bottom: .4rem; padding: .1rem .4rem; border-radius: 3px; background: rgba(0, 0, 0, .82); color: #fff; font-size: .75rem; line-height: 1.5; }
.arantoe-yt-item__body { min-width: 0; }
.arantoe-yt-item__cat a { display: inline-block; margin-top: .55rem; padding: .1rem .5rem; border-radius: 3px; background: rgba(127, 127, 127, .22); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; color: inherit; }
.arantoe-yt-item__title { margin: .4rem 0 .25rem; font-size: 1.02rem; line-height: 1.3; }
.arantoe-yt-item__title a { color: inherit; text-decoration: none; }
.arantoe-yt-item__title a:hover { text-decoration: underline; }
.arantoe-yt-item__meta { margin: 0; font-size: .8rem; opacity: .7; }

/* Grid */
.arantoe-yt-sec--grid .arantoe-yt-sec__items { display: grid; grid-template-columns: repeat(var(--arantoe-cols), minmax(0, 1fr)); gap: 1.4rem 1.25rem; }

/* List and compact: thumbnail on the left */
.arantoe-yt-sec--list .arantoe-yt-sec__items,
.arantoe-yt-sec--compact .arantoe-yt-sec__items { display: grid; gap: 1rem; }
.arantoe-yt-sec--list .arantoe-yt-item,
.arantoe-yt-sec--compact .arantoe-yt-item,
.arantoe-yt-item--row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: start; }
.arantoe-yt-sec--compact .arantoe-yt-item { grid-template-columns: 110px minmax(0, 1fr); gap: .75rem; }
.arantoe-yt-sec--compact .arantoe-yt-item__title { margin-top: 0; font-size: .92rem; }
.arantoe-yt-sec--compact .arantoe-yt-item__cat { display: none; }
.arantoe-yt-sec--list .arantoe-yt-item__cat a,
.arantoe-yt-item--row .arantoe-yt-item__cat a { margin-top: 0; }

/* Featured: one big video next to a list */
.arantoe-yt-sec--featured .arantoe-yt-sec__items { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; }
.arantoe-yt-sec__side { display: grid; gap: 1rem; align-content: start; }
.arantoe-yt-sec__side .arantoe-yt-item--row { grid-template-columns: 140px minmax(0, 1fr); gap: .8rem; }
.arantoe-yt-sec__side .arantoe-yt-item__title { margin-top: 0; font-size: .95rem; }
.arantoe-yt-item--hero .arantoe-yt-item__title { font-size: 1.5rem; }

@media (max-width: 900px) {
	.arantoe-yt-sec--grid .arantoe-yt-sec__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.arantoe-yt-sec--featured .arantoe-yt-sec__items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.arantoe-yt-sec--grid .arantoe-yt-sec__items { grid-template-columns: minmax(0, 1fr); }
	.arantoe-yt-sec--list .arantoe-yt-item,
	.arantoe-yt-item--row { grid-template-columns: 120px minmax(0, 1fr); }
}