/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
.home-page {
    margin: var(--space-0);
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-body);
}

.home-page main {
    overflow: hidden;
    background: var(--color-white);
    padding-top: var(--navbar-height);
}

.home-hero {
    display: grid;
    align-items: center;
    background: var(--color-white);
}

.hero-top {
    position: relative;
    display: grid;
    min-height: 100%;
    place-items: center;
    overflow: hidden;
    background: var(--color-white);
}

.hero-outline {
    position: absolute;
    /* inset: calc(var(--space-12) * -1) calc(var(--space-10) * -1); */
    display: grid;
    grid-template-rows: repeat(2, minmax(var(--space-0), 1fr));
    color: var(--color-transparent);
    font-family: var(--font-heading);
    font-size: clamp(calc(var(--text-5xl) * 2), 34vw, calc(var(--text-5xl) * 5.7));
    font-weight: var(--font-weight-black);
    line-height: 0.68;
    font-style: italic;
    letter-spacing: var(--letter-spacing-normal);
    text-transform: uppercase;
    -webkit-text-stroke: var(--border-width-md) var(--color-gray-light);
    text-stroke: var(--border-width-md) var(--color-gray-light);
    user-select: none;
}

.hero-outline span {
    display: block;
    white-space: nowrap;
}

.hero-outline span:first-child {
    align-self: end;
    justify-self: center;
}

.hero-outline span:last-child {
    align-self: start;
    justify-self: center;
}

.hero-brand {
    position: relative;
    z-index: var(--z-base);
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    color: var(--color-black);
}

.hero-brand-mark {
    width: clamp(var(--space-13), 8.5vw, var(--space-17));
    height: auto;
    color: var(--color-primary);
}

.hero-brand-mark path {
    fill: var(--color-current);
}

.hero-brand h1 {
    margin: var(--space-0);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-lg), 1.7vw, var(--text-2xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    white-space: nowrap;
}

.hero-statement {
    width: 100%;
    display: grid;
    align-items: center;
    background: var(--color-primary-dark);
    color: var(--color-surface);
}

.hero-statement-inner {
    padding-top: var(--section-band-padding-top);
    padding-bottom: var(--section-band-padding-bottom);
}

.hero-statement p {
    max-width: 17.5em;
    margin: var(--space-0);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 4.7vw, calc(var(--text-4xl) * 1.15));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
}

.hero-statement em {
    color: var(--color-yellow);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--font-weight-extrabold);
}

.about-preview {
    display: grid;
    align-items: stretch;
    background: var(--color-white);
}

.section-shell {
    display: grid;
    min-height: var(--section-min-height);
    grid-template-rows: auto minmax(var(--space-0), 1fr) auto;
    padding-top: var(--content-anchor-top);
    padding-bottom: var(--content-anchor-bottom);
}

.section-shell h2 {
    margin: var(--space-0);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 4.35vw, var(--text-4xl));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
}

.cards-holder {
    display: grid;
    align-items: center;
    background: transparent;
    padding-top: var(--content-zone-gap);
    padding-bottom: var(--content-zone-gap);
}

.member-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(var(--space-0), 1fr));
    gap: clamp(var(--space-5), 2.2vw, var(--space-10));
    align-items: center;
    background: transparent;
}

.member-card {
    display: block;
    width: 100%;
    max-width: calc(var(--space-18) * 1.25);
    justify-self: center;
    border-radius: var(--radius-md);
    border: var(--space-0);
    background: transparent;
    color: var(--color-current);
    text-decoration: none;
    transform-origin: center;
}

.member-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1288 / 1800;
    border-radius: inherit;
    border: var(--space-0);
    background: transparent;
    object-fit: contain;
    box-shadow: none;
    filter: none;
    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
    will-change: transform, filter;
}

.member-card:hover img,
.member-card:focus-visible img {
    transform: translateY(-6px) scale(1.02);
    filter: drop-shadow(var(--space-0) var(--space-4) var(--space-7) var(--color-shadow));
}

.about-copy {
    max-width: 52em;
    margin: var(--space-0);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-lg), 1.85vw, var(--text-2xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
}

.gallery-preview {
    position: relative;
    width: 100%;
    display: grid;
    overflow: hidden;
    background: var(--color-black);
    color: var(--color-surface);
}

.gallery-preview-video,
.gallery-preview-overlay {
    position: absolute;
    inset: var(--space-0);
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-preview-video {
    z-index: var(--z-base);
    background: var(--color-black);
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms var(--easing-standard);
}

.gallery-preview-video.is-video-ready {
    opacity: 1;
}

.gallery-preview-overlay {
    z-index: 2;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: none;
}

.gallery-preview-inner {
    position: relative;
    z-index: 3;
    display: grid;
    width: 100%;
    min-height: 100%;
    padding-top: var(--content-anchor-top);
    padding-bottom: var(--content-anchor-bottom);
}

.gallery-heading {
    justify-self: end;
    max-width: 42em;
    text-align: right;
}

.gallery-heading h2 {
    margin: var(--space-0) var(--space-0) var(--space-2);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 4.65vw, var(--text-4xl));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
}

.gallery-heading p {
    margin: var(--space-0);
    color: var(--color-surface);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-sm), 1.45vw, var(--text-xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
}

.gallery-link {
    align-self: end;
    justify-self: start;
    color: var(--color-surface);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-2xl), 4.8vw, var(--text-4xl));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-decoration: none;
    text-transform: lowercase;
}

.gallery-link span {
    color: var(--color-primary);
}

@media (max-width: 900px) {
    .home-page main {
        padding-top: var(--navbar-height-mobile);
    }

    .hero-outline {
        inset: calc(var(--space-11) * -1) calc(var(--space-7) * -1);
        font-size: clamp(calc(var(--text-5xl) * 1.65), 47vw, calc(var(--text-5xl) * 4.35));
        line-height: 0.66;
    }

    .member-preview-grid {
        grid-template-columns: repeat(4, minmax(var(--space-0), 1fr));
        gap: var(--space-5);
    }

    .member-card {
        max-width: calc(var(--space-17) * 1.55);
    }

    .gallery-heading {
        max-width: 100%;
    }
}

@media (max-width: 620px) {
    .home-page main > .main-section {
        height: calc(100svh - var(--navbar-height-mobile));
        height: calc(100dvh - var(--navbar-height-mobile));
        min-height: var(--space-0);
    }

    .hero-outline {
        inset: calc(var(--space-14) * -1) calc(var(--space-11) * -1);
        font-size: clamp(12rem, 62vw, 20rem);
        line-height: 0.62;
        opacity: 0;
    }

    .section-shell {
        height: 100%;
        min-height: var(--space-0);
    }

    .cards-holder {
        min-height: var(--space-0);
    }

    .member-preview-grid {
        grid-auto-columns: calc(100vw - var(--page-padding) - var(--page-padding));
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-template-rows: minmax(var(--space-0), 1fr);
        gap: var(--space-4);
        height: 100%;
        min-height: var(--space-0);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: var(--space-3);
    }

    .member-preview-grid::-webkit-scrollbar {
        display: none;
    }

    .member-card {
        height: 100%;
        max-width: none;
    }

    .member-card img {
        height: 100%;
    }

    .gallery-heading {
        justify-self: start;
        text-align: left;
    }
}