/* =============================================================================
   show.css — Individual Show / Project Page
   -----------------------------------------------------------------------------
   Styles for /show.php (rendered at /{slug} via .htaccess rewrite):
      - Show header         (uppercase, italic, light, tightly stacked, centered)
      - Gallery grid        (2 col default → 3 col @ 996px, equal visual sizing)
      - Project details     (1 col default → 2 col @ 768px, narrow label rail)
      - Press / print items (always 2-col with fixed-width thumbnail)
   ============================================================================= */

/* --- Show Header ----------------------------------------------------------- */
/* Title: uppercase, italic, font-weight 300, elegant (not massive).           */
/* Meta lines (gallery, location, year) tightly stacked and centered below.   */
.show-header {
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    text-align: center;
    background: var(--color-bg);
}

.show-header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    max-width: 800px;
    margin: 0 auto;
}

.show-header__title {
    font-size: 2.65rem;
    font-weight: 200;          /* extra-light to match .site-logo */
    font-style: italic;        /* explicitly italic per task spec */
    text-transform: uppercase; /* uppercase to match .site-logo */
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: var(--color-heading);
    margin: 0;
}

.show-header__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    margin-top: 0.35rem;
    color: var(--color-text);
}

.show-header__gallery,
.show-header__location,
.show-header__year {
    font-size: 1.15rem;
    font-weight: 300;
    font-style: normal;        /* strictly normal (no italics) per task spec */
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--color-text);
}

/* --- Gallery Grid ---------------------------------------------------------- */
/* 2 columns by default (mobile/tablet). 3 columns at >=996px.                */
/* Cells use a fixed aspect-ratio so portrait and landscape paintings        */
/* occupy roughly equal visual space (portraits don't dominate).             */
.gallery-section {
    padding: var(--space-lg) var(--space-md);
    background: var(--color-bg);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: var(--max-width);
    margin: 0 auto;
    justify-items: center;   /* center each cell horizontally */
    align-items: center;     /* center each cell vertically   */
}

.gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Square cells — both portrait and landscape images sit inside without
       cropping. The neutral background fills the letterbox space. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ffffff;
    border-radius: 2px;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    /* `contain` shows the full image; neutral background fills letterbox space */
    object-fit: contain;
    display: block;
}



/* --- Project Details (Conditional Sections) -------------------------------- */
/* Mobile: 1-column stack. Desktop (>=768px): 2-col grid with a narrow label
   rail on the left and the wider content column on the right.                */
.project-details {
    padding: var(--space-xl) var(--space-md);
    background: #ffffff;        /* per task spec — white extra-areas background */
}

.project-details .container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.project-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

/* Each detail row gets a delicate hairline divider between major sections.
   Per task spec, the divider appears above EVERY section — including the
   Description row (no more :first-child exception). */
.detail-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-top: var(--space-lg);
    border-top: 1px solid #eaeaea;
}

/* Left column: typography delegated to .section-title class (style.css) */
.detail-label {
    margin: 0;
}

.show-title {
   font-style: italic;  /* explicitly italic per task spec */
}

/* Right column: body copy at weight 400, muted text, standard case */
.detail-content {
    font-size: 1.08rem;
    font-weight: 400;          /* all body copy in extra areas per task spec */
    line-height: 1.75;
    color: var(--color-text); /* #777777 */
}

.detail-content p {
    margin-bottom: 0.75rem;
}

.detail-content p:last-child {
    margin-bottom: 0;
}

.detail-content a {
    color: var(--color-heading);
    text-decoration: none;     /* remove underlines per task spec */
}

.detail-content a:hover {
    opacity: 0.7;
}

/* Press / catalog items: also remove underlines on link itself */
.press-link {
    text-decoration: none;
}

.detail-content img {
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0;
}

/* --- Prints Section ------------------------------------------------------- */
.prints-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.print-item {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
}

.print-item img {
    width: 120px;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
}

.print-item .print-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 400;          /* body copy at weight 400 per task spec */
    color: var(--color-text);
}

/* --- Press / Catalogs Items (.press-link) --------------------------------- */
/* ALWAYS a 2-column layout: small fixed thumbnail on the left, text on the
   right. Holds on every screen size, per the design brief.                  */
.press-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.press-link {
    display: grid;
    grid-template-columns: 200px 1fr;  /* fixed thumb (max 200px) | fluid text */
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
}

.press-link > img {
    /* Fixed thumbnail width per design spec; border adds subtle definition */
    width: 200px;
    max-width: 200px;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
    border: 1px solid #999;
}

.press-link > .press-text {
    flex: 1;
    min-width: 0;             /* allow long URLs to wrap inside grid cell */
    font-size: 1.05rem;
    font-weight: 400;         /* body copy at weight 400 per task spec */
    line-height: 1.6;
    color: var(--color-text);
}

.press-link .press-title {
    color: var(--color-heading);
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.press-link:hover {
    color: var(--color-heading);
    opacity: 0.85;
}

/* Prints section: remove thumbnail border (borderless per design spec) */
.detail-row--prints .press-link > img {
    border: none;
}

/* =============================================================================
   RESPONSIVE: TABLET (≥768px)
   Project details switch to a 2-column grid (narrow label + wider content).
   ============================================================================= */
@media (min-width: 768px) {
    .project-details-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .detail-row {
        grid-template-columns: 180px 1fr;   /* narrow labels | wider content */
        column-gap: 2rem;
        row-gap: 0;
        align-items: start;
    }

    .detail-label {
        margin-bottom: 0;
        padding-top: 0.2rem;
    }

    .prints-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================================
   RESPONSIVE: LARGE TABLET / DESKTOP (≥996px)
   Gallery grid expands to 3 columns.
   ============================================================================= */
@media (min-width: 996px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

/* =============================================================================
   RESPONSIVE: DESKTOP (≥1024px)
   Final polish — wider gaps, larger header.
   ============================================================================= */
@media (min-width: 1024px) {
    .gallery-grid {
        gap: 2rem;
    }

    /* Show header: explicit desktop sizes */
    .show-header__title {
        font-size: 2.65rem;
    }

    .show-header__gallery,
    .show-header__location,
    .show-header__year {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .detail-row {
        grid-template-columns: 220px 1fr;
        column-gap: var(--space-xl);
    }

    /* Description text */
    .detail-content--description {
        font-size: 1.15rem;
        line-height: 1.5;
    }

    .print-item img,
    .press-link > img {
        width: 200px;
        max-width: 200px;
    }
}