/*
Theme Name: Twelve Soluções Digitais
Theme URI: https://twelvesolucoesdigitais.com.br
Author: Twelve Soluções Digitais
Description: Tema institucional personalizado com portfólio, serviços, ensaios, depoimentos, banners, galerias e vídeos.
Version: 1.2.3
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: twelve
*/

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wp-embed-aspect-16-9,
.twelve-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #101729;
}

.twelve-video iframe,
.twelve-video video {
  width: 100%;
  height: 100%;
  border: 0;
}

.twelve-video .instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.testimonial-section,
.banner-section {
  max-width: 1440px;
  margin: auto;
  padding: 85px clamp(24px, 7vw, 108px);
}

.testimonial-grid,
.banner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 35px;
}

.testimonial-card,
.banner-card {
  border: 1px solid #dce1e1;
  border-radius: 16px;
  background: #fff;
  padding: 25px;
}

.testimonial-card blockquote {
  margin: 0 0 20px;
  color: #45515e;
  font-size: 16px;
  line-height: 1.7;
}

.testimonial-card strong,
.testimonial-card small {
  display: block;
}

.testimonial-card small { color: #89929a; }
.banner-card img { width: 100%; height: auto; border-radius: 11px; }
.banner-card h3 { font-size: 28px; margin: 17px 0 8px; }
.banner-card p { color: #66727e; line-height: 1.6; }

.project-detail {
  max-width: 1100px;
  margin: auto;
  padding: 75px 24px 110px;
}

.project-detail h1 {
  margin: 15px 0;
  font-size: clamp(45px, 6vw, 82px);
  letter-spacing: -.065em;
}

.project-detail-copy { max-width: 760px; color: #5f6b78; line-height: 1.75; }
.project-detail-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 45px; }
.project-detail-gallery img { width: 100%; height: auto; border-radius: 14px; display: block; }
.project-detail .twelve-video { margin-top: 35px; }

/* Logos do cabeçalho */
.header-brand-light {
  background: transparent;
  border-radius: 0;
}

.header-brand-light img {
  filter: invert(1);
}

.studio-header .header-brand {
  height: 68px;
}

/* Quadro editável de ensaios do Twelve Studio */
.studio-hero-art {
  min-height: 440px;
  overflow: visible;
  background: linear-gradient(145deg, #f1ece4, #e6ded1);
  box-shadow: none;
}

.studio-hero-art::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: -30px;
  top: 49%;
  width: 45px;
  height: 3px;
  border-radius: 4px;
  background: #ed593b;
}

.studio-hero-art::after {
  display: none;
}

.studio-hero-art > .studio-hero-default {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: 56% center;
  border-radius: 25px;
  box-shadow: 0 30px 65px rgba(17, 24, 39, .14);
}

.studio-photo-card {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  border-radius: 20px;
  background: #d8d5cf;
  box-shadow: 0 22px 45px rgba(17, 24, 39, .18);
}

.studio-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-photo-main {
  top: 3%;
  right: 2%;
  width: 59%;
  height: 88%;
}

.studio-photo-maternity {
  z-index: 2;
  top: 20%;
  left: 4%;
  width: 38%;
  height: 56%;
}

.studio-photo-professional {
  z-index: 3;
  left: 31%;
  bottom: 3%;
  width: 40%;
  height: 39%;
}

.studio-hero-art .studio-photo-label {
  position: absolute;
  z-index: 3;
  left: auto;
  bottom: auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: #fff;
  background: rgba(16, 23, 39, .82);
  box-shadow: 0 8px 22px rgba(17, 24, 39, .16);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.studio-photo-label-main { top: 8%; right: 8%; }
.studio-photo-label-maternity { top: 24%; left: 9%; }
.studio-photo-label-professional { left: 39%; bottom: 18%; }

.studio-photo-card .studio-photo-label {
  top: 12px;
  left: 12px;
  right: auto;
}

.studio-photo-main .studio-photo-label {
  left: auto;
  right: 12px;
}

.studio-ai-badge {
  position: absolute;
  z-index: 4;
  left: 5%;
  bottom: 5%;
  width: min(280px, 47%);
  padding: 13px 15px;
  border-left: 4px solid #ed593b;
  border-radius: 10px;
  color: #111827;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 35px rgba(17, 24, 39, .16);
  backdrop-filter: blur(10px);
}

.studio-ai-badge strong,
.studio-ai-badge small {
  display: block;
}

.studio-ai-badge strong {
  font-size: 12px;
  line-height: 1.3;
}

.studio-ai-badge small {
  margin-top: 4px;
  color: #5f6974;
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 1050px) {
  .studio-hero-art::before {
    left: 28px;
    top: -19px;
    width: 3px;
    height: 36px;
  }
}

@media (max-width: 760px) {
  .testimonial-grid,
  .banner-grid,
  .project-detail-gallery { grid-template-columns: 1fr; }

  .studio-header .header-brand { height: 58px; }
  .studio-hero-art,
  .studio-hero-art > .studio-hero-default { min-height: 320px; }
  .studio-hero-art > .studio-hero-default { object-position: 58% center; }
  .studio-ai-badge { width: 58%; padding: 10px 12px; }
  .studio-ai-badge strong { font-size: 10px; }
  .studio-ai-badge small { font-size: 9px; }
  .studio-hero-art .studio-photo-label { padding: 6px 9px; font-size: 8px; }
}