/**
 * WCC Elementor Widgets — Frontend Styles
 * Version: 1.0.2
 *
 * Table of Contents:
 *  ── Widget: Image Boxes ─────────────────────────
 *  1.  Grid Container
 *  2.  Individual Box
 *  3.  Background Image Layer
 *  4.  Overlay Layer
 *  5.  Content Layers (Normal & Hover)
 *  6.  Title
 *  7.  Description
 *  8.  Hover: Overlay lightens
 *  9.  Hover: Image zoom
 * 10.  Hover: Normal content fades OUT
 * 11.  Hover: Hover content fades IN
 * 12.  Hover: Hide-all-text mode
 * 13.  Link reset
 * 14.  Responsive fallbacks
 *  ── Widget: Service Cards ───────────────────────
 * 15.  Service Cards Grid
 * 16.  Service Card Item
 * 17.  Image Wrap & img
 * 18.  Image Overlay
 * 19.  Arrow Icon
 * 20.  Card Body (title + desc)
 * 21.  Hover: Overlay + arrow appear
 * 22.  Hover: Image zoom
 * 23.  Hover: Bottom border expands from centre
 * 24.  Link reset (service cards)
 * 25.  Responsive fallbacks (service cards)
 *  6.  Title
 *  7.  Description
 *  8.  Hover: Overlay lightens
 *  9.  Hover: Image zoom
 * 10.  Hover: Normal content fades OUT
 * 11.  Hover: Hover content fades IN (.wcc-has-hover-content)
 * 12.  Hover: Hide-all-text mode (.wcc-hide-text-on-hover)
 * 13.  Link reset
 * 14.  Responsive fallbacks
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. Grid Container
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-boxes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 6px;
	row-gap: 6px;
	width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Individual Box
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box {
	position: relative;
	height: 340px;
	overflow: hidden;
	display: block;
	cursor: pointer;
	border-radius: 4px;
	text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Background Image Layer
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #1a2a1a;
	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Overlay Layer
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 30, 10, 0.75);
	transition: background-color 500ms ease;
	pointer-events: none;
	z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Content Layers (Normal & Hover)
   Both layers are stacked at the same position.
   Normal  → visible by default, fades out on hover.
   Hover   → invisible by default, fades in on hover.
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* align-items is overridden per-box via inline style (text_align control) */
	align-items: flex-start; /* default = left */
	padding: 30px;
	will-change: opacity, transform;
}

/* Normal layer — always visible by default */
.wcc-image-box__content--normal {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 500ms ease, transform 500ms ease;
}

/* Hover layer — hidden by default */
.wcc-image-box__content--hover {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms ease, transform 500ms ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Title
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box__title {
	color: #ffffff;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 16px;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Description
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box__description {
	color: rgba(255, 255, 255, 0.90);
	font-size: 0.95rem;
	line-height: 1.6;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Hover: Overlay lightens (all boxes)
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box:hover .wcc-image-box__overlay {
	background-color: rgba(10, 30, 10, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Hover: Image zoom (requires .wcc-hover-zoom on the grid)
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-hover-zoom .wcc-image-box:hover .wcc-image-box__bg {
	transform: scale(1.07);
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Hover: Normal content fades OUT when a hover layer exists
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box.wcc-has-hover-content:hover .wcc-image-box__content--normal {
	opacity: 0;
	transform: translateY(-10px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. Hover: Hover content fades IN
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box.wcc-has-hover-content:hover .wcc-image-box__content--hover {
	opacity: 1;
	transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. Hover: Hide-all-text mode — fades BOTH layers out on hover
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-image-box.wcc-hide-text-on-hover:hover .wcc-image-box__overlay {
	background-color: rgba(10, 30, 10, 0.10);
}

.wcc-image-box.wcc-hide-text-on-hover:hover .wcc-image-box__content--normal,
.wcc-image-box.wcc-hide-text-on-hover:hover .wcc-image-box__content--hover {
	opacity: 0;
	transform: translateY(-10px);
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. Hover Disabled — box is permanently locked in its normal resting state.
       All !important overrides are needed to beat Elementor's inline-generated
       :hover selectors (e.g. overlay_color_hover, wcc-hover-zoom) which have
       higher specificity via the widget wrapper class.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Base state: identical to normal (no reveals) ── */
.wcc-image-box.wcc-hover-disabled {
	cursor: default;
	pointer-events: none; /* disable mouse interaction entirely */
}

/* Overlay: keep the same dark colour as normal state on hover */
.wcc-image-box.wcc-hover-disabled .wcc-image-box__overlay,
.wcc-image-box.wcc-hover-disabled:hover .wcc-image-box__overlay {
	background-color: rgba(10, 30, 10, 0.75) !important; /* matches default overlay_color */
	transition: none !important;
}

/* Background image: never zoom */
.wcc-image-box.wcc-hover-disabled .wcc-image-box__bg,
.wcc-image-box.wcc-hover-disabled:hover .wcc-image-box__bg {
	transform: scale(1) !important;
	transition: none !important;
}

/* Normal content: always fully visible, no slide/fade */
.wcc-image-box.wcc-hover-disabled .wcc-image-box__content--normal,
.wcc-image-box.wcc-hover-disabled:hover .wcc-image-box__content--normal {
	opacity: 1 !important;
	transform: translateY(0) !important;
	transition: none !important;
}

/* Hover content: always hidden (there's nothing to reveal) */
.wcc-image-box.wcc-hover-disabled .wcc-image-box__content--hover,
.wcc-image-box.wcc-hover-disabled:hover .wcc-image-box__content--hover {
	opacity: 0 !important;
	transition: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. Link reset (when the box is an <a> tag)
   ───────────────────────────────────────────────────────────────────────────── */
a.wcc-image-box {
	text-decoration: none;
	display: block;
}

a.wcc-image-box:hover,
a.wcc-image-box:focus {
	text-decoration: none;
	outline: 3px solid rgba(255, 255, 255, 0.4);
	outline-offset: -3px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. Responsive Fallbacks
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.wcc-image-boxes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.wcc-image-boxes-grid {
		grid-template-columns: 1fr;
	}

	.wcc-image-box {
		height: 280px;
	}

	.wcc-image-box__title {
		font-size: 1.3rem;
	}
}


/* =============================================================================
   Widget: Service Cards
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   15. Service Cards Grid  (Flexbox)

   WHY FLEXBOX instead of CSS Grid?
   CSS Grid with 1fr columns always expands tracks to fill 100% of the
   container, so justify-content has no visual effect. Flexbox with
   flex-grow:0 items leaves real space that justify-content can use.

   How column widths are set:
   • Fixed mode : Elementor outputs --wcc-sc-cols (e.g. 3) via a selector.
                  CSS calculates: (100% − (N−1)×gap) ÷ N per card.
   • Auto mode  : Elementor outputs --wcc-sc-min (e.g. 200px) via inline style.
                  Cards use that as their flex-basis; browser wraps naturally.
   ───────────────────────────────────────────────────────────────────────────── */

/* Defaults / custom property fallbacks */
.wcc-service-cards-grid {
	--wcc-sc-cols: 3;    /* overridden by Elementor selector in fixed mode */
	--wcc-sc-gap:  12px; /* overridden by Elementor selector (gap control)  */
	--wcc-sc-min:  200px; /* overridden by inline style in auto mode          */

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start; /* overridden by Elementor selector (align control) */
	align-items: stretch;
	gap: var(--wcc-sc-gap);
	width: 100%;
}

/* ── Fixed mode ────────────────────────────────────────────────────────────────── */
/* Cards are sized exactly so N of them fill one row (with gaps). */
.wcc-service-cards-grid:not(.wcc-service-cards-auto) > .wcc-service-card {
	/* flex: don't grow beyond calculated size, don't shrink below it */
	flex: 0 0 calc(
		(100% - (var(--wcc-sc-cols) - 1) * var(--wcc-sc-gap))
		/ var(--wcc-sc-cols)
	);
	max-width: calc(
		(100% - (var(--wcc-sc-cols) - 1) * var(--wcc-sc-gap))
		/ var(--wcc-sc-cols)
	);
	min-width: 0; /* allow shrinking on very small screens */
}

/* ── Auto Responsive mode ───────────────────────────────────────────────────────── */
/* Cards grow to fill available space but never shrink below --wcc-sc-min. */
.wcc-service-cards-grid.wcc-service-cards-auto > .wcc-service-card {
	flex: 1 1 var(--wcc-sc-min);
	min-width: var(--wcc-sc-min);
	max-width: 100%; /* never wider than container */
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. Service Card Item
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;

	/* Subtle card shadow */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);

	/* Bottom border pseudo-element lives here */
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. Hover: Bottom border — expands FROM CENTRE outward
       Technique: left starts at 50%, right starts at 50% (zero width).
       On hover: left → 0, right → 0 (full width).
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-service-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left:  50%;
	right: 50%;
	height: 3px;
	background-color: #2d5a1b;
	transition: left  350ms ease, right 350ms ease;
	pointer-events: none;
	z-index: 10;
}

.wcc-service-card:hover::after {
	left:  0;
	right: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. Image Wrap & img
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-service-card__image-wrap {
	position: relative;
	width: 100%;
	height: 180px;
	overflow: hidden;
	flex-shrink: 0;
}

.wcc-service-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. Image Overlay
   The overlay covers the whole image but starts invisible (opacity: 0).
   The arrow button sits inside it, anchored to the bottom-right.
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-service-card__image-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 50, 20, 0.72);
	opacity: 0;
	transition: opacity 350ms ease;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 12px;
	z-index: 2;
	pointer-events: none; /* let clicks pass through when not hovered */
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. Arrow Button
   Normal state : White circle border only, icon invisible.
   Hover state  : White filled rounded square, dark icon appears.
   ───────────────────────────────────────────────────────────────────────────── */

/* The button is always in the DOM so it shows the circle outline in normal */
.wcc-service-card__arrow-btn {
	position: absolute;          /* pull it OUT of the overlay flow */
	bottom: 12px;
	right:  12px;
	z-index: 5;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:  44px;
	height: 44px;

	/* Normal: white circle outline, transparent bg */
	background-color: transparent;
	border: 2px solid #ffffff;
	border-radius: 50%;

	/* Icon is invisible at rest */
	color: transparent;

	/* All transitions */
	transition:
		background-color 300ms ease,
		border-radius    300ms ease,
		color            300ms ease,
		transform        300ms ease;

	cursor: pointer;
	pointer-events: auto;
}

/* Icon & SVG inside the button */
.wcc-service-card__arrow-btn i,
.wcc-service-card__arrow-btn svg {
	display: block;
	width:  16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
	transition: color 300ms ease, fill 300ms ease;
}

.wcc-service-card__arrow-btn svg {
	stroke: currentColor;
	fill: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   20. Card Body
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-service-card__body {
	padding: 20px 20px 24px;
	flex: 1;
}

.wcc-service-card__title {
	color: #1a1a1a;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}

.wcc-service-card__desc {
	color: #555555;
	font-size: 0.875rem;
	line-height: 1.65;
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21. Hover: Overlay fades in + arrow transforms circle → rounded square
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-service-card:hover .wcc-service-card__image-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* Arrow button on hover: filled white square, dark icon */
.wcc-service-card:hover .wcc-service-card__arrow-btn {
	background-color: #ffffff;
	border-radius: 8px;
	color: #1a3a10;
}

/* ─────────────────────────────────────────────────────────────────────────────
   22. Hover: Image zoom (when .wcc-service-zoom on grid)
   ───────────────────────────────────────────────────────────────────────────── */
.wcc-service-zoom .wcc-service-card:hover .wcc-service-card__image-wrap img {
	transform: scale(1.07);
}

/* ─────────────────────────────────────────────────────────────────────────────
   24. Link reset (when card is an <a> tag)
   ───────────────────────────────────────────────────────────────────────────── */
a.wcc-service-card {
	text-decoration: none;
	color: inherit;
	display: flex;
}

a.wcc-service-card:hover,
a.wcc-service-card:focus {
	text-decoration: none;
	color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. Responsive behaviour

   AUTO mode: no breakpoints needed — CSS grid auto-fill handles everything.

   FIXED mode: Elementor's own responsive column selectors override per
   breakpoint. The fallbacks below act as a safety net for cases where
   Elementor hasn’t output a responsive selector (e.g. older cached pages).
   They only apply to the fixed grid (i.e. NOT .wcc-service-cards-auto).
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.wcc-service-cards-grid:not(.wcc-service-cards-auto) {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.wcc-service-cards-grid:not(.wcc-service-cards-auto) {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Image height: safe cap for all modes at tablet */
	.wcc-service-card__image-wrap {
		max-height: 220px;
	}
}

@media (max-width: 480px) {
	.wcc-service-cards-grid:not(.wcc-service-cards-auto) {
		grid-template-columns: 1fr;
	}

	/* Auto mode: bump min-width down so cards still fill mobile width */
	.wcc-service-cards-grid.wcc-service-cards-auto {
		--wcc-sc-min: 260px;
	}
}