/* ====================================================================
   Advanced Tab Gallery – Frontend Styles
   ==================================================================== */

/* ---------- Global design tokens ---------- */
.atg-widget {
	--atg-accent:       #4f46e5;
	--atg-accent-light: #818cf8;
	--atg-radius:       14px;
	--atg-ease:         cubic-bezier(0.4, 0, 0.2, 1);
	--atg-duration:     0.38s;
	--atg-transition:   var(--atg-duration) var(--atg-ease);
	/* tab bar */
	--atg-tab-cols:     4;
	--atg-tab-gap:      16px;
	/* gallery */
	--atg-cols:         4;
	--atg-gallery-gap:  12px;
	--atg-row-height:   220px;
	font-family: inherit;
	box-sizing:  border-box;
}

.atg-widget *,
.atg-widget *::before,
.atg-widget *::after { box-sizing: border-box; }

/* ====================================================================
   1. TABS BAR  — responsive CSS grid
   ==================================================================== */
.atg-tabs-bar {
	display:               grid;
	grid-template-columns: repeat(var(--atg-tab-cols, 4), minmax(0, 1fr));
	gap:                   var(--atg-tab-gap, 16px);
	margin-bottom:         0;
}

/* ====================================================================
   2. TAB CARD
   ==================================================================== */
.atg-tab-card {
	position:            relative;
	height:              200px;
	width:               100%;
	min-width:           0; /* let grid control sizing */
	border-radius:       var(--atg-radius);
	overflow:            hidden;
	cursor:              pointer;
	background-color:    #1e1e2e;
	background-size:     cover;
	background-position: center;
	transition:          transform var(--atg-transition),
	                     box-shadow var(--atg-transition);
	outline:             none;
	user-select:         none;
}

.atg-tab-card:focus-visible {
	outline:        3px solid var(--atg-accent-light);
	outline-offset: 3px;
}

/* hover: lift + faint overlay boost */
.atg-tab-card:not(.is-active):hover {
	transform: translateY(-4px) scale(1.015);
}
.atg-tab-card:not(.is-active):hover .atg-tab-card-overlay {
	opacity: .6;
}

/* active */
.atg-tab-card.is-active {
	transform:  scale(1.04);
	box-shadow: 0 8px 32px rgba(99,102,241,.70);
	z-index:    2;
}

/* ---------- Overlay ---------- */
.atg-tab-card-overlay {
	position:      absolute;
	inset:         0;
	background:    rgba(0,0,0,.40);
	border-radius: inherit;
	transition:    background var(--atg-transition), opacity var(--atg-transition);
}
.atg-tab-card.is-active .atg-tab-card-overlay {
	background: rgba(79,70,229,.72);
}

/* ---------- Card body ---------- */
.atg-tab-card-body {
	position:        absolute;
	inset:           0;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	padding:         14px 16px;
	z-index:         1;
}

/* icon top-left */
.atg-tab-card-icon {
	position:   absolute;
	top:        14px;
	left:       16px;
	color:      #fff;
	font-size:  22px;
	line-height: 1;
	filter:     drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.atg-tab-card-icon svg { width: 22px; height: 22px; fill: #fff; }

/* text */
.atg-tab-card-text {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}
.atg-tab-card-title {
	display:       block;
	font-size:     1rem;
	font-weight:   700;
	color:         #fff;
	line-height:   1.25;
	text-shadow:   0 1px 8px rgba(0,0,0,.55);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
.atg-tab-card-subtitle {
	display:       block;
	font-size:     .75rem;
	color:         rgba(255,255,255,.78);
	text-shadow:   0 1px 4px rgba(0,0,0,.40);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* ====================================================================
   3. GALLERY PANELS WRAPPER
   ==================================================================== */
.atg-gallery-panels-wrapper {
	margin-top: 24px;
	position:   relative;
}

/* ====================================================================
   4. GALLERY PANEL
   ==================================================================== */
.atg-gallery-panel {
	display:       none;
	background:    #0f0f13;
	border-radius: 16px;
	padding:       32px;
}
.atg-gallery-panel.is-active { display: block; }

/* ---- Panel entry animations ---- */
.atg-widget[data-transition="fade"]  .atg-gallery-panel.atg-entering { animation: atg-fade-in  var(--atg-duration) var(--atg-ease) both; }
.atg-widget[data-transition="slide"] .atg-gallery-panel.atg-entering { animation: atg-slide-in var(--atg-duration) var(--atg-ease) both; }
.atg-widget[data-transition="zoom"]  .atg-gallery-panel.atg-entering { animation: atg-zoom-in  var(--atg-duration) var(--atg-ease) both; }

@keyframes atg-fade-in  { from { opacity:0 }                            to { opacity:1 } }
@keyframes atg-slide-in { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:translateY(0) } }
@keyframes atg-zoom-in  { from { opacity:0; transform:scale(.94) }       to { opacity:1; transform:scale(1) } }

/* description */
.atg-gallery-description {
	font-size:   .925rem;
	color:       rgba(255,255,255,.65);
	margin:      0 0 24px;
	line-height: 1.65;
}
.atg-no-images {
	color:      rgba(255,255,255,.35);
	font-style: italic;
	font-size:  .9rem;
	text-align: center;
	padding:    40px 0;
	margin:     0;
}

/* ====================================================================
   5. GALLERY INNER — shared base
   ==================================================================== */
.atg-gallery-inner {
	--atg-gallery-gap: 12px;
	--atg-cols:        4;
	--atg-row-height:  220px;
	width:             100%;
}

/* ====================================================================
   5a. GRID LAYOUT
   ==================================================================== */
.atg-layout-grid {
	display:               grid;
	grid-template-columns: repeat(var(--atg-cols, 4), 1fr);
	gap:                   var(--atg-gallery-gap, 12px);
}

.atg-layout-grid .atg-gallery-item {
	aspect-ratio: 1 / 1; /* overridden by Elementor image_ratio control */
}

/* ====================================================================
   5b. MASONRY LAYOUT  (CSS columns)
   ==================================================================== */
.atg-layout-masonry {
	-webkit-columns: var(--atg-cols, 4);
	        columns: var(--atg-cols, 4);
	-webkit-column-gap: var(--atg-gallery-gap, 12px);
	        column-gap: var(--atg-gallery-gap, 12px);
	display:         block; /* override grid */
}

.atg-layout-masonry .atg-gallery-item {
	display:                    block;
	width:                      100%;
	aspect-ratio:               unset;       /* natural image height */
	-webkit-column-break-inside: avoid;
	          break-inside:      avoid;
	page-break-inside:           avoid;
	margin-bottom:               var(--atg-gallery-gap, 12px);
}

.atg-layout-masonry .atg-gallery-item img {
	height:     auto;
	object-fit: cover; /* keep cover for portrait-heavy sets */
}

/* ====================================================================
   5c. JUSTIFIED LAYOUT  (JS positions items absolutely)
   ==================================================================== */
.atg-layout-justified {
	position: relative;
	display:  block;
	overflow: hidden;   /* clip while JS calculates */
	/* height set by JS after calculation */
}

/* While JS hasn't run yet show a minimal placeholder height */
.atg-layout-justified:empty,
.atg-layout-justified.atg-jf-loading { min-height: 120px; }

.atg-layout-justified .atg-gallery-item {
	position:     absolute;
	aspect-ratio: unset;
	overflow:     hidden;
}
.atg-layout-justified .atg-gallery-item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ====================================================================
   6. GALLERY ITEM — shared
   ==================================================================== */
.atg-gallery-item {
	position:      relative;
	border-radius: 8px;
	background:    #1a1a24;
	cursor:        pointer;
	overflow:      hidden;
}

.atg-gallery-item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--atg-transition);
}

/* hover zoom */
.atg-gallery--zoom .atg-gallery-item:hover img { transform: scale(1.10); }

/* hover overlay */
.atg-gallery-item-overlay {
	position:        absolute;
	inset:           0;
	background:      rgba(10,10,20,.52);
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	transition:      opacity var(--atg-transition);
}
.atg-gallery-item:hover .atg-gallery-item-overlay { opacity: 1; }

.atg-zoom-icon {
	color:      #fff;
	font-size:  1.5rem;
	filter:     drop-shadow(0 2px 8px rgba(0,0,0,.6));
	transform:  scale(.8);
	transition: transform var(--atg-transition);
}
.atg-gallery-item:hover .atg-zoom-icon { transform: scale(1); }

/* lightbox anchor reset */
.atg-gallery-item a {
	display:         block;
	width:           100%;
	height:          100%;
	text-decoration: none;
	color:           inherit;
}

/* ====================================================================
   7. LIGHTBOX
   ==================================================================== */
.atg-lightbox-backdrop {
	position:        fixed;
	inset:           0;
	background:      rgba(0,0,0,.90);
	z-index:         99999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	backdrop-filter: blur(6px);
	opacity:         0;
	pointer-events:  none;
	transition:      opacity .3s ease;
}
.atg-lightbox-backdrop.atg-lb-open { opacity:1; pointer-events:all; }

.atg-lightbox-inner {
	position:   relative;
	max-width:  92vw;
	max-height: 90vh;
}
.atg-lightbox-inner img {
	max-width:     90vw;
	max-height:    88vh;
	border-radius: 8px;
	object-fit:    contain;
	box-shadow:    0 24px 80px rgba(0,0,0,.65);
	display:       block;
}

.atg-lb-close {
	position:        absolute;
	top:             -44px;
	right:           0;
	width:           36px;
	height:          36px;
	border:          none;
	background:      rgba(255,255,255,.12);
	color:           #fff;
	border-radius:   50%;
	cursor:          pointer;
	font-size:       1.2rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background .2s;
}
.atg-lb-close:hover { background:rgba(255,255,255,.25); }

.atg-lb-prev,
.atg-lb-next {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	width:           44px;
	height:          44px;
	border:          none;
	background:      rgba(255,255,255,.12);
	color:           #fff;
	border-radius:   50%;
	cursor:          pointer;
	font-size:       1.1rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background .2s;
}
.atg-lb-prev { left: -56px; }
.atg-lb-next { right:-56px; }
.atg-lb-prev:hover,
.atg-lb-next:hover { background:rgba(255,255,255,.25); }

/* ====================================================================
   8. RESPONSIVE FALLBACKS
      Elementor responsive controls handle breakpoint-specific values via
      CSS custom properties injected inline. These media queries provide
      sensible raw-HTML / no-Elementor defaults only.
   ==================================================================== */
@media (max-width: 1024px) {
	.atg-widget { --atg-tab-cols: 3; --atg-cols: 3; }
}

@media (max-width: 767px) {
	.atg-widget        { --atg-tab-cols: 2; --atg-cols: 1; }
	.atg-gallery-panel { padding: 20px; }
	.atg-tab-card      { height: 160px; }
	.atg-lb-prev       { left:  -16px; }
	.atg-lb-next       { right: -16px; }
	.atg-lightbox-inner img { max-width: 96vw; }
}

@media (max-width: 480px) {
	.atg-widget        { --atg-tab-cols: 2; }
	.atg-tabs-bar      { gap: 10px; }
	.atg-tab-card      { height: 130px; }
	.atg-gallery-panel { padding: 14px; }
}