/* ==========================================================================
   OKC — Kansas City Split
   Port of themes/okc/page-templates/home_t.php lines 257-297.

   Source utilities (Tailwind v3 defaults, Play CDN, no custom config):
     section : relative bg-[#9B2C2C] py-12 md:py-16 lg:py-20 xl:py-24 overflow-hidden
     inner   : container mx-auto px-4 md:px-6 relative z-20
     grid    : max-w-7xl mx-auto grid md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center
     media   : .kanas-city  +  img.shadow-2xl border-4 md:border-4 border-white w-full
     content : text-white text-center md:text-left  (inline font-family: 'Pragmatica', PT Sans)
     logo    : h-24 sm:h-32 md:h-40 xl:h-48 w-auto mb-4 md:mb-6 lg:mb-8 mx-auto md:mx-0
     copy    : text-xl lg:text-xl xl:text-2xl mb-4 md:mb-6 leading-relaxed text-justify
               hyphens-auto break-words
     button  : bg-[#F5E6D3] text-[#0A3B5C] px-6 sm:px-8 md:px-10 lg:px-12 py-3 sm:py-4 md:py-5
               inline-block font-bold text-sm sm:text-base md:text-lg lg:text-xl hover:bg-white
               transition-all duration-300 uppercase mt-4 md:mt-6

   main.css contribution: `.kanas-city img { height:70vh; object-fit:cover; width:100% }`

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

/* --------------------------------------------------------------------------
   Section — relative, brick ground, responsive vertical rhythm, clipped
   -------------------------------------------------------------------------- */
.okc-kansas-city {
	position: relative;
	overflow: hidden;
	background-color: #9b2c2c;
	padding-top: 3rem;    /* py-12 */
	padding-bottom: 3rem;
}

@media (min-width: 768px) { /* md:py-16 */
	.okc-kansas-city {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media (min-width: 1024px) { /* lg:py-20 */
	.okc-kansas-city {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

@media (min-width: 1280px) { /* xl:py-24 */
	.okc-kansas-city {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

/* --------------------------------------------------------------------------
   Inner wrapper — Tailwind `container` + mx-auto + px-4 md:px-6 + relative z-20
   `container` is width:100% with a hard max-width at each breakpoint.
   -------------------------------------------------------------------------- */
.okc-kansas-city .okc-kansas-city__container {
	position: relative;
	z-index: 20;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;  /* px-4 */
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.okc-kansas-city .okc-kansas-city__container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-kansas-city .okc-kansas-city__container {
		max-width: 768px;
		padding-left: 1.5rem;  /* md:px-6 */
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.okc-kansas-city .okc-kansas-city__container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.okc-kansas-city .okc-kansas-city__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-kansas-city .okc-kansas-city__container {
		max-width: 1536px;
	}
}

/* --------------------------------------------------------------------------
   Grid — one column below md, two equal columns from md up
   -------------------------------------------------------------------------- */
.okc-kansas-city .okc-kansas-city__grid {
	display: grid;
	align-items: center;      /* items-center */
	gap: 2rem;                /* gap-8 */
	max-width: 80rem;         /* max-w-7xl */
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.okc-kansas-city .okc-kansas-city__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
		gap: 3rem;                                        /* md:gap-12 */
	}
}

@media (min-width: 1024px) {
	.okc-kansas-city .okc-kansas-city__grid {
		gap: 4rem; /* lg:gap-16 */
	}
}

/* Optional swap of the two columns; stacking order on mobile is unchanged. */
@media (min-width: 768px) {
	.okc-kansas-city--media-right .okc-kansas-city__media {
		order: 2;
	}

	.okc-kansas-city--media-right .okc-kansas-city__content {
		order: 1;
	}
}

/* --------------------------------------------------------------------------
   Photo — main.css .kanas-city img (70vh, cover) + border-4 border-white + shadow-2xl
   -------------------------------------------------------------------------- */
.okc-kansas-city .okc-kansas-city__media img {
	display: block;
	width: 100%;
	height: 70vh;
	object-fit: cover;
	border-width: 4px;                                  /* border-4 (= md:border-4) */
	border-style: solid;
	border-color: #ffffff;                              /* border-white */
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);    /* shadow-2xl */
}

/* --------------------------------------------------------------------------
   Content column
   Inline style on the legacy div was: font-family: 'Pragmatica', PT Sans
   -------------------------------------------------------------------------- */
.okc-kansas-city .okc-kansas-city__content {
	color: #ffffff;      /* text-white */
	text-align: center;  /* text-center */
	font-family: "Pragmatica", "PT Sans", sans-serif;
}

@media (min-width: 768px) {
	.okc-kansas-city .okc-kansas-city__content {
		text-align: left; /* md:text-left */
	}
}

/* --------------------------------------------------------------------------
   Wordmark (ka.png)
   -------------------------------------------------------------------------- */
.okc-kansas-city .okc-kansas-city__logo {
	display: block;
	height: 6rem;          /* h-24 */
	width: auto;           /* w-auto */
	margin-bottom: 1rem;   /* mb-4 */
	margin-left: auto;     /* mx-auto */
	margin-right: auto;
}

@media (min-width: 640px) {
	.okc-kansas-city .okc-kansas-city__logo {
		height: 8rem; /* sm:h-32 */
	}
}

@media (min-width: 768px) {
	.okc-kansas-city .okc-kansas-city__logo {
		height: 10rem;         /* md:h-40 */
		margin-bottom: 1.5rem; /* md:mb-6 */
		margin-left: 0;        /* md:mx-0 */
		margin-right: 0;
	}
}

@media (min-width: 1024px) {
	.okc-kansas-city .okc-kansas-city__logo {
		margin-bottom: 2rem; /* lg:mb-8 */
	}
}

@media (min-width: 1280px) {
	.okc-kansas-city .okc-kansas-city__logo {
		height: 12rem; /* xl:h-48 */
	}
}

/* --------------------------------------------------------------------------
   Body copy
   text-xl gives 1.25rem/1.75rem, but `leading-relaxed` is emitted after the
   font-size utilities in Tailwind's base layer, so line-height is 1.625 below
   lg. From lg up, `lg:text-xl` sits in a later (responsive) block and restores
   its own paired 1.75rem; from xl up `xl:text-2xl` supplies 1.5rem/2rem.
   -------------------------------------------------------------------------- */
.okc-kansas-city .okc-kansas-city__description {
	font-size: 1.25rem;         /* text-xl */
	line-height: 1.625;         /* leading-relaxed */
	margin-bottom: 1rem;        /* mb-4 */
	text-align: justify;        /* text-justify */
	-webkit-hyphens: auto;      /* hyphens-auto */
	-ms-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;  /* break-words */
}

@media (min-width: 768px) {
	.okc-kansas-city .okc-kansas-city__description {
		margin-bottom: 1.5rem; /* md:mb-6 */
	}
}

@media (min-width: 1024px) {
	.okc-kansas-city .okc-kansas-city__description {
		font-size: 1.25rem;   /* lg:text-xl */
		line-height: 1.75rem;
	}
}

@media (min-width: 1280px) {
	.okc-kansas-city .okc-kansas-city__description {
		font-size: 1.5rem;  /* xl:text-2xl */
		line-height: 2rem;
	}
}

/* Preflight zeroed paragraph margins; reproduced here so the legacy block
   spacing (none) is exact. The Paragraph Spacing control can add some back. */
.okc-kansas-city .okc-kansas-city__description p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Cream CTA
   -------------------------------------------------------------------------- */
.okc-kansas-city .okc-kansas-city__button {
	display: inline-block;          /* inline-block */
	background-color: #f5e6d3;      /* bg-[#F5E6D3] */
	color: #0a3b5c;                 /* text-[#0A3B5C] */
	font-weight: 700;               /* font-bold */
	text-transform: uppercase;      /* uppercase */
	font-size: 0.875rem;            /* text-sm */
	line-height: 1.25rem;
	padding-left: 1.5rem;           /* px-6 */
	padding-right: 1.5rem;
	padding-top: 0.75rem;           /* py-3 */
	padding-bottom: 0.75rem;
	margin-top: 1rem;               /* mt-4 */
	text-decoration: none;
	transition-property: all;       /* transition-all */
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;     /* duration-300 */
}

/* Legacy had `hover:bg-white` only. :focus-visible is added for keyboard users
   without changing the mouse render (a plain :focus would leave the button
   white after a click, which the legacy never did). */
.okc-kansas-city .okc-kansas-city__button:hover,
.okc-kansas-city .okc-kansas-city__button:focus-visible {
	background-color: #ffffff; /* hover:bg-white */
	color: #0a3b5c;
}

@media (min-width: 640px) {
	.okc-kansas-city .okc-kansas-city__button {
		font-size: 1rem;      /* sm:text-base */
		line-height: 1.5rem;
		padding-left: 2rem;   /* sm:px-8 */
		padding-right: 2rem;
		padding-top: 1rem;    /* sm:py-4 */
		padding-bottom: 1rem;
	}
}

@media (min-width: 768px) {
	.okc-kansas-city .okc-kansas-city__button {
		font-size: 1.125rem;    /* md:text-lg */
		line-height: 1.75rem;
		padding-left: 2.5rem;   /* md:px-10 */
		padding-right: 2.5rem;
		padding-top: 1.25rem;   /* md:py-5 */
		padding-bottom: 1.25rem;
		margin-top: 1.5rem;     /* md:mt-6 */
	}
}

@media (min-width: 1024px) {
	.okc-kansas-city .okc-kansas-city__button {
		font-size: 1.25rem;   /* lg:text-xl */
		line-height: 1.75rem;
		padding-left: 3rem;   /* lg:px-12 */
		padding-right: 3rem;
	}
}

/* --------------------------------------------------------------------------
   Elementor editor: keep the section full-width inside the widget container.
   -------------------------------------------------------------------------- */
.elementor-widget-okc-kansas-city .elementor-widget-container {
	overflow: visible;
}