/* ── Portfolio Grid Block ───────────────────────────────────── */

.wp-block-hervin-child-portfolio-grid {
    width: 100%;
}

/* Child block wrapper — WordPress adds its own class; ensure it behaves as a grid cell */
.wp-block-hervin-child-portfolio-grid-item {
    position: relative;
    min-height: 0; /* prevent grid blowout */
}

/* ── Grid ───────────────────────────────────────────────────── */

.hervin-portfolio-grid {
    display: grid;
    gap: 3px;
}

/* ── Item ───────────────────────────────────────────────────── */

.hervin-portfolio-grid__item {
    position: relative;
}

.hervin-portfolio-grid__item--tall {
    grid-row: span 2;
}

/* ── Link ───────────────────────────────────────────────────── */

.hervin-portfolio-grid__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

/* ── Flipper ────────────────────────────────────────────────── */

.hervin-portfolio-grid__flipper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    transform: rotateY(0deg) translateZ(0);
    transition: transform 0.82s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hervin-portfolio-grid__item:hover .hervin-portfolio-grid__flipper,
.hervin-portfolio-grid__item:focus-within .hervin-portfolio-grid__flipper {
    transform: rotateY(-180deg);
}

/* ── Shared face ────────────────────────────────────────────── */

.hervin-portfolio-grid__front,
.hervin-portfolio-grid__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    overflow: hidden;
}

/* ── Front ──────────────────────────────────────────────────── */

.hervin-portfolio-grid__front {
    background: #111;
    transform: rotateY(0deg) translateZ(2px);
    transform-style: preserve-3d;
}

.hervin-portfolio-grid__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: translateZ(0) scale(1);
    transform-origin: center center;
    transition:
        transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.4s ease,
        filter 0.4s ease;
}

.hervin-portfolio-grid__item:hover .hervin-portfolio-grid__img,
.hervin-portfolio-grid__item:focus-within .hervin-portfolio-grid__img {
    transform: translateZ(0) scale(1.035);
    opacity: 0.88;
    filter: saturate(0.92) contrast(1.03);
}

.hervin-portfolio-grid__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.24) 42%,
            rgba(0, 0, 0, 0.10) 100%
        );
    opacity: 0.72;
    transform: translateZ(10px);
    transition: opacity 0.4s ease;
}

.hervin-portfolio-grid__item:hover .hervin-portfolio-grid__overlay,
.hervin-portfolio-grid__item:focus-within .hervin-portfolio-grid__overlay {
    opacity: 0.94;
}

/* ── Caption ────────────────────────────────────────────────── */

.hervin-portfolio-grid__caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
    transform-style: preserve-3d;
    text-align: center;
}

.hervin-portfolio-grid__title-wrap {
    max-width: 100%;
    transform-style: preserve-3d;
    transform: translateZ(0);
    will-change: transform;
}

.hervin-portfolio-grid__title {
    display: block;
    color: #fff;
    font-size: clamp(1.15rem, 1rem + 1vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.08;
    opacity: 1;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    /* molto staccato dal pannello */
    transform: translate3d(0, 0, 120px);
    transition:
        transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.3s ease;
}

.hervin-portfolio-grid__item:hover .hervin-portfolio-grid__title,
.hervin-portfolio-grid__item:focus-within .hervin-portfolio-grid__title {
    /* esce verso sinistra e “salta” in avanti */
    transform: translate3d(-150px, 0, 800px);
    opacity: 0;
}

/* ── Back ───────────────────────────────────────────────────── */

.hervin-portfolio-grid__back {
    background: linear-gradient(180deg, #bd9a68 0%, #a98553 100%);
    transform: rotateY(180deg) translateZ(2px);
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
}

.hervin-pg-back-inner {
	text-align: center;
    width: 100%;
    max-width: 100%;
    color: #fff;
    opacity: 0;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transform: translate3d(800px, 0, 0);
    transition:
        transform 0.66s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.2s ease;
}

.hervin-portfolio-grid__item:hover .hervin-pg-back-inner,
.hervin-portfolio-grid__item:focus-within .hervin-pg-back-inner {
    opacity: 1;
    transform: translate3d(0, 0, 120px);
}


/* All InnerBlocks content inside the back face */
.hervin-pg-back-inner p,
.hervin-pg-back-inner h1,
.hervin-pg-back-inner h2,
.hervin-pg-back-inner h3,
.hervin-pg-back-inner h4,
.hervin-pg-back-inner ul,
.hervin-pg-back-inner ol,
.hervin-pg-back-inner li,
.hervin-pg-back-inner a {
    color:       rgba(255, 255, 255, 0.94);
    font-size:   clamp(1rem, 0.95rem + 0.55vw, 1.35rem);
    line-height: 1.55;
    text-align:  center;
}

.hervin-pg-back-inner p,
.hervin-pg-back-inner h1,
.hervin-pg-back-inner h2,
.hervin-pg-back-inner h3,
.hervin-pg-back-inner h4,
.hervin-pg-back-inner ul,
.hervin-pg-back-inner ol {
    margin: 0 0 0.5em;
}

.hervin-pg-back-inner p:last-child,
.hervin-pg-back-inner h1:last-child,
.hervin-pg-back-inner h2:last-child,
.hervin-pg-back-inner h3:last-child,
.hervin-pg-back-inner ul:last-child,
.hervin-pg-back-inner ol:last-child {
    margin-bottom: 0;
}

.hervin-pg-back-inner strong { color: #fff; }
.hervin-pg-back-inner em    { font-style: italic; }

.hervin-pg-back-inner a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Back button — theme .clapat-button / .button-border (outline) ─────── */

.hervin-pg-back-inner .hervin-pg-theme-btn {
    margin-top:       24px;
    justify-content:  center;
    min-height:       auto;
    pointer-events:   none; /* click handled by outer <a.hervin-portfolio-grid__link> */
}

.hervin-pg-back-inner .hervin-pg-theme-btn .clapat-button-wrap {
    min-width:  auto;
    height:     auto;
    margin:     0 auto;
}

/* Gold back face → same look as .light-content .button-border.outline */
.hervin-pg-back-inner .hervin-pg-theme-btn .button-border.outline {
    border:            solid 2px #fff;
    color:             #fff;
    background-color:  transparent;
}

.hervin-pg-back-inner .hervin-pg-theme-btn .button-border span {
    color: #fff;
}

.hervin-pg-back-inner .hervin-pg-theme-btn .button-border span::before {
    color: #fff;
}

/* ── Accessibility / polish ─────────────────────────────────── */

.hervin-portfolio-grid__link:focus-visible {
    outline: 2px solid #bd9a68;
    outline-offset: 4px;
}

.hervin-portfolio-grid__item:hover {
    z-index: 2;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
    .hervin-portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
		grid-auto-rows: auto !important
    }
}

@media (max-width: 560px) {
    .hervin-portfolio-grid {
        grid-template-columns: 1fr !important;
		grid-auto-rows: auto !important
    }

    .hervin-portfolio-grid__item--tall {
        grid-row: span 1;
    }

    .hervin-portfolio-grid__caption {
        padding: 20px;
    }

    .hervin-portfolio-grid__back {
        padding: 22px 20px;
    }
}

/* ── Touch / mobile: stack front image + back text vertically ───── */

@media (hover: none) {
    /* Item and link grow to fit stacked content */
    .hervin-portfolio-grid__item {
        height: auto;
    }

    .hervin-portfolio-grid__link {
        display:        flex;
        flex-direction: column;
        height:         auto;
    }

    /* Flipper becomes a normal flex column — no 3D rotation */
    .hervin-portfolio-grid__flipper {
        transform:      none !important;
        transition:     none;
        display:        flex;
        flex-direction: column;
        height:         auto;
    }

    /* Front: relative so it takes up natural space; fixed aspect ratio for the image */
    .hervin-portfolio-grid__front {
        position:     relative;
        aspect-ratio: 4 / 3;
        transform:    none;
    }

    /* Back: shown below the image, no rotation */
    .hervin-portfolio-grid__back {
        position:  relative;
        transform: none;
        display:   flex;
        padding:   24px 20px;
    }

    /* Reset any 3D transforms / hidden states on text */
    .hervin-portfolio-grid__title,
    .hervin-pg-back-inner {
        opacity:   1;
        transform: none;
        transition: none;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hervin-portfolio-grid__flipper,
    .hervin-portfolio-grid__img,
    .hervin-portfolio-grid__overlay,
    .hervin-portfolio-grid__title,
    .hervin-pg-back-inner {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR — minimal functional layout, no decorative styles
   ══════════════════════════════════════════════════════════════════════════════ */

/* In the editor the grid items stack in a single column list for easy editing */
.hervin-pg-editor-grid {
    display: block !important;
}

.hervin-pg-editor-item {
    position: relative;
    border: 1px solid #e0e0e0;
    margin-bottom: 12px;
}

/* Per-item toolbar */
.hervin-pg-toolbar {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 20;
    display: flex;
    gap: 4px;
}

.hervin-pg-btn {
    height: 24px;
    padding: 0 8px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
.hervin-pg-btn--active { background: #007cba; }
.hervin-pg-btn--remove { background: rgba(180, 0, 0, 0.6); }

/* Section panels inside each item */
.hervin-pg-editor-section {
    padding: 10px 12px;
    border-top: 1px solid #eee;
}

.hervin-pg-editor-section--back {
    background: rgba(189, 154, 104, 0.12);
    border-top: 2px solid #bd9a68;
}

.hervin-pg-section-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    opacity: 0.5;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

/* Image thumbnail in editor */
.hervin-pg-thumb-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.hervin-pg-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.hervin-pg-pick-btn {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.hervin-pg-pick-btn:hover { background: #f0f0f0; }

/* URL row */
.hervin-pg-url-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 6px;
}
.hervin-pg-url-input { flex: 1; }
.hervin-pg-url-input input {
    border: 1px solid #ddd !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    width: 100% !important;
}

/* Add row */
.hervin-pg-add-row {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    border-top: 2px dashed #ddd;
    margin-top: 4px;
}