/* ══════════════════════════════════════════════════════════════
   TGJ Custom Scroller — standalone frontend styles
   No dependency on .journal-blocks-scroller or .journal-blocks.
   ══════════════════════════════════════════════════════════════ */

/* ── Outer block ──────────────────────────────────────────── */

.tgj-custom-scroller {
	--gap: 20px;
	padding-top: var(--gap);
	padding-bottom: var(--gap);
}

@media (min-width: 640px) {
	.tgj-custom-scroller { --gap: 30px; }
}

@media (min-width: 1024px) {
	.tgj-custom-scroller { --gap: 40px; }
}

/* ── Inner container (max-width centred, matches grid-row) ── */

.tgj-custom-scroller .inner {
	max-width:    1280px;
	margin-left:  auto;
	margin-right: auto;
}

.page-template-page-full-bleed .tgj-custom-scroller .inner {
	padding-left:  10px;
	padding-right: 10px;
}

@media (min-width: 1024px) {
	.page-template-page-full-bleed .tgj-custom-scroller .inner {
		padding-left:  20px;
		padding-right: 20px;
	}
}

/* ── Header (above scroller, title / text / CTA) ─────────── */

.tgj-custom-scroller .header {
	margin-bottom: 30px;
}

.tgj-custom-scroller .header h2 {
	font-size: 26px;
	margin-bottom: 12px;
}

.tgj-custom-scroller .header p {
	margin-bottom: 0;
}

/* Non-default layouts: title left, CTA right */
.tgj-custom-scroller.six-panels .header,
.tgj-custom-scroller.four-panels .header,
.tgj-custom-scroller.three-feature-panels .header,
.tgj-custom-scroller.two-feature-panels .header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

/* default-layout: header centred on mobile, hidden at desktop
   (reappears as the first carousel cell instead) */
.tgj-custom-scroller.default-layout .header {
	text-align: center;
}

@media (min-width: 1024px) {
	.tgj-custom-scroller.default-layout .header {
		display: none;
	}
}

/* ── Links ────────────────────────────────────────────────── */

.tgj-custom-scroller a {
	text-decoration: none;
}

/* ── Flickity container ───────────────────────────────────── */

.tgj-custom-scroller .journal-scroller {
	clear: both;
}

/* ── Carousel header cell (default-layout desktop only) ───── */

.tgj-custom-scroller .carousel-cell.header {
	display: none;
}

@media (min-width: 1024px) {
	.tgj-custom-scroller.default-layout .carousel-cell.header {
		display: flex;
		align-items: center;
		text-align: left;
	}
}

/* ── Standard cell base ───────────────────────────────────── */

.tgj-custom-scroller .carousel-cell.standard {
	/* No padding-left — gaps handled entirely by margin-right */
}

/* ── Overlay (when gradient is off) ──────────────────────── */

.tgj-custom-scroller .overlay {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background-color: #231f20;
	opacity: 0.25;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* ── Image ratio ──────────────────────────────────────────── */

.tgj-custom-scroller .carousel-cell.standard .tgj-cs-cell {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}

/* Natural: image drives the cell height */
.tgj-custom-scroller .tgj-cs-ratio--natural .image img,
.tgj-custom-scroller .tgj-cs-ratio--natural .image picture {
	display: block;
	width: 100%;
	height: auto;
}

/* Portrait: 3 ∶ 4 */
.tgj-custom-scroller .tgj-cs-ratio--portrait .image {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.tgj-custom-scroller .tgj-cs-ratio--portrait .image img,
.tgj-custom-scroller .tgj-cs-ratio--portrait .image picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Square: 1 ∶ 1 */
.tgj-custom-scroller .tgj-cs-ratio--square .image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.tgj-custom-scroller .tgj-cs-ratio--square .image img,
.tgj-custom-scroller .tgj-cs-ratio--square .image picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Slide text overlay ───────────────────────────────────── */

.tgj-custom-scroller .tgj-cs-cell .text {
	position:  absolute;
	padding:   12px 0;
	color:     #fff;
	width:     max-content;
	max-width: 80%;
}

.tgj-custom-scroller .tgj-cs-text--top-left      { top:  5%;   left:  0;    }
.tgj-custom-scroller .tgj-cs-text--top-center     { top:  5%;   left:  50%;  transform: translateX(-50%); text-align: center; }
.tgj-custom-scroller .tgj-cs-text--top-right      { top:  5%;   right: 0;    text-align: right; }
.tgj-custom-scroller .tgj-cs-text--center-left    { top:  50%;  left:  0;    transform: translateY(-50%); }
.tgj-custom-scroller .tgj-cs-text--center-center  { top:  50%;  left:  50%;  transform: translate(-50%, -50%); text-align: center; }
.tgj-custom-scroller .tgj-cs-text--center-right   { top:  50%;  right: 0;    transform: translateY(-50%); text-align: right; }
.tgj-custom-scroller .tgj-cs-text--bottom-left    { bottom: 5%; left:  0;    }
.tgj-custom-scroller .tgj-cs-text--bottom-center  { bottom: 5%; left:  50%;  transform: translateX(-50%); text-align: center; }
.tgj-custom-scroller .tgj-cs-text--bottom-right   { bottom: 5%; right: 0;    text-align: right; }

/* ── Slide text typography ────────────────────────────────── */

.tgj-custom-scroller .tgj-cs-title,
.tgj-custom-scroller .tgj-cs-subtitle,
.tgj-custom-scroller .tgj-cs-cta {
	margin: 0;
	line-height: 1.2;
}

.tgj-custom-scroller .tgj-cs-title {
	font-family: TiemposHeadlineLight, serif;
	font-weight: 300;
	font-size: 15px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.tgj-custom-scroller .tgj-cs-subtitle {
	font-family: TiemposTextRegular, serif;
	font-size: 15px;
	margin-bottom: 4px;
}

.tgj-custom-scroller .tgj-cs-cta {
	font-family: TiemposTextRegular, serif;
	font-size: 15px;
	font-style: italic;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 640px) {
	.tgj-custom-scroller .tgj-cs-title { font-size: 22px; }
}

@media (min-width: 1024px) {
	.tgj-custom-scroller .tgj-cs-title { font-size: 30px; }
}

/* ── Gradient overlays ────────────────────────────────────── */

.tgj-cs-gradient {
	position:      absolute;
	inset:         0;
	pointer-events: none;
}

.tgj-cs-gradient--top-left      { background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--top-center    { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--top-right     { background: linear-gradient(225deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--center-left   { background: linear-gradient(90deg,  rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--center-center { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--center-right  { background: linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--bottom-left   { background: linear-gradient(45deg,  rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--bottom-center { background: linear-gradient(0deg,   rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }
.tgj-cs-gradient--bottom-right  { background: linear-gradient(315deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%); }

/* ── Flickity prev/next buttons ───────────────────────────── */

.tgj-custom-scroller .flickity-prev-next-button {
	display: none;
	top: 50%;
	transform: translateY(-50%);
	background: #000;
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.tgj-custom-scroller .flickity-prev-next-button:hover {
	opacity: 0.75;
}

.tgj-custom-scroller .flickity-prev-next-button.next     { right: -10px; }
.tgj-custom-scroller .flickity-prev-next-button.previous { left:  -10px; }

@media (min-width: 1024px) {
	.tgj-custom-scroller .flickity-prev-next-button {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.tgj-custom-scroller .flickity-button:disabled { display: none; }

/* All slides fit — no overflow, hide both arrows */
.tgj-custom-scroller.is-contained .flickity-prev-next-button { display: none; }

.tgj-custom-scroller .flickity-button-icon {
	position: relative;
	left: 0;
	top: 0;
}

/* ── Background colours ───────────────────────────────────── */

.tgj-custom-scroller.background-journal-grey  { background: rgb(248, 248, 248); }
.tgj-custom-scroller.background-journal-white { background: #fff; }

/* ══════════════════════════════════════════════════════════════
   Cell widths & gaps
   Formula: width = (100% - (ceil(N) - 1) × gap) / N
   Gaps: 20px mobile · 30px tablet (640px+) · 40px desktop (1024px+)

   Panel counts:
                        mobile  tablet  desktop
   default-layout         2.5    2.5      3
   two-feature-panels     2.5    2.5      2
   three-feature-panels   2.5    2.5      3
   four-panels            2.5    2.5      4
   six-panels             2.5    4        6
   ══════════════════════════════════════════════════════════════ */

.tgj-custom-scroller .journal-scroller .carousel-cell.standard {
	margin-right: var(--gap);
}

.tgj-custom-scroller .journal-scroller .carousel-cell.standard:last-child {
	margin-right: 0;
}

/* Mobile + tablet default: 2.5 panels = (100% - 2×gap) / 2.5 */
.tgj-custom-scroller .journal-scroller .carousel-cell.standard {
	width: calc((100% - 2 * var(--gap)) / 2.5);
}

/* ── Tablet (640px+) ─────────────────────────────────────── */

@media (min-width: 640px) {

	/* six-panels tablet: 4 panels = (100% - 3×gap) / 4 */
	.tgj-custom-scroller.six-panels .journal-scroller .carousel-cell.standard {
		width: calc((100% - 3 * var(--gap)) / 4);
	}

}

/* ── Desktop (1024px+) ───────────────────────────────────── */

@media (min-width: 1024px) {

	/* default-layout header cell: same width as a standard cell */
	.tgj-custom-scroller.default-layout .journal-scroller .carousel-cell.header {
		width: calc((100% - 2 * var(--gap)) / 3);
		margin-right: var(--gap);
	}

	/* default-layout + three-feature-panels: 3 panels = (100% - 2×gap) / 3 */
	.tgj-custom-scroller.default-layout .journal-scroller .carousel-cell.standard,
	.tgj-custom-scroller.three-feature-panels .journal-scroller .carousel-cell.standard {
		width: calc((100% - 2 * var(--gap)) / 3);
	}

	/* two-feature-panels: 2 panels = (100% - 1×gap) / 2 */
	.tgj-custom-scroller.two-feature-panels .journal-scroller .carousel-cell.standard {
		width: calc((100% - var(--gap)) / 2);
	}

	/* four-panels: 4 panels = (100% - 3×gap) / 4 */
	.tgj-custom-scroller.four-panels .journal-scroller .carousel-cell.standard {
		width: calc((100% - 3 * var(--gap)) / 4);
	}

	/* six-panels: 6 panels = (100% - 5×gap) / 6 */
	.tgj-custom-scroller.six-panels .journal-scroller .carousel-cell.standard {
		width: calc((100% - 5 * var(--gap)) / 6);
	}

}