/* =====================================================================
   PROJECT PAGES: shared CSS for every project page.
   Based on your Cargo CSS for S.K.A / Sunshine / KOLIDO (they were
   identical). A project can override any of this with an extra.css file
   in its own folder (KAUPAPA does, for its taller layout).
   ===================================================================== */

/* Block-by-block entrance - rows appear instantly, one after another.
   The page's own row is full strength (.current), the others are dimmed. */
@keyframes blockInFull {
    to { opacity: 1; }
}
@keyframes blockInDim {
    to { opacity: 0.5; }
}
.row {
    opacity: 0;
    animation: blockInDim 0.05s steps(1) forwards;
    animation-delay: calc(0.1s + (var(--i) - 1) * 0.15s);
}
.row.current {
    animation-name: blockInFull;
}
/* Photos are visible immediately, no entrance animation */
column-set a {
    color: inherit !important;
    text-decoration: none;
}
.table-overlay {
    position: relative;
    z-index: 1;
}
/* Reserves space for the gallery so text below isn't overlapped */
.project-hero {
    position: relative;
    width: 100%;
    height: 88.8vh;
}
.project-footer {
    position: relative;
    padding: 0px 0px 80px;
}
.project-footer p {
    margin: 0;
    line-height: 1.10;
}
.project-footer p + p {
    margin-top: 40px; /* gap between each stacked paragraph in the footer */
    max-width: 700px; /* keeps the blurb paragraphs from stretching too wide */
}
/* Horizontal scroll strip */
.horizontal-scroll {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 908px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0 0px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.horizontal-scroll::-webkit-scrollbar {
    display: none;
}
.scroll-item {
    flex-shrink: 0;
    height: 78vh;
}
.scroll-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}
/* Row spacing reset — needed on every page */
column-set {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* Whole row italic on hover - applies to every row EXCEPT the nav row */
column-set:not(:first-of-type):has(a):hover,
column-set:not(:first-of-type):has(a):hover a {
    color: #000000;
    font-weight: 500;
    font-style: italic;
}
/* Nav row: ONLY "Index" gets the italic hover effect - HOHEPA has no hover rule at all */
.index-link:hover {
    color: #000000;
    font-weight: 500;
    font-style: italic;
}

/* In the Cargo preview the photo strip sits level with the table header
   row, i.e. below the nav row plus one blank line. Nudge this value if
   the photos sit too high or low compared with the old site. */
.project-hero .horizontal-scroll {
    top: calc(2 * var(--fs) * var(--lh));
}


/* =====================================================================
   PHONES (768px and narrower)
   Same page, re-laid-out: sticky HŌHEPA, a Year/Title/Status/Type
   summary, the blurb, then the images stacked edge to edge.
   Per-project tweaks (e.g. a different frame height for one image) go
   in that project's "Extra CSS" inside @media (max-width: 768px).
   ===================================================================== */
.m-nav, .m-info, .m-blurb { display: none; }

@media (max-width: 768px) {
    .page {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }
    /* HŌHEPA stays stuck at the top while scrolling */
    .m-nav {
        display: block;
        order: 0;
        position: sticky;
        top: 20px;
        z-index: 100;
    }
    /* Year / Title / Status / Type / Commision */
    .m-info {
        display: flex;
        order: 1;
        margin-top: 20px;
    }
    .m-info span {
        display: inline-block;
        vertical-align: top;
        line-height: 1.1;
    }
    .m-label { width: 90px; }
    .m-value { max-width: 240px; }
    /* Blurb */
    .m-blurb {
        display: block;
        order: 2;
        margin-top: 20px;
        padding-bottom: 20px;
        max-width: 500px;
        line-height: 1.1;
    }
    /* "Project: ..." style rows keep their values lined up */
    .m-kv { display: flex; }
    .m-k { width: 90px; flex: none; }
    .m-v { flex: 1; min-width: 0; }

    /* Hide the desktop table and text; reuse the same images */
    .project-hero { display: contents; }
    .table-overlay { display: none; }
    .project-footer { display: none; }

    /* Full-bleed stack, breaking out of the page margin */
    .page .horizontal-scroll {
        order: 3;
        position: static;
        display: block;
        width: 100vw;
        height: auto;
        margin-left: calc(50% - 50vw);
        padding: 0;
        overflow: visible;
        white-space: normal;
    }
    /* Each image sits in a fixed-height frame, cropped to fill it */
    .page .horizontal-scroll .scroll-item {
        display: block;
        width: 100%;
        height: var(--mh, 400px);   /* set per image in the admin */
        margin: 0;
        overflow: hidden;
    }
    .page .scroll-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}