/* ==========================================================================
   Profivin catalog (vinowine-child) — phase 1
   Scoped to .vwc-* classes so nothing leaks into parent-theme styling.
   ========================================================================== */

:root {
	--vwc-ink: #2b2b2b;
	--vwc-muted: #6d6a62;
	--vwc-line: #e4e0d6;
	--vwc-bg-soft: #f7f5f0;
	--vwc-accent: #7a1f2b;      /* wine red */
	--vwc-accent-ink: #ffffff;
	--vwc-gold: #b3a373;
	--vwc-radius: 10px;
}

/* ---------- layout ---------- */
.vwc-catalog { padding-top: 1.5rem; padding-bottom: 3rem; }
.vwc-layout { gap: 2rem; align-items: flex-start; }
.vwc-main { min-width: 0; }

.vwc-cat-title {
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
	margin: .25rem 0 1rem;
	line-height: 1.15;
}
.vwc-cat-desc {
	color: var(--vwc-muted);
	margin-bottom: 1.75rem;
	max-width: 65ch;
}
.vwc-cat-desc p { margin: 0 0 .6em; }

.vwc-section-h {
	font-size: 1.25rem;
	margin: 2.25rem 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--vwc-line);
}

/* ---------- breadcrumbs ---------- */
.vwc-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	color: var(--vwc-muted);
	margin-bottom: 1rem;
}
.vwc-breadcrumbs a { color: var(--vwc-muted); text-decoration: none; }
.vwc-breadcrumbs a:hover { color: var(--vwc-accent); text-decoration: underline; }
.vwc-breadcrumbs .vwc-bc-sep { color: var(--vwc-gold); }
.vwc-breadcrumbs .vwc-bc-current { color: var(--vwc-ink); font-weight: 600; }

/* ---------- subcategory cards ---------- */
.vwc-subcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.25rem;
	margin: 0 0 1rem;
}
.vwc-subcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.vwc-subcard:hover {
	box-shadow: 0 6px 22px rgba(0,0,0,.09);
	transform: translateY(-2px);
	border-color: var(--vwc-gold);
}
.vwc-subcard-media { display: block; aspect-ratio: 4 / 3; background: var(--vwc-bg-soft); }
.vwc-subcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vwc-subcard-media.is-placeholder img { object-fit: contain; padding: 12%; }
.vwc-subcard-body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.vwc-subcard-title { font-weight: 600; line-height: 1.25; }
.vwc-subcard-count { font-size: .8rem; color: var(--vwc-muted); }

/* ---------- product grid ---------- */
.vwc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
}
.vwc-card { margin: 0; }
.vwc-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.vwc-card-link:hover {
	box-shadow: 0 6px 22px rgba(0,0,0,.09);
	transform: translateY(-2px);
	border-color: var(--vwc-gold);
}
.vwc-card-media { display: block; aspect-ratio: 4 / 3; background: var(--vwc-bg-soft); }
.vwc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vwc-card-media.is-placeholder img { object-fit: contain; padding: 12%; }
.vwc-card-title { font-weight: 600; line-height: 1.25; padding: .8rem .9rem .2rem; }
.vwc-card-ex { font-size: .82rem; color: var(--vwc-muted); padding: 0 .9rem 1rem; line-height: 1.4; }

/* ---------- empty ("Pripravujeme") ---------- */
.vwc-empty {
	border: 1px dashed var(--vwc-gold);
	border-radius: var(--vwc-radius);
	background: var(--vwc-bg-soft);
	padding: 2.5rem 1.5rem;
	text-align: center;
}
.vwc-empty-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	color: var(--vwc-accent);
	letter-spacing: .02em;
}
.vwc-empty-text { color: var(--vwc-muted); margin: 0 auto 1.25rem; max-width: 42ch; }

/* ---------- sidebar search ---------- */
.vwc-side .vwc-search { margin-bottom: 1rem; }

/* ---------- sidebar tree ---------- */
.vwc-tree {
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
	padding: 1rem 1rem 1.25rem;
	background: #fff;
	position: sticky;
	top: 1rem;
	font-size: .9rem;
}
.vwc-tree-h { margin: 0 0 .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--vwc-muted); }
.vwc-tree-list { list-style: none; margin: 0; padding: 0; }
.vwc-tree-list .vwc-tree-list { margin-left: .85rem; border-left: 1px solid var(--vwc-line); padding-left: .5rem; }
.vwc-tree-item { margin: .15rem 0; }
.vwc-tree-link { text-decoration: none; color: var(--vwc-ink); display: inline-block; padding: .15rem 0; line-height: 1.3; }
.vwc-tree-link:hover { color: var(--vwc-accent); }
.vwc-tree-link.is-current { color: var(--vwc-accent); font-weight: 700; }
.vwc-tree details > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .35rem;
}
.vwc-tree details > summary::-webkit-details-marker { display: none; }
.vwc-tree details > summary::before {
	content: "▸";
	color: var(--vwc-gold);
	font-size: .8em;
	transition: transform .12s ease;
	flex: 0 0 auto;
}
.vwc-tree details[open] > summary::before { transform: rotate(90deg); }

/* ---------- prepended product description (phase 3) ---------- */
.profivin-desc {
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 68ch;
}
.profivin-desc-h {
	font-size: 1.15rem;
	margin: 1.8rem 0 .6rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--vwc-line);
}
.profivin-desc-attrs { margin: 0 0 1rem; padding-left: 1.15rem; line-height: 1.6; }
.profivin-desc-attrs li { margin-bottom: .45rem; }
.profivin-desc-attr { margin: 0 0 .6rem; line-height: 1.6; }
.profivin-desc-attr-note {
	margin: .4rem 0 1rem;
	font-size: .9rem;
	color: var(--vwc-muted);
	line-height: 1.55;
}
.profivin-desc-variants { margin: 0 0 1rem; padding-left: 1.15rem; }

/* Composition grids keep their column alignment; scroll rather than reflow
   on narrow viewports (post-launch: convert these to wp:table). */
.profivin-desc-pre {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	background: var(--vwc-bg-soft);
	border: 1px solid var(--vwc-line);
	border-radius: 6px;
	padding: .85rem 1rem;
	font-size: .86rem;
	line-height: 1.5;
	white-space: pre;
	tab-size: 4;
}

/* ---------- single product ---------- */
.vwc-product { padding-top: 1.5rem; padding-bottom: 3rem; }
.vwc-product-title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.12; margin: .25rem 0 1rem; }
/* Featured image.
   Sources measured across the 112 drafts + the published products: 310–1500px
   wide, median 1000, and 141 of 150 are portrait. The block's previous 4/3 crop
   therefore cut roughly 43% off each packshot, so it is gone and the image keeps
   its own aspect ratio.
   width:auto renders at the file's native width; max-width:100% caps it at the
   420px box on desktop and at the container on narrow viewports — so the image
   is fluid down, never upscaled past its own pixels. */
.vwc-product-image {
	max-width: 420px;
	margin: 0 auto 1.5rem;
}
.vwc-product-image img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--vwc-radius);
}
.vwc-product-content { margin-bottom: 2rem; }
.vwc-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	align-items: center;
	padding: 1.5rem;
	border: 1px solid var(--vwc-line);
	border-radius: var(--vwc-radius);
	background: var(--vwc-bg-soft);
}
.vwc-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.4rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vwc-btn-cta { background: var(--vwc-accent); color: var(--vwc-accent-ink); }
.vwc-btn-cta:hover { background: #5f1721; color: #fff; }
.vwc-btn-pdf { background: #fff; color: var(--vwc-ink); border-color: var(--vwc-line); }
.vwc-btn-pdf:hover { border-color: var(--vwc-gold); color: var(--vwc-accent); }
.vwc-btn-ico { font-size: 1.05em; }

/* ---------- responsive ---------- */
@media (max-width: 781px) {
	/* Products first, category tree below, on narrow screens. */
	.vwc-layout { flex-direction: column; }
	.vwc-layout .vwc-side { order: 2; flex-basis: auto !important; width: 100%; }
	.vwc-layout .vwc-main { order: 1; width: 100%; }
	.vwc-tree { position: static; }
}
@media (max-width: 480px) {
	.vwc-subcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
	.vwc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
	.vwc-product-actions { flex-direction: column; align-items: stretch; }
	.vwc-btn { justify-content: center; }
}

/* ---------- homepage: About photo + inquiry band ---------- */
/* Same rule as the product image: capped, centred, never upscaled past the
   file's own width. The owner's photo is 1024x782, so it renders at 420. */
.profivin-about-photo {
	max-width: 420px;
	margin: 0 auto 1.5rem;
}
.profivin-about-photo img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--vwc-radius);
}
.profivin-hero-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--vwc-gold); }
.profivin-hero-contact a:hover { color: var(--vwc-accent); }
.profivin-inquiry-band { border-top: 1px solid var(--vwc-line); }

/* ---------- homepage: partner cards ---------- */
/* Cards in a row share the row's height; the button sits on the card's floor
   whatever the description length. Below 782px the columns stack, so the
   button simply follows its text. Flex margins do not collapse, so the
   heading's top margin is dropped to keep the logo gap at its block-flow 30px. */
@media (min-width: 782px) {
	.profivin-partner-row > .wp-block-column { display: flex; flex-direction: column; }
	.profivin-partner-row > .wp-block-column > .wp-block-image + .wp-block-heading { margin-top: 0; }
	.profivin-partner-row > .wp-block-column > .wp-block-buttons {
		margin-top: auto;
		padding-top: var(--wp--style--block-gap, 1.5rem);
	}
}

/* ---------- inquiry: the address under the mailto buttons ---------- */
/* Plain, selectable text for visitors whose device has no mail client set up.
   Inside the product action box it takes a full row below the buttons. */
.vwc-cta-email,
.profivin-email-line {
	margin: 0;
	color: var(--vwc-muted);
	font-size: .95rem;
}
.vwc-product-actions .vwc-cta-email { flex-basis: 100%; }
.vwc-empty .vwc-cta-email { margin-top: 1rem; }