/* style-portfolio.css: Photography-Portfolio only, loaded last.
   Selectors generated by the JS are restyled, never renamed.
   Cut-corner borders, gold hover and fades: see style-common.css, section 11. */

.disclaimer {
    text-transform: uppercase;
    letter-spacing: var(--ui-track-caption);
    font-size: .7em;
    color: var(--ui-text-2);
}

/* Table of contents: cut-corner buttons */
#toc h2 { font-size: 1.3em; }
#toc h2::after {
    content: "";
    display: block;
    width: min(60vw, 420px);
    height: var(--ui-bar-h);
    margin: 18px auto 0;
    background: var(--ui-double-bar);
}
#toc ul { gap: 8px; }
#toc li { padding: 9px 16px; }
#toc a {
    font-size: .78em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--ui-track-caption);
}

/* Photo sections: carbon panel with cut corners (background and border: style-common.css, section 11) */
.photo-section h2 { font-size: 1.2em; }

/* Thumbnails: near-square corners, same clip-path inset mechanism (same dimensions) */
.photo-grid img {
    border-radius: var(--ui-radius-media);
    clip-path: inset(10px round var(--ui-radius-media));
    transition: clip-path .3s var(--ui-ease), opacity var(--ui-dur) var(--ui-ease);
}
/* The original hover (components.css: reveal and zoom) is neutralised everywhere; the reveal only with a mouse */
.photo-grid img:hover {
    clip-path: inset(10px round var(--ui-radius-media));
    transform: none;
}
@media (hover: hover) {
    .photo-grid img:hover { clip-path: inset(0 round var(--ui-radius-media)); }
}

/* Viewer: the height of the visible area (dvh). 100vh (components.css) is measured with the mobile browser bars hidden,
   so the bottom of the viewer, with the share button, slid under the bottom bar. */
#image-modal { height: 100vh; height: 100dvh; }

/* Viewer: arrows and share as icons only (24 px svg, 1.5 px stroke), no background, no frame, no cut.
   Click area at least 44 x 44 px. The buttons' transform (JS and responsive.css) is untouched:
   the hover offset is applied to the svg. */
#image-modal .arrow, #image-modal .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    color: #E2E3E3;
    cursor: pointer;
    --ui-icon-top: #E2E3E3;
    --ui-icon-mid: #E2E3E3;
    --ui-icon-bot: #E2E3E3;
    transition: --ui-icon-top .33s ease, --ui-icon-mid .33s ease, --ui-icon-bot .33s ease;
}
#image-modal .share-btn { width: 44px; height: 44px; }
#image-modal .share-btn:hover { transform: none; }
#image-modal .arrow svg, #image-modal .share-btn svg {
    position: static;
    width: 24px;
    height: 24px;
    /* Dark shadow for contrast on a light photo, plus a gold glow (tight, then wide) that is transparent at rest (same list of shadows
       in every state, so the glow fades in) */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 2px rgba(236, 214, 160, 0)) drop-shadow(0 0 9px rgba(226, 200, 140, 0));
    transition: transform .33s cubic-bezier(.5, 0, 0, .75), filter .33s ease;
}
#image-modal .prev svg { transform: scaleX(-1); }
/* Share button: the share icon and the checkmark are stacked and crossfade, with the same timing as the gold and the
   glow (is-copied, script.js) */
#image-modal .share-btn { display: grid; place-items: center; }
#image-modal .share-btn svg {
    grid-area: 1 / 1;
    transition: transform .33s cubic-bezier(.5, 0, 0, .75), filter .33s ease, opacity .33s ease;
}
#image-modal .share-btn .icon-checkmark, #image-modal .share-btn.is-copied .icon-share { opacity: 0; }
#image-modal .share-btn.is-copied .icon-checkmark { opacity: 1; }
/* Icon colour: the stroke is a vertical gradient (script.js) whose three stops follow --ui-icon-top/-mid/-bot,
   registered as colours so they fade like the frames of the cards. Light grey at rest; on hover (and while the link
   is shown as copied) the champagne gradient of the card frames; on press the flat light gold of a pressed card. */
@property --ui-icon-top { syntax: "<color>"; inherits: true; initial-value: #E2E3E3; }
@property --ui-icon-mid { syntax: "<color>"; inherits: true; initial-value: #E2E3E3; }
@property --ui-icon-bot { syntax: "<color>"; inherits: true; initial-value: #E2E3E3; }
#image-modal .icon-stop-top { stop-color: var(--ui-icon-top); }
#image-modal .icon-stop-mid { stop-color: var(--ui-icon-mid); }
#image-modal .icon-stop-bot { stop-color: var(--ui-icon-bot); }
#image-modal .share-btn.is-copied {
    --ui-icon-top: var(--ui-gold-top);
    --ui-icon-mid: var(--ui-champ);
    --ui-icon-bot: var(--ui-champ-lo);
}
/* Gold glow behind a gold icon, so the thin gold line stands out from the dark viewer */
#image-modal .share-btn.is-copied svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 2px rgba(236, 214, 160, 0.75)) drop-shadow(0 0 9px rgba(226, 200, 140, 0.5));
}
/* Hover only with a mouse (a tap would leave it stuck); the original hover colour is neutralised everywhere */
#image-modal .arrow:hover, #image-modal .share-btn:hover { color: #E2E3E3; }
@media (hover: hover) {
    #image-modal .arrow:hover, #image-modal .share-btn:hover {
        --ui-icon-top: var(--ui-gold-top);
        --ui-icon-mid: var(--ui-champ);
        --ui-icon-bot: var(--ui-champ-lo);
    }
    #image-modal .arrow:hover svg, #image-modal .share-btn:hover svg {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 2px rgba(236, 214, 160, 0.75)) drop-shadow(0 0 9px rgba(226, 200, 140, 0.5));
    }
    #image-modal .next:hover svg { transform: translateX(2px); }
    #image-modal .prev:hover svg { transform: translateX(-2px) scaleX(-1); }
    #image-modal .share-btn:hover svg { transform: translateY(-2px); }
}
/* Press (click or tap): flat light gold with a stronger glow, quick. The arrows are pushed further in their own
   direction (4 px, the hover is 2 px), also on touch screens; the share button is pressed 1 px down, then stays gold while the link is
   shown as copied (is-copied, script.js). */
/* is-pressed: the arrow keys of the keyboard press the matching arrow (script.js) */
#image-modal .arrow:active, #image-modal .arrow.is-pressed, #image-modal .share-btn:active {
    --ui-icon-top: var(--ui-gold-top);
    --ui-icon-mid: var(--ui-gold-top);
    --ui-icon-bot: var(--ui-gold-top);
    transition-duration: 80ms;
}
#image-modal .arrow:active svg, #image-modal .arrow.is-pressed svg, #image-modal .share-btn:active svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 2px rgba(236, 214, 160, 0.95)) drop-shadow(0 0 9px rgba(226, 200, 140, 0.7));
    transition-duration: 80ms;
}
#image-modal .next:active svg, #image-modal .next.is-pressed svg { transform: translateX(4px); }
#image-modal .prev:active svg, #image-modal .prev.is-pressed svg { transform: translateX(-4px) scaleX(-1); }
#image-modal .share-btn:active svg { transform: translateY(1px); }
/* Section name at the top of the viewer: the display font of the headings. It may wrap on narrow phones
   (Street & Architecture). */
#image-modal .viewer-title {
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    font-family: var(--ui-font-display);
    font-weight: 400;
    font-size: clamp(12px, 3.6vw, 22px);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: var(--ui-track-display);
    /* The tracking also follows the last letter: a matching left padding keeps the text centred */
    padding: 8px 12px 8px calc(12px + var(--ui-track-display));
}
#image-modal .arrow:focus-visible, #image-modal .share-btn:focus-visible {
    outline: 2px solid var(--ui-lightbar);
    outline-offset: 2px;
    box-shadow: none;
}
.exif-text, #image-exif {
    text-transform: uppercase;
    letter-spacing: var(--ui-track-caption);
    color: var(--ui-text-2);
}

/* Mobile: no horizontal overflow. Thumbnails stay square (as on desktop, 175 x 175), so a loading preview never
   changes the height of the grid and the page does not shift under a deep-linked section. */
@media (max-width: 600px) {
    #gallery-container, .photo-section, .photo-grid {
        max-width: 100%;
        box-sizing: border-box;
    }
    .photo-item { min-width: 0; }
    .photo-grid img { aspect-ratio: 1 / 1; }
}