/* ==================================================
   BASE / COMPONENTES REUTILIZÁVEIS
================================================== */

.case-title-in {
    font-size: 24px;
    font-weight: lighter;
    line-height: 1.1;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    color: #18182B;
}
@media (max-width: 768px) {
    .case-title-in {
        -webkit-text-stroke: .5px #18182B;
    }}

.case-subtitle-in {
    max-width: 700px;
    margin: 0 auto 16px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.case-text-in,
.case-text-in-final {
    margin: 20px auto;
    font-size: 14px;
    line-height: 1.8;
    max-width: 700px;
}

.case-text-in-final {
    text-align: center;
    margin-bottom: 60px;
}

.case-text-in p {
    margin-bottom: 20px;
}

.case-image-in {
    margin: 20px 20px;
}

.case-image-in img,
.case-media img,
.case-media video {
    width: 100%;
    height: auto;
    display: block;
}

.case-image-in video {
    margin: 10px 0;
    border-radius: 12px;
}

.case-media {
    margin: 10px 0;
    border-radius: 12px;
    overflow: hidden;
}

/* ==================================================
   1. HERO
================================================== */

.case-hero {
    padding: 120px 0px 80px;
}

.case-hero .container {
    margin: 0 auto;
}

.client-name-in {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: lowercase;
    margin-bottom: -14px;
    font-family: 'Abril Display', serif;
    text-align: center;
}

.client-name-in .dot {
    margin-left: -2px;
}

.case-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0px 20px 0px 100px;
    gap: 20px;
    margin-top: 20px;
}

.case-left {
    font-size: 12px;
}

.work-type {
    list-style: none;
    padding: 0;
    margin: 0;
}

.work-type li {
    margin-bottom: 8px;
    text-transform: lowercase;
    font-family: 'Abril Display', serif;
}

.case-right {
    font-size: 14px;
    line-height: 1.7;
}

.cliente-texto p {
    margin-bottom: 16px;
}

/* ==================================================
   2. STORY
================================================== */

.case-story {
    padding: 120px 20px;
    background-color: aliceblue;
}

.case-story-in .container {
    max-width: 1000px;
    margin: 0 auto;
}

/* ==================================================
   3. ID VISUAL / MEDIA
================================================== */

.case-id-visual {
    padding: 120px 20px 20px;
}

/* ==================================================
   4. LOGOTIPO / BRAND SYSTEM
================================================== */

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0px;
    align-items: center;
    margin: 60px 0;
}

.logo-item img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/5;
}

.tipografia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 60px 0;
}

.tipografia-item img {
    width: 100%;
    display: block;
}

/* ==================================================
   5. PADRÕES
================================================== */

.case-padroes .padroes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.case-padroes .padroes-grid > .padroes-item:first-of-type {
    flex: 0 0 100%;
}

.case-padroes .padroes-grid > .padroes-item {
    flex: 1 1 0;
    min-width: 0;
}

.case-padroes .padroes-media {
    width: 100%;
    height: auto;
    display: block;
}

/* ==================================================
   6. APLICAÇÕES (MASONRY)
================================================== */

.case-aplicacoes {
    padding: 20px 20px;
}

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 4px;
    grid-auto-rows: 2px;
}

.masonry-item {
    position: relative;
    overflow: hidden;
}

.masonry-media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.masonry-item video {
    object-fit: cover;
}

/* ==================================================
   7. SITE
================================================== */

.case-site {
    padding: 20px 20px;
}

.case-site-full {
    padding: 60px 20px 20px;

}

.case-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	background: transparent;
}

.cta-intro {
    max-width: 700px;
    margin-bottom: 20px;
    line-height: 1.8;
    font-size: 14px;
    text-align: center !important;
}

.case-media {
    width: 100%;
    margin: 20px auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.case-site-video video{
    width: 100%;
}

.case-image-in {
    margin: 20px 4px;
}

.case-image-in img {
    width: 100%;
    height: auto;
    display: block;

}

.case-image-in video {
margin: 60px 0;
	width: 100%;
    display: block;
    border-radius: 12px;
    overflow: hidden;
}


.site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.site-grid-item img {
    width: 100%;
}

/* ==================================================
   8. SOCIAL
================================================== */

.case-social {
    padding: 40px 20px;
}

.social-main {
    width: 100%;
    margin: 60px auto;
    overflow: hidden;
    background: #000;
}

.social-main img,
.social-main video {
    width: 100%;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.social-grid.is-single {
    grid-template-columns: 1fr;
}

.social-item {
    overflow: hidden;
    background: #000;
}

.social-item img,
.social-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================================================
   9. CAMPAIGN
================================================== */

.case-campaign {
    padding: 40px 20px;
}

.case-campaign-video {
    width: 80%;
    margin: 60px auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.case-campaign-video video {
    width: 100%;
}

.case-campaign-grid {
    padding: 40px 20px;
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.campaign-item {
    overflow: hidden;
    background: #000;
}

.campaign-item img,
.campaign-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-campaign-split {
    padding: 40px 20px;
}

.campaign-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.campaign-split.is-single {
    grid-template-columns: 1fr;
}

.campaign-split-item {
    overflow: hidden;
    background: #000;
}

.campaign-split-item img,
.campaign-split-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================================================
   10. FINAL
================================================== */

.final-title {
    margin-top: 120px;
}

.final-text {
    max-width: 600px;
    margin: 20px auto 0;
}

/* ==================================================
   RESPONSIVO
================================================== */

@media (max-width: 1024px) {
    .masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {

    .case-hero {
        padding: 80px 20px;
    }
    .case-title-in {
        font-weight: 300;
    }

    .case-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        padding: 0px 10px;
        margin-bottom: -100px;
    }

    .case-right {
        font-size: 16px;
    }
    .work-type {
    list-style: none;
    padding-bottom: 40px;
    margin: 0;
}

    .case-story {
        padding: 80px 20px;
    }
	.case-id-visual {
		padding: 80px 20px 4px;
    }
	.case-logotipo {
		padding: 80px 20px;
    }

    .logo-grid {
        grid-template-columns: 1fr;
        margin: 10px 0;
        
    }
	.case-brand-system {
		padding: 4px 20px 4px;
    }
	.case-padroes {
		padding: 4px 20px 4px;
    }

    .logo-item img {
        aspect-ratio: 6/12;
    }

    .tipografia-grid {
        grid-template-columns: 1fr;
    }
	.case-padroes .padroes-grid {
		display: grid;
        grid-template-columns: 1fr;
		padding: 4px;
    }

    .masonry-grid {
        grid-template-columns: 1fr;
    }

    .case-site-video {
        width: 100%;
    }
	.site-grid {
        grid-template-columns: 1fr;
    }

    .social-grid {
        grid-template-columns: 1fr;
    }

    .campaign-grid {
        grid-template-columns: 1fr;
    }
    .case-campaign-video {
    width: 100%;
    margin: -20px auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
    .campaign-split {
        grid-template-columns: 1fr;
    }
}