/**
 * ACF Repeater for Elementor — Frontend CSS
 *
 * CSS custom properties (--are-*) are set inline by the Renderer / Elementor selectors.
 */

/* =============================================================================
   RESET
   ============================================================================= */
.are-repeater, .are-repeater * { box-sizing: border-box; }

/* =============================================================================
   GRID / CARDS / MASONRY
   ============================================================================= */
.are-repeater--grid,
.are-repeater--cards {
	display: grid;
	grid-template-columns: repeat(var(--are-columns, 3), 1fr);
	gap: var(--are-gap, 1.5rem);
	width: 100%;
}

.are-repeater--masonry {
	columns: var(--are-columns, 3);
	column-gap: var(--are-gap, 1.5rem);
	width: 100%;
}
.are-repeater--masonry .are-repeater__item {
	break-inside: avoid;
	margin-bottom: var(--are-gap, 1.5rem);
}

@media (max-width: 1024px) {
	.are-repeater--grid, .are-repeater--cards {
		grid-template-columns: repeat(min(var(--are-columns,3), 2), 1fr);
	}
	.are-repeater--masonry { columns: min(var(--are-columns,3), 2); }
}
@media (max-width: 767px) {
	.are-repeater--grid, .are-repeater--cards { grid-template-columns: 1fr; }
	.are-repeater--masonry { columns: 1; }
}

/* =============================================================================
   LIST
   ============================================================================= */
.are-repeater--list {
	display: flex;
	flex-direction: column;
	gap: var(--are-gap, 1rem);
	width: 100%;
}

/* =============================================================================
   CARDS EXTRAS
   ============================================================================= */
.are-repeater--cards .are-card { display: flex; flex-direction: column; overflow: hidden; }
.are-repeater--cards .are-card img.are-repeater__image { width: 100%; height: 220px; object-fit: cover; display: block; }

/* =============================================================================
   IMAGES
   ============================================================================= */
img.are-repeater__image { max-width: 100%; height: auto; display: block; }

/* =============================================================================
   ACCORDION
   ============================================================================= */
.are-accordion { width: 100%; }
.are-accordion__item { border-bottom: 1px solid #e0e0e0; }
.are-accordion__item:first-child { border-top: 1px solid #e0e0e0; }

.are-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.25rem;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	color: inherit;
	gap: 1rem;
	transition: background-color 0.2s;
}
.are-accordion__trigger:hover { background: rgba(0,0,0,.03); }

.are-accordion__title { flex: 1; }
.are-accordion__icon  { flex-shrink: 0; font-size: 1.2em; transition: transform .3s; }

.are-accordion__body {
	overflow: hidden;
	max-height: 0;
	padding: 0 1.25rem;
	transition: max-height 0.35s ease, padding 0.35s ease;
}
.are-accordion__body:not([hidden]) { padding: 1rem 1.25rem; }
/* When hidden attr is present, keep display:block so transitions work */
.are-accordion__body[hidden] { display: block !important; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* =============================================================================
   CAROUSEL
   ============================================================================= */

/*
 * Outer wrapper: position:relative for arrows, NO overflow:hidden here.
 * The .are-carousel__clipper child provides the overflow clipping.
 */
.are-carousel {
	position: relative;
	width: 100%;
}

/* Clipper: injected by JS. Clips the scrolling track but not the arrows. */
.are-carousel__clipper {
	overflow: hidden;
	width: 100%;
}

/* Track: flex row, no wrapping. JS sets transform for sliding. */
.are-carousel__track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}

/* Slides: width controlled by JS (slideWidth()). */
.are-carousel__slide {
	flex-shrink: 0;
	flex-grow: 0;
	min-width: 0;
}

/* Navigation arrows — outside the clipper, so never clipped. */
.are-carousel__prev,
.are-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.92);
	border: 1px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0;
	transition: background 0.2s, opacity 0.2s;
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.are-carousel__prev { left: 4px; }
.are-carousel__next { right: 4px; }
.are-carousel__prev:hover,
.are-carousel__next:hover { background: #fff; }
.are-carousel__prev:disabled,
.are-carousel__next:disabled { opacity: 0.3; cursor: not-allowed; }

/* Dot pagination */
.are-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0.75rem 0 0.25rem;
}
.are-carousel__dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}
.are-carousel__dot.is-active { background: #333; transform: scale(1.3); }

/* =============================================================================
   TABS
   ============================================================================= */
.are-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 2px solid #e0e0e0;
	gap: 4px;
}
.are-tabs__nav-btn {
	padding: .75rem 1.25rem;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 500;
	color: #666;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color .2s, border-color .2s;
}
.are-tabs__nav-btn:hover { color: #333; }
.are-tabs__nav-btn.is-active { color: #333; border-bottom-color: #333; font-weight: 600; }

.are-tabs__content { padding-top: 1.5rem; }
.are-tabs__panel { display: none; }
.are-tabs__panel.is-active { display: block; }

/* =============================================================================
   EDITOR NOTICES
   ============================================================================= */
.are-editor-notice {
	padding: 1.5rem;
	background: #f0f7ff;
	border: 1px dashed #a0c4e8;
	border-radius: 6px;
	text-align: center;
	color: #4a7dad;
	font-size: .9rem;
}
.are-editor-preview-notice {
	padding: 1rem;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	font-size: .875rem;
	color: #495057;
}

/* =============================================================================
   FIELD HELPERS
   ============================================================================= */
.are-field--wysiwyg > *        { margin: 0 0 .75rem; }
.are-field--wysiwyg > *:last-child { margin-bottom: 0; }
.are-field--image img          { max-width: 100%; height: auto; }
.are-error                     { color: #c0392b; font-style: italic; font-size: .875rem; }

/* =============================================================================
   TEMPLATE GRID (Widget_ACF_Template)
   The .are-tpl-* classes are used only by the Template widget. They provide
   the grid/list layout that wraps the Elementor-rendered template items.
   Elementor's own classes (elementor-section, elementor-column, etc.) handle
   the inner template styling — we don't override those.
   ============================================================================= */

.are-tpl-grid {
	width: 100%;
}

/* Grid layout */
.are-tpl-grid--grid,
.are-tpl-grid--cards {
	display: grid;
	grid-template-columns: repeat( var(--are-columns, 3), 1fr );
	gap: var(--are-gap, 30px);
	align-items: start;
}

/* List layout */
.are-tpl-grid--list {
	display: flex;
	flex-direction: column;
	gap: var(--are-gap, 30px);
}

/* Masonry layout */
.are-tpl-grid--masonry {
	columns: var(--are-columns, 3);
	column-gap: var(--are-gap, 30px);
}
.are-tpl-grid--masonry .are-tpl-item {
	break-inside: avoid;
	margin-bottom: var(--are-gap, 30px);
}

/* Responsive: tablet */
@media (max-width: 1024px) {
	.are-tpl-grid--grid,
	.are-tpl-grid--cards {
		grid-template-columns: repeat( min(var(--are-columns, 3), 2), 1fr );
	}
	.are-tpl-grid--masonry { columns: min(var(--are-columns, 3), 2); }
}

/* Responsive: mobile */
@media (max-width: 767px) {
	.are-tpl-grid--grid,
	.are-tpl-grid--cards { grid-template-columns: 1fr; }
	.are-tpl-grid--masonry { columns: 1; }
}

/* Item wrapper: allows the inner Elementor template to breathe */
.are-tpl-item {
	box-sizing: border-box;
	min-width: 0; /* prevent grid blowout */
}

/*
 * Critical: Elementor wraps each template in .elementor > .elementor-section-wrap
 * which has its own internal layout. We must NOT override Elementor's width/max-width
 * here so the template renders as the user designed it.
 * The only constraint is that the template fills its grid cell.
 */
.are-tpl-item > .elementor {
	width: 100%;
}

.are-tpl-item > .elementor .elementor-section {
	/* Ensure sections don't try to escape the grid cell */
	width: 100% !important;
	max-width: 100% !important;
}

.are-tpl-item > .elementor .elementor-container {
	max-width: 100% !important;
}