/* Index Page Specific Styles */

/* Sobre Nós Section */
.sobre-nos {
   padding: 60px 0;
}

.sobre-nos .titulo-sessao {
   text-align: center;
   margin-bottom: 2rem;
}

.sobre-nos .paragrafo-2 {
   text-align: center;
   max-width: 900px;
   margin: 0 auto 4rem auto;
   font-size: 18px;
   line-height: 1.6;
}

/* Mission Section Styles */
.mission-section {
   position: relative;
   max-width: 600px;
   margin: 0 auto 4rem auto;
}

.mission-image {
   width: 100%;
   height: 300px;
   object-fit: cover;
   border-radius: 15px;
   display: block;
}

.mission-content {
   position: absolute;
   left: 30px;
   right: 30px;
   bottom: -90px;
   background-color: #f5f5f5;
   padding: 30px 20px;
   border-radius: 15px;
   text-align: center;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   z-index: 2;
}

.mission-title {
   font-size: 28px;
   color: #333;
   margin-bottom: 15px;
   font-weight: bold;
}

.mission-text {
   font-size: 16px;
   color: #666;
   line-height: 1.5;
}

/* Parceiros Section */
.parceiros {
   padding: 60px 0;
}

.parceiros .titulo-sessao {
   text-align: center;
   margin-bottom: 3rem;
}

.parceiros .flex-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 30px;
   margin: 0 auto;
   max-width: 1000px;
}

.parceiros .flex-container div {
   flex: 0 0 auto;
   text-align: center;
}

.parceiros .flex-container img {
   max-height: 120px;
   max-width: 200px;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: transform 0.3s ease, opacity 0.3s ease;
}

.parceiros .flex-container img:hover {
   transform: scale(1.05);
   opacity: 0.8;
}

/* Como Ajudar Section */
.como-ajudar {
   border-radius: 20px;
   background: linear-gradient(135deg, var(--azul-destaque) 0%, var(--azul-principal) 100%);
   color: white;
   padding: 40px;
   margin: 40px 0;
   display: flex;
   align-items: center;
   min-height: 350px;
}

.como-ajudar .col-7 {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   height: 100%;
}

.como-ajudar .col-5 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
}

.ajudar-item {
   display: flex;
   align-items: center;
   margin-bottom: 30px;
}

.ajudar-item:last-child {
   flex-direction: row-reverse;
}

.ajudar-caption {
   color: white;
   font-size: 2rem;
   font-weight: 600;
   margin: 0 20px;
}

.image-container {
   width: 200px;
   height: 120px;
   flex-shrink: 0;
}

.image-container svg {
   max-width: 100%;
   height: 100%;
}

.contact-info {
   text-align: center;
   margin: 30px 0;
}

.contact-phone {
   font-size: 2.5rem;
   font-weight: 600;
   color: white;
   margin-bottom: 5px;
}

.contact-hours {
   color: var(--cinza-25);
   font-size: 13px;
}

/* Últimas Notícias Section */
.ultimas-noticias {
   padding: 60px 0;
}

.ultimas-noticias .titulo-sessao {
   text-align: center;
   margin-bottom: 3rem;
}

.news-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
   margin-top: 2rem;
}

.news-card {
   background: white;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.news-card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.news-card-body {
   padding: 20px;
}

.news-card h5 {
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: 10px;
   color: #333;
}

.news-card p {
   color: #666;
   font-size: 0.9rem;
   line-height: 1.5;
   margin-bottom: 15px;
}

.news-card .btn {
   background-color: var(--azul-destaque);
   color: white;
   padding: 8px 16px;
   border-radius: 6px;
   text-decoration: none;
   font-size: 0.9rem;
   transition: background-color 0.3s ease;
}

.news-card .btn:hover {
   background-color: var(--azul-principal);
}

/* Cookie Notice */
.cookie-aviso {
   position: fixed;
   bottom: 20px;
   left: 5%;
   right: 5%;
   background-color: var(--cinza-25);
   border: 1px solid #ddd;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   z-index: 1000;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.cookie-aviso p {
   margin-bottom: 15px;
   font-size: 14px;
   color: #333;
}

.cookie-aviso a {
   color: var(--azul-destaque);
   text-decoration: none;
}

.cookie-aviso a:hover {
   text-decoration: underline;
}

/* RESPONSIVE STYLES */
@media screen and (max-width: 1024px) {
   .sobre-nos .paragrafo-2 {
      width: 90%;
      font-size: 16px;
   }
   
   .mission-content {
      left: 20px;
      right: 20px;
      bottom: -60px;
      padding: 25px 15px;
   }
   
   .mission-title {
      font-size: 24px;
   }
   
   .mission-text {
      font-size: 14px;
   }
   
   .ajudar-caption {
      font-size: 1.8rem;
   }
   
   .image-container {
      width: 180px;
      height: 110px;
   }
   
   .contact-phone {
      font-size: 2.2rem;
   }
}

@media screen and (max-width: 768px) {
   /* Sobre Nós Section Mobile */
   .sobre-nos {
      padding: 40px 0;
      margin-bottom: 2rem !important;
   }
   
   .sobre-nos .titulo-sessao {
      font-size: 2.2rem;
      margin-bottom: 1.5rem;
   }
   
   .sobre-nos .paragrafo-2 {
      width: 95%;
      font-size: 15px;
      margin-bottom: 2rem;
      text-align: justify;
   }
   
   /* Mission Section Mobile */
   .sobre-nos .row {
      margin-top: 2rem !important;
      margin-bottom: 60px !important;
   }
   
   .mission-section {
      margin-bottom: 6rem;
   }
   
   .mission-image {
      height: 200px;
   }
   
   .mission-content {
      position: static;
      margin: 20px 0 0 0;
      border-radius: 10px;
      padding: 20px 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   }
   
   .mission-title {
      font-size: 20px;
      margin-bottom: 10px;
   }
   
   .mission-text {
      font-size: 13px;
      line-height: 1.4;
   }
   
   /* Parceiros Section Mobile */
   .parceiros {
      padding: 40px 0;
   }
   
   .parceiros .titulo-sessao {
      font-size: 2.2rem;
      margin-bottom: 2rem;
   }
   
   .parceiros .flex-container {
      gap: 20px;
      padding: 0 10px;
   }
   
   .parceiros .flex-container img {
      max-height: 80px;
      max-width: 140px;
   }
   
   /* Como Ajudar Section Mobile */
   .como-ajudar {
      margin: 20px 10px;
      padding: 25px 20px;
      min-height: auto;
      flex-direction: column;
   }
   
   .como-ajudar .col-7,
   .como-ajudar .col-5 {
      width: 100%;
   }
   
   .ajudar-item {
      flex-direction: column;
      text-align: center;
      margin-bottom: 25px;
   }
   
   .ajudar-item:last-child {
      flex-direction: column;
   }
   
   .ajudar-caption {
      font-size: 1.4rem;
      margin: 15px 0;
   }
   
   .image-container {
      width: 150px;
      height: 90px;
      margin-bottom: 10px;
   }
   
   .contact-info {
      margin: 20px 0;
   }
   
   .contact-phone {
      font-size: 2rem;
   }
   
   .contact-hours {
      font-size: 12px;
   }
   
   .formulario-button,
   .saiba-mais-button-sp {
      margin: 10px auto;
      display: block;
      text-align: center;
      max-width: 200px;
   }
   
   /* Últimas Notícias Mobile */
   .ultimas-noticias {
      padding: 40px 0;
   }
   
   .ultimas-noticias .titulo-sessao {
      font-size: 2.2rem;
   }
   
   .news-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 1.5rem;
   }
   
   .news-card {
      margin: 0 10px;
   }
   
   .news-card img {
      height: 150px;
   }
   
   .news-card-body {
      padding: 15px;
   }
   
   .news-card h5 {
      font-size: 1.1rem;
   }
   
   .news-card p {
      font-size: 0.85rem;
   }
   
   /* Cookie Notice Mobile */
   .cookie-aviso {
      bottom: 10px;
      left: 3%;
      right: 3%;
      padding: 15px;
      height: auto !important;
   }
   
   .cookie-aviso p {
      font-size: 12px;
      margin-bottom: 10px;
   }
   
   .saiba-mais-button {
      padding: 8px 16px;
      font-size: 12px;
   }
}

@media screen and (max-width: 480px) {
   /* Extra small screens */
   .sobre-nos {
      padding: 30px 0;
   }
   
   .sobre-nos .titulo-sessao {
      font-size: 1.8rem;
   }
   
   .sobre-nos .paragrafo-2 {
      font-size: 14px;
      width: 98%;
   }
   
   .mission-image {
      height: 160px;
      border-radius: 10px;
   }
   
   .mission-content {
      padding: 15px 10px;
      border-radius: 8px;
   }
   
   .mission-title {
      font-size: 18px;
   }
   
   .mission-text {
      font-size: 12px;
   }
   
   .parceiros .titulo-sessao {
      font-size: 1.8rem;
   }
   
   .parceiros .flex-container img {
      max-height: 60px;
      max-width: 100px;
   }
   
   .como-ajudar {
      margin: 15px 5px;
      padding: 20px 15px;
   }
   
   .ajudar-caption {
      font-size: 1.2rem;
   }
   
   .image-container {
      width: 120px;
      height: 70px;
   }
   
   .contact-phone {
      font-size: 1.8rem;
   }
   
   .contact-hours {
      font-size: 11px;
   }
   
   .formulario-button,
   .saiba-mais-button-sp {
      padding: 8px 15px;
      font-size: 13px;
   }
   
   .ultimas-noticias .titulo-sessao {
      font-size: 1.8rem;
   }
   
   .news-card {
      margin: 0 5px;
   }
   
   .news-card img {
      height: 120px;
   }
   
   .news-card-body {
      padding: 12px;
   }
   
   .news-card h5 {
      font-size: 1rem;
   }
   
   .news-card p {
      font-size: 0.8rem;
   }
   
   .news-card .btn {
      padding: 6px 12px;
      font-size: 0.8rem;
   }
   
   .cookie-aviso {
      bottom: 5px;
      left: 2%;
      right: 2%;
      padding: 12px;
   }
   
   .cookie-aviso p {
      font-size: 11px;
   }
}

/* Additional mobile-specific utility classes */
@media screen and (max-width: 768px) {
   .mobile-text-center {
      text-align: center !important;
   }
   
   .mobile-full-width {
      width: 100% !important;
   }
   
   .mobile-margin-bottom {
      margin-bottom: 2rem !important;
   }
   
   .mobile-padding {
      padding: 15px !important;
   }
   
   .mobile-hide {
      display: none !important;
   }
   
   .mobile-show {
      display: block !important;
   }
}

/* Landscape orientation adjustments for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
   .carousel {
      height: 300px;
   }
   
   .carousel-caption {
      bottom: 15%;
   }
   
   .carousel-caption h2 {
      font-size: 1.8rem;
   }
   
   .carousel-caption p {
      font-size: 0.9rem;
   }
   
   .sobre-nos {
      padding: 25px 0;
   }
   
   .mission-image {
      height: 140px;
   }
}

@media screen and (max-width: 768px) {
   .como-ajudar {
      margin: 20px 10px;
      padding: 25px 20px;
      min-height: auto;
      flex-direction: column;
      display: flex;
   }
   
   .como-ajudar .col-7,
   .como-ajudar .col-5 {
      width: 100% !important;
      flex: none !important;
   }
   
   /* Reorganizar layout dos itens de doação */
   .como-ajudar .col-7 {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 30px;
   }
   
   .como-ajudar .col-7 > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
   }
   
   .ajudar-caption {
      font-size: 1.4rem !important;
      margin: 10px 0 !important;
      text-align: center;
   }
   
   .image-container {
      width: 150px;
      height: 90px;
      margin: 0 auto 15px auto;
   }
   
   /* Seção de contato reorganizada */
   .como-ajudar .col-5 {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
   }
   
   .como-ajudar .col-5 > div:first-child {
      width: 100%;
      margin-bottom: 25px;
   }
   
   .como-ajudar .col-5 > div:first-child h3 {
      font-size: 1.3rem !important;
      margin-bottom: 20px;
      color: var(--cinza-75) !important;
   }
   
   /* Layout do telefone e formulário */
   .como-ajudar .col-5 > div:first-child > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 15px;
      width: 100%;
   }
   
   .como-ajudar .col-5 > div:first-child > div > div:first-child {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center;
   }
   
   .como-ajudar .col-5 h4 {
      font-size: 2.2rem !important;
      color: white !important;
      font-weight: 600 !important;
      margin-bottom: 5px;
      line-height: 1.2;
   }
   
   .como-ajudar .col-5 p {
      color: var(--cinza-75) !important;
      font-size: 12px !important;
      margin-bottom: 15px;
   }
   
   .formulario-button {
      margin: 0 auto 15px auto !important;
      display: block;
      text-align: center;
      padding: 12px 20px;
      font-size: 14px;
   }
   
   /* Botão Saiba Mais no final */
   .como-ajudar .col-5 > div:last-child {
      width: 100%;
      text-align: center;
      margin-top: auto;
   }
   
   .saiba-mais-button-sp {
      margin: 0 auto !important;
      display: inline-block;
      padding: 10px 20px;
      font-size: 14px;
   }
}

@media screen and (max-width: 480px) {
   .como-ajudar {
      margin: 15px 5px;
      padding: 20px 15px;
   }
   
   .ajudar-caption {
      font-size: 1.2rem !important;
   }
   
   .image-container {
      width: 120px;
      height: 70px;
   }
   
   .como-ajudar .col-5 h4 {
      font-size: 2rem !important;
   }
   
   .formulario-button,
   .saiba-mais-button-sp {
      padding: 10px 15px;
      font-size: 13px;
   }
}