/* KI Life Events: event cards + photo lightbox */
.ki-life { padding: 110px 0; background: #F4E8D0; font-family: "Manrope", system-ui, sans-serif; color: #353535; }
.ki-life__in { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.ki-life__head { text-align: center; margin-bottom: 56px; }
.ki-life__eyebrow { display: inline-block; position: relative; margin: 0 0 26px; padding-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #353535; }
.ki-life__eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(124,184,174,.6); }
.ki-life__eyebrow::before { content: ""; position: absolute; right: 0; bottom: -1px; width: 52px; height: 4px; background: #146131; z-index: 1; }
.ki-life__heading { margin: 0; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.14; letter-spacing: .01em; text-transform: uppercase; font-weight: 300; color: #1a1a1a; }
.ki-life__heading strong { font-weight: 700; }
.ki-life__sub { max-width: 560px; margin: 18px auto 0; font-size: 1.05rem; line-height: 1.8; color: #555; }
.ki-life__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ki-life .ki-life__card { display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.08); transition: transform .35s, box-shadow .35s; font: inherit; color: inherit; }
.ki-life .ki-life__card:hover, .ki-life .ki-life__card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.14); background: #fff; color: inherit; }
.ki-life__img { display: block; aspect-ratio: 4/3; overflow: hidden; background: #d9d2c0; }
.ki-life__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ki-life__card:hover .ki-life__img img { transform: scale(1.05); }
.ki-life__meta { display: block; padding: 22px 24px 26px; }
.ki-life__when { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #146131; }
.ki-life__title { display: block; font-size: 1.3rem; font-weight: 600; line-height: 1.3; color: #1a1a1a; }
.ki-life__text { display: block; margin-top: 8px; font-size: .95rem; line-height: 1.7; color: #5a5446; }
.ki-life__count { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #7a7260; }

/* Lightbox */
.ki-lb { position: fixed; inset: 0; z-index: 1000002; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(8,12,10,.94); padding: 24px; }
.ki-lb__img { max-width: min(92vw, 1200px); max-height: 78vh; object-fit: contain; border-radius: 6px; }
.ki-lb__cap { margin-top: 16px; color: #f4e8d0; font-size: 14px; letter-spacing: .08em; text-align: center; }
.ki-lb button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ki-lb button:hover { background: #7CB8AE; color: #0f1412; }
.ki-lb__close { top: 20px; right: 20px; }
.ki-lb__prev { left: 20px; top: 50%; margin-top: -24px; }
.ki-lb__next { right: 20px; top: 50%; margin-top: -24px; }
html.ki-lb-open { overflow: hidden; }
@media (max-width: 1024px) { .ki-life__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.ki-life { padding: 70px 0; }
	.ki-life__grid { grid-template-columns: 1fr; gap: 20px; }
	.ki-lb__prev { left: 8px; } .ki-lb__next { right: 8px; }
}

/* Masonry layout (layout="masonry"): one 6-column grid; the tile arrangement depends on how many tiles the block has (n1 to n6),
   so 1, 2, 3, 4, 5 or 6 events (and any number above, in blocks of 6) always fill the width with no gaps.
   Row unit --ki-u is half a column, so tiles keep their proportions at every screen width. */
.ki-life__mason { --ki-g: 12px; --ki-w6: calc((min(100vw, 1240px) - 48px - 5 * var(--ki-g)) / 6); --ki-u: calc((var(--ki-w6) - var(--ki-g)) / 2); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ki-g); }
.ki-life__mason + .ki-life__mason { margin-top: var(--ki-g); }
.ki-life .ki-life__tile { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #d9d2c0; cursor: pointer; font: inherit; color: #fff; text-align: left; }
.ki-life__timg { position: absolute; inset: 0; display: block; }
.ki-life__timg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ki-life__tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); z-index: 1; }
.ki-life__tile::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #000; opacity: .5; z-index: 2; transition: height .3s linear, opacity .3s linear; }
.ki-life__tile:hover::after, .ki-life__tile:focus-visible::after { height: 100%; opacity: .7; }
.ki-life__tile:hover .ki-life__timg img { transform: scale(1.04); }
.ki-life__ttitle { position: absolute; left: 0; bottom: 0; z-index: 4; padding: 14px 16px; font-size: 16px; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.ki-life__plus { position: absolute; left: 50%; top: 50%; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0; transform: translateY(-80%); transition: transform .3s linear, opacity .3s linear; }
.ki-life__plus::before, .ki-life__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; }
.ki-life__plus::before { width: 2px; height: 28px; margin: -14px 0 0 -1px; }
.ki-life__plus::after { width: 28px; height: 2px; margin: -1px 0 0 -14px; }
.ki-life__tile:hover .ki-life__plus, .ki-life__tile:focus-visible .ki-life__plus { opacity: 1; transform: translateY(0) rotate(90deg); }

/* 6 tiles: [sq sq] [land port] [sq sq] */
.ki-life__mason--n6 { grid-template-rows: repeat(8, var(--ki-u)); }
.ki-life__mason--n6 > :nth-child(1) { grid-area: 1 / 1 / 5 / 3; } .ki-life__mason--n6 > :nth-child(2) { grid-area: 5 / 1 / 9 / 3; }
.ki-life__mason--n6 > :nth-child(3) { grid-area: 1 / 3 / 4 / 5; } .ki-life__mason--n6 > :nth-child(4) { grid-area: 4 / 3 / 9 / 5; }
.ki-life__mason--n6 > :nth-child(5) { grid-area: 1 / 5 / 5 / 7; } .ki-life__mason--n6 > :nth-child(6) { grid-area: 5 / 5 / 9 / 7; }
/* 5 tiles: [sq sq] [tall] [sq sq] */
.ki-life__mason--n5 { grid-template-rows: repeat(8, var(--ki-u)); }
.ki-life__mason--n5 > :nth-child(1) { grid-area: 1 / 1 / 5 / 3; } .ki-life__mason--n5 > :nth-child(2) { grid-area: 5 / 1 / 9 / 3; }
.ki-life__mason--n5 > :nth-child(3) { grid-area: 1 / 3 / 9 / 5; }
.ki-life__mason--n5 > :nth-child(4) { grid-area: 1 / 5 / 5 / 7; } .ki-life__mason--n5 > :nth-child(5) { grid-area: 5 / 5 / 9 / 7; }
/* 4 tiles: [tall] [sq sq] [tall] */
.ki-life__mason--n4 { grid-template-rows: repeat(8, var(--ki-u)); }
.ki-life__mason--n4 > :nth-child(1) { grid-area: 1 / 1 / 9 / 3; }
.ki-life__mason--n4 > :nth-child(2) { grid-area: 1 / 3 / 5 / 5; } .ki-life__mason--n4 > :nth-child(3) { grid-area: 5 / 3 / 9 / 5; }
.ki-life__mason--n4 > :nth-child(4) { grid-area: 1 / 5 / 9 / 7; }
/* 3 tiles: three equal portraits */
.ki-life__mason--n3 { grid-template-rows: repeat(5, var(--ki-u)); }
.ki-life__mason--n3 > :nth-child(1) { grid-area: 1 / 1 / 6 / 3; } .ki-life__mason--n3 > :nth-child(2) { grid-area: 1 / 3 / 6 / 5; } .ki-life__mason--n3 > :nth-child(3) { grid-area: 1 / 5 / 6 / 7; }
/* 2 tiles: two halves */
.ki-life__mason--n2 { grid-template-rows: repeat(5, var(--ki-u)); }
.ki-life__mason--n2 > :nth-child(1) { grid-area: 1 / 1 / 6 / 4; } .ki-life__mason--n2 > :nth-child(2) { grid-area: 1 / 4 / 6 / 7; }
/* 1 tile: a wide banner */
.ki-life__mason--n1 { grid-template-rows: repeat(5, var(--ki-u)); }
.ki-life__mason--n1 > :nth-child(1) { grid-area: 1 / 1 / 6 / 7; }

/* Tablet / phone: simple grid, every tile the same size; an odd last tile spans the full width */
@media (max-width: 900px) {
	.ki-life__mason { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
	.ki-life__mason > .ki-life__tile { grid-area: auto; aspect-ratio: 1 / 1; height: auto; }
	.ki-life__mason > .ki-life__tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}
@media (max-width: 600px) {
	.ki-life__mason { grid-template-columns: 1fr; }
	.ki-life__mason > .ki-life__tile, .ki-life__mason > .ki-life__tile:last-child:nth-child(odd) { aspect-ratio: 4 / 3; }
	.ki-life__ttitle { font-size: 13px; }
}