/**
 * Instagram Feed List — Frontend Styles
 *
 * @package InstaFeedList
 * @since 1.0.0
 */

/* --- CSS Custom Properties (Themeable) --- */
:root {
	--ifl-gap: 16px;
	--ifl-radius: 8px;
	--ifl-overlay-bg: rgba(0, 0, 0, 0.4);
	--ifl-text-color: inherit;
	--ifl-caption-size: 14px;
	--ifl-caption-color: #555;
	--ifl-meta-size: 12px;
	--ifl-meta-color: #888;
	--ifl-hover-scale: 1.03;
	--ifl-transition: 0.25s ease;
	--ifl-border: 1px solid rgba(0, 0, 0, 0.08);
	--ifl-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	--ifl-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* --- Grid Layout --- */
.ifl-feed {
	display: grid;
	gap: var(--ifl-gap);
}

.ifl-layout--grid {
	grid-template-columns: repeat(var(--ifl-cols, 3), 1fr);
}

.ifl-cols--1 { --ifl-cols: 1; }
.ifl-cols--2 { --ifl-cols: 2; }
.ifl-cols--3 { --ifl-cols: 3; }
.ifl-cols--4 { --ifl-cols: 4; }
.ifl-cols--5 { --ifl-cols: 5; }
.ifl-cols--6 { --ifl-cols: 6; }

/* --- List Layout --- */
.ifl-layout--list {
	display: flex;
	flex-direction: column;
	gap: var(--ifl-gap);
}

.ifl-layout--list .ifl-item {
	display: flex;
	gap: var(--ifl-gap);
	align-items: flex-start;
}

.ifl-layout--list .ifl-media-wrap {
	width: 200px;
	min-width: 200px;
	flex-shrink: 0;
}

/* --- Masonry Layout (CSS-only via columns) --- */
.ifl-layout--masonry {
	column-count: var(--ifl-cols, 3);
	column-gap: var(--ifl-gap);
}

.ifl-layout--masonry .ifl-item {
	break-inside: avoid;
	margin-bottom: var(--ifl-gap);
	display: block;
}

/* --- Single Item --- */
.ifl-item {
	position: relative;
	border-radius: var(--ifl-radius);
	overflow: hidden;
	background: #fff;
	border: var(--ifl-border);
	box-shadow: var(--ifl-shadow);
	transition: transform var(--ifl-transition), box-shadow var(--ifl-transition);
}

.ifl-item:hover {
	transform: scale(var(--ifl-hover-scale));
	box-shadow: var(--ifl-shadow-hover);
}

/* --- Media Wrap --- */
.ifl-media-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f0f0f0;
}

.ifl-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ifl-transition);
}

.ifl-item:hover .ifl-media-img {
	transform: scale(1.05);
}

/* --- Play Icon Overlay (Video/Reels) --- */
.ifl-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	background: var(--ifl-overlay-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	pointer-events: none;
	backdrop-filter: blur(2px);
	transition: transform 0.2s ease, background 0.2s ease;
}

.ifl-item:hover .ifl-play-icon {
	background: rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%) scale(1.1);
}

/* --- Carousel Icon --- */
.ifl-carousel-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	background: var(--ifl-overlay-bg);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	backdrop-filter: blur(2px);
}

/* --- Caption --- */
.ifl-caption {
	padding: 10px 12px;
	font-size: var(--ifl-caption-size);
	color: var(--ifl-caption-color);
	line-height: 1.5;
	word-break: break-word;
}

/* --- Meta Row --- */
.ifl-meta {
	display: flex;
	gap: 12px;
	padding: 0 12px 10px;
	font-size: var(--ifl-meta-size);
	color: var(--ifl-meta-color);
	align-items: center;
	flex-wrap: wrap;
}

.ifl-meta .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	vertical-align: text-bottom;
	margin-right: 2px;
}

.ifl-likes,
.ifl-comments,
.ifl-date {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

/* --- Item Link --- */
.ifl-item-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ifl-item-link:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* --- Error Message --- */
.ifl-error {
	padding: 12px 16px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	font-size: 14px;
}

/* ==================================================================
   Responsive Breakpoints
   ================================================================== */

/* Tablet: max 2 columns */
@media (max-width: 768px) {
	.ifl-layout--grid,
	.ifl-layout--masonry {
		--ifl-cols: 2;
	}

	.ifl-layout--grid.ifl-cols--1,
	.ifl-layout--masonry.ifl-cols--1 {
		--ifl-cols: 1;
	}

	.ifl-layout--list .ifl-item {
		flex-direction: column;
	}

	.ifl-layout--list .ifl-media-wrap {
		width: 100%;
		min-width: unset;
	}
}

/* Mobile: single column */
@media (max-width: 480px) {
	.ifl-layout--grid,
	.ifl-layout--masonry {
		--ifl-cols: 1;
	}

	.ifl-layout--list .ifl-item {
		flex-direction: column;
	}
}