/* Paper Quote Block - Frontend Styles */

.paper-quote-container {
    position: relative;
    --paper--quote--padding: 2rem;
    --paper--quote--padding--inline: 1.5rem;
    --paper--quote--padding--bottom: 1rem;
    --paper--quote--icon--size: clamp(1.825rem, 1.4886rem + 1.3455vw, 2.75rem);
    margin-top: var(--paper--quote--padding) !important;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
    padding: var(--paper--quote--padding) var(--paper--quote--padding--inline) var(--paper--quote--padding--bottom) var(--paper--quote--padding--inline);
	margin-right: 1rem;

}

.paper-quote-image-wrapper {
    filter: drop-shadow(5px 5px 0px var(--wp--preset--color--accent-3));
    margin-top: calc(-1 * var(--paper--quote--padding) - 2rem);
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.paper-quote-image {
    position: relative;
    width: 200px;
    height: auto;
    margin: 0 1.5rem 1rem 0;
    clip-path: polygon(0 3%, 100% 1%, 100% 100%, 0 96%);
    aspect-ratio: 1;
    max-width: min(65%, 40vw);
	    transform: rotate(2deg);
}

.paper-quote-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.paper-quote-sticker {
    position: absolute;
    top: calc(-1 * var(--paper--quote--padding));
    right: calc(-1 * var(--paper--quote--padding--inline));
    font-size: 2rem;
    z-index: 10;
    margin: 0;
    filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.2));
    transform: translate(50%, -50%);
    font-size: var(--paper--quote--icon--size);
    stroke: white;
    stroke-width: 2em;
    stroke-linecap: round;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

.paper-quote-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}



.paper-quote-open {
    align-self: flex-start;
        position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 0;
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
	transform: translateX(-.25em);
}

.paper-quote-close {
    align-self: flex-end;
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    transform: rotate(4deg);
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
    margin-left: auto;
	transform: translateX(.25em);
}

.quote-mark {
    font-family: 'Raleway';
    color: var(--wp--preset--color--accent-3);
    font-size: 3rem;
    font-weight: bold;
    line-height: .5em;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-inline: .25em;
    height: 1em;
    flex-wrap: nowrap;
    clip-path: polygon(0 0, 85% 0, 91% 100%, 9% 100%);
        background-image: url(paper-quote-background-2.jpg);
    background-size: 480%;

}

.paper-quote-container:before {
    content: "";
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
    background-image: url(paper-quote-background-2.jpg);
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

.paper-quote-text {
      --wp--preset--font-size--medium: clamp(0.875rem, 2vw, 1.125rem) !important;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.3;
    margin: 0;
    text-align: left;
    font-style: italic;
	    padding-bottom: 1rem;	
	text-shadow: 1px 1px 3px #eeeeeef7;
	    font-weight: 400;
}

.paper-quote-text strong {
	font-weight: 600;
}

.paper-quote-author:before {
	content:"– "
}

.paper-quote-author {
    text-align: left;
    font-style: normal;
    margin-top: 0;
    --wp--preset--font-size--medium: clamp(0.875rem, 2vw, 1.125rem) !important;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.3;
    font-weight: 500;
    display: inline-block;
    width: fit-content;
    margin-bottom: 0;
	text-shadow: 1px 1px 3px #eeeeeef7;
}

.paper-quote-author em {
	font-size: 80%;
	font-style: normal;
}

.paper-quote-author em:before {
content: "– ";
opacity: 0;
}