.tkf-col {
    width: 100%;
}

.tkf-col__inner {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    padding-block: clamp(60px, 7vw, 100px);
}

.tkf-col__header {
    max-width: 760px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.tkf-col__header h1,
.tkf-col__header h2 {
    margin: 0 0 14px;
}

.tkf-col__header p {
    margin: 0;
    max-width: 700px;
    line-height: 1.65;
}

.tkf-col__video {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.tkf-col__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tkf-col__media-note {
    margin-top: 18px;
    font-size: 0.95em;
    line-height: 1.55;
    opacity: 0.78;
}

.tkf-col__photos {
    margin-top: clamp(24px, 4vw, 44px);
}

.tkf-col__gallery {
    display: grid;
    gap: clamp(12px, 1.5vw, 20px);
}

.tkf-col__gallery--landscape {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.tkf-col__gallery--portrait {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top:
        clamp(12px, 1.5vw, 20px);
}

.tkf-col__photo {
    position: relative;
    display: block;
    overflow: hidden;

    cursor: zoom-in;

    background: #ece9e3;
}

.tkf-col__gallery--landscape
.tkf-col__photo {
    aspect-ratio: 3 / 2;
}

.tkf-col__gallery--portrait
.tkf-col__photo {
    aspect-ratio: 2 / 3;
}

.tkf-col__photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 180ms ease;
}

.tkf-col__photo:hover img,
.tkf-col__photo:focus-visible img {
    transform: scale(1.015);
}

.tkf-col__youtube-link {
    margin-top: 22px;
}

.tkf-col__youtube-link a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================
   LIGHTBOX
   ========================================================== */

.tkf-col-lightbox[hidden] {
    display: none !important;
}

.tkf-col-lightbox {
    position: fixed;
    inset: 0;

    z-index: 2147483000;

    display: grid;

    grid-template-columns:
        minmax(48px, 8vw)
        minmax(0, 1fr)
        minmax(48px, 8vw);

    align-items: center;

    padding:
        clamp(18px, 3vw, 40px);

    background:
        rgba(8, 8, 8, 0.95);

    backdrop-filter:
        blur(6px);
}

html.tkf-col-lightbox-open {
    overflow: hidden;
}

.tkf-col-lightbox__stage {
    grid-column: 2;

    min-width: 0;

    display: grid;

    justify-items: center;

    gap: 14px;
}

.tkf-col-lightbox__image {
    display: block;

    max-width: 100%;
    max-height: 80vh;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow:
        0 18px 60px
        rgba(0, 0, 0, 0.55);
}

.tkf-col-lightbox__caption {
    max-width: 760px;

    color: #fff;

    text-align: center;
    line-height: 1.5;

    opacity: 0.92;
}

.tkf-col-lightbox__download {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 8px 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.5);

    color: #fff;
    text-decoration: none;
}

.tkf-col-lightbox__download[hidden] {
    display: none !important;
}

.tkf-col-lightbox__close,
.tkf-col-lightbox__nav {
    border: 0;

    color: #fff;

    background:
        rgba(255, 255, 255, 0.09);

    cursor: pointer;
}

.tkf-col-lightbox__close:hover,
.tkf-col-lightbox__close:focus-visible,
.tkf-col-lightbox__nav:hover,
.tkf-col-lightbox__nav:focus-visible {
    background:
        rgba(255, 255, 255, 0.19);
}

.tkf-col-lightbox__close {
    position: absolute;

    top:
        clamp(12px, 2vw, 24px);

    right:
        clamp(12px, 2vw, 24px);

    width: 48px;
    height: 48px;

    border-radius: 999px;

    font-size: 32px;
    line-height: 1;
}

.tkf-col-lightbox__nav {
    width: 52px;
    height: 72px;

    justify-self: center;

    font-size: 30px;
}

.tkf-col-lightbox__prev {
    grid-column: 1;
}

.tkf-col-lightbox__next {
    grid-column: 3;
}

@media (max-width: 980px) {

    .tkf-col__gallery--portrait {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {

    .tkf-col__inner {
        width:
            min(
                calc(100% - 28px),
                1180px
            );
    }

    .tkf-col__gallery--landscape {
        grid-template-columns: 1fr;
    }

    .tkf-col__gallery {
        gap: 12px;
    }

    .tkf-col__gallery--portrait {
        margin-top: 12px;
    }

    .tkf-col-lightbox {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            44px;

        padding:
            64px 6px 20px;
    }

    .tkf-col-lightbox__nav {
        width: 40px;
        height: 54px;

        font-size: 24px;
    }

    .tkf-col-lightbox__image {
        max-height: 70vh;
    }
}

/* ==========================================================
   TKF_COL_V012_MEDIA_SPACING_BEGIN

   Dedicated media page:
   - WordPress owns page H1 above this component.
   - Reduce inherited section-top whitespace.
   - Give intro and photo instruction clear utility hierarchy.

   Tony memorial context intentionally unchanged.
   ========================================================== */

.tkf-col--media .tkf-col__inner {
    padding-top: clamp(20px, 2.5vw, 36px);
}

.tkf-col--media .tkf-col__header {
    margin-bottom: clamp(22px, 2.5vw, 32px);
}

.tkf-col--media .tkf-col__header p {
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.6;
    opacity: 0.9;
}

.tkf-col--media .tkf-col__media-note {
    margin: 16px 0 0;
    padding: 12px 15px;

    border:
        1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 4px;

    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;

    opacity: 1;
}

.tkf-col--media .tkf-col__photos {
    margin-top: clamp(18px, 2.5vw, 28px);
}

@media (max-width: 680px) {

    .tkf-col--media .tkf-col__inner {
        padding-top: 18px;
    }

    .tkf-col--media .tkf-col__media-note {
        padding: 11px 12px;
    }
}

/* TKF_COL_V012_MEDIA_SPACING_END */