/* Layout only — style .instagram-post-frame and children in your theme or Customizer. */

body.page-instagram-post-generator {
	display: block;
	align-items: unset;
	justify-content: unset;
	font-family: 'Courier New', Courier, monospace;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ig-generator {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem;
}

.ig-generator__options {
	flex: 0 0 280px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
}

.ig-generator__options label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.9rem;
}

.ig-generator__options textarea {
	min-height: 6rem;
	resize: vertical;
	font: inherit;
	padding: 0.5rem;
}

.ig-generator__options .ig-generator__checkbox-row {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.ig-generator__options .ig-generator__checkbox-row input {
	width: auto;
	margin: 0;
}

.ig-generator__options button {
	margin-top: 0.25rem;
	padding: 0.6rem 1rem;
	font: inherit;
	cursor: pointer;
}

.ig-generator__preview-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.ig-generator__frame-stage {
	position: relative;
	display: inline-block;
}

@font-face {
	font-family: 'QuadrantTextMono-Regular';
	src: url('../fonts/QuadrantTextMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

/* Feed 1080×1440 (default); Reels 1080×1920 via .is-reels-aspect. Export is 2×. */
.instagram-post-frame {
	width: 540px;
	aspect-ratio: 1080 / 1440;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	color: #282828;
	background-color: #f4ee7f;
	font-family: 'QuadrantTextMono-Regular', monospace;
	text-transform: uppercase;
	font-size: 45px;
	line-height: 48px;

	p {
		margin: 0;
	}
}

.instagram-post-frame.is-inverted {
	color: #f4ee7f;
	background-color: #282828;
}

.instagram-post-frame.is-reels-aspect {
	aspect-ratio: 1080 / 1920;
}

.instagram-post-frame.is-small-type {
	font-size: 36.6px;
	line-height: 39px;
}

/* Preview-only overlay; sits outside #ig-post-frame so it is not exported. */
.instagram-post-grid {
	position: absolute;
	inset: 18px 27px 29px 26px;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(40, 40, 40, 0.2) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(40, 40, 40, 0.2) 1px, transparent 1px);
	background-size: 27px 48px;

	.is-small-type + & {
		inset: 24px 28px 32px 27px;
		background-size: 22px 39px;
	}

	.is-reels-aspect.is-small-type + & {
		inset: 24px 28px 38px 27px;
	}
}

.instagram-post-frame.is-inverted + .instagram-post-grid {
	background-image:
		linear-gradient(to right, rgba(244, 238, 127, 0.25) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(244, 238, 127, 0.25) 1px, transparent 1px);
}

.instagram-post-frame__text {
	word-break: break-word;
	height: 100%;
	padding: 19px 27px 17px;
	box-sizing: border-box;
	white-space: pre-wrap;
	overflow-wrap: anywhere;

	.is-small-type & {
		padding: 24px 28px 16px;
	}
}