/* ===== Project page layout (shared by every project page) ===== */

.project-page {
    max-width: 1800px;
    margin: 0 auto;
    padding: 120px 60px 120px;

    /* Section spacing knobs (used by gallery type:section, Projects, Challenges,
       Credits): a big gap BEFORE a section heading marks the chapter break; a
       tight gap AFTER it hugs the section's own content to the heading. */
    --section-gap-before: 200px;
    --section-gap-after: 100px;
}

/* Breadcrumb back to the parent Work */
.project-breadcrumb { margin-bottom: 20px; }
.project-breadcrumb a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--color-unselected);
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
    transition: color 0.2s ease;
}
.project-breadcrumb a:hover {
    color: var(--accentColor);
}

/* Splash image at the top */
.project-splash {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    margin-bottom: 40px;
}

/* Splash YouTube embed at the top */
.project-splash-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 40px;
}

.project-splash-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Autoplay/loop variant: purely decorative, like the homepage background video —
   no click-to-pause, no YouTube watermark click-through. */
.project-splash-video--loop iframe {
    pointer-events: none;
}

/* ===== Project header: info (left) + Overview (right). Project pages only —
   umbrella pages keep the old stacked splash/meta-table/overview layout. ===== */
.project-header {
    display: grid;
    grid-template-columns: minmax(290px, 400px) 1fr;
    column-gap: 300px;
    align-items: start;
}

.project-header .project-overview { margin-top: 0; }

/* Title + subtitle */
.project-title {
    margin: 0;
    color: var(--color-text);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.project-subtitle {
    margin: 6px 0 0;
    color: var(--color-unselected);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;
}

.project-info-divider {
    border: none;
    border-top: 1px solid var(--color-unselected);
    opacity: 0.35;
    margin: 12px 0;
}

.project-role-date {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    row-gap: 12px;
}

.project-role {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
}
.project-date {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

.project-role::before {
    content: "role: ";
    color: var(--color-unselected);
}

.project-date::before {
    content: "date: ";
    color: var(--color-unselected);
}

/* Tags — outlined chips below the role/date in the left header column */
.project-tags {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-tag {
    border: 1px solid color-mix(in srgb, var(--color-unselected) 55%, transparent);
    border-radius: 4px;
    padding: 4px 10px;
    color: var(--color-unselected);
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* End-note sections at the bottom of a project page (Challenges, then Credits),
   each below the gallery. Two-column: a label on the left, content on the right,
   preceded by a full-width thin divider. */
/* End-notes (Challenges, Credits) use the type:section layout (line + far-left
   title + body on the right); the section margin matches the gallery gap. */
.project-endnote-section { margin-top: var(--section-gap-before); }

/* The section block reuses .gallery-text typography but not its big standalone
   margins (the section margin already provides the spacing). */
.project-endnote-section .gallery-text {
    margin-top: 0;
    margin-bottom: 0;
}

.project-credits {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 80px;
    row-gap: 8px;
}

.credit-role {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

.credit-name {
    color: var(--color-unselected);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ===== Meta table: Role / Timeline ===== */
.project-meta {
    display: inline-grid;
    grid-template-columns: max-content max-content;
    row-gap: 3px;                     /* horizontal lines (between rows) */
    column-gap: 3px;                  /* vertical line (between columns) */
    background: var(--color-background);
    margin-top: 20px;
}

.meta-cell {
    display: flex;
    align-items: center;
    background-color: var(--color-text);
    color: var(--color-background);
    padding: 6px 12px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.meta-cell-label {
    /* 15% black tint layered over the text-color background */
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
    font-weight: 500;
    white-space: nowrap;
}

/* ===== Section labels (Overview, Work) ===== */
.section-label {
    margin: 0 0 20px;
    color: var(--color-text);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
}

/* ===== Overview text ===== */
.project-overview { margin-top: 72px; }

.project-overview p {
    margin: 0 0 1.2em;
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Media embedded in an overview body (images, video, iframes) */
.project-overview img,
.project-overview video,
.project-overview iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
}

.project-overview h3 {
    margin: 1.6em 0 0.6em;
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.project-overview ul {
    margin: 0 0 1.2em;
    padding-left: 1.2em;
}

.project-overview li {
    margin: 0 0 0.5em;
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ===== Gallery: images/gifs/videos auto-populated from a project's gallery folder ===== */
.project-gallery-section {
    margin-top: 72px;
    padding-top: 72px;
}

.project-gallery {
    /* --gallery-media-gap: base gap between all items (media↔media).
       --gallery-text-gap: total gap wanted around a text block (text↔media).
       Text blocks add the difference as extra margin on top of the flex gap,
       so the two values tune independently. */
    --gallery-media-gap: 140px;
    --gallery-text-gap: 140px;
    display: flex;
    flex-direction: column;
    gap: var(--gallery-media-gap);
}

.project-gallery img,
.project-gallery video {
    display: block;
    width: 100%;
    height: auto;
}

/* iframes have no natural intrinsic size for `height: auto` to compute from
   (unlike img/video), so force the ratio explicitly instead. */
.project-gallery iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

/* gallery_items: per-item wrapper, caption, and inline text block */
.gallery-item { }

/* max_width on an item caps its width; auto side margins center it within
   the full-width gallery column (caption stays aligned under the media). */
.gallery-item--constrained { margin-inline: auto; }

.gallery-item img,
.gallery-item video,
.gallery-item iframe {
    margin-bottom: 0;
}

.gallery-caption {
    margin: 8px 0 0;
    color: var(--color-unselected);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Text blocks want more breathing room than media↔media. The flex `gap`
   already contributes --gallery-media-gap on each side, so add only the
   difference as margin to reach --gallery-text-gap total. */
.gallery-text {
    margin-top: calc(var(--gallery-text-gap) - var(--gallery-media-gap));
    margin-bottom: calc(var(--gallery-text-gap) - var(--gallery-media-gap));
}

/* Text attached to a media item hugs it instead of using the big standalone gap */
.gallery-text--attached {
    margin-top: 60px;
    margin-bottom: 0;
}

/* (Attached two-col text keeps the base `justify-content: center`, so the
   title|body pair is centered together under the media.) */

.gallery-text--two-col {
    display: grid;
    grid-template-columns: minmax(160px, 260px) minmax(0, 850px);
    column-gap: 56px;
    align-items: start;
    justify-content: center;   /* center the title + body pair as one unit */
}

.gallery-text--two-col .gallery-text-heading {
    align-self: center;   /* vertically centered in the column */
    text-align: left;     /* but the text itself is left-aligned */
}

/* title_align: top — pin the heading to the top of the column instead */
.gallery-text--title-top .gallery-text-heading {
    align-self: start;
}

/* type: section — a chapter heading (line + title + subtitle) pinned to the FAR
   LEFT with the body to its RIGHT, matching the project header layout exactly
   (title column at the page edge, overview to the right). Left-aligned. */
.gallery-section {
    display: grid;
    grid-template-columns: minmax(290px, 400px) 1fr;
    column-gap: 300px;
    align-items: start;
    text-align: left;
}

/* Sections inside the gallery flow: big gap above (chapter break), tight gap
   below (hug the section's own content). The flex gap already contributes
   --gallery-media-gap on each side, so add/subtract to reach the targets. */
.project-gallery .gallery-section {
    margin-top: calc(var(--section-gap-before) - var(--gallery-media-gap));
    margin-bottom: calc(var(--section-gap-after) - var(--gallery-media-gap));
}

.gallery-section-heading {
    text-align: left;
}

/* Body sits in the right column, top-aligned with the heading. `max_width:` on
   the item caps it further. */
.gallery-section .gallery-text-body {
    max-width: 1000px;
}

.gallery-section-line {
    width: min(400px, 100%);
    height: 3px;
    margin: 0 0 20px;
    border: none;
    background: var(--color-text);
}

.gallery-section-title {
    margin: 0;
    color: var(--color-text);
    font-size: 2rem;   /* one step below the project title (2.75rem) */
    font-weight: 700;
    line-height: 1.1;
}

/* Selector is a two-class descendant so the muted color beats `.gallery-text p`
   (which would otherwise win on specificity and force the light text color). */
.gallery-section-heading .gallery-section-subtitle {
    margin: 8px 0 0;
    color: var(--color-unselected);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.35;
}

/* image variant — image on the left, title stacked above the body on the right */
.gallery-text--image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: center;   /* text block vertically centered against the image */
    justify-content: center;
}

.gallery-text-image img,
.gallery-text-image video {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;   /* centered in its column when capped by max_width */
}

/* Selector is more specific than `.gallery-text p` so the caption keeps its
   muted color/size instead of inheriting the body-text style (this <p> is a
   descendant of `.gallery-text`). */
.gallery-text-image .gallery-caption {
    color: var(--color-unselected);
    font-size: 0.875rem;
}

/* Title + subtitle sit tight together in the left column */
.gallery-text-heading .section-label { margin-bottom: 0; }

/* Image-left variant: title, subtitle, and body all stack in one column
   (`.gallery-text-body-wrap`). When a subtitle follows, the title needs to
   hug it instead of keeping its own default 20px gap — but ONLY then, else
   the title loses its gap to the body below with no subtitle to replace it.
   The `--has-subtitle` modifier class is added in gallery.html precisely when
   a subtitle is present. */
.gallery-text-body-wrap .section-label--has-subtitle { margin-bottom: 0; }

/* Selector is more specific than `.gallery-text p` so the muted color and
   tight margin win (both target this <p>). */
.gallery-text-heading .gallery-text-subtitle,
.gallery-text-body-wrap .gallery-text-subtitle {
    color: var(--color-unselected);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.35;
}

.gallery-text-heading .gallery-text-subtitle { margin: 2px 0 0; }
.gallery-text-body-wrap .gallery-text-subtitle { margin: 2px 0 20px; }

.gallery-text p {
    margin: 0 0 1.2em;
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.7;
}

.gallery-text h3 {
    margin: 1.6em 0 0.6em;
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.gallery-text ul {
    margin: 0 0 1.2em;
    padding-left: 1.2em;
}

.gallery-text li {
    margin: 0 0 0.5em;
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.4;
}

.gallery-yt-loop { pointer-events: none; }

/* type: grid — configurable column grid within the gallery flow */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--gallery-grid-cols, 2), 1fr);
    gap: 20px;
}

/* max_width on a grid caps its width; auto side margins center it in the column */
.gallery-grid--constrained { margin-inline: auto; }

.gallery-grid-item img,
.gallery-grid-item video {
    display: block;
    width: 100%;
    height: auto;
}

/* aspect: uniform cells — every item crops to the same aspect ratio (no ragged grid) */
.gallery-grid--uniform .gallery-grid-item img,
.gallery-grid--uniform .gallery-grid-item video {
    aspect-ratio: var(--gallery-grid-aspect, 1);
    object-fit: cover;
}

@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
}

/* ===== Work: 2-column grid of image links ===== */
/* Thin grey rule divides the section above (gallery, or the overview when there's
   no gallery) from the child Projects grid — mirrors the gallery section's divider. */
/* The Projects header uses the type:section markup (line + title + blurb on the
   right); no divider between the gallery and this section. Big gap before the
   section, tight gap between its heading and the child grid. */
.project-work {
    margin-top: var(--section-gap-before);
}

#work-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--project-card-gap);
    margin-top: var(--section-gap-after);
}

.work-card {
    display: block;
    width: 100%;
    text-decoration: none;
}

.work-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.work-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.work-card:hover .work-card-image img { transform: scale(1.04); }

/* Soft fade at the bottom of the card so the overlaid title/subtitle stay
   readable even over a light/white cover image — matches .project-card. */
.work-card-vignette {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: var(--project-card-vignette-height);
    pointer-events: none;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--project-card-vignette-color) var(--project-card-vignette-strength), transparent) 0%,
        transparent 100%);
}

.work-card-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
}

.work-card-name {
    margin: 0;
    color: var(--project-card-title-color);
    font-size: var(--project-card-title-size);
    font-weight: 700;
    line-height: 1.3;
}

.work-card-subname {
    margin: 4px 0 0;
    color: var(--project-card-subtitle-color);
    font-size: var(--project-card-subtitle-size);
    font-weight: 400;
    line-height: 1.3;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .project-page { padding: 96px 20px 120px; }
    .project-title { font-size: 2rem; }
    #work-list { grid-template-columns: 1fr; }
    .project-header { grid-template-columns: 1fr; row-gap: 40px; }
    .gallery-text--two-col { grid-template-columns: 1fr; }
    .gallery-section { grid-template-columns: 1fr; row-gap: 24px; }
    .gallery-text--image { grid-template-columns: 1fr; row-gap: 24px; }
}