/**
 * portfolio.css — WebWeCreate Portfolio
 *
 * @package WebWeCreate_Portfolio
 * @version 1.3.5
 * @since   1.0.0
 *
 * Changelog:
 *   1.3.5 — ย้าย share button styles (.wwc-share-btn, .wwcg-share)
 *           ไปไว้ใน share.css (webwecreate-share plugin) ที่เดียว
 *   1.3.4 — .wwcg-slide-media img: เพิ่ม cursor:zoom-in สำหรับ lightbox
 *           .wwcg-share hover: แก้ syntax transform ให้ถูกต้อง + เพิ่ม transition
 *   1.3.3 — เพิ่ม .wwcg-* styles กลับมา (gallery shortcode v1.3.3)
 *           .wwcg-slide: opacity:1 เต็ม (ไม่มี dim)
 *           .wwcg-slide-info: 2-col layout (text/share)
 *           .wwcg-share: circle border share button
 *   1.2.1 — Fix duplicate .wwcn-swiper block, equal height Elementor carousel
 *   1.2.0 — ลบ .wwcg-* (deprecated)
 *   1.0.8 — Part 6: Add Collection Mode CSS
 *   1.0.5 — Arrow: .pf-works-prev/next → .swiper-button-prev/next (Swiper native, matches snippet).
 *           Map old class names → plugin HTML class names from class-wwcp-shortcodes.php.
 *           Add .wwc-share-btn (replaces .pf-share-btn).
 *           Add .pf-work-info-panel styles for [portfolio_work_info].
 *
 * Class map (snippet → plugin):
 *   .pf-year-swiper-wrap            → .pf-year-wrapper
 *   .pf-year-swiper-outer           → (removed — swiper sits directly in wrapper)
 *   .pf-year-nav-prev / next        → .pf-year-prev / .pf-year-next
 *   .pf-year-swiper .swiper-slide   → .pf-year-swiper .pf-year-slide
 *   .pf-works-section               → .pf-works-year
 *   .pf-works-section.is-visible    → .pf-works-year.is-visible
 *   .pf-works-swiper-wrap           → .pf-works-swiper-wrapper
 *   .swiper-button-prev / next      → .pf-works-prev / .pf-works-next
 *   .swiper-pagination              → .pf-works-pagination
 *   .pf-share-btn                   → .wwc-share-btn
 *
 * NOTE: Share button styles (.wwc-share-btn, .wwcg-share) อยู่ใน share.css
 */

/* ─── Year Navigation ─────────────────────────────────────────────────────── */

.pf-year-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	margin-bottom: 2rem;
}

.pf-year-wrapper .pf-year-swiper {
	flex: 1;
	overflow: hidden;
	min-width: 0;
}

.pf-year-prev,
.pf-year-next {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #aaa;
	transition: color 0.2s;
	user-select: none;
	font-size: 18px;
	line-height: 1;
	background: none;
	border: none;
	padding: 0;
}

.pf-year-prev:hover,
.pf-year-next:hover { color: #000; }

.pf-year-prev.swiper-button-disabled,
.pf-year-next.swiper-button-disabled {
	opacity: 0.25;
	pointer-events: none;
}

.pf-year-swiper .swiper-wrapper { align-items: center; }

.pf-year-swiper .pf-year-slide {
	text-align: center;
	padding: 0 0.5rem;
	font-size: 0.95rem;
	color: #bbb;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.25s, font-size 0.25s, font-weight 0.25s;
}

.pf-year-swiper .pf-year-slide.is-active-year {
	color: #000;
	font-size: 1.2rem;
	font-weight: 600;
}

/*Archive Description*/
.pf-archive-desc-wrapper {
	font-family: "Fragment Mono", sans-serif;
}

/* ─── Works Section ───────────────────────────────────────────────────────── */

.pf-works-year {
	display: none;
	position: relative;
}

.pf-works-year[data-count="1"] .swiper-wrapper {
	transform: none !important;
	justify-content: center;
}

.pf-works-year[data-count="1"] .swiper-slide {
	width: 33.33% !important;
	margin: 0 auto !important;
}

.pf-works-year.is-visible {
	display: block;
	animation: pfFadeIn 0.8s ease;
}

@keyframes pfFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pf-works-swiper-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.pf-works-swiper .swiper-slide {
	transition: opacity 0.3s;
	opacity: 0.35;
}

.pf-works-swiper .swiper-slide.swiper-slide-active { opacity: 1; }

.pf-works-swiper .swiper-slide-active,
.pf-works-swiper .swiper-slide:only-child { opacity: 1 !important; }

@media (min-width: 768px) {
	.pf-works-swiper .swiper-slide.swiper-slide-prev,
	.pf-works-swiper .swiper-slide.swiper-slide-next { opacity: 0.45; }
}

/* ─── Work Card ───────────────────────────────────────────────────────────── */

.pf-work-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.pf-work-media { position: relative; width: 100%; }
.pf-work-media a { display: block; }
.pf-work-media img {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	display: block;
}

.pf-no-thumb {
	width: 100%;
	aspect-ratio: 3/4;
	background: #eee;
}

.pf-work-info {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.pf-work-info-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.pf-work-title {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex: 1;
	min-width: 0;
	font-family: "Fragment Mono", sans-serif;
	font-weight: 700;
}

.pf-work-title a {
	color: #000;
	text-decoration: none;
}

.pf-work-title a:hover { text-decoration: underline; }

/* Share button — styles อยู่ใน share.css */

/* Tags — vertical stack */
.pf-work-tags {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-top: 0.1rem;
	min-height: 45px;
}

.pf-tag {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
	line-height: 1.4;
	font-family: "Fragment Mono", sans-serif;
}

.pf-work-divider {
	border: none;
	border-top: 1px solid #e0e0e0;
	margin: 0.5rem 0;
}

.pf-work-excerpt {
	margin: 0;
	font-size: 0.78rem;
	color: #666;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Works Navigation Arrows ─────────────────────────────────────────────── */

.pf-works-swiper-wrapper .swiper-button-prev,
.pf-works-swiper-wrapper .swiper-button-next { display: none; }

@media (hover: hover) and (min-width: 768px) {
	.pf-works-swiper-wrapper .swiper-button-prev,
	.pf-works-swiper-wrapper .swiper-button-next {
		display: flex;
		color: #000;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.85);
		border-radius: 50%;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
		top: calc(50% - 40px);
	}

	.pf-works-swiper-wrapper .swiper-button-prev::after,
	.pf-works-swiper-wrapper .swiper-button-next::after {
		font-size: 14px;
		font-weight: 700;
	}

	.pf-works-swiper-wrapper .swiper-button-prev { left: 0; }
	.pf-works-swiper-wrapper .swiper-button-next { right: 0; }
}

/* ─── Pagination ──────────────────────────────────────────────────────────── */

.pf-works-pagination { display: none; }

@media (hover: none), (max-width: 767px) {
	.pf-works-pagination {
		display: block;
		position: relative;
		margin-top: 1rem;
	}

	.pf-works-pagination .swiper-pagination-bullet {
		background: #000;
		opacity: 0.25;
	}

	.pf-works-pagination .swiper-pagination-bullet-active { opacity: 1; }
}

/* ─── Single-slide centering (desktop) ────────────────────────────────────── */

@media (min-width: 768px) {
	.pf-works-year[data-count="1"] .swiper-slide {
		width: 33.33% !important;
		margin: 0 auto;
	}
}

/* ─── Info Panel — [portfolio_work_info] ──────────────────────────────────── */

.pf-work-info-panel { margin-top: 1.5rem; }

.pf-info-title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: "Fragment Mono", sans-serif;
}

.pf-info-excerpt {
	margin: 0;
	font-size: 0.85rem;
	color: #666;
	line-height: 1.6;
}


/* =============================================================================
   COLLECTION MODE
   .wwcg-*  Gallery shortcode  [wwc_gallery]
   .wwcn-*  Nav shortcode      [wwc_nav]
   ============================================================================= */

/* ─── Gallery — .wwcg-* ───────────────────────────────────────────────────── */

/* Container — overflow:hidden + min-width:0 ตัด Elementor Grid circular dependency */
.wwcg-wrap {
	position: relative;
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

.wwcg-swiper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* Slide — opacity เต็มทุกรูป (ไม่มี dim) */
.wwcg-slide {
	position: relative;
}

/* รูป */
.wwcg-slide-media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 15px !important;
	cursor: zoom-in;
}

/* ── Slide info — 2-col: left(text) / right(share) ── */
.wwcg-slide-info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0 0;
}

.wwcg-slide-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-top: 0.5rem;
}

.wwcg-slide-title {
	margin: 0;
	font-weight: 600;
	font-family: "Fragment Mono", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #111;
	line-height: 1.3;
	white-space: wrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wwcg-slide-caption {
	margin: 0;
	font-size: 0.72rem;
	color: #888;
	font-family: "Fragment Mono", sans-serif;
	line-height: 1.4;
}

/* Share button — styles อยู่ใน share.css */

/* Navigation arrows — minimal, เห็นบนรูป */
.wwcg-btn-prev,
.wwcg-btn-next {
	display: none;
}

@media (hover: hover) and (min-width: 768px) {
	.wwcg-btn-prev,
	.wwcg-btn-next {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		top: calc(50% - 18px);
		background: transparent;
		--swiper-navigation-color: rgba(255, 255, 255, 0.8);
		--swiper-navigation-size: 18px;
		transition: opacity 0.2s;
	}

	.wwcg-btn-prev:hover,
	.wwcg-btn-next:hover {
		--swiper-navigation-color: #fff;
	}

	.wwcg-btn-prev::after,
	.wwcg-btn-next::after {
		font-size: 18px;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}

	.wwcg-btn-prev { left: 6px; }
	.wwcg-btn-next { right: 6px; }

	.wwcg-btn-prev.swiper-button-disabled,
	.wwcg-btn-next.swiper-button-disabled {
		opacity: 0.25;
		pointer-events: none;
	}
}

/* Pagination dots — mobile */
.wwcg-pagination { display: none; }

@media (hover: none), (max-width: 767px) {
	.wwcg-pagination {
		display: block;
		position: relative;
		text-align: center;
		margin-top: 0.5rem;
	}
	.wwcg-pagination .swiper-pagination-bullet { background: #000; opacity: 0.2; }
	.wwcg-pagination .swiper-pagination-bullet-active { opacity: 1; }
}

/* ─── Nav — .wwcn-* ───────────────────────────────────────────────────────── */
.wwcn-prev,
.wwcn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    padding: 0 0.5rem;
    user-select: none;
    transition: color 0.15s;
    flex-shrink: 0;
}

.wwcn-prev:hover,
.wwcn-next:hover {
    color: #000;
}

.wwcn-prev.swiper-button-disabled,
.wwcn-next.swiper-button-disabled {
    opacity: 0.25;
    pointer-events: none;
}

/* Layout: ลูกศร + swiper อยู่ใน flex row */
.wwcn-display-swiper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wwcn-display-swiper .wwcn-swiper {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* Container หลัก */
.wwcn-wrap {
	width: 100%;
	margin-bottom: 1.25rem;
}

/* ── Display modifier: tabs & buttons — flex wrap ── */
.wwcn-display-tabs .wwcn-tabs,
.wwcn-display-buttons .wwcn-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	align-items: center;
}

/* ── Nav item — pill shape (ทุก display mode) ── */
.wwcn-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.3rem 0.85rem;
	font-size: 1.2rem;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	color: #555;
	background: transparent;
	transition: background 0.18s, color 0.18s, border-color 0.18s;
	user-select: none;
	text-decoration: none;
	font-family: "Fragment Mono", sans-serif;
}

.wwcn-item:hover {
	color: #000;
	font-weight: 700;
}

/* swiper mode — items ไม่ stretch ตาม slide width */
.wwcn-display-swiper .wwcn-swiper .swiper-wrapper {
	align-items: center;
}

.wwcn-display-swiper .wwcn-swiper .swiper-slide {
	width: auto; /* slidesPerView: auto */
}

/* ── Active state ── */
.wwcn-item--active {
	font-weight: 600;
}

.wwcn-item--active:hover {
	color: #000;
}

/* ── "All" item — ไม่ต้องการ style พิเศษ, inherits pill ── */
.wwcn-item--all {
	/* inherits .wwcn-item */
}

/* ── Loading state — วางบน Loop Grid container ตอน AJAX ── */
.wwcn-loading {
	opacity: 0.4;
	pointer-events: none;
	cursor: wait;
	transition: opacity 0.2s;
}


/* =============================================================================
   ELEMENTOR IMAGE CAROUSEL — Gallery (Loop Item template)
   บังคับ aspect ratio ให้รูปทุกใบมีขนาดเท่ากัน
   ปรับ ratio ตามต้องการ: 3/4 = แนวตั้ง | 4/3 = แนวนอน | 1/1 = สี่เหลี่ยม
   ============================================================================= */

/* บังคับรูปใน Elementor Image Carousel ที่อยู่ใน Loop Item */
.e-loop-item .elementor-image-carousel-wrapper img,
.e-loop-item .swiper-slide img {
	width: 100%;
	aspect-ratio: 1 / 1;  
	object-fit: cover;
	display: block;
}