/* Perfessa: home.css */

.home-intro {
    max-width: 1410px;
    margin: 0 auto 18px;
}

.home-intro h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(32px, 3.2vw, 56px);
    line-height: 1.1;
    letter-spacing: .005em;
    margin: 0 0 15px;
    color: var(--ink);
    text-wrap: balance;
}

.home-intro p {
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.4;
    color: #c5c0b7;
    margin: 0;
}

.home-intro-desktop {
    display: block;
}

.home-intro-mobile {
    display: none;
}

.photo-grid {
    max-width: 1410px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr 1.2fr 1.2fr;
    grid-template-rows: 240px 272px;
    gap: 14px;
}

.photo {
    overflow: hidden;
    border-radius: var(--radius-l);
    background: #16140f;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-a {
    grid-column: 1;
    grid-row: 1 / 3;
}

.photo-b {
    grid-column: 2;
    grid-row: 1 / 3;
}

.photo-c {
    grid-column: 3;
    grid-row: 1;
}

.photo-d {
    grid-column: 4;
    grid-row: 1;
}

.photo-e {
    grid-column: 3;
    grid-row: 2;
}

.photo-f {
    grid-column: 4;
    grid-row: 2;
}

@media (min-width: 761px) and (max-width: 1050px) {
    .photo-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 340px 230px 230px;
    }
    
    .photo-a {
        grid-column: 1;
        grid-row: 1;
    }
    
    .photo-b {
        grid-column: 2;
        grid-row: 1;
    }
    
    .photo-c {
        grid-column: 1;
        grid-row: 2;
    }
    
    .photo-d {
        grid-column: 2;
        grid-row: 2;
    }
    
    .photo-e {
        grid-column: 1;
        grid-row: 3;
    }
    
    .photo-f {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (max-width: 760px) {
    .home-intro-desktop {
        display: none;
    }
    
    .home-intro-mobile {
        display: block;
        text-align: left;
    }
    
    .home-intro-mobile h1,
            .home-intro-mobile h2 {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 400;
        color: var(--ink);
        letter-spacing: 0;
    }
    
    .home-intro-mobile h1 {
        font-size: clamp(30px, 8.5vw, 38px);
        line-height: 1.05;
        margin: 0 0 18px;
    }

    .home-intro-mobile p {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;
        color: var(--ink-muted);
        margin: 0;
    }
    
    .photo-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 10px;
    }
    
    .photo-a, .photo-b, .photo-c,
        .photo-d, .photo-e, .photo-f {
        grid-column: 1;
        grid-row: auto;
        height: 260px;
    }
}

/* Extra horizontal photographs belong only to the desktop composition. */
.photo-grid .home-desktop-only { display: none; }

@media (min-width: 1051px) {
    .photo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 240px 272px;
        grid-template-rows: repeat(2, clamp(240px, calc((100dvh - 304px) / 2), 420px));
    }
    .photo-grid .photo { min-width: 0; min-height: 0; }
    .photo-grid .photo-b { display: none; }
    .photo-grid .home-desktop-only { display: block; }
    .photo-grid.home-layout-0 {
        grid-template-areas: "a c d e" "a f g h";
    }
    .photo-grid.home-layout-1 {
        grid-template-areas: "c a d e" "f a g h";
    }
    .photo-grid.home-layout-2 {
        grid-template-areas: "c d a e" "f g a h";
    }
    .photo-grid.home-layout-3 {
        grid-template-areas: "c d e a" "f g h a";
    }
    .photo-grid.home-layout-4 {
        grid-template-areas: "e d a c" "h g a f";
    }
    .photo-grid.home-layout-5 {
        grid-template-areas: "e a d c" "h a g f";
    }
    .photo-grid .photo-a { grid-area: a; }
    .photo-grid .photo-c { grid-area: c; }
    .photo-grid .photo-d { grid-area: d; }
    .photo-grid .photo-e { grid-area: e; }
    .photo-grid .photo-f { grid-area: f; }
    .photo-grid .photo-g { grid-area: g; }
    .photo-grid .photo-h { grid-area: h; }
}

.photo-grid[data-home-gallery] .photo {
    position: relative;
}

.photo-grid[data-home-gallery] .home-gallery-incoming {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    pointer-events: none;
}

.photo-grid[data-home-gallery] .home-gallery-incoming.is-visible {
    opacity: 1;
}

/* Only validated landscape images may appear on a portrait phone. */
@media (max-width: 760px) and (orientation: portrait) {
    .photo-grid.home-mobile-pending { visibility: hidden; }
    .photo-grid.home-mobile-empty { display: none; }
}

/* Photo captions: soft black fade from bottom-left. */
/* Photo captions: eased bottom fade, warm-tinted. */
.photo-grid .home-photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 64px 20px 15px; /* высота = пространство для затухания */
    color: #e8c766;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .06em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
    pointer-events: none;
    z-index: 2;
    background:
    /* лёгкое усиление под текстом, слева внизу */
    radial-gradient(120% 100% at 0% 100%, rgba(12, 9, 5, .45) 0%, rgba(12, 9, 5, 0) 60%),
    /* основной градиент снизу вверх с плавным (ease) затуханием */
    linear-gradient(to top, rgba(12, 9, 5, .90) 0%, rgba(12, 9, 5, .72) 19%, rgba(12, 9, 5, .52) 34%, rgba(12, 9, 5, .34) 47%, rgba(12, 9, 5, .22) 57%, rgba(12, 9, 5, .12) 67%, rgba(12, 9, 5, .06) 78%, rgba(12, 9, 5, .02) 90%, rgba(12, 9, 5, 0) 100%);
}

    .photo-grid .home-photo-caption[hidden] {
        display: none;
    }

@media (max-width: 760px) {
    .photo-grid .home-photo-caption {
        padding: 56px 16px 13px;
        font-size: 12px;
    }
}

.home-gallery-admin {
    max-width: 1410px;
    margin: 18px auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.home-gallery-scan {
    padding: 10px 22px;
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--gold-bright);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .home-gallery-scan:hover {
        border-color: var(--gold);
    }

    .home-gallery-scan:focus-visible {
        outline: 2px solid var(--gold-bright);
        outline-offset: 4px;
    }

    .home-gallery-scan:disabled {
        opacity: .5;
        cursor: wait;
    }

.home-gallery-scan-status {
    color: var(--ink-muted);
    font-size: 13px;
}

.home-gallery-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius-s);
    background: transparent;
    cursor: pointer;
}

    .home-gallery-upload:hover {
        border-color: var(--gold);
    }

    .home-gallery-upload:focus-visible {
        outline: 2px solid var(--gold-bright);
        outline-offset: 4px;
    }

    .home-gallery-upload:disabled {
        opacity: .5;
        cursor: wait;
    }

.home-gallery-upload-icon {
    width: 20px;
    height: 20px;
    display: block;
}
/* Home gallery administration; rendered only for roles 1 and 2. */
.home-photo-admin { position:absolute; top:12px; right:12px; z-index:5; }
.home-photo-menu-toggle { display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:6px; border:1px solid rgba(201,162,39,.5); border-radius:50%; background:rgba(10,9,8,.8); color:#c9a227; cursor:pointer; opacity:0; transition:opacity .18s; }
.photo:hover .home-photo-menu-toggle,.photo:focus-within .home-photo-menu-toggle,.home-photo-menu-toggle[aria-expanded="true"] { opacity:1; }
.home-photo-admin svg { width:20px; height:20px; flex-shrink:0; }
.home-photo-menu { position:absolute; top:42px; right:0; min-width:190px; padding:6px; border:1px solid rgba(201,162,39,.3); border-radius:var(--radius-m); background:rgba(10,9,8,.97); box-shadow:0 12px 30px #0006; }
.home-photo-menu[hidden] { display:none; }
.home-photo-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px; border:0; border-radius:var(--radius-s); background:transparent; color:#c9a227; font:inherit; font-size:13px; text-align:left; cursor:pointer; white-space:nowrap; }
.home-photo-menu button:hover,.home-photo-menu button:focus-visible { background:rgba(201,162,39,.12); }
.home-photo-menu [data-delete] { color:#e6a099; }
.home-caption-dialog { width:min(440px,calc(100vw - 32px)); box-sizing:border-box; max-height:90vh; overflow:auto; padding:24px; background:#14120f; color:#eee6d8; border:1px solid #c9a22766; border-radius:var(--radius-m); font:inherit; }
.home-caption-dialog::backdrop { background:#000a; }
.home-caption-dialog h2 { margin:0 0 10px; font-size:22px; color:#c9a227; }
.home-caption-file { overflow-wrap:anywhere; font-size:12px; opacity:.65; }
.home-caption-dialog label { display:block; margin-top:16px; font-size:13px; color:#c9a227; }
.home-caption-dialog textarea { display:block; box-sizing:border-box; width:100%; margin-top:6px; padding:10px; border:1px solid #c9a22755; border-radius:var(--radius-s); background:#0a0908; color:#eee6d8; font:inherit; resize:vertical; }
.home-caption-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.home-caption-actions button { padding:9px 14px; border:1px solid #c9a22766; border-radius:var(--radius-s); background:transparent; color:#c9a227; font:inherit; cursor:pointer; }
.home-caption-error { color:#e6a099; font-size:13px; }
.home-photo-menu-toggle:focus-visible,.home-caption-dialog :focus-visible { outline:2px solid #c9a227; outline-offset:3px; }
@media (hover:none),(pointer:coarse) { .home-photo-menu-toggle { opacity:1; } }

/* Existing SQLite captions, independent for RU and EN. */
.home-caption-field { margin-top:16px; }
.home-caption-field-header { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:#c9a227; }
.home-caption-picker { max-width:82%; min-width:0; padding:6px 8px; border:1px solid #c9a22755; border-radius:var(--radius-s); color:#c9a227; background:#0a0908; font:inherit; font-size:12px; cursor:pointer; }
.home-caption-picker:disabled { opacity:.45; cursor:default; }

/* М8: mobile photo carousel. Rollback: revert this commit or delete this block. */
@media (max-width: 760px) {
    .photo-grid {
        display: flex;
        margin-inline: calc(-18px - env(safe-area-inset-left, 0px)) calc(-18px - env(safe-area-inset-right, 0px));
        padding-inline: calc(18px + env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-right, 0px));
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc(18px + env(safe-area-inset-left, 0px));
        scrollbar-width: none;
    }

    .photo-grid::-webkit-scrollbar {
        display: none;
    }

    .photo-grid .photo {
        flex: 0 0 86%;
        height: 320px;
        scroll-snap-align: start;
    }
}