/*
 * Styling for native ThePlus widget replacements (Phase 6). Copied
 * verbatim from the real (deactivated) theplus_elementor_addon plugin's
 * own CSS — assets/css/main/animated-service-box/plus-animated-service-
 * boxes.css and assets/css/main/plus-extra-adv/plus-button.css —
 * confirmed missing from the currently-active free plugin and from the
 * site's served CSS bundles before adding this (same gap pattern as the
 * Phase 3 dyncontel-acf-relation grid CSS fix).
 */

/* --- tp-animated-service-boxes: base wrapper --- */
.pt_plus_asb_wrapper {
	position: relative;
	display: block;
	width: 100%;
}
/*
 * Deliberate deviation from the original plugin's CSS: the original
 * `margin: -10px` here exists to compensate for internal column-gutter
 * padding when ONE widget instance renders MANY cards side by side
 * (each `.service-item-loop` carrying its own `tp-col-lg-*` padding).
 * This site only ever renders exactly one card per widget instance —
 * the real "many cards in a row" layout comes from the OUTER
 * dyncontel-acfposts widget's own CSS grid (pu-dce-widgets.css),
 * looping the whole template once per post. With no internal gutter
 * padding to compensate for, the negative margin has nothing to
 * offset and instead just bleeds each card 10px past its own grid
 * cell on both sides — confirmed via the Browser pane's computed
 * layout: it shrank the grid's intended 16px gap down to ~6px (and
 * would fully close it if a card's own image were disabled). Removed
 * rather than replicated, per the standing "genuinely correct site,
 * not byte-for-byte replication of latent defects" direction.
 */
.pt_plus_asb_wrapper .asb_wrap_list.tp-row {
	margin-left: 0;
	margin-right: 0;
}

/* --- article-box / article-box-style-1 (the only style actually used) --- */
.article-box.article-box-style-1,
.article-box.article-box-style-1 .article-box-inner-content {
	transition: all .3s ease-in-out;
}
.article-box.article-box-style-1 .article-box-inner-content {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: auto;
	border-radius: 5px;
}
.article-box.article-box-style-1 .service-item-loop .article-box-img {
	position: relative;
	display: grid;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	overflow: hidden;
	/*
	 * Deliberate deviation from the original plugin's CSS (copied
	 * verbatim above/elsewhere) — the original relied on `height: auto`,
	 * i.e. each card's height following its own image's natural aspect
	 * ratio. That's fine when a "row" only ever holds cards seeded with
	 * uniformly-cropped stock images, but the real photos here range
	 * from 1024x320 (~3.2:1) to 1024x576 (16:9) to 1024x489 — a real,
	 * uncropped mix, confirmed against all 14 school images. Left as
	 * `auto`, the grid on /schools/ renders visibly uneven/staggered
	 * ("zig-zag") card heights. Constraining to a fixed aspect ratio
	 * with object-fit:cover is the standard fix for a card grid with
	 * mixed-dimension source photos and doesn't require touching any
	 * of the 14 real images.
	 *
	 * Follow-up: object-fit:cover (below) cropped real content out of
	 * several photos to force-fill this fixed box — reported as
	 * "photos not displaying fully". Switched to object-fit:contain
	 * (whole photo always visible, letterboxed rather than cropped)
	 * and gave this container its own background so the letterbox
	 * bars read as intentional, not blank gaps.
	 */
	aspect-ratio: 16 / 9;
	background-color: #0a1a3a;
}
.article-box.article-box-style-1 .service-item-loop .article-box-content {
	transition: margin-top .2s;
	padding: 5px 15px;
}
.article-box.article-box-style-1 .asb-title {
	font-size: 18px;
	/*
	 * Deliberate deviation from the original plugin's CSS (copied
	 * verbatim above/elsewhere), same category as the aspect-ratio fix
	 * on .article-box-img: the original's `line-height: 40px` is a
	 * fixed, oversized value clearly only ever exercised against the
	 * widget's own short single-line placeholder title ("The Plus").
	 * Real school names wrap to 2-3 lines (confirmed via the Browser
	 * pane's computed styles: a 3-line title at line-height:40px
	 * measured 130px tall — 95% of the card's own 137px height,
	 * visually hiding the image entirely). A proportional line-height
	 * keeps every real title fully visible (nothing is truncated) while
	 * keeping the overlay a sensible fraction of the card.
	 */
	line-height: 1.25;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: #fff;
}
.article-box.article-box-style-1 .asb-desc p,
.article-box.article-box-style-1 .asb-desc {
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;
	color: #fff;
}
.article-box.article-box-style-1 .asb-desc,
.article-box.article-box-style-1 .pt-plus-button-wrapper {
	display: none;
}
.article-box.article-box-style-1 .asb-desc .pt_plus_button .button-link-wrap {
	font-size: 13px;
	line-height: 19px;
	font-weight: 400;
	color: #fff;
}
.article-box.article-box-style-1 .article-overlay {
	position: absolute;
	bottom: 0;
	background-color: rgba(2, 62, 182, .8);
	height: auto;
	left: 0;
	right: 0;
}
.article-box.article-box-style-1 .service-item-loop .article-box-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.article-box.article-box-style-1 .article-overlay:hover .article-box .asb-desc p,
.article-box.article-box-style-1 .article-overlay:hover .article-box .asb-desc {
	display: block;
}
.article-box.article-box-style-1 .pt_plus_button .button-link-wrap {
	color: #fff;
	padding: 15px 36px 15px 0;
}

/* --- shared button classes (pt_plus_button / button-link-wrap etc.) --- */
.pt-plus-button-wrapper {
	position: relative;
	display: block;
}
.pt_plus_button {
	position: relative;
	display: inline-block;
	width: auto;
}
.pt_plus_button .button-link-wrap i {
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: middle;
}
.pt_plus_button .button-link-wrap {
	position: relative;
	display: inline-block;
	padding: 15px 30px;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 1px;
	cursor: pointer;
	color: #000;
	transition: all .3s linear;
}
.animted-content-inner {
	position: relative;
	display: block;
	width: 100%;
	z-index: 1;
}

/* --- button-style-9 (the only button style actually used) --- */
.pt_plus_button.button-style-9 a.button-link-wrap {
	padding-right: 20px;
}
.pt_plus_button.button-style-9 a.button-link-wrap .btn-arrow {
	position: relative;
	display: inline-block;
	margin-left: 10px;
}
.pt_plus_button.button-style-9 a.button-link-wrap .fa-show {
	transform: translateX(0%) translateZ(0) translateY(-50%);
	position: absolute;
	top: 50%;
}
.pt_plus_button.button-style-9 a.button-link-wrap:hover .fa-show {
	opacity: 0;
	transform: translateX(20px) translateZ(0) translateY(-50%);
	transition: transform .7s cubic-bezier(.23,1,.32,1), opacity .45s cubic-bezier(.165,.84,.44,1);
}
.pt_plus_button.button-style-9 a.button-link-wrap .fa-hide {
	opacity: 0;
	transform: translateX(-20px) translateZ(0);
}
.pt_plus_button.button-style-9 a.button-link-wrap:hover .fa-hide {
	opacity: 1;
	transform: translateX(0) translateZ(0);
	transition: transform .7s .1s cubic-bezier(.23,1,.32,1), opacity .45s .1s cubic-bezier(.165,.84,.44,1);
}