/**
 * TGJ Two Panel Block Styles
 * Mobile-first responsive design
 *
 * Uses shared variables from journal-blocks-variables.css.
 *
 * The type here also reads the theme's --tgj-* tokens, which this plugin does
 * not define. On the front end they come from app-tgj.css; in the editor from
 * the theme's blocks-editor.css, which WordPress enqueues because theme blocks
 * register it as their editor_style. Without a TGJ theme active this block
 * falls back to unstyled type -- that is accepted, the plugin is not used
 * anywhere else.
 */

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

/* Base styles - Mobile first (small) - Stacked vertically */
/* The outer element is the band: it owns the background and the vertical
   spacing, which is now an author attribute rather than the 15/80 and 40/80 this
   rule used to hardcode. */
.jc-block.tgj-two-panel {
	display: block;
	/* No colour here: the render sets the default inline, so a stylesheet
	   fallback only shows when an author clears the colour, and brings back
	   the green they removed. */
}

/* The container is the wrap: width, max-width and the gutter come from .tgj-wrap
   in the theme. The 40px column gap is the block's own internal spacing and is
   left alone. */
.jc-block.tgj-two-panel .tgj-two-panel__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Mobile media positioning - Below text */
.jc-block.tgj-two-panel.tgj-two-panel--mobile-media-below .tgj-two-panel__media {
	order: 2;
}

.jc-block.tgj-two-panel.tgj-two-panel--mobile-media-below .tgj-two-panel__text {
	order: 1;
}

/* Media panel (image or video) */
.jc-block.tgj-two-panel .tgj-two-panel__media {
	width: 100%;
}

.jc-block.tgj-two-panel .tgj-two-panel__media img,
.jc-block.tgj-two-panel .tgj-two-panel__media video {
	display: block;
	width: 100%;
	height: auto;
}

.jc-block.tgj-two-panel .tgj-two-panel__media picture {
	display: block;
	width: 100%;
}

/* Video specific styles */
.jc-block.tgj-two-panel .tgj-two-panel__video {
	display: block;
	width: 100%;
	height: auto;
	background-color: #000;
}

/* Rounded corners modifier */
.jc-block.tgj-two-panel.tgj-two-panel--rounded .tgj-two-panel__media img,
.jc-block.tgj-two-panel.tgj-two-panel--rounded .tgj-two-panel__media video {
	border-radius: 5px;
}

/* Text panel */
.jc-block.tgj-two-panel .tgj-two-panel__text {
	width: 100%;
	padding-left: 25px;
	padding-right: 25px;
}

/* Typography - Base */
.jc-block.tgj-two-panel .tgj-two-panel__text h2 {
	margin: 0;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TiemposTextRegular", serif;
	font-size: var(--tgj-title);
	font-style: italic;
	line-height: var(--tgj-lh-title);
	color: inherit;
}

.jc-block.tgj-two-panel .tgj-two-panel__text p {
	margin: 0 0 16px 0;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TiemposTextRegular", serif;
	font-size: var(--tgj-body);
	font-style: normal;
	line-height: var(--tgj-lh-body);
	color: inherit;
}

.jc-block.tgj-two-panel .tgj-two-panel__text p:last-child {
	margin-bottom: 0;
}

/* Lists */
.jc-block.tgj-two-panel .tgj-two-panel__text ul,
.jc-block.tgj-two-panel .tgj-two-panel__text ol {
	margin: 0 0 16px 0;
	padding-left: 0;
	list-style: none;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TiemposTextRegular", serif;
	font-size: var(--tgj-body);
	font-style: normal;
	line-height: var(--tgj-lh-body);
	color: inherit;
}

.jc-block.tgj-two-panel .tgj-two-panel__text li {
	margin-bottom: 8px;
}

.jc-block.tgj-two-panel .tgj-two-panel__text li:last-child {
	margin-bottom: 0;
}

/* Text modifiers */
.jc-block.tgj-two-panel .tgj-two-panel__text p.is-small,
.jc-block.tgj-two-panel .tgj-two-panel__text ul.is-small,
.jc-block.tgj-two-panel .tgj-two-panel__text ol.is-small {
	/* Off-scale on purpose. The type scale stops at --tgj-small (14px) and
	   tgj-design-tokens.md 6.3 is explicit that sub-14 sizes do not belong to
	   any level, so this stays a literal. Raised 11 -> 12 alongside the body
	   copy going 15 -> 16. */
	font-size: 12px;
	line-height: var(--tgj-lh-body);
}

/* Relaxed leading, chosen per element rather than per block, so a panel can open
   out its heading and hold its body copy at the token leading (or the reverse).
   200% is what everything used before the type tokens landed.

   h3 is covered here because the TGJ Heading panel allows H2 or H3, but note
   that the base rules above style h2 only -- an h3 in a two panel currently
   inherits whatever the theme gives it. That gap predates this control. */
.jc-block.tgj-two-panel .tgj-two-panel__text h2.is-relaxed,
.jc-block.tgj-two-panel .tgj-two-panel__text h3.is-relaxed,
.jc-block.tgj-two-panel .tgj-two-panel__text p.is-relaxed,
.jc-block.tgj-two-panel .tgj-two-panel__text ul.is-relaxed,
.jc-block.tgj-two-panel .tgj-two-panel__text ol.is-relaxed {
	line-height: 200%;
}

/* Separator: core's 2px rule in the site hr's colour ($medium-gray), spaced
   on the spacing scale. 24 rather than 16 because paragraphs here are already
   16 apart, and a separator at that distance doesn't read as a break. */
.jc-block.tgj-two-panel .tgj-two-panel__text .wp-block-separator,
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text .wp-block-separator {
	width: 100%;
	max-width: none;
	margin: var(--space-24, 24px) 0;
	border: 0;
	border-top: 2px solid #cacaca;
}

/* Inline formatting */
.jc-block.tgj-two-panel .tgj-two-panel__text strong {
	font-weight: 700;
}

.jc-block.tgj-two-panel .tgj-two-panel__text em {
	font-style: italic;
}

/* Text links take the panel's colour. Buttons are left alone: a .button sets its
   own colours, and inheriting here turned its label black on its black fill once
   the panel's text colour could be cleared. */
.jc-block.tgj-two-panel .tgj-two-panel__text a:not(.button):not(.tgj-button__link) {
	color: inherit;
	text-decoration: underline;
}

.jc-block.tgj-two-panel .tgj-two-panel__text a:not(.button):not(.tgj-button__link):hover {
	opacity: 0.8;
}

/* Large screens - Side by side layout */
@media (min-width: 1024px) {
	.jc-block.tgj-two-panel .tgj-two-panel__container {
		flex-direction: row;
		align-items: flex-end;
		gap: 40px;
	}

	/* Reset mobile order on desktop */
	.jc-block.tgj-two-panel .tgj-two-panel__media,
	.jc-block.tgj-two-panel .tgj-two-panel__text {
		order: 0;
	}

	/* Specifically reset mobile-media-below order on desktop */
	.jc-block.tgj-two-panel.tgj-two-panel--mobile-media-below .tgj-two-panel__media,
	.jc-block.tgj-two-panel.tgj-two-panel--mobile-media-below .tgj-two-panel__text {
		order: 0;
	}

	.jc-block.tgj-two-panel .tgj-two-panel__text {
		padding-left: 0;
		padding-right: 0;
	}

	/* 50/50 layout (default) */
	.jc-block.tgj-two-panel.tgj-two-panel--equal .tgj-two-panel__media,
	.jc-block.tgj-two-panel.tgj-two-panel--equal .tgj-two-panel__text {
		flex: 1 1 50%;
	}

	/* Max-width constraints for 50/50 layout when constrained */
	/* Make containers flexbox to center content around dividing line */
	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained .tgj-two-panel__media {
		display: flex;
		justify-content: flex-end; /* Push media toward center (when on left) */
	}

	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained .tgj-two-panel__text {
		display: flex;
		justify-content: flex-start; /* Push text toward center (when on right) */
	}

	/* Reverse alignment when media is on right */
	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained.tgj-two-panel--image-right .tgj-two-panel__media {
		justify-content: flex-start; /* Push media toward center (when on right) */
	}

	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained.tgj-two-panel--image-right .tgj-two-panel__text {
		justify-content: flex-end; /* Push text toward center (when on left) */
	}

	/* Apply max-width to content */
	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained .tgj-two-panel__media img,
	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained .tgj-two-panel__media video {
		width: auto; /* Override width: 100% to allow flex positioning */
		max-width: 465px;
	}

	/* Also constrain the picture element */
	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained .tgj-two-panel__media picture {
		width: auto;
		max-width: 465px;
	}

	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--constrained .tgj-two-panel__content {
		max-width: 430px;
	}

	/* Vertical offset for text in 50/50 layout */
	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--align-bottom .tgj-two-panel__text {
		padding-bottom: 40px;
	}

	.jc-block.tgj-two-panel.tgj-two-panel--equal.tgj-two-panel--align-top .tgj-two-panel__text {
		padding-top: 40px;
	}

	/* 2/3 media - 1/3 text layout */
	.jc-block.tgj-two-panel.tgj-two-panel--image-large .tgj-two-panel__media {
		flex: 1 1 66.666%;
	}

	.jc-block.tgj-two-panel.tgj-two-panel--image-large .tgj-two-panel__text {
		flex: 1 1 33.333%;
	}

	/* Media on right - Reverse the order */
	.jc-block.tgj-two-panel.tgj-two-panel--image-right .tgj-two-panel__container {
		flex-direction: row-reverse;
	}

	/* Text Alignment Options */
	.jc-block.tgj-two-panel.tgj-two-panel--align-top .tgj-two-panel__container {
		align-items: flex-start;
	}

	.jc-block.tgj-two-panel.tgj-two-panel--align-center .tgj-two-panel__container {
		align-items: center;
	}

	.jc-block.tgj-two-panel.tgj-two-panel--align-bottom .tgj-two-panel__container {
		align-items: flex-end;
	}
}

/* Editor-specific styles */
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__image-button {
	transition: opacity 0.2s ease;
}

.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__image-button:hover {
	opacity: 0.85;
}

.wp-block[data-type="journal-blocks/tgj-two-panel"].tgj-two-panel--rounded .tgj-two-panel__media img,
.wp-block[data-type="journal-blocks/tgj-two-panel"].tgj-two-panel--rounded .tgj-two-panel__media video {
	border-radius: 5px;
}

.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text {
	min-height: 60px;
}

/* Ensure RichText is visible and editable */
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text .block-editor-rich-text__editable {
	min-height: 60px;
	outline: none;
}

/* Style the h2 in editor */
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text h2 {
	margin: 0;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TiemposTextRegular", serif;
	font-size: var(--tgj-title);
	font-style: italic;
	line-height: var(--tgj-lh-title);
}

/* Style paragraphs in editor */
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text p {
	margin: 0 0 16px 0;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TiemposTextRegular", serif;
	font-size: var(--tgj-body);
	font-style: normal;
	line-height: var(--tgj-lh-body);
}

.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text .block-editor-rich-text__editable[data-is-placeholder-visible="true"]::before {
	opacity: 0.6;
}

/* Text modifiers in editor */
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text p.is-small,
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text ul.is-small,
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text ol.is-small {
	/* Off-scale on purpose. The type scale stops at --tgj-small (14px) and
	   tgj-design-tokens.md 6.3 is explicit that sub-14 sizes do not belong to
	   any level, so this stays a literal. Raised 11 -> 12 alongside the body
	   copy going 15 -> 16. */
	font-size: 12px;
	line-height: var(--tgj-lh-body);
}

.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text h2.is-relaxed,
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text h3.is-relaxed,
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text p.is-relaxed,
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text ul.is-relaxed,
.wp-block[data-type="journal-blocks/tgj-two-panel"] .tgj-two-panel__text ol.is-relaxed {
	line-height: 200%;
}