/**
 * Ajustes personalizados - Bruno Calado Photography
 * Adicionar este ficheiro após o main.css
 */

/* ============================================
   CARROSSEL DE IMAGENS - INTRO
   ============================================ */

/* Remover imagem de fundo original do intro */
#intro {
  background: url("images/overlay.png") !important;
  background-size: 256px 256px !important;
  background-repeat: repeat !important;
  position: relative;
  overflow: hidden;
}

/* Container das imagens do carrossel */
#intro .carousel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Cada imagem do carrossel */
#intro .carousel-bg .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translateX(100%); /* Começa fora do ecrã à direita */
  transition: transform 1s ease-in-out;
  visibility: hidden;
}

/* Overlay escuro por cima de cada imagem */
#intro .carousel-bg .carousel-slide::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Escurece 40% - ajustar conforme necessário */
}

/* Imagem activa - visível no centro */
#intro .carousel-bg .carousel-slide.active {
  transform: translateX(0);
  visibility: visible;
}

/* Imagem a sair - desliza para a esquerda */
#intro .carousel-bg .carousel-slide.exit {
  transform: translateX(-100%);
  visibility: visible;
}

/* Reset instantâneo - sem transição ao voltar à posição inicial */
#intro .carousel-bg .carousel-slide.reset {
  transition: none !important;
  transform: translateX(100%);
  visibility: hidden;
}

/* Manter o conteúdo por cima */
#intro .content {
  position: relative;
  z-index: 1;
}

/* Overlay por cima das imagens */
#intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../css/images/overlay.png");
  background-size: 256px 256px;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   SCROLL - COMPENSAR HEADER FIXO
   ============================================ */

/* Margem de scroll para todas as secções - alinhado com o header */
section {
  scroll-margin-top: 64px !important; /* Altura exacta do header desktop (4em) */
}

/* Forçar em secções específicas */
#intro, #one, #two, #three, #four, #five, #work, #contact {
  scroll-margin-top: 64px !important;
}

/* Ajuste específico para as caixas de conteúdo */
.main.style2 .content.box {
  scroll-margin-top: 64px !important;
}

/* ============================================
   GALERIA - THUMBNAILS COM TAMANHO FIXO
   ============================================ */

/* Contentor da imagem - "moldura" fixa */
.gallery article .image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* Proporção 4:3 (altura = 75% da largura) */
  overflow: hidden;
}

/* Imagem adapta-se à moldura */
.gallery article .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* Preenche a moldura, cortando o excesso */
  object-position: center; /* Centra a imagem */
}

/* Garantir que os artigos alinham correctamente */
.gallery article {
  height: auto !important;
}

.gallery article .image.fit {
  height: 0;
  padding-bottom: 75%;
}

/* ============================================
   TEXTO DO INTRO - AUMENTADO
   ============================================ */

/* Título "Bruno Calado" */
#intro h1 {
  font-size: 4.5em !important;
  line-height: 1.1em;
  margin-bottom: 0.3em;
}

/* Descrição abaixo do título */
#intro p {
  font-size: 1.4em !important;
  line-height: 1.5em;
  max-width: 600px;
  margin: 0 auto 0 auto; /* Sem margem entre parágrafos */
}

/* Último parágrafo (antes do botão) - manter margem inferior */
#intro p:last-of-type {
  margin-bottom: 1.5em;
}

/* ============================================
   SECÇÕES SEPARADORAS - ALTURA AJUSTADA
   ============================================ */

/* Altura mínima das secções com imagem de fundo */
.main.style2.fullscreen {
  min-height: 70vh;
  height: auto !important; /* Permite crescer conforme o conteúdo */
  padding-top: 80px !important; /* Espaço para o header */
  padding-bottom: 40px !important;
}

/* Garantir que a caixa de texto não é cortada */
.main.style2 .content.box {
  margin-top: 20px;
  margin-bottom: 20px;
  max-height: none !important;
  overflow: visible !important;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media screen and (max-width: 980px) {
  
  section,
  #intro, #one, #two, #three, #four, #five, #work, #contact {
    scroll-margin-top: 64px !important;
  }
  
  #intro h1 {
    font-size: 3.5em !important;
  }
  
  #intro p {
    font-size: 1.2em !important;
  }
  
  .main.style2.fullscreen {
    min-height: 60vh;
    height: auto !important;
    padding-top: 70px !important;
  }
  
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media screen and (max-width: 736px) {
  
  section,
  #intro, #one, #two, #three, #four, #five, #work, #contact {
    scroll-margin-top: 60px !important;
  }
  
  #intro h1 {
    font-size: 2.75em !important;
  }
  
  #intro p {
    font-size: 1.1em !important;
    padding: 0 1em;
  }
  
  .main.style2.fullscreen {
    min-height: auto !important;
    height: auto !important;
    padding-top: 60px !important;
  }
  
}

/* ============================================
   RESPONSIVE - MOBILE PEQUENO
   ============================================ */

@media screen and (max-width: 480px) {
  
  section,
  #intro, #one, #two, #three, #four, #five, #work, #contact {
    scroll-margin-top: 56px !important;
  }
  
  .main.style2.fullscreen {
    padding-top: 56px !important;
  }
  
  #intro h1 {
    font-size: 2.25em !important;
  }
  
  #intro p {
    font-size: 1em !important;
  }
  
}