/* Pajaro TikTok Feed — brand tokens
   Hot pink   #FF2E88
   Sunbeam    #FFCE1B
   Deep teal  #0B4F4A
   Cream      #FFF8EC
   Ink        #1A1A1A
*/

.ptf-feed {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin: 24px 0;
}

.ptf-card {
	position: relative;
	display: block;
	text-decoration: none;
	color: #1A1A1A;
	background: #FFF8EC;
	border: 3px solid #0B4F4A;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.ptf-card:hover,
.ptf-card:focus-visible {
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 6px 6px 0 #FFCE1B;
	outline: none;
}

.ptf-thumb {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #0B4F4A;
}

.ptf-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Signature moment: a sunburst flashes in behind the play button on hover,
   echoing the sunburst treatment already used across princesspajaro.com */
.ptf-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	transform: translate(-50%, -50%) scale(0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF2E88;
	color: #FFF8EC;
	border-radius: 50%;
	font-size: 16px;
	padding-left: 3px;
	box-shadow: 0 0 0 0 rgba(255, 206, 27, 0);
	transition: transform .18s ease, box-shadow .25s ease;
}

.ptf-play::before {
	content: "";
	position: absolute;
	inset: -18px;
	background: conic-gradient(
		#FFCE1B 0deg 15deg, transparent 15deg 30deg,
		#FFCE1B 30deg 45deg, transparent 45deg 60deg,
		#FFCE1B 60deg 75deg, transparent 75deg 90deg,
		#FFCE1B 90deg 105deg, transparent 105deg 120deg,
		#FFCE1B 120deg 135deg, transparent 135deg 150deg,
		#FFCE1B 150deg 165deg, transparent 165deg 180deg,
		#FFCE1B 180deg 195deg, transparent 195deg 210deg,
		#FFCE1B 210deg 225deg, transparent 225deg 240deg,
		#FFCE1B 240deg 255deg, transparent 255deg 270deg,
		#FFCE1B 270deg 285deg, transparent 285deg 300deg,
		#FFCE1B 300deg 315deg, transparent 315deg 330deg,
		#FFCE1B 330deg 345deg, transparent 345deg 360deg
	);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.4) rotate(0deg);
	transition: opacity .25s ease, transform .4s ease;
	z-index: -1;
}

.ptf-card:hover .ptf-play,
.ptf-card:focus-visible .ptf-play {
	transform: translate(-50%, -50%) scale(1.05);
}

.ptf-card:hover .ptf-play::before,
.ptf-card:focus-visible .ptf-play::before {
	opacity: 1;
	transform: scale(1) rotate(25deg);
}

.ptf-caption {
	display: block;
	padding: 10px 12px 12px;
	font-family: "Bangers", "Poppins", system-ui, sans-serif;
	letter-spacing: .5px;
	font-size: 15px;
	line-height: 1.25;
	color: #0B4F4A;
}

.ptf-empty {
	font-family: "Poppins", system-ui, sans-serif;
	color: #0B4F4A;
}

/* Lightbox */
.ptf-modal {
	position: fixed;
	inset: 0;
	background: rgba(11, 79, 74, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.ptf-modal[hidden] { display: none; }

.ptf-modal-inner {
	position: relative;
	width: min(360px, 92vw);
	max-height: 90vh;
	background: #FFF8EC;
	border: 4px solid #FFCE1B;
	border-radius: 18px;
	padding: 14px;
	overflow: auto;
}

.ptf-modal-embed iframe,
.ptf-modal-embed blockquote {
	width: 100% !important;
}

.ptf-modal-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #FF2E88;
	color: #FFF8EC;
	border: 3px solid #FFF8EC;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.ptf-card, .ptf-play, .ptf-play::before {
		transition: none !important;
	}
}