/**
 * TGJ Image Background Block Styles
 * Mobile-first: min-width queries on the theme's breakpoints only
 * (tablet 768px, laptop 1024px — tgj-design-tokens.md §1).
 *
 * Typography is the theme's own; the block sets colour, not type.
 *
 * Uses shared variables from journal-blocks-variables.css
 */

@import url('journal-blocks-variables.css');

/* Base styles - Mobile first */
.jc-block.tgj-image-background {
	position: relative;
	display: block;
	width: 100%;
	height: var(--ib-height, auto);
}

/*
 * Full screen modifiers. Each toggle covers one range only, so each
 * breakpoint clears the range below before applying its own.
 */
.jc-block.tgj-image-background.tgj-image-background--full-screen-mobile {
	--ib-height: 100lvh;
}

@media (min-width: 768px) {
	.jc-block.tgj-image-background.tgj-image-background--full-screen-mobile {
		--ib-height: auto;
	}

	.jc-block.tgj-image-background.tgj-image-background--full-screen-tablet {
		--ib-height: 100lvh;
	}
}

@media (min-width: 1024px) {
	.jc-block.tgj-image-background.tgj-image-background--full-screen-tablet {
		--ib-height: auto;
	}

	.jc-block.tgj-image-background.tgj-image-background--full-screen-desktop {
		--ib-height: 100lvh;
	}
}

/*
 * Constrained height: caps a tall (square or portrait) image from tablet up,
 * cropping it. A cap rather than a fixed height, so a short image is never
 * stretched. Full screen wins at any breakpoint where it is also on.
 */
@media (min-width: 768px) {
	.jc-block.tgj-image-background.tgj-image-background--constrained:not(.tgj-image-background--full-screen-tablet) .tgj-image-background__image img {
		max-height: 710px;
	}
}

@media (min-width: 1024px) {
	.jc-block.tgj-image-background.tgj-image-background--constrained.tgj-image-background--full-screen-tablet .tgj-image-background__image img {
		max-height: 710px;
	}

	.jc-block.tgj-image-background.tgj-image-background--constrained.tgj-image-background--full-screen-desktop .tgj-image-background__image img {
		max-height: none;
	}
}

/*
 * Background image layer. The 100% heights resolve to auto unless a full
 * screen modifier has given the block a height.
 */
.jc-block.tgj-image-background .tgj-image-background__image {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.jc-block.tgj-image-background .tgj-image-background__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * The overlay layers cover the image, not the band: the band's spacing is
 * padding around the image, so they are inset by the same amounts, stepping
 * at laptop as the band does (theme _layout.scss).
 */
.jc-block.tgj-image-background .tgj-image-background__dark-overlay,
.jc-block.tgj-image-background .tgj-image-background__overlay {
	top: var(--band-pt-m, var(--band-pt, 0));
	bottom: var(--band-pb-m, var(--band-pb, 0));
}

@media (min-width: 1024px) {
	.jc-block.tgj-image-background .tgj-image-background__dark-overlay,
	.jc-block.tgj-image-background .tgj-image-background__overlay {
		top: var(--band-pt, 0);
		bottom: var(--band-pb, 0);
	}
}

/* Overlay for text legibility: flat or gradient */
.jc-block.tgj-image-background .tgj-image-background__dark-overlay {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 2;
	display: none;
}

.jc-block.tgj-image-background.tgj-image-background--has-overlay .tgj-image-background__dark-overlay {
	display: block;
}

/* Gradient darkens from the text's corner toward the opposite one */
.jc-block.tgj-image-background.tgj-image-background--gradient .tgj-image-background__dark-overlay {
	display: block;
	background: linear-gradient(var(--ib-gradient-angle, 180deg), rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
}

.tgj-image-background--gradient.tgj-image-background--v-top.tgj-image-background--h-left       { --ib-gradient-angle: 135deg; }
.tgj-image-background--gradient.tgj-image-background--v-top.tgj-image-background--h-center     { --ib-gradient-angle: 180deg; }
.tgj-image-background--gradient.tgj-image-background--v-top.tgj-image-background--h-right      { --ib-gradient-angle: 225deg; }
.tgj-image-background--gradient.tgj-image-background--v-center.tgj-image-background--h-left    { --ib-gradient-angle: 90deg; }
.tgj-image-background--gradient.tgj-image-background--v-center.tgj-image-background--h-center  { --ib-gradient-angle: 180deg; }
.tgj-image-background--gradient.tgj-image-background--v-center.tgj-image-background--h-right   { --ib-gradient-angle: 270deg; }
.tgj-image-background--gradient.tgj-image-background--v-bottom.tgj-image-background--h-left    { --ib-gradient-angle: 45deg; }
.tgj-image-background--gradient.tgj-image-background--v-bottom.tgj-image-background--h-center  { --ib-gradient-angle: 0deg; }
.tgj-image-background--gradient.tgj-image-background--v-bottom.tgj-image-background--h-right   { --ib-gradient-angle: 315deg; }

/* Overlay layer for content positioning */
.jc-block.tgj-image-background .tgj-image-background__overlay {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 3;
	display: flex;
}

/* Content container */
.jc-block.tgj-image-background .tgj-image-background__container {
	width: 100%;
	box-sizing: border-box;
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
}

/*
 * A full-width wrap has no gutter of its own, so on phones the text takes
 * the gutter here; the other widths get it from their wrap.
 */
.jc-block.tgj-image-background .tgj-wrap--full.tgj-image-background__container {
	--ib-inset: var(--gutter);
}

.jc-block.tgj-image-background .tgj-image-background__content {
	padding-left: var(--ib-inset, 0);
	padding-right: var(--ib-inset, 0);
	color: var(--ib-fg, inherit);
}

/*
 * Narrow text: the cap is on the text column, so the side padding sits
 * outside it (content-box).
 */
.jc-block.tgj-image-background.tgj-image-background--narrow-text .tgj-image-background__content {
	box-sizing: content-box;
	max-width: 400px;
}

.jc-block.tgj-image-background.tgj-image-background--narrow-text.tgj-image-background--h-center .tgj-image-background__content {
	margin-inline: auto;
}

.jc-block.tgj-image-background.tgj-image-background--narrow-text.tgj-image-background--h-right .tgj-image-background__content {
	margin-left: auto;
}

/*
 * A quote on the image: Title size in the headline face, a step below TGJ
 * Quote's Large title because it shares the space with a photo. The dash
 * before the attribution is added here, so it isn't typed.
 */
/* The theme's base blockquote sets the body colour; the block's text colour wins */
.jc-block.tgj-image-background .wp-block-quote {
	margin: 0 0 var(--space-24);
	padding: 0;
	border: none;
	color: inherit;
}

.jc-block.tgj-image-background .wp-block-quote:last-child {
	margin-bottom: 0;
}

.jc-block.tgj-image-background .wp-block-quote p {
	margin: 0;
	font-family: var(--font-heading);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: var(--tgj-title);
	font-style: normal;
	line-height: var(--tgj-lh-title);
	color: inherit;
	text-wrap: pretty;
}

.jc-block.tgj-image-background .wp-block-quote p + p {
	margin-top: var(--space-16);
}

.jc-block.tgj-image-background .wp-block-quote cite {
	display: block;
	margin-top: var(--space-16);
	font-family: var(--font-heading);
	font-size: var(--tgj-body);
	font-style: normal;
	line-height: var(--tgj-lh-body);
	color: inherit;
}

.jc-block.tgj-image-background .wp-block-quote cite::before {
	content: '\2014';
}

/* Horizontal Positioning - Left */
.jc-block.tgj-image-background.tgj-image-background--h-left .tgj-image-background__overlay {
	justify-content: flex-start;
}

.jc-block.tgj-image-background.tgj-image-background--h-left .tgj-image-background__content {
	text-align: left;
}

/* Horizontal Positioning - Center */
.jc-block.tgj-image-background.tgj-image-background--h-center .tgj-image-background__overlay {
	justify-content: center;
}

.jc-block.tgj-image-background.tgj-image-background--h-center .tgj-image-background__content {
	text-align: center;
}

/* Horizontal Positioning - Right */
.jc-block.tgj-image-background.tgj-image-background--h-right .tgj-image-background__overlay {
	justify-content: flex-end;
}

.jc-block.tgj-image-background.tgj-image-background--h-right .tgj-image-background__content {
	text-align: left;
}

/* Vertical Positioning */
.jc-block.tgj-image-background.tgj-image-background--v-top .tgj-image-background__overlay {
	align-items: flex-start;
}

.jc-block.tgj-image-background.tgj-image-background--v-center .tgj-image-background__overlay {
	align-items: center;
}

.jc-block.tgj-image-background.tgj-image-background--v-bottom .tgj-image-background__overlay {
	align-items: flex-end;
}

/* Tablet and up */
@media (min-width: 768px) {
	.jc-block.tgj-image-background .tgj-image-background__content {
		padding-left: var(--space-40);
		padding-right: var(--space-40);
	}

	.jc-block.tgj-image-background.tgj-image-background--narrow-text .tgj-image-background__content {
		max-width: 500px;
	}
}

/* Laptop and up */
@media (min-width: 1024px) {
	.jc-block.tgj-image-background .tgj-image-background__container {
		padding-top: var(--space-64);
		padding-bottom: var(--space-64);
	}

	.jc-block.tgj-image-background .tgj-image-background__content {
		padding-left: calc(var(--space-96) + var(--space-32));
		padding-right: calc(var(--space-96) + var(--space-32));
	}

	.jc-block.tgj-image-background.tgj-image-background--narrow-text .tgj-image-background__content {
		max-width: 600px;
	}
}

/*
 * Text below the image on phones: the text leaves the image for a dark panel
 * under it, so the overlay layers have nothing to darken. The text colour is
 * set for the panel, not the image. Tablet up overlays as usual.
 */
.jc-block.tgj-image-background.tgj-image-background--text-below-mobile .tgj-image-background__overlay {
	position: static;
	background: var(--tgj-black);
}

.jc-block.tgj-image-background.tgj-image-background--text-below-mobile .tgj-image-background__dark-overlay {
	visibility: hidden;
}

.jc-block.tgj-image-background.tgj-image-background--text-below-mobile .tgj-image-background__content {
	color: var(--tgj-cream);
}

@media (min-width: 768px) {
	.jc-block.tgj-image-background.tgj-image-background--text-below-mobile .tgj-image-background__overlay {
		position: absolute;
		background: none;
	}

	.jc-block.tgj-image-background.tgj-image-background--text-below-mobile .tgj-image-background__dark-overlay {
		visibility: visible;
	}

	.jc-block.tgj-image-background.tgj-image-background--text-below-mobile .tgj-image-background__content {
		color: var(--ib-fg, inherit);
	}
}

/* Editor-specific styles */
.wp-block[data-type="journal-blocks/tgj-image-background"] .tgj-image-background {
	min-height: 400px;
}

/* Disable pointer events on overlay so clicks pass through to button */
.wp-block[data-type="journal-blocks/tgj-image-background"] .tgj-image-background__overlay {
	pointer-events: none;
}

/* Re-enable pointer events on container and content */
.wp-block[data-type="journal-blocks/tgj-image-background"] .tgj-image-background__container {
	pointer-events: auto;
	max-height: 400px;
	overflow-y: auto;
}

.wp-block[data-type="journal-blocks/tgj-image-background"] .tgj-image-background__content {
	pointer-events: auto;
	position: relative;
	z-index: 3;
}