/* Savernake Collaborations
 * Hand-coded editorial templates for the `collaboration` CPT (single and hub).
 * Brand: Flame #FD4712, cream #FBF9F6, pill cream #F0EBE3, Newsreader headings,
 * Plus Jakarta Sans body. Fonts load globally via Elementor.
 */

.sav-collab-single,
.sav-collab-hub {
	--sav-flame: #FD4712;
	--sav-cream: #FBF9F6;
	--sav-pill: #F0EBE3;
	--sav-ink: #1C1917;
	--sav-muted: #6b6b6b;
	--sav-measure: 720px;
	--sav-wide: 1180px;
	background: var(--sav-cream);
	color: var(--sav-ink);
	font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ============ SINGLE ============ */

.sav-collab-single .sav-collab {
	max-width: var(--sav-wide);
	margin: 0 auto;
	padding: 0 24px 80px;
}

/* Hero (centred title + subtitle over a controllable scrim) */
.sav-collab-hero {
	position: relative;
	margin: 0 calc(50% - 50vw) 40px;
	overflow: hidden;
}
.sav-collab-hero-media { line-height: 0; }
.sav-collab-hero-img {
	width: 100%;
	height: clamp(360px, 60vw, 660px);
	object-fit: cover;
	display: block;
}
.sav-collab-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px clamp(24px, 5vw, 64px);
	text-align: center;
}
.sav-collab-hero-inner { max-width: 820px; }
.sav-collab-banner {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sav-flame);
}
.sav-collab-title {
	margin: 0;
	font-family: 'Newsreader', serif;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.08;
	font-size: clamp(34px, 6vw, 64px);
}
.sav-collab-subtitle {
	margin: 16px 0 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(15px, 2vw, 19px);
	font-weight: 400;
	letter-spacing: 0.02em;
}
/* Hero text colour, forced past any theme h1/h-default colour */
.sav-collab-hero--whitetext .sav-collab-title,
.sav-collab-hero--whitetext .sav-collab-subtitle { color: #fff !important; }
.sav-collab-hero--blacktext .sav-collab-title,
.sav-collab-hero--blacktext .sav-collab-subtitle { color: var(--sav-ink) !important; }

/* Story */
.sav-collab-story { margin-top: 16px; }
.sav-collab-block { margin: 40px 0; }
.sav-collab-text {
	max-width: var(--sav-measure);
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.7;
}
.sav-collab-text p { margin: 0 0 1.1em; }
.sav-collab-text p:last-child { margin-bottom: 0; }

/* standard: image at text measure */
.sav-collab-block--standard .sav-collab-figure {
	max-width: var(--sav-measure);
	margin: 24px auto 0;
}
/* full-bleed: image spans the container, any text stays narrow */
.sav-collab-block--full-bleed .sav-collab-figure {
	max-width: var(--sav-wide);
	margin: 0 auto;
}
.sav-collab-block--full-bleed .sav-collab-text { margin-bottom: 24px; }

.sav-collab-figure { margin: 0; line-height: 0; }
.sav-collab-figimg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}
.sav-collab-figure--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: var(--sav-wide);
}
.sav-collab-figure--pair .sav-collab-caption { grid-column: 1 / -1; }
.sav-collab-caption {
	line-height: 1.5;
	margin-top: 10px;
	font-size: 13px;
	color: var(--sav-muted);
	font-style: italic;
}

/* pull-quote */
.sav-collab-quote {
	margin: 0 auto;
	max-width: var(--sav-measure);
	border: 0;
	padding: 0;
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.sav-collab-quote p { margin: 0; }

/* Partner credit */
.sav-collab-credit {
	max-width: var(--sav-measure);
	margin: 40px auto 0;
	font-size: 15px;
	color: var(--sav-muted);
}
.sav-collab-credit a {
	color: var(--sav-flame);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* Buy / enquiry module */
.sav-collab-buy {
	max-width: var(--sav-measure);
	margin: 56px auto 0;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 28px;
	align-items: center;
	padding: 24px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 6px;
}
.sav-collab-buy-media { line-height: 0; }
.sav-collab-buy-img { width: 100%; height: auto; display: block; border-radius: 4px; }
.sav-collab-buy-name {
	margin: 0 0 12px;
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
/* despatch pill, mirrors the PDP .stock pill exactly */
.sav-collab-buy-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 6px 12px;
	background: var(--sav-pill);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sav-ink);
	line-height: 1.4;
}
.sav-collab-buy-pill::before {
	content: '';
	width: 14px; height: 14px; flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='%23FD4712' stroke-width='1.5'/%3E%3Cpath d='M8 5V8L10 9.5' stroke='%23FD4712' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sav-collab-buy-cta {
	display: inline-block;
	background: var(--sav-flame);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 13px 26px;
	border-radius: 4px;
}
.sav-collab-buy-cta:hover { filter: brightness(0.94); }

/* Back link */
.sav-collab-backlink {
	max-width: var(--sav-measure);
	margin: 48px auto 0;
	text-align: center;
}
.sav-collab-backlink a {
	color: var(--sav-ink);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--sav-flame);
	padding-bottom: 2px;
}

/* Mobile */
@media (max-width: 640px) {
	.sav-collab-single .sav-collab { padding-bottom: 56px; }
	.sav-collab-buy {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.sav-collab-buy-media { max-width: 240px; }
	.sav-collab-buy-name { margin-top: 4px; } /* breathing space above the name, per nuggets */
	.sav-collab-figure--pair { grid-template-columns: 1fr; }
}

/* ============ HUB ============ */
.sav-collab-hub {
	background: var(--sav-cream);
}

/* Note: the theme caps .site-main (this element) at the 1140px content width
   and that cap is intentionally LEFT in place. The hub bleeds to full width by
   breaking its children out relative to this 1140 box, the same proven mechanism
   the single hero uses, rather than by lifting the cap. */

/* Full-bleed black intro band (matches the category pages) */
.sav-collab-hub-hero {
	background: #111111;
	color: #fff;
	padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 80px);
	/* break out of the 1140 main to full viewport (matches the single hero) */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.sav-collab-hub-hero-inner {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 56px);
}
.sav-collab-hub-hero .sav-collab-banner { color: var(--sav-flame); margin: 0 0 14px; }
.sav-collab-hub-title {
	margin: 0;
	font-family: 'Newsreader', serif;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.08;
	color: #fff !important; /* beat the theme's dark heading colour on the black band */
	font-size: clamp(34px, 5.5vw, 64px);
	max-width: 16em;
}
.sav-collab-hub-intro {
	max-width: 640px;
	margin: 22px 0 0;
	font-size: clamp(16px, 1.8vw, 19px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

/* Body breaks out to full viewport relative to the 1140 main; the three
   sections inside then re-centre at the 1680 grid width (rule below). */
.sav-collab-hub-body {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 0 88px;
}
/* Gap between the black intro band and the first row of cards (the Featured
   heading that used to provide this has been removed). */
.sav-collab-featured { margin-top: clamp(48px, 5vw, 80px); }

/* Re-centre the hub sections at the category grid width inside the full-bleed body */
.sav-collab-featured,
.sav-collab-archive,
.sav-collab-hub-body > .sav-collab-crosslinks {
	max-width: 1680px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(24px, 5vw, 56px);
	padding-right: clamp(24px, 5vw, 56px);
}

/* Section titles */
.sav-collab-section-title {
	margin: 56px 0 24px;
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: -0.01em;
}
/* Other pieces: a touch more separation from the Featured grid above */
.sav-collab-archive { margin-top: clamp(36px, 4vw, 72px); }
.sav-collab-archive .sav-collab-section-title { margin-bottom: 8px; }
.sav-collab-section-sub {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(28,25,23,0.62);
	max-width: 46em;
}

/* Featured grid */
.sav-collab-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px;
}
.sav-collab-card { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.sav-collab-card-media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 4px;
	background: #ece7e0;
}
.sav-collab-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.sav-collab-card:hover .sav-collab-card-img { transform: scale(1.03); }
.sav-collab-card-body { display: block; padding: 16px 2px 0; }
.sav-collab-card-piece {
	display: block;
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--sav-flame);
}
.sav-collab-card-partner {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--sav-ink);
}
.sav-collab-card-desc {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sav-ink);
}

/* Archive flip-cards */
.sav-collab-archive-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
/* Archive card = flip image on top, static label below (matches Featured) */
.sav-collab-archive-card { display: flex; flex-direction: column; min-width: 0; }
.sav-collab-flip { perspective: 1200px; cursor: pointer; }
.sav-collab-flip-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	transition: transform .6s;
	transform-style: preserve-3d;
}
.sav-collab-flip:hover .sav-collab-flip-inner,
.sav-collab-flip:focus-visible .sav-collab-flip-inner,
.sav-collab-flip.is-flipped .sav-collab-flip-inner { transform: rotateY(180deg); }
.sav-collab-flip-front,
.sav-collab-flip-back {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 4px;
	overflow: hidden;
}
.sav-collab-flip-front {
	background: #ece7e0; /* mat for cut-out shots, matches Featured */
	transform: translateZ(1px); /* keep the front ahead of the back so an empty (no image yet) front does not reveal the mirrored back */
}
.sav-collab-flip-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sav-collab-flip-back {
	transform: rotateY(180deg);
	background: var(--sav-ink);
	color: var(--sav-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.sav-collab-flip-blurb { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; }

/* Cross-links */
.sav-collab-crosslinks {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.sav-collab-crosslinks a {
	color: var(--sav-ink);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-bottom: 1px solid var(--sav-flame);
	padding-bottom: 3px;
	transition: color .2s ease;
}
.sav-collab-crosslinks a:hover { color: var(--sav-flame); }

/* Hub responsive */
@media (max-width: 1100px) {
	.sav-collab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sav-collab-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	/* Featured becomes a single lead-story column; More stays two-up for density */
	.sav-collab-grid { grid-template-columns: 1fr; }
	.sav-collab-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
	.sav-collab-archive-grid { grid-template-columns: 1fr; }
}