/*
 * Page-specific styles for the "father-frank" page (slug: father-frank).
 * Structured top-down and nested under body.page-father-frank.
 */

body.page-father-frank {

	/* ====================================================================== */
	/*  1) TOKENS / VARIABLES                                                 */
	/* ====================================================================== */

	--ff-serif: "Times New Roman", serif;
	--ff-heading-serif: "Georgia", serif;
	--ff-divider: rgba(0, 0, 0, 0.18);
	--ff-body-width: 640px;

	/* ====================================================================== */
	/*  2) LAYOUT WIDTH                                                       */
	/* ====================================================================== */

	/* Only widen the MAIN content, not header/footer */
	main.site-main.container {
		max-width: 960px;
	}

	.ff-section--narrow {
		max-width: 860px;
	}

	/* ====================================================================== */
	/*  3) TYPOGRAPHY                                                         */
	/* ====================================================================== */

	h1 {
		font-family: var(--ff-heading-serif);
		font-weight: 300;
		letter-spacing: 0.04em;
		font-size: clamp(3.2rem, 6vw, 4.8rem);
		margin-top: 0;
		margin-bottom: 3.5rem;
	}

	h2,
	h3 {
		font-family: var(--ff-heading-serif);
		font-size: 1.05rem;
		text-transform: uppercase;
		letter-spacing: 0.16em;
		font-weight: 400;
		margin: 0 0 0.75rem;
		text-align: center;
		position: relative;

		&::after {
			content: "";
			display: block;
			width: 120px;
			height: 1px;
			margin: 0.9rem auto 1.8rem;
			background: var(--ff-divider);
		}
	}

	p {
		font-family: var(--ff-serif);
		font-size: 1rem;
		line-height: 1.7;
		max-width: var(--ff-body-width);
		margin-left: auto;
		margin-right: auto;
		color: #333;
	}

	.wp-block-column p {
		margin-bottom: 1.2rem;
	}

	.ff-card .wp-block-column p:last-of-type {
		font-size: 0.85rem;
		line-height: 1.5;
		max-width: 520px;
		color: #555;
	}

	/* ====================================================================== */
	/*  4) MEDIA (IMAGES)                                                     */
	/* ====================================================================== */

	img {
		border-radius: 24px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	}

	figure.ff-card {
		background: none;
		padding: 0;
		box-shadow: none;
		border-radius: 0;
	}

	/* ====================================================================== */
	/*  5) GENERIC LAYOUT HELPERS                                             */
	/* ====================================================================== */

	.ff-split > .wp-block-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* ====================================================================== */
	/*  6) SECTION-SPECIFIC BLOCKS                                            */
	/* ====================================================================== */

	/* ---------- 6A: First block (“The Story” portrait) ---------- */
	.ff-section:nth-of-type(2) {
		.ff-split {
			align-items: stretch;

			> .wp-block-column:first-child {
				display: flex;

				.wp-block-image {
					display: flex;
					flex: 1;

					/* LESS CROPPED PORTRAIT:
					   natural aspect ratio, no forced zoom */
					img {
						width: 100%;
						height: auto;        /* let the image decide height */
						object-fit: contain; /* no cropping, just scale */
						object-position: center;
					}
				}
			}
		}
	}

	/* ---------- 6B: Final Monstrance block ---------- */
	.ff-card {
		background: none;
		backdrop-filter: none;
		border-radius: 0;
		padding: 0;
		box-shadow: none;

		.ff-split {
			align-items: stretch;

			> .wp-block-column:first-child {
				display: flex;

				.wp-block-image {
					display: flex;
					flex: 1;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}

			> .wp-block-column:last-child {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}
	}

	/* ====================================================================== */
	/*  7) PAGE-LEVEL SPACING                                                 */
	/* ====================================================================== */

	.ff-section {
		margin: 48px 0;
	}

	.ff-section.ff-section--center {
		margin: 40px 0;
	}
}