/* TH Tucked Image v1.0 */

/*
  Estructura:
  .thti-wrap    → position:relative — ::before/::after → sombras top-left y top-right
  .thti-shadow  → position:relative — ::before/::after → sombras bottom-left y bottom-right
  .thti-outer   → clip-path octogonal — recorta las 4 esquinas de la imagen
  img           → display:block, width:100%

  Los pseudo-elementos viven FUERA del clip-path, así que no se recortan.
  Cada uno es una pequeña barra rotada 45° con box-shadow, posicionada
  en su esquina. La sombra se proyecta hacia el interior simulando el pliegue.
*/

/* ── Wrapper externo ── */
.thti-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 0;
}

/* ── Wrapper de sombras inferiores ── */
.thti-shadow {
    position: relative;
    display: block;
    line-height: 0;
}

/* ── Pseudo-elementos de sombra ── */
.thti-wrap::before,
.thti-wrap::after,
.thti-shadow::before,
.thti-shadow::after {
    content: '';
    position: absolute;
    width: 68px;
    height: 16px;
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

/* top-left */
.thti-wrap::before {
    top: 0;
    left: -30px;
    transform: rotate(-45deg);
    transform-origin: center center;
}

/* top-right */
.thti-wrap::after {
    top: 0;
    right: -30px;
    transform: rotate(45deg);
    transform-origin: center center;
}

/* bottom-left */
.thti-shadow::before {
    bottom: 0;
    left: -30px;
    transform: rotate(-135deg);
    transform-origin: center center;
}

/* bottom-right */
.thti-shadow::after {
    bottom: 0;
    right: -30px;
    transform: rotate(135deg);
    transform-origin: center center;
}

/* ── Recorte de esquinas ── */
.thti-outer {
    display: block;
    clip-path: polygon(
        24px 0%,
        calc(100% - 24px) 0%,
        100% 24px,
        100% calc(100% - 24px),
        calc(100% - 24px) 100%,
        24px 100%,
        0% calc(100% - 24px),
        0% 24px
    );
    line-height: 0;
}

/* ── Imagen ── */
.thti-outer img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Link opcional ── */
.thti-link {
    display: block;
    line-height: 0;
}