/* /foto-taranto/ — the open Taranto photo library.
   Design intent: the photographs ARE the interface. A slightly deeper navy
   than the site base, big picture-tiles with a thin glass border and soft
   radius, one quiet caption bar per tile carrying the licence line. */

.ft-section {
    max-width: 1180px;                 /* the band's width; the house agrees */
    margin: 0 auto;
    padding: clamp(2.4rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 5rem;
    /* full-bleed backdrop one step darker than --bg-base */
    background: #07080d;
    box-shadow: 0 0 0 100vmax #07080d;
    clip-path: inset(0 -100vmax);
}

.ft-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--note);
    margin: 2.2rem 0 0.6rem;
    text-align: center;
}

.ft-section h1 {
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.08;
    color: var(--text-primary);
    margin: 0 0 0.9rem;
    text-align: center;
}

.ft-standfirst {
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: 1.06rem;
    line-height: 1.65;
    margin: 0 auto 2rem;
    text-align: center;
}

/* ── licence banner ─────────────────────────────────────────────────────── */
.ft-licence {
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 1.1rem 1.3rem;
    margin: 0 auto 2.6rem;
    max-width: 720px;
    text-align: center;
}
.ft-licence-k {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.35rem;
}
.ft-licence-v { color: var(--text-secondary); font-size: 0.94rem; margin: 0 0 0.4rem; }
.ft-licence-line {
    font-size: 1.02rem; color: var(--text-primary); font-weight: 600;
    margin: 0 0 0.45rem; user-select: all;   /* one click selects the whole line */
}
.ft-licence-n { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.ft-licence-n a { color: var(--note); text-decoration: none; }
.ft-licence-n a:hover { text-decoration: underline; }

/* ── press pack ─────────────────────────────────────────────────────────── */
/* Under the licence, above the feed: a newsroom arriving from a mail has ten
   seconds and wants one file, not sixty. Quieter than the licence banner — it
   is an offer, not the terms. */
.ft-press {
    max-width: 720px;
    margin: -1.9rem auto 2.6rem;
    padding: 0.9rem 1.3rem 1.1rem;
    border: 1px dashed var(--border-soft);
    border-radius: 16px;
    text-align: center;
}
.ft-press-k {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.3rem;
}
.ft-press-v { color: var(--text-secondary); font-size: 0.92rem; margin: 0 0 0.7rem; }
.ft-press-dl {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.ft-press-dl:hover { border-color: var(--note); }

/* ── the feed ───────────────────────────────────────────────────────────── */
/* ── MASONRY, and it is the one grid in the site that is not the tile ──
   Rule 6 (one ratio per set, fix the pictures to it) does NOT apply to a photo
   library: 48 of these are landscape and 14 are portrait, and cropping
   somebody's photograph to square up a grid destroys the thing the page exists
   to give away. So the regularity moves from the ROW to the COLUMN — every
   column identical, every photograph its own height, nothing cropped.

   CSS columns rather than grid-masonry: it ships everywhere today, and the
   reading order down a column is the manifest order, which IS the page order. */
.ft-grid {
    columns: 4;
    column-gap: clamp(0.7rem, 1.3vw, 1rem);
}
@media (max-width: 1040px) { .ft-grid { columns: 3; } }
@media (max-width: 760px)  { .ft-grid { columns: 2; } }
/* Two even on a phone, like Pinterest: one column of 62 photographs is a
   scroll, two is a wall. */
.ft-grid > * { break-inside: avoid; }

/* ── A TILE IS THE PHOTOGRAPH ────────────────────────────────
   No border, no panel, no caption bar taking a strip off every picture. The
   photograph carries the radius and the whole wall is photographs. */
.ft-tile {
    position: relative;
    margin: 0 0 clamp(0.7rem, 1.3vw, 1rem);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ft-tile:hover,
.ft-tile:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -22px rgba(0,0,0,0.95),
                0 0 0 1px rgb(var(--note-rgb) / 0.45);
}
/* ⚠ THE BUTTON AND THE PHOTOGRAPH — restored 2026-08-21, and their absence was
   the whole of the "photo gallery is all messed up" bug.

   The masonry rewrite replaced the fixed 3:2 well with this wall and, doing it,
   dropped `.ft-open` and `.ft-open img` — the only rules that sized the picture.
   Without them the <img> falls back to its HTML `width="6016" height="4016"`
   attributes: every photograph rendered twenty times too big inside a tile with
   `overflow: hidden`, so the wall became columns of tall boxes each showing the
   top-left corner of a photograph — which, for a set of Taranto skies, is white.

   ⚠ NO `aspect-ratio` AND NO `object-fit` HERE, deliberately. The old rules had
   both because the old design cropped to one frame. This wall exists precisely
   so nothing is cropped: 48 of these are landscape and 14 are portrait, and the
   regularity lives in the COLUMN, not the row. `height: auto` against the real
   width/height attributes is what gives each photograph its own height and lets
   the browser reserve the right box before the file lands. */
.ft-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.ft-open img {
    display: block;
    width: 100%;
    height: auto;
    background: #0a0b11;          /* what a lazy-loading tile shows first */
    transition: transform 0.6s ease;
}
.ft-tile:hover .ft-open img,
.ft-tile:focus-within .ft-open img { transform: scale(1.03); }

/* ── The chrome, over the picture ─────────────────────────────
   The title is always readable; the licence and the download rise into view on
   hover or focus. See the note at the top of this block for why they are not
   hidden the way Pinterest hides everything. */
.ft-cap {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 2.2rem 0.85rem 0.7rem;
    background: linear-gradient(to top,
        rgba(6,8,12,0.92) 0%, rgba(6,8,12,0.72) 45%, rgba(6,8,12,0) 100%);
    pointer-events: none;                 /* the picture stays clickable */
}
.ft-cap-title {
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.ft-cap-side {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s, transform 0.18s;
    pointer-events: auto;
}
.ft-tile:hover .ft-cap-side,
.ft-tile:focus-within .ft-cap-side { opacity: 1; transform: none; }
.ft-lic {
    color: rgba(255,255,255,0.72);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.ft-dl {
    color: var(--note);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.ft-dl:hover { color: #fff; text-decoration: underline; }

/* ⚠ NO HOVER, NO SECRET. On a touch screen the licence and the download are
   simply always visible: a CC BY notice you can only reach with a mouse is a
   notice half the visitors never see. */
@media (hover: none) {
    .ft-cap-side { opacity: 1; transform: none; }
}

.ft-empty {
    border: 1px dashed var(--border-soft);
    border-radius: 18px;
    padding: 3.4rem 1.5rem;
    text-align: center;
    color: var(--text-secondary);
}
.ft-empty p:first-child { font-size: 1.15rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.ft-empty-n { font-size: 0.9rem; color: var(--text-muted); max-width: 52ch; margin: 0 auto; }

/* ── lightbox ───────────────────────────────────────────────────────────── */
.ft-box {
    /* explicit both-axis centering — the site reset strips the UA's
       dialog margin:auto, which is what pinned it to the top */
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: min(1400px, 94vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid var(--border-medium);
    border-radius: 18px;
    padding: 0;
    background: #0a0b11;
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.95);
}
.ft-box::backdrop {
    background: rgba(4, 4, 9, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ftb-fig { margin: 0; }
.ftb-img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.ftb-cap {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: 0.8rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ftb-title { color: var(--text-primary); font-weight: 600; }
.ftb-side { display: flex; align-items: baseline; gap: 1.1rem; flex-shrink: 0; }
.ftb-close {
    border: 1px solid var(--border-soft); background: var(--surface);
    color: var(--text-secondary); border-radius: 999px;
    font-size: 0.78rem; padding: 0.3rem 0.8rem; cursor: pointer;
}
.ftb-close:hover { border-color: var(--border-medium); color: var(--text-primary); }

@media (max-width: 640px) {
    .ft-grid { gap: 18px; }
    .ft-cap { flex-direction: column; gap: 0.3rem; }
    .ft-cap-side { align-items: flex-start; text-align: left; }
    .ftb-cap { flex-direction: column; align-items: center; text-align: center; gap: 0.55rem; }
    .ftb-side { flex-direction: column; align-items: center; gap: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-tile, .ft-open img { transition: none; }
    .ft-tile:hover { transform: none; }
    .ft-tile:hover .ft-open img { transform: none; }
}

/* /foto-taranto/ — the page's note. Cyan: it is water and air, and it is the
   most sensorial page arroweb has. */
body.n-studio .ft-section { --note: #5fb0c6; --note-rgb: 95 176 198; }