/*
 * Telsa Grid — front-end styles.
 *
 * Re-authored under the same tg-* class names the old plugin used, so each grid's saved custom CSS and the
 * theme continue to apply. Layout is a horizontal flex carousel: tile width, gutter and edge spacing are set
 * per breakpoint by the inline <style> the renderer emits, and the tile height comes from an aspect-ratio.
 * The prev/next arrows are wired up by assets/js/telsa-grid.js.
 *
 * Two skins are implemented, matching the only ones the site uses:
 *   dacca — icon tile; a coloured overlay and a centred title fade/scale in on hover.
 *   alofi — plain logo tile that links out.
 */

/* ---- Base layout: a horizontal carousel of fixed-proportion tiles ------ */
.tg-grid-wrapper { position: relative; display: block; width: 100%; min-height: 1px; }
.tg-grid-wrapper .tg-grid-sizer,
.tg-grid-wrapper .tg-gutter-sizer { display: none; }

/* The slider is the viewport; the holder is the scrolling track. */
.tg-grid-slider { position: relative; display: block; width: 100%; overflow: hidden; }
.tg-grid-holder {
	box-sizing: border-box; /* the per-tier half-gutter padding must sit inside the 100% width */
	display: flex; flex-wrap: nowrap; width: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}
.tg-grid-holder::-webkit-scrollbar { display: none; }

/* Each tile: fixed proportion, width (flex-basis) set per breakpoint by the inline style. */
.tg-grid-holder .tg-item {
	position: relative; display: block; margin: 0; padding: 0; overflow: hidden;
	flex: 0 0 auto; scroll-snap-align: start;
}
.tg-item .tg-item-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tg-item .tg-atv-anim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tg-item .tg-item-media-holder,
.tg-item .tg-item-media-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.tg-item .tg-item-image {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background-size: cover; background-position: center center; background-repeat: no-repeat;
}

/* ---- Prev / next navigation arrows ------------------------------------- */
/* Same placement as the old plugin: a full-height strip at each edge (inside the grid) that lets clicks
   through, holding a 40x40 arrow centred vertically. The chevron is a thin line like the old icon-font glyph,
   drawn with a CSS mask so it takes the arrow's colour (base #1e73be / hover accent, set per grid). */
.tg-grid-area-left,
.tg-grid-area-right {
	position: absolute; top: 0; bottom: 0; z-index: 5; height: 100%;
	display: flex; align-items: center; pointer-events: none;
}
.tg-grid-area-left { left: 0; }
.tg-grid-area-right { right: 0; }
.tg-grid-area-left[hidden],
.tg-grid-area-right[hidden] { display: none; }
.tg-grid-area-inner, .tg-grid-area-wrapper { display: flex; align-items: center; height: 100%; }
.tg-left-arrow, .tg-right-arrow {
	position: relative; display: block; width: 40px; height: 40px; margin: 0; padding: 0;
	pointer-events: auto; cursor: pointer; user-select: none; color: #1e73be;
	transition: color 0.3s linear, opacity 0.3s linear;
}
/* End of the track: dimmed, like the old slider's tg-disabled state (the click is ignored by the script). */
.tg-left-arrow.tg-disabled, .tg-right-arrow.tg-disabled { opacity: 0.5; cursor: default; }
.tg-left-arrow i, .tg-right-arrow i { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.tg-icon-left-arrow::before, .tg-icon-right-arrow::before {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 9px; height: 18px; margin: -9px 0 0 -4.5px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
.tg-icon-left-arrow::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'%3E%3Cpath d='M8.5.5.8 9l7.7 8.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'%3E%3Cpath d='M8.5.5.8 9l7.7 8.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}
.tg-icon-right-arrow::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'%3E%3Cpath d='M.5.5 8.2 9 .5 17.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'%3E%3Cpath d='M.5.5 8.2 9 .5 17.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* ---- Light / dark text colours (as the old per-grid style set them) ---- */
.tg-item .tg-dark, .tg-item .tg-dark h1, .tg-item .tg-dark h2, .tg-item .tg-dark h3,
.tg-item .tg-dark h4, .tg-item .tg-dark h5, .tg-item .tg-dark h6,
.tg-item .tg-dark h1 a, .tg-item .tg-dark h2 a, .tg-item .tg-dark h3 a,
.tg-item .tg-dark h4 a, .tg-item .tg-dark h5 a, .tg-item .tg-dark h6 a,
.tg-item .tg-dark a { color: #444444; }
.tg-item .tg-light, .tg-item .tg-light h1, .tg-item .tg-light h2, .tg-item .tg-light h3,
.tg-item .tg-light h4, .tg-item .tg-light h5, .tg-item .tg-light h6,
.tg-item .tg-light h1 a, .tg-item .tg-light h2 a, .tg-item .tg-light h3 a,
.tg-item .tg-light h4 a, .tg-item .tg-light h5 a, .tg-item .tg-light h6 a,
.tg-item .tg-light a { color: #ffffff; }

/* ======================================================================= */
/* dacca skin                                                              */
/* ======================================================================= */
.dacca { cursor: pointer; }
.dacca.tg-item, .dacca.tg-item * { box-sizing: border-box; border-radius: 7px; }

.dacca .tg-item-content-holder,
.dacca .tg-item-content-inner,
.dacca .tg-item-overlay,
.dacca .tg-media-button,
.dacca .tg-item-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; }

.dacca .tg-item-content-holder,
.dacca .tg-item-link { overflow: hidden; z-index: 2; background: none !important; }

.dacca .tg-media-button { display: none; }

/* Overlay + content reveal on hover. */
.dacca .tg-item-overlay,
.dacca .tg-item-content-inner {
	z-index: 2; opacity: 0;
	transition: all 0.4s cubic-bezier(0.12, 0.65, 0.4, 1);
}
.dacca:hover .tg-item-overlay { opacity: 1; }

.dacca .tg-item-content-inner {
	padding: 30px;
	transform: scale3d(0.8, 0.8, 0.8);
	transform-origin: center center;
}
.dacca:hover .tg-item-content-inner { opacity: 1; transform: scale3d(1, 1, 1); }

/* Centre the title within the content layer (both axes). */
.dacca .tg-item-content-inner { display: flex; align-items: center; justify-content: center; }
.dacca .tg-center-holder { position: relative; display: block; width: 100%; text-align: center; }
.dacca .tg-center-inner { position: relative; display: block; width: 100%; }

/* Base skin defaults. Deliberately NO !important here, so each grid's own custom CSS (which the old editor
   saved with !important) always wins, whatever order the stylesheets load in. */
.dacca .tg-item-title,
.dacca .tg-item-title a {
	position: relative; display: block; width: 100%;
	font-size: 26px; line-height: 30px; font-weight: 700;
	margin: 0; padding: 0 30px; text-align: center;
	text-decoration: none; border: none; box-shadow: none;
	transition: opacity 0.4s ease, color 0.25s ease, transform 0.25s ease-in-out;
}
.dacca .tg-item-title a { padding: 0; }
.dacca .tg-item-link { z-index: 3; }

@media only screen and (max-width: 980px) {
	.dacca .tg-item-title, .dacca .tg-item-title a { font-size: 26px; line-height: 36px; }
}

/* ======================================================================= */
/* alofi skin                                                              */
/* ======================================================================= */
.alofi .tg-item-link {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2;
	text-decoration: none; border: none; box-shadow: none;
}
.alofi .tg-item-image {
	transition: opacity 0.25s ease, transform 0.3s ease-in-out;
}