/**
 * CDSWerx Icon Box Widget Styles
 *
 * Layout, icon, separator (line + icon), and content styles for the Icon Box widget.
 * Supports icon positions: top, left, right, bottom.
 * Supports icon shapes: circle, rounded, square.
 * Button styles come from button-widget.css (shared dependency).
 *
 * @package CDSWerx_Widget_Library
 * @since   2.12.0
 */

/* ============================================
   Base Layout
   ============================================ */

.elementor-widget-cdswerx-icon-box .cdswerx-icon-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--cdswerx-icon-box-icon-margin, 15px);
}

/* ============================================
   Link wrapper — reset link styles
   ============================================ */

.cdswerx-icon-box__link {
	color: inherit;
	display: flex;
	flex-direction: inherit;
	align-items: inherit;
	gap: inherit;
	width: 100%;
}

/* ============================================
   Position: Left / Right / Top / Bottom (Desktop)
   ============================================ */

.cdswerx-icon-box-position-left .cdswerx-icon-box,
.cdswerx-icon-box-position-left .cdswerx-icon-box__link {
	flex-direction: row;
	align-items: flex-start;
	text-align: start;
}

.cdswerx-icon-box-position-right .cdswerx-icon-box,
.cdswerx-icon-box-position-right .cdswerx-icon-box__link {
	flex-direction: row-reverse;
	align-items: flex-start;
	text-align: end;
}

.cdswerx-icon-box-position-top .cdswerx-icon-box,
.cdswerx-icon-box-position-top .cdswerx-icon-box__link {
	flex-direction: column;
}

.cdswerx-icon-box-position-bottom .cdswerx-icon-box,
.cdswerx-icon-box-position-bottom .cdswerx-icon-box__link {
	flex-direction: column-reverse;
}

/* ============================================
   Alignment — comes after position rules so same-specificity
   alignment classes win the cascade over position defaults.
   ============================================ */

.cdswerx-icon-box-align-left .cdswerx-icon-box,
.cdswerx-icon-box-align-left .cdswerx-icon-box__link {
	align-items: flex-start;
	text-align: left;
}

.cdswerx-icon-box-align-center .cdswerx-icon-box,
.cdswerx-icon-box-align-center .cdswerx-icon-box__link {
	align-items: center;
	text-align: center;
}

.cdswerx-icon-box-align-right .cdswerx-icon-box,
.cdswerx-icon-box-align-right .cdswerx-icon-box__link {
	align-items: flex-end;
	text-align: right;
}

.cdswerx-icon-box-align-justify .cdswerx-icon-box,
.cdswerx-icon-box-align-justify .cdswerx-icon-box__link {
	align-items: flex-start;
	text-align: justify;
}

/* ============================================
   Position: Tablet Responsive
   ============================================ */

@media (max-width: 1024px) {
	.cdswerx-icon-box-tablet-position-left .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-left .cdswerx-icon-box__link {
		flex-direction: row;
		align-items: flex-start;
		text-align: start;
	}

	.cdswerx-icon-box-tablet-position-right .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-right .cdswerx-icon-box__link {
		flex-direction: row-reverse;
		align-items: flex-start;
		text-align: end;
	}

	.cdswerx-icon-box-tablet-position-top .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-top .cdswerx-icon-box__link {
		flex-direction: column;
	}

	.cdswerx-icon-box-tablet-position-bottom .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-position-bottom .cdswerx-icon-box__link {
		flex-direction: column-reverse;
	}

	.cdswerx-icon-box-tablet-align-left .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-left .cdswerx-icon-box__link {
		align-items: flex-start;
		text-align: left;
	}

	.cdswerx-icon-box-tablet-align-center .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-center .cdswerx-icon-box__link {
		align-items: center;
		text-align: center;
	}

	.cdswerx-icon-box-tablet-align-right .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-right .cdswerx-icon-box__link {
		align-items: flex-end;
		text-align: right;
	}

	.cdswerx-icon-box-tablet-align-justify .cdswerx-icon-box,
	.cdswerx-icon-box-tablet-align-justify .cdswerx-icon-box__link {
		align-items: flex-start;
		text-align: justify;
	}
}

/* ============================================
   Position: Mobile Responsive
   ============================================ */

@media (max-width: 767px) {
	.cdswerx-icon-box-mobile-position-left .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-left .cdswerx-icon-box__link {
		flex-direction: row;
		align-items: flex-start;
		text-align: start;
	}

	.cdswerx-icon-box-mobile-position-right .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-right .cdswerx-icon-box__link {
		flex-direction: row-reverse;
		align-items: flex-start;
		text-align: end;
	}

	.cdswerx-icon-box-mobile-position-top .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-top .cdswerx-icon-box__link {
		flex-direction: column;
	}

	.cdswerx-icon-box-mobile-position-bottom .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-position-bottom .cdswerx-icon-box__link {
		flex-direction: column-reverse;
	}

	.cdswerx-icon-box-mobile-align-left .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-left .cdswerx-icon-box__link {
		align-items: flex-start;
		text-align: left;
	}

	.cdswerx-icon-box-mobile-align-center .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-center .cdswerx-icon-box__link {
		align-items: center;
		text-align: center;
	}

	.cdswerx-icon-box-mobile-align-right .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-right .cdswerx-icon-box__link {
		align-items: flex-end;
		text-align: right;
	}

	.cdswerx-icon-box-mobile-align-justify .cdswerx-icon-box,
	.cdswerx-icon-box-mobile-align-justify .cdswerx-icon-box__link {
		align-items: flex-start;
		text-align: justify;
	}
}

/* ============================================
   Icon Wrapper
   ============================================ */

.cdswerx-icon-box__icon-wrap {
	flex-shrink: 0;
	line-height: 1;
}

.cdswerx-icon-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	transition-property: color, background-color, border-color, transform, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.cdswerx-icon-box__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cdswerx-icon-box__icon i {
	line-height: 1;
}

/* ============================================
   Icon View: Stacked
   ============================================ */

.cdswerx-icon-view-stacked .cdswerx-icon-box__icon {
	padding: 0.5em;
	background-color: #6ec1e4;
	color: #fff;
}

/* ============================================
   Icon View: Framed
   ============================================ */

.cdswerx-icon-view-framed .cdswerx-icon-box__icon {
	padding: 0.5em;
	border: 3px solid #6ec1e4;
	color: #6ec1e4;
}

/* ============================================
   Icon Shape: circle / rounded / square
   ============================================ */

.cdswerx-icon-shape-circle .cdswerx-icon-box__icon {
	border-radius: 50%;
}

.cdswerx-icon-shape-rounded .cdswerx-icon-box__icon {
	border-radius: 0.5em;
}

.cdswerx-icon-shape-square .cdswerx-icon-box__icon {
	border-radius: 0;
}

/* ============================================
   Content Area
   ============================================ */

.cdswerx-icon-box__content {
	flex: 1;
	min-width: 0;
}

.cdswerx-icon-box__heading {
	margin: 0;
	padding: 0;
	transition-property: color;
	transition-duration: 0.3s;
}

.cdswerx-icon-box__subheading {
	margin: 0;
	padding: 0;
	display: inline-block; /* background/padding hug the text; follows parent text-align */
	transition-property: color;
	transition-duration: 0.3s;
}

.cdswerx-icon-box__description {
	margin: 0;
	transition-property: color;
	transition-duration: 0.3s;
}

.cdswerx-icon-box__description p:first-child {
	margin-top: 0;
}

.cdswerx-icon-box__description p:last-child {
	margin-bottom: 0;
}

/* ============================================
   Separator (shared wrapper)
   — display: inline-block so it follows parent text-align
   ============================================ */

.cdswerx-icon-box__separator {
	display: inline-block;
	margin: 10px 0;
}

/* Separator: standard line (single line) */
.cdswerx-icon-box__separator-line {
	display: block;
	border-bottom: 2px solid #e0e0e0;
}

/* Separator: "With Icon"  —  line + icon + line  */
.cdswerx-icon-box__separator--with-icon {
	display: inline-flex;
	align-items: center;
}

.cdswerx-icon-box__separator--with-icon .cdswerx-icon-box__separator-line {
	flex: 1;
}

/* Separator: icon element (shared by "with icon" variant) */
.cdswerx-icon-box__separator-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
	color: #e0e0e0;
	margin: 0 8px;
}

.cdswerx-icon-box__separator-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ============================================
   CTA Button Wrapper
   ============================================ */

.cdswerx-icon-box .cdswerx-cta-button {
	margin-top: 15px;
}

/* List / marker base styles for this widget's WYSIWYG content live in the shared
   stylesheet assets/css/wysiwyg-content.css (handle cdswerx-wysiwyg-content,
   loaded as a dependency of this file). Rendered markup carries the generic
   `cds-wysiwyg*` hooks next to the BEM classes (WYSIWYG_List_Styles_Trait).
   The per-widget copies that used to live here were removed after #87 —
   do not re-add them. */

/* ============================================
   Description Layout: Flush with Icon
   (description_layout control, left/right icon position only)

   Icon + heading form a __header row; description/button span the
   full widget width below. The __header wrapper is only rendered in
   this mode — default mode markup is unchanged.

   Placed last in this file so flex-direction: column overrides the
   position-left/right row rules above, including the tablet/mobile
   media-query variants (same specificity, later in source).
   Alignment (text-align / align-items) is intentionally NOT declared
   here so the Alignment control keeps working in this mode.
   ============================================ */

.cdswerx-icon-box-desc-flush-icon .cdswerx-icon-box,
.cdswerx-icon-box-desc-flush-icon .cdswerx-icon-box__link {
	flex-direction: column;
}

.cdswerx-icon-box__header {
	display: flex;
	align-items: center;
	gap: var(--cdswerx-icon-box-icon-margin, 15px);
}

/* Heading + subheading stack vertically beside the icon */
.cdswerx-icon-box__heading-wrap {
	min-width: 0;
}

/* Icon Position: Right — icon sits after the heading in the header row */
.cdswerx-icon-box-position-right .cdswerx-icon-box__header {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* Heading & Description Layout: Inline (label / value).
   For the icon-on-top layout the heading + description are siblings in
   __content; flex them onto one row (heading = label, description = value) and
   force every other child (subheading, button, separator) to its own full-width
   line. Default 'stacked' adds no class, so this is purely additive. */
.cdswerx-icon-box-hdl-inline .cdswerx-icon-box__content {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5em;
}

.cdswerx-icon-box-hdl-inline .cdswerx-icon-box__content > *:not(.cdswerx-icon-box__heading):not(.cdswerx-icon-box__heading-link):not(.cdswerx-icon-box__description) {
	flex-basis: 100%;
}

/* Keep the heading (label) + description (value) pair on one line regardless of
   subtitle position. A "Below Title" subtitle renders AFTER the heading in the DOM,
   so without this it wedges between the label and value and splits the pair onto
   two lines. Push it (and the CTA button) past the pair with flex order; an
   "Above Title" subtitle precedes the heading and needs no reorder. */
.cdswerx-icon-box-hdl-inline .cdswerx-icon-box__heading ~ .cdswerx-icon-box__subheading,
.cdswerx-icon-box-hdl-inline .cdswerx-icon-box__heading-link ~ .cdswerx-icon-box__subheading {
	order: 1;
}
.cdswerx-icon-box-hdl-inline .cdswerx-cta-button {
	order: 2;
}