/*
 * Sheetal Metals - "Welcome / About" section
 * Markup: inc/sheetal-about.php  (WPBakery element "Welcome / About Section")
 *
 * Every colour below comes from a --sm-ab-* custom property that the shortcode
 * writes inline from its Design Options, so the CSS never needs editing to
 * recolour the section.
 *
 *   1. Shell + grid
 *   2. Image composition
 *   3. Badge
 *   4. Copy
 *   5. Specialities panel
 *   6. Responsive
 */

/* ========================================================= 1. Shell + grid */
.sm-about {
	--sm-ab-accent: #f97307;
	--sm-ab-ink: #16243c;
	--sm-ab-text: #5a6577;
	--sm-ab-eyebrow: #16243c;
	--sm-ab-panel: #f2f5fa;
	--sm-ab-badge: #16243c;
	--sm-ab-badge-text: #ffffff;

	/* image panel: how far the inner edge leans, and the accent band on it */
	--sm-ab-slant: 84px;
	--sm-ab-band: 20px;
	--sm-ab-imgh: 580px;

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

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

/*
 * Faint chevrons in the top corner above the copy. Kept small and tucked into
 * the corner: at its old size it ran straight through the heading, which read
 * as a rendering fault rather than decoration.
 */
.sm-about--pattern::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 240px;
	height: 170px;
	background-image:
		linear-gradient(135deg, transparent 46%, rgba(22, 36, 60, 0.05) 46%, rgba(22, 36, 60, 0.05) 54%, transparent 54%),
		linear-gradient(135deg, transparent 46%, rgba(249, 115, 7, 0.07) 46%, rgba(249, 115, 7, 0.07) 54%, transparent 54%);
	background-size: 90px 90px, 90px 90px;
	background-position: 0 0, 45px 45px;
	background-repeat: repeat;
	-webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 78%);
	mask-image: linear-gradient(225deg, #000 20%, transparent 78%);
	pointer-events: none;
	z-index: 0;
}

.sm-about-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: 64px;
	/* Capped and centred, so a full-bleed section still keeps its content to a
	   readable width. The background stays edge to edge either way. */
	max-width: var(--sm-ab-max);
	margin-inline: auto;
}

/* Break out of the page container so the image reaches the screen edge. Only
   the copy side is padded; the image side stays flush. */
/* Margins do the whole job here: 50% resolves against the container, so
   `50% - 50vw` is exactly the gap between the container edge and the screen
   edge. Doing it with `left` instead leaves the box half a container off. */
.sm-about--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sm-about--full .sm-about-grid {
	padding-right: 90px;
}

.sm-about--full.sm-about--flip .sm-about-grid {
	padding-right: 0;
	padding-left: 90px;
}

.sm-about--flip .sm-about-visual {
	order: 2;
}

/* ============================================================== 2. Image */

/*
 * One image, running to the edge of the screen on its own side, rounded on the
 * inner edge with an accent bar down it.
 *
 * The height is set outright rather than as height:100% - a percentage height
 * against the figure's own auto height resolves to zero, which left the panel
 * showing nothing but its background.
 */
.sm-about-visual {
	position: relative;
	min-width: 0;
}

.sm-about-media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 0 18px 18px 0;
}

.sm-about--flip .sm-about-media {
	border-radius: 18px 0 0 18px;
}

.sm-about-media .sm-about-img {
	display: block;
	width: 100%;
	height: var(--sm-ab-imgh);
	object-fit: cover;
	object-position: center;
}

/* accent bar down the inner edge */
.sm-about--accent .sm-about-media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--sm-ab-band);
	background: var(--sm-ab-accent);
}

.sm-about--flip.sm-about--accent .sm-about-media::after {
	right: auto;
	left: 0;
}

/*
 * "Fit" mode: show the picture whole. A collage or a PNG with transparency
 * would be wrecked by a crop, so let it size itself and drop the bar.
 */
.sm-about--fit .sm-about-media {
	border-radius: 0;
	overflow: visible;
}

.sm-about--fit .sm-about-media::after {
	display: none;
}

.sm-about--fit .sm-about-media .sm-about-img {
	height: auto;
	max-height: 660px;
	object-fit: contain;
}

.sm-about-dots {
	position: absolute;
	right: 22px;
	bottom: -14px;
	z-index: 2;
	width: 110px;
	height: 70px;
	background-image: radial-gradient(circle, #c7cedb 1.7px, transparent 1.8px);
	background-size: 15px 15px;
	pointer-events: none;
}

.sm-about--flip .sm-about-dots {
	right: auto;
	left: 22px;
}

/* =============================================================== 4. Copy */
.sm-about-content {
	min-width: 0;
}

.sm-about-eyebrow {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 14px;
	color: var(--sm-ab-eyebrow);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.sm-about-eyebrow i {
	display: block;
	width: 66px;
	height: 2px;
	background: var(--sm-ab-accent);
}

.sm-about .sm-about-title {
	margin: 0 0 22px;
	padding: 0;
	font-family: 'Exo', sans-serif;
	font-size: 39px;
	font-weight: 800;
	line-height: 1.18;
	color: var(--sm-ab-ink);
	text-transform: none;
}

.sm-about .sm-about-title span {
	color: var(--sm-ab-accent);
}

.sm-about-text {
	color: var(--sm-ab-text);
	font-size: 16.5px;
	line-height: 1.75;
}

.sm-about-text p {
	margin: 0 0 18px;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.sm-about-text p:last-child {
	margin-bottom: 0;
}

/* -- button after the paragraphs ------------------------------------- */
.sm-about-actions {
	margin-top: 28px;
}

/* Shape and size come from the --sm-btn-* tokens in sheetal-custom.css, so
   this matches every other button on the site. */
.sm-about .sm-about-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-btn-gap);
	padding: var(--sm-btn-pad-y) var(--sm-btn-pad-x);
	border-radius: var(--sm-btn-radius);
	background: var(--sm-ab-accent);
	color: #fff;
	font-size: var(--sm-btn-size);
	font-weight: var(--sm-btn-weight);
	line-height: 1.2;
	letter-spacing: var(--sm-btn-tracking);
	text-decoration: none;
	transition: filter 0.25s ease, box-shadow 0.25s ease;
}

.sm-about .sm-about-btn:hover,
.sm-about .sm-about-btn:focus-visible {
	color: #fff;
	filter: brightness(1.08);
	box-shadow: var(--sm-btn-shadow-hover);
}

.sm-about-btn i {
	transition: transform 0.25s ease;
}

.sm-about-btn:hover i {
	transform: translateX(4px);
}

/* =============================================== 5. Specialities panel */
.sm-about-panel {
	margin-top: 30px;
	padding: 26px 30px 28px;
	border-radius: 14px;
	background: var(--sm-ab-panel);
}

.sm-about-panel-head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.sm-about-panel-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--sm-ab-accent);
	color: #fff;
	font-size: 21px;
	line-height: 1;
}

.sm-about .sm-about-panel-title {
	margin: 0;
	padding-left: 20px;
	border-left: 2px solid rgba(22, 36, 60, 0.16);
	font-family: 'Exo', sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sm-ab-ink);
	text-transform: none;
}

.sm-about-list {
	display: grid;
	gap: 14px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-about-list--1 { grid-template-columns: minmax(0, 1fr); }
.sm-about-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-about-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sm-about-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	color: var(--sm-ab-text);
	font-size: 15.5px;
	line-height: 1.5;
	list-style: none;
}

.sm-about-list li i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--sm-ab-accent);
	font-size: 17px;
	font-weight: 700;
}

.sm-about-list li a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.sm-about-list li a:hover,
.sm-about-list li a:focus-visible {
	color: var(--sm-ab-accent);
}

/* ========================================================= 6. Responsive */
@media (max-width: 1400px) {
	.sm-about { --sm-ab-imgh: 530px; --sm-ab-slant: 70px; }
	.sm-about-grid { gap: 48px; }
	.sm-about .sm-about-title { font-size: 40px; }
	.sm-about--full .sm-about-grid { padding-right: 70px; }
	.sm-about--full.sm-about--flip .sm-about-grid { padding-left: 70px; }
}

@media (max-width: 1199px) {
	.sm-about { --sm-ab-imgh: 470px; --sm-ab-slant: 56px; --sm-ab-band: 16px; }
	.sm-about-grid { gap: 36px; }
	.sm-about .sm-about-title { font-size: 34px; }
	.sm-about-text { font-size: 15.5px; }
	.sm-about-panel { padding: 22px 22px 24px; }
	.sm-about .sm-about-panel-title { font-size: 19px; }
	.sm-about--full .sm-about-grid { padding-right: 46px; }
	.sm-about--full.sm-about--flip .sm-about-grid { padding-left: 46px; }
	.sm-about--fit .sm-about-media .sm-about-img { max-height: 520px; }
}

@media (max-width: 991px) {
	/* Single column: the image sits above the copy, still full-bleed. The
	   slant would read as a mistake across the full width, so square it off. */
	.sm-about { --sm-ab-imgh: 340px; }
	.sm-about-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.sm-about--flip .sm-about-visual { order: 0; }
	.sm-about--pattern::before { display: none; }

	.sm-about--full .sm-about-grid,
	.sm-about--full.sm-about--flip .sm-about-grid { padding: 0 30px; }
	.sm-about--full .sm-about-visual { margin: 0 -30px; }

	.sm-about-media,
	.sm-about-media .sm-about-img,
	.sm-about--flip .sm-about-media,
	.sm-about--flip .sm-about-media .sm-about-img,
	.sm-about:not(.sm-about--accent) .sm-about-media .sm-about-img,
	.sm-about--flip:not(.sm-about--accent) .sm-about-media .sm-about-img {
		clip-path: none;
	}
	.sm-about-media { background: none; }
	.sm-about-dots { display: none; }
	.sm-about--fit .sm-about-media .sm-about-img { max-height: 420px; }
}

@media (max-width: 767px) {
	.sm-about { --sm-ab-imgh: 250px; }
	.sm-about .sm-about-title { font-size: 28px; }
	.sm-about-eyebrow { font-size: 13px; letter-spacing: 2.4px; }
	.sm-about-eyebrow i { width: 40px; }
	.sm-about--full .sm-about-grid,
	.sm-about--full.sm-about--flip .sm-about-grid { padding: 0 18px; }
	.sm-about--full .sm-about-visual { margin: 0 -18px; }

	.sm-about-list--2,
	.sm-about-list--3 { grid-template-columns: minmax(0, 1fr); }
}