﻿.list-document-wrapper { margin-bottom: 40px; }
.list-doc-content { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.list-doc-content > div { width: 23.404255319148934%; margin-left: 2.127659574468085%; margin-bottom: 60px; }
.list-doc-content > div:nth-child(4n+1) { margin-left: 0; }
.list-doc-content > div > a { display: block; color: #000; }
.list-doc-content > div .list-doc-image-wrapper { margin-bottom: 30px; height: 0; position: relative; border: 1px solid #d2d2d2; overflow: hidden; }

.list-doc-content > div .list-doc-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; }
.list-doc-content > div .list-doc-image-wrapper img.lazyloaded { }
html:not(.touch) .list-doc-content > div > a:hover img { transform: scale(1.1); }
.list-doc-content > div .list-doc-content-wrapper { padding: 0 10px; line-height: normal; }
.list-doc-content > div .list-doc-content-wrapper > h2 { font-size: 1.2em; line-height: 1.5em; font-weight: 600; margin-bottom: 20px; }
.list-doc-content > div .list-doc-content-wrapper > h3 { font-size: 0.9em; font-weight: 500; color: #515151; margin-bottom: 12px; }
.list-doc-content > div .list-doc-content-wrapper > p { font-size: 0.9em; line-height: 1.5em; }
.list-doc-content > div .list-doc-date-section { font-size: 0.9em; margin-bottom: 10px; }

/* Foster Finamente */
.list-document-wrapper.list-document-finalmente { text-align: center; }

/* Families */
.list-document-wrapper.list-document-families { text-align: center; }

/* TAG */
.list-document-wrapper.list-document-wrapper-tag .list-doc-content > div > a { background-color: #F4F4F4; min-height: 30px; text-align: center; padding: 10px 10px; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; }
html:not(.touch) .list-document-wrapper.list-document-wrapper-tag .list-doc-content > div > a:hover { background-color: #000; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; }
.list-document-wrapper.list-document-wrapper-tag .list-doc-content > div .list-doc-content-wrapper > h2 { margin-bottom: 0; font-size: 0.8em; text-transform: uppercase; line-height: 1.5em; }
html:not(.touch) .list-document-wrapper.list-document-wrapper-tag .list-doc-content > div > a:hover h2 { color: #FFF; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; }

/* Stores */
.list-document-wrapper.list-document-wrapper-stores .list-doc-content > div > a { background-color: #F4F4F4; min-height: 30px; text-align: center; padding: 10px 10px; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; }
html:not(.touch) .list-document-wrapper.list-document-wrapper-stores .list-doc-content > div > a:hover { background-color: #000; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; }
.list-document-wrapper.list-document-wrapper-stores .list-doc-content > div .list-doc-content-wrapper > h2 { margin-bottom: 0; font-size: 0.8em; text-transform: uppercase; line-height: 1.5em; }
html:not(.touch) .list-document-wrapper.list-document-wrapper-stores .list-doc-content > div > a:hover h2 { color: #FFF; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; -ms-transition: 0.3s linear; }

/* doc recent */
.list-doc-recent-wrapper { padding: 5% 4%; background: #f2f3f4; }
.list-doc-recent-wrapper .list-doc-title { display: block; text-align: center; padding: 0 0 30px 0; text-transform: uppercase; font-weight: 500; }

.list-document-wrapper .paging-filter-year { margin-bottom: 20px; }
.paging-filter-year a { color: #000; font-size: 0.9em; }
html:not(.touch) .paging-filter-year a:hover { text-decoration: underline; }

.list-doc-recent-wrapper .list-document-wrapper { margin-bottom: 0; }
.list-doc-recent-wrapper .list-doc-recent-title-wrapper { text-align: center; margin-bottom: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px }
.list-doc-recent-wrapper .list-doc-recent-title-wrapper .list-doc-recent-title > * { font-size: var(--plugin-title-size); font-weight: var(--plugin-title-weight); margin-bottom: 0; }
.list-doc-recent-wrapper .list-doc-recent-title-wrapper .list-doc-recent-text { line-height: 1.5; }
.list-doc-recent-wrapper .list-doc-content { margin-inline: auto; grid-template-columns: repeat(4,1fr); }
.list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3,1fr); }
.list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2,1fr); }
.list-doc-recent-wrapper .list-doc-content:has(> div:only-child) { grid-template-columns: 1fr; }
.list-doc-recent-wrapper .list-doc-content > div { margin-bottom: 0; }
.list-doc-recent-wrapper .list-doc-content > div:only-child { width: 50%; margin-inline: auto !important; }
.list-doc-recent-wrapper .list-doc-content > div > a { line-height: 0; }
.list-doc-recent-wrapper .list-doc-content > div .list-doc-image-wrapper { height: unset; }
.list-doc-recent-wrapper .list-doc-content > div .list-doc-image-wrapper img { position: unset; }
.list-doc-recent-wrapper .list-doc-recent-link { position: relative; z-index: 90; text-transform: uppercase; color: #FFF; display: block; font-size: 0.8em; line-height: 1.5; font-weight: 500; background-color: var(--quinary-color); padding: 20px 30px; transition: all 0.3s; }

.list-doc-recent-wrapper.vertical .list-doc-content > div .list-doc-image-wrapper img { aspect-ratio: 9/16; height: auto; object-fit: cover; }

div:has(> .list-doc-recent-wrapper) + div:has(> .list-doc-recent-wrapper) .list-doc-recent-wrapper { padding-top: 0; }

html[data-layer="1099"] .list-doc-recent-wrapper { margin-inline: calc(5% * -1) }

/*Reels*/
html[data-document-parent="13615"] .list-doc-content { grid-template-columns: repeat(5,1fr); }
html[data-document-parent="13615"] .list-doc-content > div > a { position: relative; }
html[data-document-parent="13615"] .list-doc-content > div > a .property { position: absolute; top: -5px; right: -5px; background-color: var(--quinary-color); color: #fff; padding: 3px 5px; padding-left: 15px; clip-path: polygon(100% 0%, 100% calc(100% + 5px), 15% 100%, 0% 0%); }
html[data-document-parent="13615"] .list-doc-content > div > a .property:before { content: ''; position: absolute; bottom: -5px; right: 0; background: linear-gradient(315deg, transparent 50%, var(--quinary-color) 50% 100%); filter: brightness(50%); width: 5px; height: 5px; }
html[data-document-parent="13615"] .list-doc-content > div .list-doc-image-wrapper { border: 0; padding-bottom: 0 !important; height: auto; }
html[data-document-parent="13615"] .list-doc-content > div .list-doc-image-wrapper img { aspect-ratio: 9/16; height: auto; object-fit: cover; position: unset; }

@supports (display: grid) {
    .list-doc-content { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 60px; }
    .grid3 .list-doc-content { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 60px; }
    .list-document-wrapper.list-document-wrapper-tag .list-doc-content { grid-row-gap: 30px; }
    .list-document-wrapper.list-document-wrapper-stores .list-doc-content { grid-row-gap: 30px; }
    .list-doc-content > div { width: 100%; margin-bottom: 0; margin-left: 0; }
    .list-doc-content:after { display: none; }
    .list-doc-recent-wrapper .list-doc-recent-link:hover {background-color: var(--secondary-color);}
}

@media (max-width:1800px) {
    html[data-document-parent="13615"] .list-doc-content { grid-template-columns: repeat(4,1fr); }
}

@media (min-width:1201px) and (max-width:1500px) {
    @supports (display: grid) {
        .list-doc-content, .grid3 .list-doc-content { grid-template-columns: 1fr 1fr 1fr; }
        .list-doc-recent-wrapper .list-doc-content { /*grid-template-columns: 1fr 1fr;*/ }
    }
}

@media (max-width:1200px) {
    html[data-document-parent="13615"] .list-doc-content { grid-template-columns: repeat(3,1fr); }
}

@media (min-width:1024px) and (max-width:1200px) {
    @supports (display: grid) {
        .list-doc-content, .grid3 .list-doc-content { grid-template-columns: 1fr 1fr; }
    }
}

@media (max-width:1023px) {
    .paging-filter-year { margin-bottom: 10px; }

    .list-doc-recent-wrapper .list-doc-content { grid-template-columns: repeat(2,1fr); }
    .list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(2,1fr); }

    .list-doc-recent-wrapper .list-doc-recent-title-wrapper { margin-bottom: 30px; }

    @supports (display: grid) {
        .list-doc-content, .grid3 .list-doc-content { grid-template-columns: 1fr 1fr; }
    }

    @media (pointer:coarse) {
        .list-doc-recent-wrapper { padding-inline: 0; overflow: hidden; }
        .list-doc-recent-wrapper .list-doc-recent-title-wrapper { padding-inline: 4%; }
        .list-doc-recent-wrapper .list-doc-content { scroll-snap-type: x mandatory; justify-content: flex-start; flex-direction: row; overflow-x: scroll; overflow-y: hidden; flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none; display: flex; padding-inline: 4%; scroll-padding-inline: 4%; }
        .list-doc-recent-wrapper .list-doc-content .list-doc-item { scroll-snap-align: start; flex: none; width: 27%; }
        .list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(3):last-child) .list-doc-item { width: 35%; }
        .list-doc-recent-wrapper .list-document-wrapper:has(.list-doc-item:nth-child(2):last-child) { margin-inline: 4%; }
        .list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(2):last-child) { display: grid; padding-inline: 0; }
        .list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(2):last-child) .list-doc-item { width: 100%; }
        .list-doc-recent-wrapper .list-doc-content:has(> div:only-child) { display: grid; padding-inline: 0; }
        .list-doc-recent-wrapper .list-doc-content > div:only-child { width: 75%; }
        .list-doc-recent-wrapper .list-doc-content .list-doc-item:last-child { margin-right: 8%; }
    }
}

@media (max-width:767px) {
    html[data-document-parent="13615"] .list-doc-content { grid-template-columns: repeat(2,1fr); }

    .list-doc-recent-wrapper .list-doc-recent-title-wrapper { gap: 10px }
    @supports (display: grid) {
        .list-doc-recent-wrapper .list-doc-content { /*grid-template-columns: 1fr;*/ }
    }

    @media (pointer:coarse) {
        .list-doc-recent-wrapper .list-doc-content .list-doc-item { width: 35%; }
        .list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(3):last-child) .list-doc-item { width: 60%; }
        .list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(1,1fr); }
    }
}

@media (max-width:600px) {
    .list-doc-content, .grid3 .list-doc-content { display: block; }
    .list-doc-content > div { width: 100%; margin-left: 0%; margin-bottom: 40px; }
    .paging-filter-year { margin-bottom: 20px; }
    html[data-document-parent="13615"] .list-doc-content > div .list-doc-image-wrapper { margin-bottom: 15px; }

    @media (pointer:coarse) {
        .list-doc-recent-wrapper .list-doc-content .list-doc-item { width: 60%; }
        .list-doc-recent-wrapper .list-doc-content:has(> div:nth-child(3):last-child) .list-doc-item { width: 80%; }
    }
}

@media (max-width:480px) {
    html[data-document-parent="13615"] .list-doc-content { grid-template-columns: repeat(1,1fr); }

    .list-doc-recent-wrapper .list-doc-recent-link { padding: 17px 22px; }

    @media (pointer:coarse) {
        .list-doc-recent-wrapper .list-doc-content .list-doc-item { width: 80%; }
        .list-doc-recent-wrapper .list-doc-content > div:only-child { width: 90%; }
    }
}
