/* ==========================================================================
   OKC — GRACE Values
   Port of themes/okc/page-templates/about_t.php lines 211-360.

   Source utilities (Tailwind v3 defaults, Play CDN, no custom config):
     section   : bg-[#B8D4E8] pt-10 md:py-20 lg:py-12 xl:py-0
     container : container mx-auto px-6
     row       : flex flex-col md:flex-row gap-12 lg:gap-16 items-center
     left col  : md:w-[60%] mt-5
     eyebrow   : text-2xl md:text-3xl font-black text-[#0A3B5C] mb-2 uppercase
                 + inline font-family: 'Pragmatica', sans-serif
     heading   : text-3xl md:text-4xl lg:text-6xl xl:text-9xl font-black
                 text-[#0A3B5C] mb-8 md:mb-10 uppercase
                 + inline font-family: 'Pragmatica', sans-serif
     list      : space-y-8 md:space-y-10 md:pb-10
     item      : flex items-start space-x-4
     icon      : flex-shrink-0 text-3xl md:text-4xl text-[#0A3B5C]
     item h4   : text-xl md:text-2xl font-black text-[#0A3B5C] mb-2 uppercase
                 + inline font-family: 'Pragmatica', sans-serif
     item desc : text-[#0A3B5C] text-xl md:text-2xl
                 + inline font-family: 'Pragmatica',font-weight:bold, sans-serif  <-- MALFORMED
     right col : relative rcimg md:w-[40%]
                 + inline background-image:url(3.jpg); background-size:cover
     photo     : img.rcimgt
     badge box : absolute -bottom-20 -right-6 md:-right-10 lg:-right-18 z-10
     badge img : w-24 h-24 md:w-40 md:h-40 lg:w-48 lg:h-48

   Non-Tailwind rules pulled in from themes/okc/style.css (lines 597-631):
     @media (max-width: 767px)                        .rcimg   { background-image: none !important }
     @media (min-width: 768px)                        img.rcimgt { display: none }
     @media (min-width: 768px) and (max-width: 1024px) .rcimg  { height: 70vh !important }
     @media (min-width: 1025px)                       .rcimg   { height: 100vh !important }

   NOTE 1 — the description's inline style was
     style="font-family: 'Pragmatica',font-weight:bold, sans-serif"
   The stray `font-weight:bold` inside the value makes the whole declaration
   invalid, so browsers dropped it and the text actually rendered in the
   inherited body font (main.css: body { font-family: "Poppins", sans-serif }).
   okc-base.css already sets that same stack on `.okc-w`, so no font-family is
   declared here — the legacy (accidental) result is reproduced exactly.

   NOTE 2 — `lg:-right-18` on the badge box is not a real Tailwind class: 18 is
   not on the default spacing scale, so it emitted no CSS at all. It is
   reproduced here as a deliberate no-op (the md:-right-10 value carries on up).

   Breakpoints (min-width, mobile-first): sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section — pale blue ground, and a vertical rhythm that shrinks then vanishes
   -------------------------------------------------------------------------- */
.okc-grace-values {
	background-color: #b8d4e8;   /* bg-[#B8D4E8] */
	padding-top: 2.5rem;         /* pt-10 (no bottom padding below md) */
}

@media (min-width: 768px) { /* md:py-20 */
	.okc-grace-values {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

@media (min-width: 1024px) { /* lg:py-12 */
	.okc-grace-values {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

@media (min-width: 1280px) { /* xl:py-0 */
	.okc-grace-values {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   Inner wrapper — Tailwind `container` + mx-auto + px-6
   `container` is width:100% with a hard max-width at each breakpoint.
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__container {
	width: 100%;
	margin-left: auto;    /* mx-auto */
	margin-right: auto;
	padding-left: 1.5rem; /* px-6 */
	padding-right: 1.5rem;
}

@media (min-width: 640px) {
	.okc-grace-values .okc-grace-values__container { max-width: 640px; }
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__container { max-width: 768px; }
}

@media (min-width: 1024px) {
	.okc-grace-values .okc-grace-values__container { max-width: 1024px; }
}

@media (min-width: 1280px) {
	.okc-grace-values .okc-grace-values__container { max-width: 1280px; }
}

@media (min-width: 1536px) {
	.okc-grace-values .okc-grace-values__container { max-width: 1536px; }
}

/* --------------------------------------------------------------------------
   Row — stacked and centred below md, two side-by-side columns from md up.
   `items-center` in a column flow means the children are NOT stretched: they
   shrink-to-fit horizontally. That is the legacy behaviour, kept verbatim.
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__row {
	display: flex;            /* flex */
	flex-direction: column;   /* flex-col */
	align-items: center;      /* items-center */
	gap: 3rem;                /* gap-12 */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__row {
		flex-direction: row;  /* md:flex-row */
	}
}

@media (min-width: 1024px) {
	.okc-grace-values .okc-grace-values__row {
		gap: 4rem;            /* lg:gap-16 */
	}
}

/* --------------------------------------------------------------------------
   Left column — copy
   The 60% / 40% split plus the gap overflows 100%, so both columns shrink
   proportionally (flex-shrink defaults to 1). Legacy behaviour, kept as-is.
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__content {
	margin-top: 1.25rem;  /* mt-5 */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__content {
		width: 60%;       /* md:w-[60%] */
	}
}

/* --------------------------------------------------------------------------
   Eyebrow — "One Kingdom Church"
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__eyebrow {
	font-family: "Pragmatica", sans-serif;
	font-size: 1.5rem;          /* text-2xl */
	line-height: 2rem;
	font-weight: 900;           /* font-black */
	color: #0a3b5c;             /* text-[#0A3B5C] */
	margin-bottom: 0.5rem;      /* mb-2 */
	text-transform: uppercase;  /* uppercase */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__eyebrow {
		font-size: 1.875rem;    /* md:text-3xl */
		line-height: 2.25rem;
	}
}

/* --------------------------------------------------------------------------
   Heading — "VALUES"
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__heading {
	font-family: "Pragmatica", sans-serif;
	font-size: 1.875rem;        /* text-3xl */
	line-height: 2.25rem;
	font-weight: 900;           /* font-black */
	color: #0a3b5c;             /* text-[#0A3B5C] */
	margin-bottom: 2rem;        /* mb-8 */
	text-transform: uppercase;  /* uppercase */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__heading {
		font-size: 2.25rem;     /* md:text-4xl */
		line-height: 2.5rem;
		margin-bottom: 2.5rem;  /* md:mb-10 */
	}
}

@media (min-width: 1024px) {
	.okc-grace-values .okc-grace-values__heading {
		font-size: 3.75rem;     /* lg:text-6xl */
		line-height: 1;
	}
}

@media (min-width: 1280px) {
	.okc-grace-values .okc-grace-values__heading {
		font-size: 8rem;        /* xl:text-9xl */
		line-height: 1;
	}
}

/* --------------------------------------------------------------------------
   Values list — space-y-8 md:space-y-10 md:pb-10
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__list {
		padding-bottom: 2.5rem; /* md:pb-10 */
	}
}

.okc-grace-values .okc-grace-values__list > * + * {
	margin-top: 2rem;           /* space-y-8 */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__list > * + * {
		margin-top: 2.5rem;     /* md:space-y-10 */
	}
}

/* --------------------------------------------------------------------------
   Value row — flex items-start space-x-4
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__item {
	display: flex;              /* flex */
	align-items: flex-start;    /* items-start */
}

.okc-grace-values .okc-grace-values__item > * + * {
	margin-left: 1rem;          /* space-x-4 */
}

/* --------------------------------------------------------------------------
   Icon — the ACF branch sized the icon with font-size on its wrapper
   (flex-shrink-0 text-3xl md:text-4xl text-[#0A3B5C]). Font icons inherit that
   directly; SVG icons are pinned to 1em so both libraries land the same size.
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__icon {
	flex-shrink: 0;       /* flex-shrink-0 */
	font-size: 1.875rem;  /* text-3xl */
	line-height: 2.25rem;
	color: #0a3b5c;       /* text-[#0A3B5C] */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__icon {
		font-size: 2.25rem; /* md:text-4xl */
		line-height: 2.5rem;
	}
}

.okc-grace-values .okc-grace-values__icon i,
.okc-grace-values .okc-grace-values__icon svg {
	display: block;
}

.okc-grace-values .okc-grace-values__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Value title
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__item-title {
	font-family: "Pragmatica", sans-serif;
	font-size: 1.25rem;         /* text-xl */
	line-height: 1.75rem;
	font-weight: 900;           /* font-black */
	color: #0a3b5c;             /* text-[#0A3B5C] */
	margin-bottom: 0.5rem;      /* mb-2 */
	text-transform: uppercase;  /* uppercase */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__item-title {
		font-size: 1.5rem;      /* md:text-2xl */
		line-height: 2rem;
	}
}

/* --------------------------------------------------------------------------
   Value description
   No font-family here on purpose — see NOTE 1 at the top of this file.
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__item-desc {
	color: #0a3b5c;       /* text-[#0A3B5C] */
	font-size: 1.25rem;   /* text-xl */
	line-height: 1.75rem;
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__item-desc {
		font-size: 1.5rem;  /* md:text-2xl */
		line-height: 2rem;
	}
}

/* Preflight zeroed paragraph margins; reproduced so multi-paragraph WYSIWYG
   copy matches the legacy block spacing (none). The Paragraph Spacing control
   can add some back. */
.okc-grace-values .okc-grace-values__item-desc p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Right column — `.rcimg`
   Below 768px: the inline background-image is blanked and the real <img> shows.
   From 768px up: the <img> is hidden and the column is a fixed-height cover
   background instead (70vh to 1024px, 100vh from 1025px).
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__media {
	position: relative;         /* relative */
	background-size: cover;     /* inline background-size:cover */
	background-position: 0% 0%; /* legacy set none, so the browser default */
	background-repeat: no-repeat;
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__media {
		width: 40%;             /* md:w-[40%] */
	}
}

/* style.css: @media (max-width: 767px) { .rcimg { background-image: none !important } }
   !important is required here too, because the image is an inline style. */
@media (max-width: 767px) {
	.okc-grace-values .okc-grace-values__media {
		background-image: none !important;
	}
}

/* style.css: @media (min-width: 768px) and (max-width: 1024px) { .rcimg { height: 70vh } } */
@media (min-width: 768px) and (max-width: 1024px) {
	.okc-grace-values .okc-grace-values__media {
		height: 70vh;
	}
}

/* style.css: @media (min-width: 1025px) { .rcimg { height: 100vh } } */
@media (min-width: 1025px) {
	.okc-grace-values .okc-grace-values__media {
		height: 100vh;
	}
}

/* style.css: @media (min-width: 768px) { img.rcimgt { display: none } }
   The legacy <img> carried no width utility at all: Preflight's
   `display:block; max-width:100%; height:auto` was the whole styling, so it
   renders at its natural size capped to the column. Nothing more is added. */
.okc-grace-values .okc-grace-values__photo {
	display: block;
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__photo {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Overlapping badge — absolute -bottom-20 -right-6 md:-right-10 z-10
   (lg:-right-18 was not a real Tailwind class; see NOTE 2.)
   -------------------------------------------------------------------------- */
.okc-grace-values .okc-grace-values__badge-wrap {
	position: absolute;  /* absolute */
	bottom: -5rem;       /* -bottom-20 */
	right: -1.5rem;      /* -right-6 */
	z-index: 10;         /* z-10 */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__badge-wrap {
		right: -2.5rem;  /* md:-right-10 */
	}
}

.okc-grace-values .okc-grace-values__badge {
	display: block;
	width: 6rem;         /* w-24 */
	height: 6rem;        /* h-24 */
}

@media (min-width: 768px) {
	.okc-grace-values .okc-grace-values__badge {
		width: 10rem;    /* md:w-40 */
		height: 10rem;   /* md:h-40 */
	}
}

@media (min-width: 1024px) {
	.okc-grace-values .okc-grace-values__badge {
		width: 12rem;    /* lg:w-48 */
		height: 12rem;   /* lg:h-48 */
	}
}

/* --------------------------------------------------------------------------
   Elementor editor / frontend: the badge hangs 5rem below its column, so the
   widget container must not clip it.
   -------------------------------------------------------------------------- */
.elementor-widget-okc-grace-values .elementor-widget-container {
	overflow: visible;
}