/**
 * TinkerTailz – Galerie Styles
 *
 * Follows the existing TT design tokens:
 *   --tt-primary, --tt-secondary, --tt-card, --tt-surface,
 *   --tt-border, --tt-text, --tt-text2, --tt-shadow-lg, --tt-shadow-glow
 */

/* Hero uses shared tt-section-header / tt-page-hero-title / tt-section-desc from style.css */

/* ═══════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════ */

.tt-galerie-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}

.tt-gal-filter {
	padding: 0.5rem 1.25rem;
	border: 1.5px solid var(--tt-border);
	border-radius: 9999px;
	background: var(--tt-surface);
	color: var(--tt-text2);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.tt-gal-filter:hover {
	border-color: var(--tt-primary);
	color: var(--tt-primary);
}

.tt-gal-filter--active {
	background: var(--tt-primary);
	border-color: var(--tt-primary);
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   GALLERY GRID
   ═══════════════════════════════════════════════════════════ */

.tt-galerie-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.tt-galerie-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/* ═══════════════════════════════════════════════════════════
   GALLERY CARD
   ═══════════════════════════════════════════════════════════ */

.tt-gal-card {
	border-radius: 16px;
	overflow: hidden;
	background: var(--tt-card);
	border: 1px solid var(--tt-border);
	box-shadow: var(--tt-shadow-lg);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tt-gal-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tt-shadow-glow);
}

.tt-gal-card--featured {
	border-color: var(--tt-primary);
	box-shadow: 0 0 0 1px var(--tt-primary), var(--tt-shadow-lg);
}

/* Hidden by filter */
.tt-gal-card--hidden {
	display: none;
}

/* ── Image wrapper ── */
.tt-gal-img-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: pointer;
}

.tt-gal-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tt-gal-img-wrap:hover .tt-gal-img {
	transform: scale(1.05);
}

/* ── Status badge ── */
.tt-gal-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 5;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.tt-gal-badge--available {
	background: rgba(34, 197, 94, 0.9);
	color: #fff;
}

.tt-gal-badge--sold {
	background: rgba(239, 68, 68, 0.85);
	color: #fff;
}

/* ── Hover overlay ── */
.tt-gal-hover {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(124, 77, 255, 0.0);
	color: #fff;
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
}

.tt-gal-img-wrap:hover .tt-gal-hover {
	background: rgba(124, 77, 255, 0.3);
	opacity: 1;
}

/* ── Card info ── */
.tt-gal-info {
	padding: 1rem 1.25rem;
}

.tt-gal-title {
	font-family: var(--tt-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--tt-text);
	margin: 0;
}

.tt-gal-type {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--tt-text2);
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════ */

.tt-gal-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-gal-lightbox[hidden] {
	display: none;
}

.tt-gal-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tt-gal-lb-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: min(90vw, 1000px);
	max-height: 90vh;
	width: 100%;
}

.tt-gal-lb-close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	z-index: 5;
	line-height: 1;
	opacity: 0.7;
	transition: opacity 0.2s;
}
.tt-gal-lb-close:hover { opacity: 1; }

/* ── Nav arrows ── */
.tt-gal-lb-prev,
.tt-gal-lb-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	background: rgba(255,255,255,0.1);
	border: none;
	color: #fff;
	font-size: 2.5rem;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.tt-gal-lb-prev:hover,
.tt-gal-lb-next:hover { background: rgba(255,255,255,0.2); }
.tt-gal-lb-prev { left: -3.5rem; }
.tt-gal-lb-next { right: -3.5rem; }

@media (max-width: 768px) {
	.tt-gal-lb-prev { left: 0.5rem; }
	.tt-gal-lb-next { right: 0.5rem; }
}

/* ── Lightbox image ── */
.tt-gal-lb-img-wrap {
	position: relative;
	max-height: 65vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-gal-lb-img {
	max-width: 100%;
	max-height: 65vh;
	object-fit: contain;
	border-radius: 12px;
}

/* ── Lightbox details ── */
.tt-gal-lb-details {
	padding: 1.25rem 0.5rem 0;
	text-align: center;
	color: #fff;
	max-width: 600px;
}

.tt-gal-lb-title {
	font-family: var(--tt-font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.tt-gal-lb-project {
	font-size: 0.875rem;
	color: var(--tt-secondary);
	display: block;
	margin-bottom: 0.5rem;
}

.tt-gal-lb-desc {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.75);
	line-height: 1.6;
	margin: 0 0 0.75rem;
}

.tt-gal-lb-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.5rem;
	border-radius: 9999px;
	background: var(--tt-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background 0.2s;
}
/* hidden attribute must win over explicit display/position values */
.tt-gal-lb-cta[hidden],
.tt-gal-badge[hidden] { display: none; }
.tt-gal-lb-cta:hover { background: var(--tt-secondary); }

/* ── Thumbnail strip ── */
.tt-gal-lb-thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.tt-gal-lb-thumbs[hidden] { display: none; }

.tt-gal-lb-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.2s;
}

.tt-gal-lb-thumb:hover { opacity: 0.8; }
.tt-gal-lb-thumb--active {
	opacity: 1;
	border-color: var(--tt-primary);
}

/* ── Gallery navigation strip (all items) ── */
.tt-gal-lb-gallery-nav {
	display: flex;
	gap: 0.375rem;
	margin-top: 1.25rem;
	padding: 0.625rem 0;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 90vw;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tt-gal-nav-thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid rgba(255,255,255,0.15);
	cursor: pointer;
	opacity: 0.45;
	transition: all 0.2s;
	flex-shrink: 0;
}

.tt-gal-nav-thumb:hover {
	opacity: 0.75;
	border-color: rgba(255,255,255,0.4);
}

.tt-gal-nav-thumb--active {
	opacity: 1;
	border-color: var(--tt-primary);
	box-shadow: 0 0 0 1px var(--tt-primary);
}


/* ═══════════════════════════════════════════════════════════
   IMAGE PROTECTION — Best-effort deterrence layer
   ═══════════════════════════════════════════════════════════

   WHAT THIS DOES — and what it CAN'T do:
   ────────────────────────────────────────
   Web browsers are designed to display images by downloading them.
   There is NO technical way to show an image to a user while also
   preventing them from saving it. Screenshots, dev-tools, network
   inspection, browser extensions, and screen recording all bypass
   any client-side protection completely.

   What we CAN do is raise the effort required for *casual* users:
   someone who right-clicks "Save Image As" or drags an image to
   their desktop. These measures stop ~90% of casual attempts while
   keeping the gallery fully usable.

   Protection layers implemented:
   ─────────────────────────────
   1. TRANSPARENT OVERLAY (.tt-gal-protect)
      A zero-opacity <div> positioned above every <img>.
      Right-clicking hits the overlay, not the image — so the
      browser's "Save Image As" option does not appear.

   2. POINTER-EVENTS ISOLATION
      <img> elements get pointer-events:none. All interaction
      (click, hover, right-click) goes through the overlay or
      wrapper, never the image itself.

   3. DRAG PREVENTION
      CSS -webkit-user-drag:none on images, plus JS dragstart
      prevention. Stops drag-to-desktop saving.

   4. SELECTION PREVENTION
      user-select:none on image containers. Prevents selecting
      the image element via click-drag highlighting.

   5. CONTEXT MENU BLOCK (JS)
      contextmenu event prevented on gallery and lightbox areas,
      but ONLY on image-related targets. Text content and links
      keep their normal right-click so accessibility is preserved.

   6. MOBILE LONG-PRESS PREVENTION
      -webkit-touch-callout:none suppresses the iOS "Save Image"
      popup on long-press. Android respects this partially.

   7. DISPLAY-SIZE ONLY DELIVERY (PHP)
      The pattern serves WordPress 'medium_large' (768px) for grid
      cards and 'large' (1024px) for lightbox — never the original
      upload. Even if someone extracts the URL, they get a reduced
      version, not the print-quality original.

   8. WATERMARK-READY STRUCTURE
      The overlay div (.tt-gal-protect) can be extended to render
      a CSS background-image watermark or a repeating brand pattern.
      See the .tt-gal-watermark rule below — uncomment and set a
      watermark image URL to activate.

   WHAT THIS DOES NOT PREVENT:
   ───────────────────────────
   - Screenshots (OS-level, impossible to block)
   - DevTools → Network tab → copy image URL
   - DevTools → Elements → find <img> src
   - Browser extensions that extract images
   - Screen recording software
   - Disabling JavaScript
   - curl / wget on the page source

   This is industry-standard best-effort protection, equivalent to
   what major stock photo sites use for their preview watermarks.
   ═══════════════════════════════════════════════════════════ */

/* ── Protection overlay — transparent shield above every image ──
   This is the primary defense. The overlay sits above the <img>
   with z-index, so any right-click or interaction targets the
   <div> (which has no image URL) rather than the <img>.          */
.tt-gal-protect {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: transparent;
	/* Ensure the overlay is always interactive (catches clicks/right-clicks). */
	pointer-events: auto;
}

/* ── All gallery images: prevent drag, select, callout ── */
.tt-galerie img,
.tt-gal-lightbox img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;   /* iOS: suppresses long-press "Save Image" */
	pointer-events: none;          /* All interaction goes through the overlay */
	/* Prevent the image from being focused by tab navigation,
	   which could expose it to assistive tech copy features.
	   The wrapper <div> handles focus/keyboard instead. */
}

/* ── Image containers: prevent text-style selection ── */
.tt-gal-img-wrap,
.tt-gal-lb-img-wrap {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* ── Lightbox thumbnails: same treatment ── */
.tt-gal-lb-thumb {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	pointer-events: auto;  /* Thumbs need clicks for navigation */
}


/* ── WATERMARK OVERLAY ──────────────────────────────────────
   .tt-gal-wm is the active watermark class, applied by JS to
   .tt-gal-protect overlays. The JS generates a repeating SVG
   data-URI pattern with the brand text + optional logo, rotated
   at -30° via CSS transform.

   The opacity and background-image are set dynamically by JS
   from wp-admin config (ttGalerieConfig.watermark). The CSS
   below provides the structural rules (rotation, sizing, etc).

   The watermark renders on a CSS overlay div — NOT embedded in
   the image. This is a visual deterrent only. DevTools can remove
   the overlay. For pixel-embedded watermarks, a server-side
   GD/Imagick solution would be needed (separate feature).
   ───────────────────────────────────────────────────────── */

.tt-gal-wm {
	/* Rotation: the overlay is slightly larger than the container
	   so rotated edges don't leave gaps. overflow:hidden on the
	   parent (.tt-gal-img-wrap) clips the excess. */
	transform: rotate(-30deg) scale(1.6);
	transform-origin: center center;
	pointer-events: auto;

	/* background-image + opacity set by JS from admin config.
	   Defaults here as fallback if JS hasn't run yet: */
	background-repeat: repeat;
	background-size: auto;
	opacity: 0;  /* JS sets this; 0 = invisible until JS applies config */
	transition: opacity 0.3s ease;
}

/* Lightbox watermark: same treatment, but the wrap uses
   overflow:hidden via .tt-gal-lb-img-wrap. */
.tt-gal-lb-img-wrap {
	overflow: hidden;
}

/* Grid card wraps already have overflow:hidden from .tt-gal-img-wrap. */


/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */

.tt-galerie-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem;
	color: var(--tt-text2);
	font-size: 1.125rem;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATION
   ═══════════════════════════════════════════════════════════ */

@keyframes tt-gal-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.tt-gal-card {
	animation: tt-gal-fade-in 0.4s ease both;
}