/*
 * Sheetal Metals - "Why Choose Us" section
 * Markup: inc/sheetal-advantages.php  (WPBakery element "Why Choose Us")
 *
 * Colours and the column count come from --sm-ad-* custom properties written
 * inline by the shortcode, so the Design Options drive everything here.
 *
 *   1. Shell + header
 *   2. Grid
 *   3. Card
 *   4. Icon chip
 *   5. Card body
 *   6. Slider
 *   7. Responsive
 */

/* ======================================================= 1. Shell + header */
.sm-adv {
	--sm-ad-accent: #f97307;
	--sm-ad-ink: #ffffff;
	--sm-ad-text: #9aa4b5;
	--sm-ad-card: #161d2b;
	--sm-ad-cols: 4;

	/* these follow the ones above unless the element overrides them */
	--sm-ad-title: var(--sm-ad-ink);
	--sm-ad-title-ho: var(--sm-ad-accent);
	--sm-ad-meta: var(--sm-ad-text);
	--sm-ad-meta-ho: var(--sm-ad-accent);
	--sm-ad-more: var(--sm-ad-accent);
	--sm-ad-more-ho: var(--sm-ad-accent);
	--sm-ad-dot: var(--sm-ad-accent);
	--sm-ad-arrow-bg: rgba(255, 255, 255, 0.08);
	--sm-ad-arrow: #ffffff;
	--sm-ad-arrow-bg-ho: var(--sm-ad-accent);
	--sm-ad-arrow-ho: #ffffff;

	/* Image height and chip size drive the chip's position and the body's top
	   padding, so a breakpoint only has to change these two. */
	--sm-ad-imgh: 250px;
	--sm-ad-ico: 58px;

	/* set from the "Container width" option */
	--sm-ad-max: 1600px;

	position: relative;
	overflow: hidden;
	font-family: 'Exo', sans-serif;
}

/* Break out of the page container so the background runs edge to edge; the
   grid then caps itself at --sm-ad-max. Margins do the breakout rather than
   `left`, which leaves the box half a container off when the row itself is
   not already full width. */
.sm-adv--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sm-adv--full .sm-adv-head,
.sm-adv--full .sm-adv-grid {
	box-sizing: border-box;
	padding-left: 30px;
	padding-right: 30px;
}

/* Soft accent light behind the cards - lifts the flat dark panel without
   washing the text out. Decorative, so it sits under everything. */
.sm-adv--glow::before {
	content: "";
	position: absolute;
	top: 18%;
	left: 50%;
	width: min(1100px, 80%);
	height: 460px;
	margin-left: calc(min(1100px, 80%) / -2);
	background: radial-gradient(ellipse at center, rgba(249, 115, 7, 0.13), rgba(249, 115, 7, 0) 68%);
	pointer-events: none;
	z-index: 0;
}

.sm-adv-bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

.sm-adv-head {
	position: relative;
	z-index: 1;
	/* wide enough to keep the heading on one line; the subheading is narrowed
	   separately so it still reads as a short block */
	max-width: 1120px;
	margin: 0 auto 48px;
	text-align: center;
}

.sm-adv-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 14px;
	color: var(--sm-ad-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 3.2px;
	text-transform: uppercase;
}

.sm-adv-eyebrow i {
	display: block;
	width: 62px;
	height: 2px;
	background: var(--sm-ad-accent);
}

.sm-adv .sm-adv-title {
	margin: 0 0 14px;
	padding: 0;
	font-family: 'Exo', sans-serif;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--sm-ad-ink);
	text-align: center;
	text-transform: none;
}

.sm-adv .sm-adv-title span {
	color: var(--sm-ad-accent);
}

.sm-adv .sm-adv-sub {
	max-width: 780px;
	margin: 0 auto;
	color: var(--sm-ad-text);
	font-size: 17px;
	line-height: 1.62;
	text-align: center;
}

/* ================================================================ 2. Grid */
.sm-adv-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--sm-ad-cols), minmax(0, 1fr));
	gap: 28px;
	max-width: var(--sm-ad-max, 1600px);
	margin-left: auto;
	margin-right: auto;
}

/* ================================================================ 3. Card */

/*
 * The card is a gradient hairline: the outer element carries a 1px gradient
 * and the inner link sits on top of it, so the border fades from bright at
 * the top-left to nothing at the bottom - and warms to the accent on hover.
 * Two stacked backgrounds, no mask or clip tricks.
 */
.sm-adv-card {
	position: relative;
	min-width: 0;
	padding: 1px;
	border-radius: 20px;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0) 70%);
	transition: background 0.4s ease, transform 0.4s ease;
}

.sm-adv-card:hover {
	transform: translateY(-8px);
	background: linear-gradient(155deg, var(--sm-ad-accent), rgba(249, 115, 7, 0.35) 40%, rgba(255, 255, 255, 0.05) 75%);
}

.sm-adv-link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-bottom: 28px;
	border-radius: 19px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%),
		var(--sm-ad-card);
	text-decoration: none;
	transition: box-shadow 0.4s ease;
}

.sm-adv-card:hover .sm-adv-link {
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

/* -- image, fading into the card ------------------------------------- */
.sm-adv-media {
	position: relative;
	display: block;
	height: var(--sm-ad-imgh);
	overflow: hidden;
	background: #1b2331;
}

.sm-adv-media .sm-adv-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* .sm-adv-card:hover .sm-adv-img {
	transform: scale(1.08);
} */

/* Melts the photo into the card rather than ending it on a hard edge. */
.sm-adv-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 17, 25, 0.2) 0%, rgba(11, 17, 25, 0) 34%, var(--sm-ad-card) 100%);
}

/* -- ghost index number ---------------------------------------------- */
.sm-adv-num {
	position: absolute;
	top: 14px;
	right: 20px;
	z-index: 2;
	font-family: 'Exo', sans-serif;
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1px;
	color: rgba(255, 255, 255, 0.16);
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
	transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}

.sm-adv-card:hover .sm-adv-num {
	color: rgba(249, 115, 7, 0.45);
	-webkit-text-stroke-color: var(--sm-ad-accent);
}

/* ========================================================== 4. Icon chip */

/* Glass chip straddling the image and the body, aligned with the copy. */
.sm-adv-ico {
	position: absolute;
	top: calc(var(--sm-ad-imgh) - (var(--sm-ad-ico) / 2));
	left: 26px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sm-ad-ico);
	height: var(--sm-ad-ico);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--sm-ad-accent);
	font-size: 22px;
	line-height: 1;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.sm-adv-card:hover .sm-adv-ico {
	transform: translateY(-3px);
	border-color: var(--sm-ad-accent);
	background: var(--sm-ad-accent);
	color: #fff;
}

/* =========================================================== 5. Card body */
.sm-adv-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	/* clears the half of the icon chip that hangs below the image */
	padding: calc((var(--sm-ad-ico) / 2) + 24px) 26px 0;
}

.sm-adv-name {
	display: block;
	color: var(--sm-ad-title);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.25s ease;
}

.sm-adv-card:hover .sm-adv-name {
	color: var(--sm-ad-title-ho);
}

/* -- post meta row (date / author / comments) ------------------------- */
.sm-adv-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-bottom: 14px;
	color: var(--sm-ad-meta);
	font-size: 14px;
	line-height: 1.4;
	transition: color 0.25s ease;
}

.sm-adv-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sm-adv-meta-item i {
	color: var(--sm-ad-accent);
	font-size: 14px;
}

.sm-adv-card:hover .sm-adv-meta {
	color: var(--sm-ad-meta-ho);
}

.sm-adv-rule {
	display: block;
	width: 46px;
	height: 3px;
	margin: 14px 0 16px;
	border-radius: 2px;
	background: var(--sm-ad-accent);
}

.sm-adv-text {
	display: block;
	color: var(--sm-ad-text);
	font-size: 16px;
	line-height: 1.66;
}

.sm-adv-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 20px;
	color: var(--sm-ad-more);
	font-size: 16px;
	font-weight: 600;
	transition: color 0.25s ease;
}

.sm-adv-card:hover .sm-adv-more {
	color: var(--sm-ad-more-ho);
}

.sm-adv-more svg {
	width: 15px;
	height: 15px;
	transition: transform 0.25s ease;
}

.sm-adv-card:hover .sm-adv-more svg {
	transform: translateX(4px);
}

/* ============================================================ 6. Slider */

/* Slick lays the cards out instead of the grid, so it needs the same gutter. */
.sm-adv-slider {
	position: relative;
	z-index: 1;
}

.sm-adv-slider .slick-list {
	margin: 0 -13px;
}

.sm-adv-slider .slick-slide {
	height: auto;
	padding: 0 13px;
}

.sm-adv-slider .slick-track {
	display: flex;
}

/* stretch cards in a row to equal height */
.sm-adv-slider .slick-slide > div,
.sm-adv-slider .sm-adv-card {
	height: 100%;
}

.sm-adv-slider .slick-prev,
.sm-adv-slider .slick-next {
	z-index: 2;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--sm-ad-arrow-bg);
	transition: background-color 0.25s ease;
}

.sm-adv-slider .slick-prev:hover,
.sm-adv-slider .slick-next:hover {
	background: var(--sm-ad-arrow-bg-ho);
}

.sm-adv-slider .slick-prev:before,
.sm-adv-slider .slick-next:before {
	color: var(--sm-ad-arrow);
	font-size: 22px;
	opacity: 1;
}

.sm-adv-slider .slick-prev:hover:before,
.sm-adv-slider .slick-next:hover:before {
	color: var(--sm-ad-arrow-ho);
}

.sm-adv-slider .slick-prev { left: -58px; }
.sm-adv-slider .slick-next { right: -58px; }

.sm-adv-slider .slick-dots {
	position: static;
	margin-top: 26px;
}

.sm-adv-slider .slick-dots li button:before {
	color: var(--sm-ad-dot);
	font-size: 12px;
	opacity: 0.35;
}

.sm-adv-slider .slick-dots li.slick-active button:before {
	opacity: 1;
}

@media (max-width: 1500px) {
	/* no room outside the track - tuck the arrows in */
	.sm-adv-slider .slick-prev { left: 6px; }
	.sm-adv-slider .slick-next { right: 6px; }
}

/* ========================================================== 7. Responsive */
/* Breakpoints mostly just move --sm-ad-imgh and --sm-ad-ico; the chip's
   position and the body's top padding follow from those two. */
@media (max-width: 1400px) {
	.sm-adv { --sm-ad-imgh: 215px; }
	.sm-adv .sm-adv-title { font-size: 38px; }
	.sm-adv-name { font-size: 20px; }
}

@media (max-width: 1199px) {
	.sm-adv { --sm-ad-imgh: 185px; --sm-ad-ico: 56px; }
	.sm-adv-grid { gap: 20px; }
	.sm-adv .sm-adv-title { font-size: 33px; }
	.sm-adv .sm-adv-sub { font-size: 15.5px; }
	.sm-adv-eyebrow { font-size: 13px; letter-spacing: 2.6px; }
	.sm-adv-eyebrow i { width: 42px; }
	/* chip stays flush with the copy's new inset */
	.sm-adv-ico { left: 20px; font-size: 20px; border-radius: 14px; }
	.sm-adv-body { padding-left: 20px; padding-right: 20px; }
	.sm-adv-num { font-size: 38px; top: 12px; right: 16px; }
	.sm-adv-name { font-size: 18px; }
	.sm-adv-text { font-size: 15px; }
	.sm-adv-more { font-size: 15px; }
}

@media (max-width: 991px) {
	/* two-up, whatever the column setting says */
	.sm-adv { --sm-ad-imgh: 210px; }
	.sm-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm-adv .sm-adv-title { font-size: 28px; }
	.sm-adv-head { margin-bottom: 34px; }
}

@media (max-width: 575px) {
	.sm-adv { --sm-ad-imgh: 230px; }
	.sm-adv-grid { grid-template-columns: minmax(0, 1fr); }
	.sm-adv .sm-adv-title { font-size: 24px; }
	.sm-adv-eyebrow { font-size: 12px; letter-spacing: 2.2px; }
	.sm-adv-eyebrow i { width: 28px; }
}