/**
 * FluffyTech Feeds - Front End Styles
 * Version:  FEEDS v1.12.0
 * Created:  10.08.26
 * Changelog
 * ---------
 * [11.08.26] - FIXED      Cursor confirmed live on a client site via devtools: the theme sets
 *                         "a img { cursor: default }" which wins over our cursor:pointer on the parent
 *                         <a> because the browser reads the cursor off whatever element the mouse is
 *                         actually over (the <img>, which fills the whole link), not the ancestor.
 *                         Added cursor: pointer directly on .fluffytech-feeds__image and verified via
 *                         live getComputedStyle() that it now wins
 * [11.08.26] - FIXED      Tablet breakpoint corrected from 900px to 640px to match Smash Balloon's own
 *                         breakpoints (pulled from a reference Smash Balloon installation's live CSS:
 *                         max-width:640px and max-width:480px are their two breakpoints, 480px already
 *                         matched what we had)
 * [11.08.26] - FIXED      Item placeholder background forced with !important - same specificity pattern
 *                         as the other theme-CSS overrides on this site, in case a theme rule is turning
 *                         the grey placeholder white during the pre-paint gap
 * [11.08.26] - FIXED      Load more button gradient was surviving appearance: none, meaning it's an
 *                         authored CSS gradient from a theme selector with an ancestor class (same
 *                         specificity pattern as the .entry-content img issue), not native OS chrome.
 *                         Background/box-shadow/border now forced with !important since guessing at
 *                         the exact competing selector isn't worth another round trip
 * [11.08.26] - UPDATED    Play icon flattened to a plain white triangle with a drop-shadow for contrast,
 *                         no circular backdrop - matches the reference look, no round corners anywhere
 * [11.08.26] - FIXED      Load more button given appearance: none - Safari/Chrome apply a native gradient
 *                         bevel to unstyled <button> elements unless explicitly turned off, which is what
 *                         was showing through despite background: transparent
 * [11.08.26] - REMOVED    Load more button hover colour change - kept fully static per request
 * [11.08.26] - FIXED      .fluffytech-feeds__image padding/min-width forced to 0 with a 2-class selector
 *                         - the client theme's ".entry-content img" rule (1 class + 1 element,
 *                         specificity 0,1,1) was beating our old single-class selector (0,1,0) and adding
 *                         10px top/bottom padding on every image, which is what was showing as a grey
 *                         band through the item's placeholder background. Belt-and-braces fix - the direct
 *                         cause on that site is theme CSS, patch supplied separately for the theme stylesheet
 * [11.08.26] - ADDED      Explicit responsive breakpoints - the auto-fit grid's 90px column floor was
 *                         still fitting 2-3 columns on phones instead of the requested single column,
 *                         so this adds a hard override at <=480px (1 col) and <=900px (2 cols)
 * [11.08.26] - UPDATED    Load more button restyled to a plain square-cornered outline box (was solid
 *                         black fill) per request for "basic styling, no round corners, just a box outline"
 * [11.08.26] - ADDED      Explicit cursor: pointer on feed links (anchors default to pointer already,
 *                         but making it explicit in case a theme resets it)
 * [11.08.26] - UPDATED    Hover swapped from scale-zoom to a subtle opacity fade, no zoom on the image
 * [11.08.26] - ADDED      Play-icon badge overlay for VIDEO media_type items
 * [10.08.26] - ADDED      Load more button styling
 * [10.08.26] - UPDATED    Grid rewritten to a fluid auto-fit layout (no gap, square corners) matching
 *                         a dense Instagram-wall look, replaces the old fixed-breakpoint responsive rules
 * [10.08.26] - BUILT      Grid layout, horizontal scroll layout, lightbox overlay
 */

.fluffytech-feeds {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.fluffytech-feeds *,
.fluffytech-feeds *::before,
.fluffytech-feeds *::after {
	box-sizing: inherit;
}

/* Grid layout - fluid auto-fit down to tablet width, then hard breakpoints below take over.
   --fluffytech-feeds-columns is the target column count at full container width. */
.fluffytech-feeds--grid {
	--fluffytech-feeds-columns: 4;
	--fluffytech-feeds-gap: 2px;
	display: grid;
	gap: var( --fluffytech-feeds-gap );
	grid-template-columns: repeat(
		auto-fit,
		minmax( max( 90px, calc( ( 100% - ( var( --fluffytech-feeds-columns ) - 1 ) * var( --fluffytech-feeds-gap ) ) / var( --fluffytech-feeds-columns ) ) ), 1fr )
	);
}

/* Hard breakpoints - the auto-fit rule above still lets 2-3 narrow columns survive on phones,
   so these force it down properly at the widths that actually matter. */
@media ( max-width: 640px ) {
	.fluffytech-feeds--grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.fluffytech-feeds--grid {
		grid-template-columns: 1fr;
	}
}

/* Horizontal scroll layout */
.fluffytech-feeds--scroll {
	display: flex;
	gap: var( --fluffytech-feeds-gap, 2px );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.fluffytech-feeds--scroll .fluffytech-feeds__item {
	flex: 0 0 220px;
	scroll-snap-align: start;
}

/* Shared item styles */
.fluffytech-feeds__item {
	position: relative;
	overflow: hidden;
	background: #eee !important;
}

.fluffytech-feeds__link {
	display: block;
	line-height: 0;
	position: relative;
	cursor: pointer;
}

.fluffytech-feeds__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* Belt-and-braces: beats theme rules like ".entry-content img { padding: ... }" on specificity
   (two classes always outranks one class + one element type) without needing !important. */
.fluffytech-feeds__item .fluffytech-feeds__image {
	padding: 0;
	min-width: 0;
}

.fluffytech-feeds__link:hover .fluffytech-feeds__image {
	opacity: 0.85;
}

/* Video play-icon - flat white triangle, no circular backdrop, no rounded anything */
.fluffytech-feeds__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -46%, -50% );
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.6 ) );
	pointer-events: none;
}

.fluffytech-feeds__caption {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
}

.fluffytech-feeds-error {
	font-size: 13px;
	color: #b32d2e;
}

/* Load more button - plain box outline, square corners, no native browser styling */
.fluffytech-feeds__load-more {
	display: block;
	margin: 16px auto 0;
	padding: 10px 24px;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #333;
	border: 1px solid #999 !important;
	border-radius: 0 !important;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.fluffytech-feeds__load-more:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Lightbox */
.fluffytech-feeds-lightbox {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 24px;
}

.fluffytech-feeds-lightbox[hidden] {
	display: none;
}

.fluffytech-feeds-lightbox__image {
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
}

.fluffytech-feeds-lightbox__caption {
	color: #fff;
	max-width: 60ch;
	text-align: center;
	margin-top: 12px;
	font-size: 14px;
}

.fluffytech-feeds-lightbox__close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}