/**
 * Business Profiles (ati_industry).
 *
 * Class names match the markup emitted by inc/industry/industry-render.php.
 * Values come exclusively from the approved design tokens in tokens.css, and
 * layout uses logical properties so the same rules serve the RTL page.
 */

/* Section rhythm ---------------------------------------------------------
 * layout.css gives every .ati-section 64px block padding at >=1024px, which is
 * a 128px gap between neighbours. Across the eleven sections of a profile page
 * that is the "page is stretched out" symptom, so the rhythm is tightened here
 * and only here. Padding is per section, so the visual gap is twice this value.
 * The two-class selector outranks the single-class .ati-section rule, so no
 * !important is needed.
 */
.ati-business-profile > .ati-section {
	padding-block: var(--ati-space-6);
}

.ati-business-profile > /* Hero — full-bleed image layer with an RTL overlay ------------------------
 * The section is a direct child of <main> and is never width-constrained, so
 * escaping the 1200px container only requires the media layer to be absolute.
 * Overlay stays absolute on mobile too: the text is never moved below the image.
 */
.ati-business-profile__hero {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	isolation: isolate;
	background: var(--ati-color-surface-container);
}

/* The section rhythm rule must not add padding: the overlay owns its own. */
.ati-business-profile > .ati-business-profile__hero {
	padding-block: 0;
	/* Height follows the 3:1 frame, with a floor so short crops still have room
	   for the copy. */
	height: clamp(360px, 33vw, 460px);
}

.ati-business-profile__hero.is-plain {
	background: var(--ati-color-surface-container);
}

.ati-business-profile__hero-media,
.ati-business-profile__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ati-business-profile__hero-image {
	display: block;
	object-fit: cover;
	/* The subject belongs centre/left, because the copy sits on the right. */
	object-position: 35% center;
	z-index: 0;
}

/* Contrast scrim.
 * The reference keeps an airy, light image with dark copy, so this lifts the
 * text side very gently instead of darkening the photograph. It exists only to
 * guarantee contrast over an arbitrary upload, and stays subtle enough that the
 * image still reads as a bright studio scene. */
.ati-business-profile__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to left,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(255, 255, 255, 0.86) 30%,
		rgba(255, 255, 255, 0.55) 52%,
		rgba(255, 255, 255, 0) 72%
	);
}

/* Absolutely positioned over the image layer, on every breakpoint. The hero
   therefore takes its height from the image frame, and the copy can never push
   the photograph or flow beneath it. */
.ati-business-profile__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 100%;
	padding-block: var(--ati-space-12);
}

.ati-business-profile__hero-content {
	width: 100%;
	max-width: 620px;
	margin-inline-start: 0;
	margin-inline-end: auto;
	color: var(--ati-color-text);
}

.ati-business-profile__hero-label {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-2);
	margin: 0 0 var(--ati-space-3);
	padding: var(--ati-space-1) var(--ati-space-3);
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-primary);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(15, 124, 117, 0.28);
	border-radius: var(--ati-radius-full);
}

.ati-business-profile__hero-label .ati-icon {
	width: 16px;
	height: 16px;
}

.ati-business-profile__hero-title {
	margin: 0 0 var(--ati-space-4);
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: var(--ati-leading-h1);
	color: var(--ati-color-text);
	text-wrap: balance;
}

.ati-business-profile__hero-description {
	max-width: 54ch;
	margin: 0 0 var(--ati-space-6);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	color: var(--ati-color-text-muted);
}

.ati-business-profile__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-3);
}

/* The shared secondary button sits on a photo, so it keeps the light-surface
   treatment of the design system. */
.ati-business-profile__hero-content .ati-button--secondary {
	background: rgba(255, 255, 255, 0.86);
	border-color: var(--ati-color-border);
}

/* No image: keep the same geometry so the copy never jumps. */
.ati-business-profile__hero.is-plain .ati-business-profile__hero-content {
	color: var(--ati-color-text);
}

.ati-business-profile__hero.is-plain .ati-business-profile__hero-title {
	color: var(--ati-color-text);
}

.ati-business-profile__hero.is-plain .ati-business-profile__hero-description {
	color: var(--ati-color-text-muted);
}

/* Overview -------------------------------------------------------------- */

.ati-business-profile__overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--ati-space-8);
	align-items: start;
}

.ati-business-profile__overview-lead {
	margin: 0 0 var(--ati-space-4);
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
	color: var(--ati-color-text);
}

.ati-business-profile__body {
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	color: var(--ati-color-text);
}

.ati-business-profile__body > :first-child {
	margin-block-start: 0;
}

.ati-business-profile__body > :last-child {
	margin-block-end: 0;
}

/* Info card ---------------------------------------------------------------
 * The one container for a titled list of icon + title + description entries.
 * نکات کلیدی, خدمات آتی‌چاپ, متریال‌های پیشنهادی and خدمات تکمیلی are four data
 * sources rendering this one component, so their border, radius, background,
 * padding, heading and item spacing cannot drift apart. The entry rows
 * themselves are the shared frameless card (see --list below).
 */
.ati-business-profile-info-card {
	padding: var(--ati-space-6);
	background: var(--ati-color-surface-container);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-lg);
}

/* The highlights sit in the narrow overview aside, so this list must stay a
 * single column: a three-column grid there leaves a ~33px text column, which is
 * narrower than the longest Persian word and forces a character-by-character
 * break. */
.ati-business-profile-info-card__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ati-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The base card. Declared before --list and --numbered on purpose: those are
 * equal-specificity frame overrides, so source order is what makes them win. */
.ati-business-profile-card {
	display: flex;
	align-items: flex-start;
	gap: var(--ati-space-3);
	padding: var(--ati-space-4);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-sm);
	background: var(--ati-color-surface);
	transition: border-color 0.15s ease;
}

.ati-business-profile-card:hover {
	border-color: var(--ati-color-primary);
}

.ati-business-profile-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
}

.ati-business-profile-card__icon .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-business-profile-card__content {
	min-width: 0;
}

.ati-business-profile-card__title {
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-text-muted);
}

.ati-business-profile-card__description {
	margin: 2px 0 0;
	font-size: var(--ati-text-body);
	font-weight: 500;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.ati-business-profile-card--list {
	gap: var(--ati-space-2);
	padding: var(--ati-space-2) 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transition: none;
}

.ati-business-profile-card--list:hover {
	border-color: transparent;
	background: none;
	box-shadow: none;
	transform: none;
}

.ati-business-profile-card--list .ati-business-profile-card__icon {
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: none;
}

.ati-business-profile-card--list .ati-business-profile-card__icon .ati-icon {
	width: 20px;
	height: 20px;
}

.ati-business-profile-card--list .ati-business-profile-card__title {
	font-size: var(--ati-text-body);
	color: var(--ati-color-text);
}

.ati-business-profile-card--list .ati-business-profile-card__description {
	font-size: var(--ati-text-caption);
	font-weight: 400;
	line-height: var(--ati-leading-body);
}


/* The journey section is a row of independent step cards, so a step is a real
 * card: it keeps the shared card's chrome untouched — surface, border, radius
 * and padding all come from .ati-business-profile-card — and only its internal
 * arrangement changes, stacking the icon above a centred title and description. */
.ati-business-profile-card--numbered {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 12px between the icon and the title, the shared card's own gap. */
	gap: var(--ati-space-3);
	height: 100%;
	text-align: center;
	/* These cards are informational, not interactive, so nothing may animate. */
	transition: none;
}

/* The icon box is the shared one; only its placement changes. In a centred
 * flex column it needs no offsets, which keeps the alignment flow-based. */
.ati-business-profile-card--numbered .ati-business-profile-card__icon {
	flex: 0 0 auto;
}

.ati-business-profile-card--numbered .ati-business-profile-card__content {
	width: 100%;
	min-width: 0;
}

/* Same type scale as the other titled rows in this component, so a step reads
 * with the same hierarchy as the services, materials and finishing rows. */
.ati-business-profile-card--numbered .ati-business-profile-card__title {
	font-size: var(--ati-text-body);
	color: var(--ati-color-text);
}

.ati-business-profile-card--numbered .ati-business-profile-card__description {
	margin-block-start: var(--ati-space-1);
	font-size: var(--ati-text-caption);
	font-weight: 400;
	line-height: var(--ati-leading-body);
}

/* No hover affordance on this component. Every property the base card animates or
 * the site applies to cards is pinned back to its resting value, and the base
 * transition is already switched off above, so default, hover and active look
 * identical. Scoped to this one modifier: no other card loses its hover. */
.ati-business-profile-card--numbered:hover,
.ati-business-profile-card--numbered:focus,
.ati-business-profile-card--numbered:active {
	border-color: var(--ati-color-border);
	background: var(--ati-color-surface);
	box-shadow: none;
	transform: none;
	transition: none;
}

.ati-business-profile-card--numbered:hover .ati-business-profile-card__icon,
.ati-business-profile-card--numbered:focus .ati-business-profile-card__icon,
.ati-business-profile-card--numbered:active .ati-business-profile-card__icon {
	color: var(--ati-color-primary);
	background: var(--ati-color-primary-soft);
	transform: none;
}

.ati-business-profile-card__number {
	font-size: var(--ati-text-caption);
	font-weight: 700;
	color: var(--ati-color-primary);
	letter-spacing: 0.08em;
}

/* Card grids ------------------------------------------------------------- */

.ati-business-profile__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ati-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Collection sliders ---------------------------------------------------- */

/* Journey ----------------------------------------------------------------
 * Deliberately not a card grid: a numbered horizontal journey with a connector
 * rule, so it reads as a sequence rather than as more products.
 */
.ati-business-profile__journey-steps {
	position: relative;
	display: grid;
	/* A 200px floor keeps the text inside each card legible; auto-fit lets a
	 * profile with fewer steps get wider cards instead of stretched ones. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--ati-space-6);
	/* 32px separates the section description from the cards. */
	margin-block-start: var(--ati-space-8);
	padding: 0;
	list-style: none;
	/* Cards in a row share a height without any fixed height being set. */
	align-items: stretch;
}

.ati-business-profile__journey-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ati-space-4);
	/* 48px of clear space between the last step and the divider, then 32px
	 * between the divider and the cards below it. */
	margin-block-start: var(--ati-space-12);
	padding-block-start: var(--ati-space-8);
	border-block-start: 1px solid var(--ati-color-divider);
}

/* CTA ------------------------------------------------------------------- */

.ati-business-profile__cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--ati-space-6);
	align-items: center;
	padding: var(--ati-space-8);
	background: var(--ati-color-primary);
	border-radius: var(--ati-radius-lg);
}

.ati-business-profile__cta-inner h2 {
	margin: 0 0 var(--ati-space-3);
	font-size: var(--ati-text-h2);
	line-height: var(--ati-leading-h2);
	color: var(--ati-color-on-primary);
}

.ati-business-profile__cta-inner p {
	margin: 0 0 var(--ati-space-6);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
	color: var(--ati-color-primary-soft);
}

.ati-business-profile__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-3);
}

.ati-business-profile__cta-inner img {
	display: block;
	width: 180px;
	height: auto;
	border-radius: var(--ati-radius-md);
}

/* Reverse backlinks ----------------------------------------------------- */

.ati-business-profile__backlinks {
	padding-block: var(--ati-space-8);
	border-block-start: 1px solid var(--ati-color-border);
}

.ati-business-profile__backlinks-title {
	margin: 0 0 var(--ati-space-4);
	font-size: var(--ati-text-h3);
	line-height: var(--ati-leading-h3);
	color: var(--ati-color-text);
}

.ati-business-profile__backlinks ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ati-business-profile__backlinks a {
	display: inline-flex;
	align-items: center;
	padding: var(--ati-space-2) var(--ati-space-4);
	font-size: var(--ati-text-body);
	color: var(--ati-color-primary);
	text-decoration: none;
	background: var(--ati-color-primary-soft);
	border-radius: var(--ati-radius-full);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ati-business-profile__backlinks a:hover {
	color: var(--ati-color-primary-hover);
	background: var(--ati-color-border);
}

/* Portfolio archive filter ---------------------------------------------- */

.atichap-industry-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ati-space-2);
	margin-block-end: var(--ati-space-6);
}

.atichap-industry-filter__item {
	padding: var(--ati-space-2) var(--ati-space-4);
	font-size: var(--ati-text-body);
	color: var(--ati-color-text);
	text-decoration: none;
	background: var(--ati-color-surface);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-full);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.atichap-industry-filter__item:hover {
	color: var(--ati-color-primary);
	border-color: var(--ati-color-primary);
}

.atichap-industry-filter__item.is-active {
	color: var(--ati-color-on-primary);
	background: var(--ati-color-primary);
	border-color: var(--ati-color-primary);
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ati-business-profile > .ati-section {
		padding-block: var(--ati-space-6);
	}

	.ati-business-profile__overview-grid,
	.ati-business-profile__cta-inner,
	.ati-business-profile__journey-details {
		grid-template-columns: minmax(0, 1fr);
	}

	.ati-business-profile__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Tablet: two step cards per row. */
	.ati-business-profile__journey-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	.ati-business-profile__cta-inner img {
		width: 100%;
		max-width: 280px;
	}
}

@media (max-width: 768px) {
	.ati-business-profile > .ati-section {
		padding-block: var(--ati-space-4);
	}

	/* A 3:1 frame is very short on a narrow viewport, so the hero grows here to
	   keep the image, the full H1, the description and both CTAs comfortably
	   inside the frame. The overlay stays absolute, so the copy never moves
	   beneath the image. */
	.ati-business-profile > .ati-business-profile__hero {
		height: clamp(440px, 132vw, 560px);
	}

	.ati-business-profile__hero-overlay {
		padding-block: var(--ati-space-8);
	}

	.ati-business-profile__hero-content {
		max-width: 34ch;
	}

	.ati-business-profile__cta-inner {
		padding: var(--ati-space-6);
	}

	.ati-business-profile__journey-details {
		margin-block-start: var(--ati-space-6);
		padding-block-start: var(--ati-space-4);
	}
}

@media (max-width: 560px) {
	.ati-business-profile__grid,
	.ati-business-profile__journey-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	 * Each step but the last carries one segment; every segment uses the same axis
	 * and runs all the way to the next icon's centre, so consecutive segments meet
	 * exactly and the row reads as one unbroken line that stops at the last icon. */
	

}

@media (prefers-reduced-motion: reduce) {
	.ati-business-profile__backlinks a,
	.atichap-industry-filter__item {
		transition: none;
	}
}

/* Overview aside: highlights plus the optional section image. */
.ati-business-profile__overview-aside {
	display: grid;
	gap: var(--ati-space-4);
	align-content: start;
}

.ati-business-profile__overview-media {
	margin: 0;
	border-radius: var(--ati-radius-lg);
	overflow: hidden;
	background: var(--ati-color-surface-container);
}

.ati-business-profile__overview-media img {
	display: block;
	width: 100%;
	height: auto;
}