/**
 * OKC — Photo Strip
 *
 * Hand-resolved Tailwind v3 defaults for the "Three Images Section" band in
 *   themes/okc/page-templates/sundays_t.php      lines 21-85
 *   themes/okc/page-templates/kids-template.php  lines 43-70
 *
 * Legacy classes and what they resolve to:
 *
 *   section  pb-12 md:pb-16 bg-[#B8D4E8]
 *              padding-bottom 3rem / 4rem from 768px, background #B8D4E8
 *
 *   div      container mx-auto px-6
 *              width 100%, margin-inline auto, padding-inline 1.5rem,
 *              max-width 640/768/1024/1280/1536px at sm/md/lg/xl/2xl
 *
 *   div      grid [grid-cols-1] sm:grid-cols-2 md:grid-cols-3
 *              lg:grid-cols-5 (Kids: 4) xl:grid-cols-5 gap-0
 *              border-t-4 border-b-4 border-[#003B5D]
 *              display grid, repeat(N, minmax(0,1fr)), gap 0,
 *              4px solid #003B5D top and bottom
 *              (Sundays omits grid-cols-1; a bare `grid` leaves
 *               grid-template-columns:none, which lays the cells out in one
 *               full-width column — identical to grid-cols-1 here.)
 *
 *   cell     (Sundays) no classes
 *            (Kids)    aspect-square overflow-hidden  ->  aspect-ratio 1/1, overflow hidden
 *
 *   img      w-full object-cover shadow-lg
 *            (Sundays) h-48 md:h-64 lg:h-80  ->  12rem / 16rem / 20rem
 *            (Kids)    h-full               ->  100%
 *              shadow-lg = 0 10px 15px -3px rgb(0 0 0/.1), 0 4px 6px -4px rgb(0 0 0/.1)
 *
 * Breakpoints are Tailwind's min-width scale (sm 640, md 768, lg 1024, xl 1280,
 * 2xl 1536) — deliberately NOT Elementor's max-width breakpoints, so the strip
 * flips columns at exactly the same widths the legacy page did.
 *
 * Every rule is scoped under .okc-photostrip. Nothing here needs Tailwind.
 */

/* ==========================================================================
   TOKENS  —  every one is overridden by an Elementor control
   ========================================================================== */
.okc-photostrip {
	--okc-ps-bg: #b8d4e8;
	--okc-ps-pt: 0px;
	--okc-ps-pb: 3rem;    /* pb-12 */
	--okc-ps-pb-md: 4rem; /* md:pb-16 */
	--okc-ps-px: 1.5rem;  /* px-6 */

	--okc-ps-cols: 1;
	--okc-ps-cols-sm: 2;
	--okc-ps-cols-md: 3;
	--okc-ps-cols-lg: 5;
	--okc-ps-cols-xl: 5;
	--okc-ps-gap: 0px;

	--okc-ps-h: 12rem;     /* h-48    */
	--okc-ps-h-md: 16rem;  /* md:h-64 */
	--okc-ps-h-lg: 20rem;  /* lg:h-80 */
	--okc-ps-ratio: 1 / 1; /* aspect-square */

	--okc-ps-border-color: #003b5d;
	--okc-ps-border-width: 4px; /* border-t-4 / border-b-4 */
	--okc-ps-object-position: center;
}

/* ==========================================================================
   BAND  —  <section class="pb-12 md:pb-16 bg-[#B8D4E8]">
   ========================================================================== */
.okc-photostrip {
	background-color: var(--okc-ps-bg);
	padding-top: var(--okc-ps-pt);
	padding-bottom: var(--okc-ps-pb);
}

@media (min-width: 768px) {
	.okc-photostrip {
		padding-bottom: var(--okc-ps-pb-md);
	}
}

/* ==========================================================================
   CONTAINER  —  <div class="container mx-auto px-6">
   ========================================================================== */
.okc-photostrip__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--okc-ps-px);
	padding-right: var(--okc-ps-px);
}

/* Tailwind's `container` max-width steps. Applied only when the widget's
   "Tailwind Container Widths" switch is on. */
@media (min-width: 640px) {
	.okc-photostrip--contained .okc-photostrip__container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-photostrip--contained .okc-photostrip__container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.okc-photostrip--contained .okc-photostrip__container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.okc-photostrip--contained .okc-photostrip__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-photostrip--contained .okc-photostrip__container {
		max-width: 1536px;
	}
}

/* ==========================================================================
   GRID  —  grid ... border-t-4 border-b-4 border-[#003B5D]
   ========================================================================== */
.okc-photostrip__grid {
	display: grid;
	grid-template-columns: repeat(var(--okc-ps-cols), minmax(0, 1fr));
	gap: var(--okc-ps-gap);
	border-top: var(--okc-ps-border-width) solid var(--okc-ps-border-color);
	border-bottom: var(--okc-ps-border-width) solid var(--okc-ps-border-color);
}

@media (min-width: 640px) {
	.okc-photostrip__grid {
		grid-template-columns: repeat(var(--okc-ps-cols-sm), minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.okc-photostrip__grid {
		grid-template-columns: repeat(var(--okc-ps-cols-md), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.okc-photostrip__grid {
		grid-template-columns: repeat(var(--okc-ps-cols-lg), minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.okc-photostrip__grid {
		grid-template-columns: repeat(var(--okc-ps-cols-xl), minmax(0, 1fr));
	}
}

/* ==========================================================================
   CELL
   Sundays: a bare <div>, height driven by the fixed-height image.
   Kids:    aspect-square overflow-hidden.
   ========================================================================== */
.okc-photostrip__cell {
	min-width: 0;
}

.okc-photostrip--square .okc-photostrip__cell {
	aspect-ratio: var(--okc-ps-ratio);
	overflow: hidden;
}

/* Optional per-photo link. display:block/100% so wrapping an image in an
   anchor cannot shift a single pixel. */
.okc-photostrip__link {
	display: block;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   IMAGE  —  w-full object-cover shadow-lg (+ h-48/md:h-64/lg:h-80 or h-full)
   ========================================================================== */
.okc-photostrip__img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: var(--okc-ps-object-position);
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Beats okc-base.css `.okc-w img { height: auto }` on specificity (0,2,0). */
.okc-photostrip--fixed .okc-photostrip__img {
	height: var(--okc-ps-h);
}

@media (min-width: 768px) {
	.okc-photostrip--fixed .okc-photostrip__img {
		height: var(--okc-ps-h-md);
	}
}

@media (min-width: 1024px) {
	.okc-photostrip--fixed .okc-photostrip__img {
		height: var(--okc-ps-h-lg);
	}
}

.okc-photostrip--square .okc-photostrip__img {
	height: 100%;
}

/* ==========================================================================
   OPT-OUTS
   ========================================================================== */
.okc-photostrip--noshadow .okc-photostrip__img {
	box-shadow: none;
}

/* okc-base.css reproduces main.css's global `img:hover { transform: scale(1.02) }`.
   The legacy strip inherited it, so it is ON by default and only cancelled here. */
.okc-photostrip--nozoom .okc-photostrip__img {
	transition: none;
}

.okc-photostrip--nozoom .okc-photostrip__img:hover {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.okc-photostrip__img {
		transition: none;
	}

	.okc-photostrip__img:hover {
		transform: none;
	}
}

/* NOTE: the Sundays cell is a bare <div> with no overflow:hidden, so the 1.02
   hover scale spills a little past the cell and the next sibling paints over
   the spill. That is what the legacy page did, so no z-index/overflow fix is
   applied here on purpose. The Kids ("square") cell clips it, as it always did. */