/* ===========================================================================
   OKC — Our Story Collage
   Port of themes/okc/page-templates/about_t.php lines 85-144.

   Legacy class inventory (Tailwind v3 defaults, Play CDN, no custom config):

     section  .relative .py-0 .bg-white
     div      .grid .grid-cols-2 .md:grid-cols-4 .gap-0
     div      .aspect-square .overflow-hidden
     img      .w-full .h-full .object-cover
     div      .container .mx-auto .px-4 .md:px-6 .relative
              .-mt-10 .md:-mt-32 .lg:-mt-40
              .pb-5 .md:pb-8 .lg:pb-12 .pp-space
     div      .max-w-6xl .mx-auto .bg-[#0A3B5C]
              .rounded-[2.5rem] .md:rounded-[3rem]
              .p-5 .md:p-10 .lg:p-20 .shadow-2xl
     img      .h-20 .md:h-24 .lg:h-28 .w-auto .mx-auto
              .mb-6 .md:mb-8 .lg:-mt-32
     div      .story-description .text-white .text-xl .md:text-2xl
              .max-w-4xl .mx-auto .text-justify .hyphens-auto .break-words

   Notes carried over from the legacy render:

   1. `.pp-space` has no rule anywhere in the theme (grep over the whole theme
      returns only the one use site). It is a dead class and is not reproduced.

   2. The description carried
        style="font-family: 'Pragmatica',font-weight:bold, sans-serif"
      The stray colon inside the value makes the whole declaration invalid, so
      the browser dropped it and the text inherited the body font. Nothing is
      set here either — the description inherits the `.okc-w` stack from
      okc-base.css. Use Style > Description > Typography if Pragmatica was the
      intent.

   3. In the legacy page main.css was printed by wp_print_styles (wp_head
      priority 8) and the Tailwind Play CDN <script> by wp_print_head_scripts
      (priority 9), so Tailwind's generated <style> landed AFTER main.css. At
      equal specificity Tailwind therefore won, which means
        .story-description { line-height: 1.8 }
        @media (max-width:640px){ .story-description { font-size:.95rem;
                                                       line-height:1.7 } }
      never actually took effect — .text-xl / .md:text-2xl overrode both. The
      main.css rules are reproduced below in their original source position so
      the same declarations win here as won there; only the paragraph-spacing
      rules of .story-description have a visible effect, as in the legacy page.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Root  —  .relative .py-0 .bg-white
   -------------------------------------------------------------------------- */
.okc-our-story {
	position: relative;
	padding-top: 0;
	padding-bottom: 0;
	background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Photo collage  —  .grid .grid-cols-2 .md:grid-cols-4 .gap-0
   -------------------------------------------------------------------------- */
.okc-our-story__collage {
	display: grid;
	gap: 0px;
}

.okc-our-story__collage--sm-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.okc-our-story__collage--sm-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.okc-our-story__collage--sm-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.okc-our-story__collage--md-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.okc-our-story__collage--md-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.okc-our-story__collage--md-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.okc-our-story__collage--md-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.okc-our-story__collage--md-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* .aspect-square .overflow-hidden */
.okc-our-story__cell {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* .w-full .h-full .object-cover
   `img.` rather than a bare class so this outranks okc-base's
   `.okc-w img { height: auto }` while still losing to any Elementor
   `{{WRAPPER}} .okc-our-story__photo` control selector. */
img.okc-our-story__photo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Overlay container
   .container .mx-auto .px-4 .md:px-6 .relative
   .-mt-10 .md:-mt-32 .lg:-mt-40   .pb-5 .md:pb-8 .lg:pb-12
   -------------------------------------------------------------------------- */
.okc-our-story__container {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: -2.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1.25rem;
}

/* Tailwind `.container` max-width jumps. */
@media (min-width: 640px) {
	.okc-our-story__container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-our-story__container {
		max-width: 768px;
		margin-top: -8rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		padding-bottom: 2rem;
	}
}

@media (min-width: 1024px) {
	.okc-our-story__container {
		max-width: 1024px;
		margin-top: -10rem;
		padding-bottom: 3rem;
	}
}

@media (min-width: 1280px) {
	.okc-our-story__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-our-story__container {
		max-width: 1536px;
	}
}

/* No collage above the card (an Elementor-only state — the legacy template
   always printed at least one tile), so there is nothing to overlap.
   Declared after the media queries so it wins at every width. */
.okc-our-story__container--flush {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Navy card
   .max-w-6xl .mx-auto .bg-[#0A3B5C] .rounded-[2.5rem] .md:rounded-[3rem]
   .p-5 .md:p-10 .lg:p-20 .shadow-2xl
   -------------------------------------------------------------------------- */
.okc-our-story__card {
	max-width: 72rem;
	margin-left: auto;
	margin-right: auto;
	background-color: #0a3b5c;
	border-radius: 2.5rem;
	padding: 1.25rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
	.okc-our-story__card {
		border-radius: 3rem;
		padding: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.okc-our-story__card {
		padding: 5rem;
	}
}

/* --------------------------------------------------------------------------
   Heading image (legacy assets/images/story.png)
   .h-20 .md:h-24 .lg:h-28 .w-auto .mx-auto .mb-6 .md:mb-8 .lg:-mt-32
   -------------------------------------------------------------------------- */
img.okc-our-story__logo {
	display: block;
	height: 5rem;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	img.okc-our-story__logo {
		height: 6rem;
		margin-bottom: 2rem;
	}
}

@media (min-width: 1024px) {
	img.okc-our-story__logo {
		height: 7rem;
		/* .lg:-mt-32 — the wordmark hangs above the card's top edge. */
		margin-top: -8rem;
	}
}

/* --------------------------------------------------------------------------
   Description — main.css `.story-description` block, reproduced in its
   original source position (see note 3 in the header). These two rules are
   overridden by the Tailwind utilities that follow, exactly as they were in
   the legacy page.
   -------------------------------------------------------------------------- */
.okc-our-story__description {
	line-height: 1.8;
}

@media (max-width: 640px) {
	.okc-our-story__description {
		font-size: 0.95rem;
		line-height: 1.7;
	}
}

/* .text-white .text-xl .max-w-4xl .mx-auto .text-justify .hyphens-auto
   .break-words  — injected after main.css by the Play CDN, so it wins. */
.okc-our-story__description {
	color: #ffffff;
	font-size: 1.25rem;
	line-height: 1.75rem;
	max-width: 56rem;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

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

/* main.css paragraph spacing — the part of `.story-description` that did have
   a visible effect (Preflight's `p { margin: 0 }` is only 0-0-1). */
.okc-our-story__description p {
	margin-bottom: 1.25rem;
}

.okc-our-story__description p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.okc-our-story__description p {
		margin-bottom: 1rem;
	}
}

@media (max-width: 640px) {
	.okc-our-story__description p {
		margin-bottom: 0.875rem;
	}
}

/* The WYSIWYG can hold more than paragraphs; keep it readable without
   inventing styling the legacy page did not have. */
.okc-our-story__description a {
	text-decoration: underline;
}

.okc-our-story__description strong,
.okc-our-story__description b {
	font-weight: 700;
}

.okc-our-story__description em,
.okc-our-story__description i {
	font-style: italic;
}