/**
 * HP Blocksy Support — Vendor Profile Page
 *
 * Critical for 2meet-infocards compatibility.
 * 2meet-infocards JS targets: aside.hp-page__sidebar, body.hp-template--vendor-view-page
 */

/* === Vendor Profile Layout === */
.hp-vendor--view-page .hp-vendor__image img {
	border-radius: 50%;
	width: 120px;
	height: 120px;
	object-fit: cover;
}

.hp-vendor--view-page .hp-vendor__name {
	font-size: 24px;
	font-weight: 700;
	margin: 12px 0 8px;
	font-family: var(--hp-font-heading, inherit);
}

.hp-vendor--view-page .hp-vendor__description {
	color: var(--hp-color-muted, #666666);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* === Rating Stars === */
.hp-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.hp-rating__star {
	color: var(--color-apricot-medium);
	font-size: 16px;
}

.hp-rating__star--empty {
	color: var(--hp-color-border, #DDDDDD);
}

/* === Vendor Page Sidebar + Content within Blocksy === */
body.hp-template--vendor-view-page .ct-container {
	max-width: 100%;
}

/* Prevent Blocksy sticky sidebar from interfering with HP sidebar */
body.hp-template--vendor-view-page .inner-wrapper-sticky {
	position: static !important;
}

/* === Vendor Listings Grid === */
.hp-vendor--view-page .hp-listings {
	display: grid;
	gap: 24px;
}

.hp-vendor--view-page .hp-listings--columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.hp-vendor--view-page .hp-listings--columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
	.hp-vendor--view-page .hp-listings--columns-2,
	.hp-vendor--view-page .hp-listings--columns-3 {
		grid-template-columns: 1fr;
	}
}

/* === Sort / Filter Toolbar === */
.hp-listings__header,
.hp-vendors__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hp-color-border, #eee);
}

/* =========================================================
 * Vendor Profile — Two-Column Layout
 * Mobile (<768px): single column, sections collapsed
 * Desktop (≥768px): sidebar left / sections right, expanded
 * ========================================================= */

/* Hide HP page title ("XXX 的刊登項目") */
body.hp-template--vendor-view-page .hp-page__title {
	display: none;
}

/* Hide HP native listings grid — replaced by tmeetic-vendor-sections */
body.hp-template--vendor-view-page .hp-page__content .hp-listings {
	display: none !important;
}

/* === Mobile: collapse all sections by default === */
/* PHP renders <details open>, CSS overrides on mobile to start collapsed */
@media (max-width: 767px) {
	.tmeetic-vendor-section:not([open]) > .tmeetic-vendor-section__body {
		display: none;
	}
	/* Remove sticky on mobile */
	body.hp-template--vendor-view-page .hp-page__sidebar {
		position: static !important;
	}
}

/* === Desktop: force two-column layout (sidebar + content) === */
@media (min-width: 768px) {
	/* Force flex row — overrides any Blocksy/HP global that collapses it */
	body.hp-template--vendor-view-page .hp-page .hp-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 20px !important;
	}

	/* Sidebar: 33% */
	body.hp-template--vendor-view-page .hp-page__sidebar {
		flex: 0 0 33.333% !important;
		width: 33.333% !important;
		max-width: 33.333% !important;
		position: sticky;
		top: 24px;
	}

	/* Content: 67% */
	body.hp-template--vendor-view-page .hp-page__content {
		flex: 0 0 66.667% !important;
		width: 66.667% !important;
		max-width: 66.667% !important;
		min-width: 0 !important;
	}
}

/* --- Vendor Sections Container --- */
.tmeetic-vendor-sections {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --- Collapsible Section (<details>) --- */
.tmeetic-vendor-section {
	border: 1px solid var(--hp-color-border, #eee);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-secondary, #FAF9F6);
}

.tmeetic-vendor-section__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hp-color-text, #1a1a2e);
	cursor: pointer;
	user-select: none;
	list-style: none; /* remove default marker */
	transition: background var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.tmeetic-vendor-section__toggle::-webkit-details-marker {
	display: none;
}

/* Chevron indicator */
.tmeetic-vendor-section__toggle::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--hp-color-muted, #6c757d);
	border-bottom: 2px solid var(--hp-color-muted, #6c757d);
	transform: rotate(-45deg);
	transition: transform var(--duration-normal, 0.2s) var(--ease-default, ease);
	flex-shrink: 0;
	margin-left: 12px;
}

.tmeetic-vendor-section[open] > .tmeetic-vendor-section__toggle::after {
	transform: rotate(45deg);
}

.tmeetic-vendor-section__toggle:hover {
	background: var(--hp-color-surface, #FAF9F6);
}

.tmeetic-vendor-section__body {
	padding: 0 18px 16px;
}

/* Remove duplicate spacing from inner preview containers */
.tmeetic-vendor-section__body .tmeetic-stories-entrance,
.tmeetic-vendor-section__body .tmeetic-services-preview,
.tmeetic-vendor-section__body .tmeetic-booking-services-preview,
.tmeetic-vendor-section__body .tmeetic-courses-preview {
	margin-top: 0;
}

/* Stories list inside section: horizontal scroll on mobile */
.tmeetic-vendor-section__body .tmeetic-stories-entrance__list {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Stories entrance title hidden inside section (summary already shows label) */
.tmeetic-vendor-section__body .tmeetic-stories-entrance__title {
	display: none;
}

/* =========================================================
 * Vendor Profile Page — Listing Card Styles
 *
 * hpbs-listings.css is NOT loaded on vendor pages, so all
 * listing-card styles for /vendor/{slug}/ must live here.
 *
 * Desired card fields: image / title / category / date / amount.
 *
 * ROOT PROBLEM: ExpertHive sets .hp-listing--view-block { display:flex }
 * with default flex-direction:row — image/content/footer are THREE
 * SIDE-BY-SIDE COLUMNS. We force column layout so cards stack vertically.
 * ========================================================= */

/* Force vertical card layout */
.hp-template--vendor-view-page .hp-listing--view-block:not(.hp-listing--view-page) {
	flex-direction: column;
	padding: 0;
}

/* Header (image) must be full card width in column layout.
 * ExpertHive sets flex:0 0 6.25rem for horizontal design — reset. */
.hp-template--vendor-view-page .hp-listing--view-block:not(.hp-listing--view-page) > .hp-listing__header {
	flex: none;
	width: 100%;
}

/* Card wrapper */
.hp-template--vendor-view-page .hp-listing:not(.hp-listing--view-page) {
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--duration-normal, 0.25s) var(--ease-default, ease);
	background: var(--hp-color-surface, #fff);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(58, 53, 48, 0.08));
}

.hp-template--vendor-view-page .hp-listing:not(.hp-listing--view-page):hover {
	box-shadow: var(--shadow-md, 0 4px 16px rgba(58, 53, 48, 0.1));
}

/* Image — fixed 160px height */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__image,
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__images {
	overflow: hidden;
	position: relative;
	height: 160px !important;
	aspect-ratio: unset !important;
	background: var(--hp-color-surface, #f3f4f6);
}

.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__image img,
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__images img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--duration-normal, 0.3s) var(--ease-default, ease);
}

.hp-template--vendor-view-page .hp-listing:hover .hp-listing__image img,
.hp-template--vendor-view-page .hp-listing:hover .hp-listing__images img {
	transform: scale(1.04);
}

/* 1. Restore image — ExpertHive hides .hp-listing__header on vendor page */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__header {
	display: block !important;
}

/* Content area */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__content {
	padding: 12px 16px 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Footer — reset ExpertHive's .site-sidebar footer (padding/margin designed for
 * old horizontal layout with negative margins to bleed full-width) */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__footer {
	padding: 8px 16px 12px;
	display: flex;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid var(--hp-color-border, var(--color-bg-divider, #E8E3D9));
	margin: 0 !important;
}

/* Title */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 4px;
}

.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__title a {
	color: var(--hp-color-text, #1a1a2e);
	text-decoration: none;
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__title a:hover {
	color: var(--color-text-primary, #3A3530);
	text-decoration: underline;
	text-decoration-color: var(--hp-color-primary, #A8B9A4);
	text-underline-offset: 2px;
}

/* Details primary — flex row: category pill + date */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__details--primary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 4px;
	color: var(--color-text-tertiary);
}

/* 2. Show category (globally hidden; no vendor-row on profile page) */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__details--primary .hp-listing__categories,
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__details--primary .hp-listing__category {
	display: inline-flex;
}

/* Category tag — small pill; green bg is brand signal; dark text for AA contrast */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__categories a,
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__category a {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-primary, #3A3530); /* dark on light-green tint = 14:1 ✅ */
	text-decoration: none;
	background: color-mix(in oklch, var(--hp-color-primary, #A8B9A4) 10%, transparent);
	padding: 2px 8px;
	border-radius: var(--radius-full);
	display: inline-block;
	white-space: nowrap;
}

.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__categories a:hover,
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__category a:hover {
	background: color-mix(in oklch, var(--hp-color-primary, #A8B9A4) 18%, transparent);
}

/* Date — muted, small */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__date,
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__created-date {
	font-size: 0.82rem;
	color: var(--color-text-tertiary);
}

/* Secondary/ternary attributes */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__attributes--secondary,
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__attributes--ternary {
	font-size: 13px;
	color: var(--hp-color-muted, #666666);
	margin-bottom: 4px;
}

/* Amount — primary attributes in footer (price/hourly rate) */
.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__footer .hp-listing__attributes--primary {
	margin: 0;
}

.hp-template--vendor-view-page .hp-listing--view-block .hp-listing__footer .hp-listing__attribute {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text-primary, #3A3530); /* primary green fails 4.5:1; bold weight provides visual prominence */
}

/* 3. Hide vendor row — redundant when viewing vendor's own profile */
.hp-template--vendor-view-page .hpbs-listing-vendor-row {
	display: none;
}