/* Themes the native Elementor widgets used in the homepage document
   (see setup/ds-setup.php) to match the ported design. Classes here are
   applied via each widget's "CSS Classes" (Advanced tab) field, which the
   owner can see/keep when editing in Elementor. */

/* This Elementor version renders icon widgets as inline <svg> with no fill
   attribute, so it defaults to black (the SVG spec default) and ignores a
   plain CSS `color` the way an icon *font* would have. Every gold/white
   icon in this page needs fill:currentColor so it actually follows color. */
.ds-hero-badge .elementor-icon-list-icon svg,
.ds-service-icon-wrap svg,
.ds-check-list .elementor-icon-list-icon svg,
.ds-faq .elementor-accordion-icon svg {
	fill: currentColor;
}

/* ---------- Eyebrow label (small gold uppercase line above a heading) ---------- */
.ds-eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #d4af37;
	margin-bottom: 0.75rem;
}

/* ---------- Hero badge pill ("Birmingham's Premier Tailor") ---------- */
.ds-hero-badge .elementor-widget-container {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	border: 1px solid rgba(212, 175, 55, 0.3);
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
}
.ds-hero-badge .elementor-icon-list-icon { color: #d4af37; }

.ds-hero-lead {
	color: #4b5563;
	font-size: 1.125rem;
	line-height: 1.75;
}

/* ---------- Our Work hero: "Cut" photo (rendered by [ds_work_hero_preview]) ----------
   One contained photo whose left edge is cut on a diagonal — the hero's
   signature shape. Capped at 460px wide so it supports the headline
   rather than taking over half the screen. border-radius rounds the three
   square corners; clip-path then cuts the fourth into the diagonal, so
   both apply to the same box with no extra wrapper. */
.ds-hero-cut {
	display: block;
	position: relative;
	width: min(100%, 460px);
	margin-left: auto;
	aspect-ratio: 5 / 6;
	border-radius: 1.5rem;
	overflow: hidden;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
	background: #111;
}
.ds-hero-cut img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Landscape source: keeps the needle and the hand guiding the fabric
	   in frame, clear of the diagonal on the left. */
	object-position: 42% center;
	display: block;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Darkens the diagonal edge slightly so the cut reads as a soft fade into
   the section background rather than a hard sticker edge. */
.ds-hero-cut::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(26, 26, 26, 0.45) 0%, rgba(26, 26, 26, 0) 35%);
	pointer-events: none;
}
.ds-hero-cut:hover img {
	transform: scale(1.04);
}
@media (max-width: 767px) {
	/* Single column: the diagonal moves to the top edge so the "cut" still
	   reads on a phone instead of collapsing into a plain rectangle. */
	.ds-hero-cut {
		width: 100%;
		margin: 1.5rem 0 0;
		aspect-ratio: 4 / 3;
		clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
	}
	.ds-hero-cut img {
		object-position: center;
	}
	.ds-hero-cut::after {
		background: linear-gradient(180deg, rgba(26, 26, 26, 0.4) 0%, rgba(26, 26, 26, 0) 30%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ds-hero-cut img { transition: none; }
}

/* ---------- Services: card columns ---------- */
[id^="ds-service-card-"] .elementor-widget-wrap {
	/* !important: Elementor's own default column-gap rule
	   (.elementor-column-gap-default > .elementor-column > .elementor-element-populated
	   — 3 chained classes) outranks this 1-attribute+1-class selector and
	   squashes the card's padding down to its own 10px, cramming the icon/
	   text against the edges. */
	padding: 2rem !important;
	/* The background color lives on this same element (it's Elementor's
	   column "background" setting, applied here), and adjacent columns sit
	   flush against each other with zero native gap between them — padding
	   alone only adds breathing room *inside* one card, it never separates
	   it from its neighbor. The two cream boxes were genuinely touching;
	   what read as a gap in a quick look was just their rounded corners
	   meeting at a point. A real margin, with width compensated so the
	   column math still adds up to 100% and doesn't wrap early, is what
	   actually pushes them apart — on every side, so it also gives the
	   stacked 1-col/2-col tablet rows proper vertical spacing. */
	margin: 12px !important;
	width: calc(100% - 24px) !important;
}
.ds-service-icon-wrap {
	/* !important: Elementor's own `.elementor-widget-wrap > .elementor-element
	   {width:100%}` is a 2-class selector and beats a plain 1-class rule here,
	   stretching this to the full card width instead of a 64px circle —
	   same category of bug as the hero background fix above. */
	width: 4rem !important;
	height: 4rem !important;
	border-radius: 9999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d4af37;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
	margin-bottom: 1.5rem;
}
.ds-service-icon-wrap .elementor-icon {
	color: inherit;
	font-size: 2rem;
}

/* ---------- About: icon checklist ---------- */
.ds-check-list .elementor-icon-list-icon { color: #d4af37; }
.ds-check-list .elementor-icon-list-text { color: #e5e7eb; }
.ds-check-list .elementor-icon-list-items { gap: 1rem; }

/* ---------- FAQ accordion (matches the original rounded-xl white cards) ---------- */
.ds-faq .elementor-accordion-item {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	border-radius: 0.75rem !important;
	overflow: hidden;
	margin-bottom: 1rem;
}
.ds-faq .elementor-tab-title {
	padding: 1.25rem 1.5rem !important;
	font-weight: 700;
	font-size: 1.125rem;
	font-family: "Inter", sans-serif;
}
.ds-faq .elementor-tab-title .elementor-accordion-icon { color: #d4af37; }
.ds-faq .elementor-tab-content {
	padding: 0 1.5rem 1.25rem !important;
	color: #4b5563;
	line-height: 1.75;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ---------- Our Work: gallery tabs + rail (rendered by [ds_work_gallery]) ----------
   One tab per category, switching which single rail panel is visible —
   replaced an earlier version that stacked every category's rail one
   after another, which meant scrolling past all of them just to see a
   different category. Only one panel is ever on screen now, so the page
   doesn't get any taller as more categories fill up. The tabs themselves
   scroll horizontally rather than wrap (same interaction as the rail
   below), which also fixes an even earlier version where filter-pill
   buttons wrapped into a messy uneven stack on narrow viewports. */
.ds-work-tabs {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	flex-wrap: nowrap;
	padding-bottom: 0.5rem;
	margin-bottom: 2rem;
	scrollbar-width: none;
}
.ds-work-tabs::-webkit-scrollbar {
	display: none;
}
.ds-work-tab {
	flex: 0 0 auto;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	padding: 0.6rem 1.25rem;
	border-radius: 9999px;
	border: 1px solid rgba(26, 26, 26, 0.15);
	background: #fff;
	color: #1a1a1a;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ds-work-tab:hover {
	border-color: #d4af37;
}
.ds-work-tab:active {
	transform: scale(0.97);
}
.ds-work-tab.is-active {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}
.ds-work-rail {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	margin: 0 -1.25rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #d4af37 transparent;
}
.ds-work-rail::-webkit-scrollbar {
	height: 6px;
}
.ds-work-rail::-webkit-scrollbar-thumb {
	background: #d4af37;
	border-radius: 999px;
}
.ds-work-rail-card {
	flex: 0 0 auto;
	width: 260px;
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	position: relative;
	display: block;
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	border-radius: 0.75rem;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ds-work-rail-card:hover,
.ds-work-rail-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgb(0 0 0 / 0.18);
}
.ds-work-rail-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.5s ease;
}
.ds-work-rail-card:hover img {
	transform: scale(1.05);
}
@media (max-width: 639px) {
	.ds-work-rail-card { width: 200px; }
}
/* Captions are always visible (not hover-only) — a hover-reveal caption
   never shows at all on touch devices, which is most visitors here. */
.ds-work-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3rem 1.25rem 1.25rem;
	/* Stays near-solid behind both text lines and only fades above them —
	   a plain bottom-to-top fade left the gold category label sitting on
	   an almost transparent band, unreadable on light photos (white
	   shirts, pale shoe soles). */
	background: linear-gradient(to top, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.85) 55%, rgba(26, 26, 26, 0) 100%);
	display: flex;
	flex-direction: column;
	text-align: left;
}
.ds-work-caption-cat {
	color: #d4af37;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.25rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ds-work-caption-title {
	color: #fff;
	font-family: "Playfair Display", serif;
	font-size: 1.25rem;
	font-weight: 700;
}

/* ---------- Our Work: lightbox ---------- */
.ds-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	/* Near-opaque + blur: at 0.94 the gallery's card text still ghosted
	   through right behind the caption and competed with it. */
	background: rgba(10, 10, 10, 0.97);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 2rem;
	align-items: center;
	justify-content: center;
}
.ds-lightbox.is-open {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.ds-lightbox-img {
	max-width: min(85vw, 640px);
	max-height: 72vh;
	object-fit: contain;
	display: block;
	border-radius: 0.5rem;
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
}
/* In normal flow under the photo, not absolutely pinned to the bottom of
   the screen — pinned, it landed on top of tall photos and the gold label
   vanished against light backgrounds. */
.ds-lightbox-caption {
	text-align: center;
	max-width: min(85vw, 640px);
}
.ds-lightbox-caption .ds-work-caption-cat {
	display: block;
}
.ds-lightbox-title {
	color: #fff;
	font-family: "Playfair Display", serif;
	font-size: 1.5rem;
	font-weight: 700;
}
.ds-lightbox-close,
.ds-lightbox-prev,
.ds-lightbox-next {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.ds-lightbox-close:hover,
.ds-lightbox-prev:hover,
.ds-lightbox-next:hover {
	background: rgba(212, 175, 55, 0.35);
}
.ds-lightbox-close {
	top: 1.5rem;
	right: 1.5rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
	line-height: 1;
}
.ds-lightbox-prev,
.ds-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
	line-height: 1;
}
.ds-lightbox-prev {
	left: 1rem;
}
.ds-lightbox-next {
	right: 1rem;
}
@media (max-width: 639px) {
	.ds-lightbox-prev { left: 0.25rem; }
	.ds-lightbox-next { right: 0.25rem; }
}

/* ---------- Our Work: featured highlight (rendered by [ds_work_featured]) ----------
   Image+text split (same pattern as the homepage About section) — see
   setup/ds-setup.php for why this isn't a cropped full-width banner. */
#ds-work-featured {
	overflow: hidden;
}
.ds-work-featured-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
	align-items: center;
	gap: clamp(3rem, 7vw, 6.5rem);
	max-width: 1120px;
	margin-inline: auto;
}
/* Just the photo: big soft corners and a deep, diffuse shadow. No frame,
   border or offset outline — an earlier double-border "mat" version read
   as dated and busy. A fixed 4:5 crop keeps the shape consistent whatever
   photo the owner features. */
.ds-work-featured-media {
	justify-self: center;
	width: min(100%, 440px);
}
.ds-work-featured-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Tall mannequin shots: skips the empty ceiling so the bodice and the
	   train both stay in frame. */
	object-position: center 62%;
	display: block;
	border-radius: 1.75rem;
	box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.85);
}
.ds-work-featured-copy {
	max-width: 500px;
}
.ds-work-featured-copy h3 {
	max-width: 12ch;
	text-wrap: balance;
}
.ds-work-featured-copy > p:not(.ds-eyebrow) {
	max-width: 46ch;
	line-height: 1.75;
}
.ds-work-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	border: 1px solid rgba(212, 175, 55, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: #d4af37;
	font-size: 0.85rem;
	font-weight: 700;
}

@media (max-width: 900px) {
	.ds-work-featured-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 3.5rem;
	}
	.ds-work-featured-media {
		width: min(100%, 410px);
	}
	.ds-work-featured-copy {
		justify-self: center;
		max-width: 620px;
		text-align: center;
	}
	.ds-work-featured-copy h3,
	.ds-work-featured-copy > p:not(.ds-eyebrow) {
		margin-inline: auto;
	}
}

@media (max-width: 639px) {
	#ds-work-featured {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}
	.ds-work-featured-split {
		gap: 2.75rem;
	}
	.ds-work-featured-media img {
		border-radius: 1.25rem;
	}
	.ds-work-featured-copy h3 {
		max-width: none;
	}
}