/* Instagram Feeds — front-end styles */

.if-feed {
	--if-columns-desktop: 4;
	--if-columns-tablet: 3;
	--if-columns-mobile: 2;
	--if-spacing: 8px;
	--if-slider-aspect: auto;
	box-sizing: border-box;
}
.if-feed * { box-sizing: border-box; }

/* Header */
.if-feed-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.if-avatar { width: 44px; height: 44px; border-radius: 50%; background: #eee; display: inline-block; flex-shrink: 0; }
.if-feed-header-text { flex: 1 1 auto; min-width: 0; }
.if-username { font-weight: 600; }
.if-bio { margin: 2px 0 0; font-size: 0.85em; color: #555; }
.if-follow-btn { padding: 6px 14px; border-radius: 6px; background: #0095f6; color: #fff; text-decoration: none; font-size: 0.85em; white-space: nowrap; }

/* Grid layout (default) */
.if-layout-grid .if-feed-grid,
.if-layout-highlight .if-feed-grid {
	display: grid;
	grid-template-columns: repeat(var(--if-columns-mobile), 1fr);
	gap: var(--if-spacing);
}
@media (min-width: 600px) {
	.if-layout-grid .if-feed-grid, .if-layout-highlight .if-feed-grid { grid-template-columns: repeat(var(--if-columns-tablet), 1fr); }
}
@media (min-width: 1024px) {
	.if-layout-grid .if-feed-grid, .if-layout-highlight .if-feed-grid { grid-template-columns: repeat(var(--if-columns-desktop), 1fr); }
}
.if-layout-grid .if-feed-item img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: 100%; }

/* Masonry layout */
.if-layout-masonry .if-feed-grid {
	columns: var(--if-columns-mobile);
	column-gap: var(--if-spacing);
}
@media (min-width: 600px) { .if-layout-masonry .if-feed-grid { columns: var(--if-columns-tablet); } }
@media (min-width: 1024px) { .if-layout-masonry .if-feed-grid { columns: var(--if-columns-desktop); } }
.if-layout-masonry .if-feed-item { break-inside: avoid; margin-bottom: var(--if-spacing); }
.if-layout-masonry .if-feed-item img { width: 100%; height: auto; display: block; }

/* Row layout */
.if-layout-row .if-feed-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--if-spacing); scroll-snap-type: x mandatory; }
.if-layout-row .if-feed-item { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }
.if-layout-row .if-feed-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Slider layout — uses the configurable aspect ratio control */
.if-slider-wrap { position: relative; }
.if-layout-slider .if-feed-grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--if-spacing);
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* legacy Edge/IE */
}
.if-layout-slider .if-feed-grid::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */

/* Item width is derived from the column count so exactly N items are ever
   fully visible per breakpoint — no partial/cut-off slide. */
.if-layout-slider .if-feed-item {
	flex: 0 0 calc((100% - (var(--if-slider-mobile-items) - 1) * var(--if-spacing)) / var(--if-slider-mobile-items));
	scroll-snap-align: start;
}
@media (min-width: 600px) {
	.if-layout-slider .if-feed-item {
		flex-basis: calc((100% - (var(--if-columns-tablet) - 1) * var(--if-spacing)) / var(--if-columns-tablet));
	}
}
@media (min-width: 1024px) {
	.if-layout-slider .if-feed-item {
		flex-basis: calc((100% - (var(--if-columns-desktop) - 1) * var(--if-spacing)) / var(--if-columns-desktop));
	}
}
.if-layout-slider .if-feed-item img,
.if-layout-slider .if-feed-item video { width: 100%; aspect-ratio: var(--if-slider-aspect); object-fit: cover; display: block; }

/* Slider nav arrows */
.if-slider-nav { display: flex; z-index: 3; }
.if-slider-arrow {
	width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background-color: rgba(255,255,255,.85) !important; box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
	display: flex; align-items: center; justify-content: center;
	color: #333 !important; cursor: pointer;
}
.if-slider-arrow:hover { background-color: #fff !important; }
.if-slider-arrow-icon { width: 18px; height: 18px; display: block; }

/* Overlay position (default): arrows float centered over the slide edges */
.if-slider-wrap[data-arrows-mobile="overlay"] .if-slider-nav {
	position: absolute; inset: 0; display: flex; justify-content: space-between;
	align-items: center; padding: 0 6px; pointer-events: none;
}
.if-slider-wrap[data-arrows-mobile="overlay"] .if-slider-arrow { pointer-events: auto; }
.if-slider-wrap[data-arrows-mobile="below"] .if-slider-nav {
	position: static; justify-content: center; gap: 12px; margin-top: 10px;
}
@media (min-width: 600px) {
	.if-slider-wrap[data-arrows-tablet="overlay"] .if-slider-nav {
		position: absolute; inset: 0; display: flex; justify-content: space-between;
		align-items: center; padding: 0 6px; pointer-events: none; margin-top: 0;
	}
	.if-slider-wrap[data-arrows-tablet="overlay"] .if-slider-arrow { pointer-events: auto; }
	.if-slider-wrap[data-arrows-tablet="below"] .if-slider-nav {
		position: static; justify-content: center; gap: 12px; margin-top: 10px;
	}
}
@media (min-width: 1024px) {
	.if-slider-wrap[data-arrows-desktop="overlay"] .if-slider-nav {
		position: absolute; inset: 0; display: flex; justify-content: space-between;
		align-items: center; padding: 0 6px; pointer-events: none; margin-top: 0;
	}
	.if-slider-wrap[data-arrows-desktop="overlay"] .if-slider-arrow { pointer-events: auto; }
	.if-slider-wrap[data-arrows-desktop="below"] .if-slider-nav {
		position: static; justify-content: center; gap: 12px; margin-top: 10px;
	}
}

/* Shared item chrome */
.if-feed-item { position: relative; margin: 0; }
.if-item-trigger { display: block; width: 100%; padding: 0 !important; border: 0 !important; background: none !important; cursor: pointer; position: relative; }
.if-viewer-none .if-item-trigger { cursor: default; }
.if-item-trigger img { display: block; border-radius: 4px; }
.if-badge { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; }
.if-caption { font-size: 0.85em; margin: 6px 0 2px; }
.if-meta { display: flex; gap: 10px; font-size: 0.75em; color: #777; }

.if-load-more { margin-top: 16px; padding: 10px 20px !important; border: 1px solid #ccc !important; background-color: #fff !important; border-radius: 6px !important; color: #262626 !important; font: inherit; cursor: pointer; }
.if-feed-empty { padding: 24px; text-align: center; color: #777; border: 1px dashed #ddd; border-radius: 6px; }

/* Collab posts — rendered via Instagram's own oEmbed markup rather than
   our normal <img>/<video> item, so they get their own light wrapper
   instead of the shared aspect-ratio/object-fit rules above. */
.if-feed-item-collab { overflow: hidden; }
.if-collab-embed { width: 100%; }
.if-collab-embed iframe,
.if-collab-embed blockquote.instagram-media { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

/* Reels in the embed modes (Full / Cropped) only. Note: Instagram's Reel
   player draws its video inside a near-square box at every embed width
   (verified at 260-540px), so a 9:16 Reel is always pillarboxed with black
   inside Instagram's cross-origin iframe - no width we set can remove that.
   The "Image card" collab display avoids it entirely by showing the Reel's
   cover image cropped like any other post. This cap is kept only so very
   wide single-column layouts don't blow the Reel card up to full width. */
.if-collab-kind-reel {
	--if-collab-reel-width: 400px;
}
.if-collab-kind-reel .if-collab-embed iframe,
.if-collab-kind-reel .if-collab-embed blockquote.instagram-media {
	width: 100% !important;
	max-width: var(--if-collab-reel-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Slider layout lays its slides out as a plain flex row, which by default
   stretches every slide to match the height of the tallest one. Regular
   photo/video slides don't mind that — they use object-fit: cover, which
   fills whatever height they're stretched to. Collab cards can't do that:
   they render Instagram's own native card (header, photo, caption, "View
   more on Instagram" footer) at its own natural height, and that content
   is cross-origin so we can't crop or stretch it to fill a taller box.
   Picking a tall/narrow Slider aspect ratio (e.g. Story/Reel 9:16) for the
   feed's regular slides was stretching collab cards far past their natural
   height, distorting how much of their content/details showed. Keeping
   collab cards at their own intrinsic height, independent of what the
   Slider aspect ratio setting does to everything else, avoids that. */
.if-layout-slider .if-feed-item-collab { align-self: flex-start; }

/*
 * "Cropped" collab display (opt-in via feed settings).
 *
 * Instagram's embed renders as a cross-origin iframe: we can size and
 * position that iframe as a box, but we cannot see or remove elements
 * inside it (the avatar row, caption, like/comment icons all live inside
 * the iframe's own document). So this hides Instagram's avatar/username bar
 * — a genuinely fixed height regardless of post content — by shifting the
 * embed up by that height and clipping only that top sliver.
 *
 * Earlier this ALSO capped the box to a fixed aspect-ratio (e.g. 1:1), which
 * clipped everything below the photo too — caption, likes, "View more on
 * Instagram". That was fine for Reels once given a tall enough ratio, but
 * photo/carousel posts (shorter box, same fixed ratio) had their caption and
 * footer cut off entirely rather than just trimmed. Since Instagram's card
 * height varies by post type and caption length, no fixed ratio can be
 * right for every post. Using overflow: hidden on a height:auto container
 * together with a negative top margin on the embed crops exactly the header
 * sliver and nothing else — the box's height still follows the embed's own
 * (post-header) height, so the caption/footer are never clipped, for any
 * post type. Adjust --if-collab-header-px below only if your theme's
 * Instagram embed width changes how tall that avatar/username row renders.
 */
.if-collab-cropped {
	--if-collab-header-px: 62px; /* Instagram's avatar/username bar height */
	overflow: hidden;
}
.if-collab-cropped .if-collab-embed {
	margin-top: calc(-1 * var(--if-collab-header-px));
}
/* Collab image cards: always clickable (open Instagram's player popup),
   even when the feed's viewer is off for own posts. */
.if-feed-item-collab-card .if-item-trigger,
.if-feed-item-ig-popup .if-item-trigger,
.if-viewer-none .if-feed-item-ig-popup .if-item-trigger { cursor: pointer; }
.if-feed-item-ig-popup .if-item-trigger:focus-visible { outline: 2px solid #0095f6; outline-offset: 2px; }
/* Instagram-player viewer: cards that can't be embedded stay inert. */
.if-viewer-instagram .if-feed-item:not(.if-feed-item-ig-popup) .if-item-trigger { cursor: default; }

/* Popup card (1.7.0): one Instagram-style card for every post. Every card
   is the same size: fixed header + 4:5 media frame + fixed footer, with the
   width chosen so the whole card fits the screen. */
.if-pc-overlay {
	--if-pc-hd: 56px;   /* header height */
	--if-pc-ft: 98px;   /* footer height: link row + 2 caption lines */
	--if-pc-pad: 12px;  /* space around the card */
	--if-pc-w: min(480px, calc(100vw - 2 * var(--if-pc-pad)), calc((100vh - 2 * var(--if-pc-pad) - var(--if-pc-hd) - var(--if-pc-ft)) * 0.8));
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(0,0,0,.85);
	display: flex; align-items: center; justify-content: center;
	padding: var(--if-pc-pad);
	box-sizing: border-box;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh) {
	.if-pc-overlay { --if-pc-w: min(480px, calc(100vw - 2 * var(--if-pc-pad)), calc((100dvh - 2 * var(--if-pc-pad) - var(--if-pc-hd) - var(--if-pc-ft)) * 0.8)); }
}
.if-pc-card {
	width: max(260px, var(--if-pc-w));
	flex: 0 0 auto;
	margin: auto;
	background: #fff; color: #262626;
	border-radius: 8px; overflow: hidden;
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-align: left;
}
.if-pc-header {
	height: var(--if-pc-hd); box-sizing: border-box;
	display: flex; align-items: center; gap: 10px;
	padding: 0 8px 0 12px;
	border-bottom: 1px solid #efefef;
}
.if-pc-user { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; color: #262626; text-decoration: none; }
.if-pc-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 32px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.if-pc-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: #262626; color: #fff; font-weight: 600; font-size: 14px; }
.if-pc-names {
	min-width: 0; overflow: hidden; line-height: 17px; max-height: 34px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
.if-pc-name { font-weight: 600; }
.if-pc-and { color: #737373; }
.if-pc-profile-btn {
	flex: 0 0 auto; padding: 6px 12px !important; border-radius: 8px !important;
	background: #4a5df9 !important; color: #fff !important; font-weight: 600 !important; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.if-pc-profile-btn:hover, .if-pc-profile-btn:focus-visible { background: #3a4de0; }
.if-pc-close {
	flex: 0 0 auto; width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: none !important; color: #262626 !important; font-size: 26px !important; line-height: 32px !important; cursor: pointer;
}
.if-pc-close:hover, .if-pc-close:focus-visible { background-color: #efefef !important; outline: none; }
.if-pc-compact .if-pc-profile-btn { display: none; }

/* Media frame: always 4:5. */
.if-pc-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #fafafa; line-height: 0; }
.if-pc-poster, .if-pc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.if-pc-video { background: #000; }
.if-pc-embed { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: opacity .2s; line-height: normal; }
.if-pc-ready .if-pc-embed { opacity: 1; }
.if-pc-ready .if-pc-poster { visibility: hidden; }
.if-pc-embed iframe, .if-pc-embed blockquote.instagram-media {
	width: 100% !important; max-width: none !important; min-width: 0 !important;
	margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* Fallback when Instagram's layout isn't what the crop expects: show its
   whole card inside the frame, scrollable. */
.if-pc-uncropped { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.if-pc-loading {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
	padding: 8px 14px; border-radius: 16px; background: rgba(255,255,255,.92); color: #555;
	font-size: 13px; line-height: 1.4; text-align: center; max-width: 80%;
}
.if-pc-loading a { color: #0095f6; }
.if-pc-loading[hidden] { display: none; }

/* Own-video controls. */
.if-pc-play {
	position: absolute; left: 50%; top: 50%; width: 72px !important; height: 72px !important; margin: -36px 0 0 -36px !important; padding: 14px !important;
	border: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,.35) !important; color: #fff !important; cursor: pointer;
	opacity: 0; pointer-events: none; transition: opacity .15s; box-sizing: border-box;
}
.if-pc-play svg { width: 100%; height: 100%; display: block; }
.if-pc-paused .if-pc-play { opacity: 1; pointer-events: auto; }
.if-pc-mute {
	position: absolute; right: 10px; bottom: 14px; width: 32px !important; height: 32px !important; padding: 6px !important;
	border: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,.5) !important; color: #fff !important; cursor: pointer; box-sizing: border-box;
}
.if-pc-mute svg { width: 100%; height: 100%; display: block; }
.if-pc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.3); }
.if-pc-progress span { display: block; height: 100%; width: 0; background: #fff; }
.if-pc-play:focus-visible, .if-pc-mute:focus-visible { outline: 2px solid #0095f6; outline-offset: 2px; }

/* Footer: fixed height, so every card is the same size. */
.if-pc-footer { height: var(--if-pc-ft); box-sizing: border-box; padding: 10px 14px; overflow: hidden; }
.if-pc-more { display: block; color: #4a5df9; font-weight: 600; text-decoration: none; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #efefef; }
.if-pc-more:hover, .if-pc-more:focus-visible { text-decoration: underline; }
.if-pc-caption-wrap { position: relative; }
.if-pc-caption {
	margin: 0; font-size: 14px; line-height: 20px; max-height: 40px; overflow: hidden;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
	padding-right: 44px;
}
.if-pc-caption-more {
	position: absolute; right: 0; bottom: 0; border: 0 !important; background: #fff !important; padding: 0 0 0 4px !important;
	color: #737373 !important; cursor: pointer; font: inherit; line-height: 20px !important; border-radius: 0 !important;
}
/* Full caption opens over the media (card size never changes). */
.if-pc-caption-panel {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 70%;
	overflow-y: auto; background: #fff; padding: 14px 44px 14px 14px; box-sizing: border-box;
	line-height: 1.45; box-shadow: 0 -2px 12px rgba(0,0,0,.15); border-radius: 8px 8px 0 0;
}
.if-pc-caption-panel[hidden] { display: none; }
.if-pc-caption-full { margin: 0; font-size: 14px; word-break: break-word; }
.if-pc-caption-less {
	position: sticky; float: right; top: 0; margin: -6px -36px 0 0 !important; width: 28px !important; height: 28px !important; padding: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: #efefef !important; color: #262626 !important; font-size: 20px; line-height: 28px !important; cursor: pointer;
}

/* Popup lightbox */
.if-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100000; display: flex; align-items: center; justify-content: center; }
.if-lightbox-content { max-width: 90vw; max-height: 90vh; background: #fff; border-radius: 8px; overflow: hidden; display: flex; }
.if-lightbox-media { max-width: 60vw; max-height: 90vh; object-fit: contain; background: #000; display: block; }
.if-lightbox-close { position: absolute; top: 16px; right: 24px; z-index: 2; color: #fff; font-size: 28px; background: none; border: 0; cursor: pointer; }

/* Immersive side-panel viewer */
.if-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100000; display: flex; justify-content: flex-end; }
.if-panel { width: min(480px, 100vw); height: 100%; background: #fff; overflow-y: scroll; scroll-snap-type: y mandatory; }
.if-panel-post { scroll-snap-align: start; min-height: 100%; padding-bottom: 24px; border-bottom: 1px solid #eee; }
.if-panel-post video, .if-panel-post img { width: 100%; display: block; }
.if-panel-close { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(0,0,0,.5); color: #fff; border: 0; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }