/* ==========================================================================
   Metall-Trend — modern template styles
   Color palette based on https://metall-trend.de (accent: #991111)
   Bootstrap 5.3.8 + Bootstrap Icons + Google Fonts (Open Sans / Oswald)
   ========================================================================== */

:root {
    --mt-red: #991111;
    --mt-red-dark: #7c0d0d;
    --mt-red-light: #e0493d;
    /* Контрастный красный для текста на тёмном фоне (a11y, WCAG 4.5:1 на #16181d) */
    --mt-red-accent: #ff6b5e;
    --mt-ink: #16181d;
    --mt-ink-2: #101217;
    --mt-ink-3: #1f232b;
    --mt-light: #f4f5f7;
    --mt-text: #4d5159;
    --mt-heading: #21252b;
    --mt-border: #e7e9ee;
    --mt-muted: #9aa0ab;
    /* Приглушённый текст на светлом фоне с контрастом ≥4.5:1 (a11y) */
    --mt-muted-on-light: #636b75;
    --mt-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mt-font-display: 'Oswald', 'Open Sans', system-ui, sans-serif;
}

/* ---------------------------------- Base ---------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--mt-font-body);
    color: var(--mt-text);
    background: #fff;
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mt-font-display);
    color: var(--mt-heading);
    font-weight: 600;
}

section {
    scroll-margin-top: 86px;
}

a {
    text-decoration: none;
    transition: color .25s ease;
}

img {
    max-width: 100%;
}

::selection {
    background: var(--mt-red);
    color: #fff;
}

/* -------------------------------- Buttons -------------------------------- */

.btn-brand {
    background: var(--mt-red);
    color: #fff;
    border: 0;
    padding: .8rem 1.8rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .78rem;
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.btn-brand:hover, .btn-brand:focus {
    background: var(--mt-red-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(153, 17, 17, .35);
}

.btn-ghost-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    padding: .8rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .78rem;
    transition: all .25s ease;
}

.btn-ghost-light:hover, .btn-ghost-light:focus {
    background: #fff;
    border-color: #fff;
    color: var(--mt-ink);
}

.btn-white-pill {
    background: #fff;
    color: var(--mt-red);
    padding: .8rem 1.9rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .8rem;
    transition: all .25s ease;
}

.btn-white-pill:hover {
    background: var(--mt-ink);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}

/* --------------------------------- Header --------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: #fff;
    color: var(--mt-red);
    padding: .6rem 1.1rem;
    font-weight: 700;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    color: var(--mt-red);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--mt-ink);
    transition: box-shadow .3s ease;
}

.site-header.scrolled {
    box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}

/* Top bar */
.top-bar {
    background: var(--mt-ink-2);
    color: var(--mt-muted);
    font-size: .82rem;
    max-height: 120px;
    overflow: hidden;
    transition: max-height .35s ease, opacity .35s ease, padding .35s ease;
}

.site-header.scrolled .top-bar {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.top-bar .contact-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-bar a {
    color: var(--mt-muted);
}

.top-bar a:hover {
    color: #fff;
}

.top-bar .bi {
    color: var(--mt-red-light);
    margin-right: .35rem;
}

.social-top a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #333840;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: all .25s ease;
}

.social-top a:hover {
    background: var(--mt-red);
    border-color: var(--mt-red);
    color: #fff;
}

/* Navbar */
.navbar {
    padding: .8rem 0;
    transition: padding .3s ease;
    /*background-color: #03255a;*/
}

.site-header.scrolled .navbar {
    padding: .45rem 0;
}

.navbar-brand {
    font-family: var(--mt-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
}

.navbar-brand .brand-red {
    color: var(--mt-red-light);
}

.navbar-brand .brand-white {
    color: #fff;
}

.navbar .nav-link {
    color: #e8eaee;
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    padding: .55rem .85rem;
    position: relative;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .25rem;
    height: 2px;
    background: var(--mt-red-light);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}

.navbar .nav-link:hover {
    color: #fff;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    transform: scaleX(1);
}

.navbar .nav-link.active {
    color: var(--mt-red-accent);
}

.navbar .nav-link.show {
    color: #fff;
}

.navbar .dropdown-toggle::after {
    vertical-align: .08em;
    margin-left: .45em;
    transition: transform .25s ease;
}

.navbar .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    background: var(--mt-ink-3);
    border: 0;
    border-top: 2px solid var(--mt-red);
    border-radius: 0 0 10px 10px;
    padding: .55rem 0;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .4);
}

.dropdown-item {
    color: #c7ccd5;
    padding: .55rem 1.3rem;
    font-size: .88rem;
    transition: all .22s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(153, 17, 17, .16);
    color: #fff;
    padding-left: 1.55rem;
}

.navbar-toggler {
    border: 0;
    color: #fff;
    font-size: 1.7rem;
    padding: .25rem .5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Indicators */
.carousel-indicators {
    margin-bottom: 2.4rem;
    z-index: 3;
}

.carousel-indicators [data-bs-target] {
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .4);
    border: 0;
    transition: width .3s ease, background .3s ease;
}

.carousel-indicators .active {
    background: var(--mt-red);
    width: 48px;
}

/* Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 56px;
    height: 56px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(22, 24, 29, .45);
    border: 1px solid rgba(255, 255, 255, .22);
    margin: 0 1.3rem;
    font-size: 1.3rem;
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .25s ease, border-color .25s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: var(--mt-red);
    border-color: var(--mt-red);
}

/* ------------------------------- Sections --------------------------------- */

.section {
    padding: 6rem 0;
}

.section-light {
    background: var(--mt-light);
}

.section-head {
    margin-bottom: 3.6rem;
}

.section-head.text-start .eyebrow::before {
    display: none;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--mt-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .74rem;
}

.eyebrow::before,
.eyebrow::after {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--mt-red);
}

.section-head h2 {
    font-family: var(--mt-font-display);
    text-transform: uppercase;
    color: var(--mt-heading);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    margin: .75rem 0 .9rem;
}

.section-head h2 strong {
    color: var(--mt-red);
}

.section-head .section-lead {
    color: var(--mt-muted-on-light);
    max-width: 640px;
    margin: 0 auto;
    font-size: .98rem;
}

/* ----------------------- Bootstrap overrides (a11y) ----------------------- */

/* outline-secondary: #6c757d даёт 4.44:1 на #f8f9fa — чуть ниже WCAG 4.5:1.
   Тёмный вариант #495057 (7.4:1) сохраняет визуальную «вторичность». */
.btn-outline-secondary {
    --bs-btn-color: #495057;
    --bs-btn-border-color: #495057;
    --bs-btn-hover-color: #fff;
}

/* -------------------------------- Services -------------------------------- */

.service-card {
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    padding: 2.7rem 2.1rem 2.5rem;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mt-red), var(--mt-red-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 26px 50px rgba(16, 18, 23, .11);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #fff;
    box-shadow: 0 0 0 1px var(--mt-border), 0 14px 28px rgba(16, 18, 23, .13);
    margin-bottom: 1.5rem;
    transition: transform .4s ease;
    /* Dark fallback while loading or if the image fails */
    background: linear-gradient(115deg, var(--mt-ink-2) 0%, var(--mt-ink-3) 55%, var(--mt-ink) 100%);
}

.service-card:hover .service-img {
    transform: scale(1.07);
}

.service-card h4 {
    font-family: var(--mt-font-display);
    text-transform: uppercase;
    font-size: 1.08rem;
    letter-spacing: .05em;
    color: var(--mt-heading);
}

.service-card p {
    color: var(--mt-text);
    font-size: .92rem;
    margin: .85rem 0 1.35rem;
}

.btn-service {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--mt-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .76rem;
}

.btn-service .bi {
    transition: transform .25s ease;
}

.btn-service:hover {
    color: var(--mt-red-dark);
}

.btn-service:hover .bi {
    transform: translateX(4px);
}

/* ------------------------------ Parallax about ---------------------------- */

#ueber-mich {
    position: relative;
    background: url('https://metall-trend.de/images/parallax/bg-02.jpg') center/cover no-repeat fixed;
    padding: 7rem 0;
}

@media (max-width: 991.98px) {
    #ueber-mich {
        background-attachment: scroll;
    }
}

#ueber-mich::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 17, 21, .92), rgba(22, 24, 29, .8));
}

#ueber-mich .container {
    position: relative;
    z-index: 1;
}

#ueber-mich .section-head h2 {
    color: #fff;
}

#ueber-mich .section-head .section-lead {
    color: rgba(255, 255, 255, .78);
}

.about-feature {
    text-align: center;
    color: #fff;
    padding: 1.1rem .6rem;
}

.about-feature .icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(153, 17, 17, .92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 12px 26px rgba(153, 17, 17, .45);
    transition: transform .3s ease;
}

.about-feature:hover .icon {
    transform: translateY(-5px) rotate(-4deg);
}

.about-feature h5 {
    font-family: var(--mt-font-display);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .08em;
    color: #fff;
    margin-bottom: .5rem;
}

.about-feature p {
    color: rgba(255, 255, 255, .75);
    font-size: .88rem;
    margin: 0;
}

/* ---------------------------------- CTA ----------------------------------- */

.cta-band {
    background: linear-gradient(120deg, var(--mt-red-dark), var(--mt-red) 60%, var(--mt-red-light));
    color: #fff;
    padding: 3.6rem 0;
    position: relative;
    overflow: hidden;
}

.cta-band::after {
    content: '';
    position: absolute;
    right: -140px;
    top: -140px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.cta-band .container {
    position: relative;
    z-index: 1;
}

.cta-band h3 {
    font-family: var(--mt-font-display);
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    color: #fff;
    margin-bottom: .5rem;
}

.cta-band p {
    color: rgba(255, 255, 255, .88);
    margin: 0;
}

.cta-contact {
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-right: 1.6rem;
}

.cta-contact:hover {
    color: #fff;
    text-decoration: underline;
}

/* --------------------------------- Footer --------------------------------- */

.site-footer {
    background: var(--mt-ink-2);
    color: var(--mt-muted);
    padding-top: 4.6rem;
    border-top: 3px solid var(--mt-red);
}

.footer-widget h4 {
    color: #fff;
    font-family: var(--mt-font-display);
    text-transform: uppercase;
    font-size: .95rem;
    letter-spacing: .14em;
    margin-bottom: 1.4rem;
    padding-bottom: .85rem;
    position: relative;
}

.footer-widget h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: var(--mt-red);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: .55rem;
}

.footer-links a {
    color: var(--mt-muted);
    transition: color .25s ease, padding-left .25s ease;
}

.footer-links a::before {
    content: '\F285';
    font-family: 'bootstrap-icons';
    color: var(--mt-red);
    margin-right: .55rem;
    font-size: .7rem;
    vertical-align: .08em;
}

.footer-links a:hover {
    color: #fff;
    padding-left: .4rem;
}

.contact-block {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
}

.contact-block li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .65rem;
}

.contact-block .bi {
    color: var(--mt-red);
    margin-top: .18rem;
}

.contact-block a {
    color: var(--mt-muted);
}

.contact-block a:hover {
    color: #fff;
}

.social-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #333840;
    color: #b7bcc5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all .25s ease;
}

.social-btn:hover {
    background: var(--mt-red);
    border-color: var(--mt-red);
    color: #fff;
    transform: translateY(-3px);
}

.copyright-bar {
    border-top: 1px solid rgba(255, 255, 255, .07);
    margin-top: 3.4rem;
    padding: 1.5rem 0;
    font-size: .82rem;
    color: #848a94;
}

.copyright-bar a {
    color: var(--mt-muted);
}

.copyright-bar a:hover {
    color: var(--mt-red-light);
}

.copyright-bar .footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 1.4rem;
}

/* ------------------------------- Back to top ------------------------------ */

#back-to-top {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mt-red);
    color: #fff;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 12px 28px rgba(153, 17, 17, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .3s ease;
    z-index: 1050;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#back-to-top:hover {
    background: var(--mt-red-dark);
}

/* ------------------------------ Scroll reveal ----------------------------- */

.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.js .reveal.in {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* -------------------------------- Responsive ------------------------------ */

@media (max-width: 991.98px) {
    .section {
        padding: 4.5rem 0;
    }

    .navbar-collapse {
        background: var(--mt-ink-3);
        border-radius: 12px;
        padding: 1rem;
        margin-top: .8rem;
        box-shadow: 0 20px 44px rgba(0, 0, 0, .4);
    }

    .navbar .nav-link {
        padding: .7rem .6rem;
        border-radius: 8px;
    }

    .navbar .nav-link::after {
        display: none;
    }

    .navbar .nav-link.active {
        background: rgba(153, 17, 17, .18);
        color: #fff;
    }

    .dropdown-menu {
        background: rgba(0, 0, 0, .28);
        border: 0;
        box-shadow: none;
        margin-top: 0;
    }

    .copyright-bar .footer-nav {
        justify-content: flex-start;
        margin-top: .6rem;
    }
}

@media (max-width: 575.98px) {
    .top-bar .contact-details {
        gap: .8rem;
        font-size: .76rem;
    }

    .cta-contact {
        display: block;
        margin: 0 0 .5rem;
    }
}

/* --------------------------- DSGVO cookie banner -------------------------- */

.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    width: min(560px, calc(100% - 2rem));
    margin: 0 auto;
    background: var(--mt-ink-2);
    color: #c3c8d1;
    border: 1px solid #2a2f39;
    border-left: 4px solid var(--mt-red);
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .5);
    padding: 1.15rem 1.3rem 1.3rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
}

.cookie-banner.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.cookie-banner p {
    margin: 0 0 1rem;
    font-size: .88rem;
    color: #c3c8d1;
    line-height: 1.6;
}

.cookie-banner a {
    color: var(--mt-red-light);
    text-decoration: underline;
}

.cookie-banner a:hover {
    color: #fff;
}

.btn-cookie {
    padding: .6rem 1.3rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 0;
    cursor: pointer;
    transition: all .25s ease;
}

.btn-cookie-accept {
    background: var(--mt-red);
    color: #fff;
}

.btn-cookie-accept:hover {
    background: var(--mt-red-dark);
    transform: translateY(-2px);
}

.btn-cookie-reject {
    background: transparent;
    border: 1px solid #4a505c;
    color: #c3c8d1;
}

.btn-cookie-reject:hover {
    border-color: #fff;
    color: #fff;
}

/* ------------------------------- Portfolio -------------------------------- */

/* Toolbar: фильтры + сортировка */
.portfolio-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 2.2rem;
}

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--mt-border);
    color: var(--mt-text);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all .25s ease;
}

.filter-btn:hover {
    border-color: var(--mt-red);
    color: var(--mt-red);
}

.filter-btn.active {
    background: var(--mt-red);
    border-color: var(--mt-red);
    color: #fff;
    box-shadow: 0 10px 22px rgba(153, 17, 17, .3);
}

.portfolio-sort {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    color: var(--mt-muted-on-light);
}

.portfolio-sort select {
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    padding: .45rem .9rem;
    font-size: .85rem;
    color: var(--mt-heading);
    background: #fff;
    cursor: pointer;
}

/* Сетка: Shuffle.js раскладывает .shuffle-item абсолютно, ширину задаём здесь */
.portfolio-grid {
    position: relative;
    overflow: hidden;
}

.shuffle-item {
    width: 25%;
    padding: .6rem;
    box-sizing: border-box;
    /* якорь для абсолютно позиционированной кнопки «редактировать» */
    position: relative;
}

@media (max-width: 991.98px) {
    .shuffle-item {
        width: 33.3333%;
    }
}

@media (max-width: 575.98px) {
    .shuffle-item {
        width: 50%;
    }
}

.shuffle-item--hidden {
    display: none;
}

/* Карточка (ссылка GLightbox) */
.portfolio-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(115deg, var(--mt-ink-2) 0%, var(--mt-ink-3) 55%, var(--mt-ink) 100%);
    box-shadow: 0 10px 24px rgba(16, 18, 23, .12);
    /* Единое соотношение сторон — сетка не «прыгает» при фильтрации */
    aspect-ratio: 4 / 3;
    transition: transform .35s ease, box-shadow .35s ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(16, 18, 23, .22);
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.portfolio-card:hover img {
    transform: scale(1.06);
}

.portfolio-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(13, 15, 19, .8));
    opacity: 0;
    transition: opacity .3s ease;
}

.portfolio-card:hover::after {
    opacity: 1;
}

/* Встраивание видео {youtube:...} — responsive 16:9, youtube-nocookie */
.youtube-embed {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 1.5rem auto;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(16, 18, 23, .12);
}

.youtube-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pf-zoom {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: scale(.7);
    opacity: 0;
    transition: all .3s ease;
}

.portfolio-card:hover .pf-zoom {
    transform: none;
    opacity: 1;
}

.pf-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.1rem 1.15rem .95rem;
    color: #fff;
    transform: translateY(8px);
    opacity: 0;
    transition: all .3s ease;
}

.portfolio-card:hover .pf-overlay {
    transform: none;
    opacity: 1;
}

.pf-label {
    display: block;
    font-family: var(--mt-font-display);
    text-transform: uppercase;
    font-size: .86rem;
    letter-spacing: .06em;
    line-height: 1.3;
    color: #fff;
}

.pf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .5rem;
}

.pf-cat,
.pf-tag {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 999px;
    padding: .2rem .6rem;
}

.pf-cat {
    color: var(--mt-red-light);
    background: rgba(255, 255, 255, .14);
}

.pf-tag {
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .1);
}

/* Кнопка «редактировать» для админа (поверх карточки, левый верхний угол) */
.portfolio-edit-btn {
    position: absolute;
    top: .9rem;
    left: .9rem;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(153, 17, 17, .88);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.portfolio-edit-btn:hover,
.portfolio-edit-btn:focus {
    background: var(--mt-red-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .38);
}

/* Быстрый переключатель «опубликовано/скрыто» (админ, правый нижний угол) */
.portfolio-publish-form {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    z-index: 3;
    margin: 0;
}

.portfolio-publish-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(22, 24, 29, .82);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.portfolio-publish-btn:hover,
.portfolio-publish-btn:focus {
    background: var(--mt-ink);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .38);
}

/* Скрытая работа — кнопка подсвечивается красным (привлечь внимание) */
.portfolio-publish-btn:not(.is-published) {
    background: var(--mt-red);
}

.portfolio-publish-btn:not(.is-published):hover {
    background: var(--mt-red-dark);
}

/* Скрытые (неопубликованные) работы — видны только админу */
.pf-unpublished img {
    filter: grayscale(.85);
    opacity: .72;
}

.pf-hidden-badge {
    position: absolute;
    left: .9rem;
    bottom: .9rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    background: rgba(22, 24, 29, .82);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: .3rem .7rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pf-hidden-badge .bi {
    color: var(--mt-red-light);
}

/* Подпись (alt) под карточкой */
.pf-alt {
    margin-top: .55rem;
    font-size: .78rem;
    color: var(--mt-muted);
    text-align: center;
}

/* Dropzone загрузки изображений (админка) */
.portfolio-dropzone {
    border: 2px dashed var(--mt-border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}

.portfolio-dropzone:hover,
.portfolio-dropzone.dragover,
.portfolio-dropzone:focus-visible {
    border-color: var(--mt-red);
    background: #fdf7f7;
    outline: none;
}

.portfolio-dropzone .bi {
    font-size: 2rem;
    color: var(--mt-red-light);
}

.portfolio-dropzone .dz-hint {
    margin: .4rem 0 .7rem;
    color: var(--mt-muted-on-light);
    font-size: .9rem;
}

.portfolio-dropzone .dz-file {
    font-size: .8rem;
    color: var(--mt-text);
    word-break: break-all;
}

/* ===== Flash alerts: автозакрытие + прогресс-бар (август 2026) ===== */
.flash-alert {
    position: relative;
    padding-bottom: 1.15rem; /* место под прогресс-баром */
}
.flash-alert .flash-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: currentColor;
    opacity: .3;
    transform-origin: left center;
    animation: flash-shrink var(--flash-duration, 4s) linear forwards;
}
.flash-alert:hover .flash-progress {
    animation-play-state: paused; /* пауза при наведении (JS ставит на паузу и таймер) */
}
@keyframes flash-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .carousel-control-prev,
    .carousel-control-next {
        backdrop-filter: none;
    }

    .flash-alert .flash-progress {
        animation: none; /* автозакрытие остаётся (таймер), анимация бара — нет */
    }
}

/* Skip-link: после перехода фокус на #main не должен показывать outline
   (это не интерактивный элемент — только приёмник фокуса для клавиатуры). */
#main:focus {
    outline: none;
}

/* hidden link */
.secret-login {
    display: none;
}