a.navbar-item.is-active {
  color: --espagnexport-primary;
}

.site-logo {
  transition: all 0.5s ease;
}

.hero {
  background-image: url('../assets/images/hero_portada.svg');
  background-position: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
  padding-bottom: 10em;

  .subtitle {
    color: --espagnexport-grey-darker;
  }

  img:first-of-type {
    padding-top: 3em;
  }
}

@media screen and (max-width: 768px) {
  .hero {
    background-position-y: 90%;
  }
}


.column .icon {
  font-size: 4em;
  color: --espagnexport-primary;
  padding: .5em 0 .5em 0;

  &:hover {
    color: --espagnexport-secondary;
  }
}


.column .icon {
  font-size: 4em;
  color: --espagnexport-primary;
  padding: .5em 0 .5em 0;

  &:hover {
    color: --espagnexport-secondary;
  }
}
/* ==========================================================================
   Variables y configuración base
   ========================================================================== */
:root {
  --card-height: 250px;
  --card-transition: all 0.3s ease;
  --card-shadow: 0 8px 8px rgba(149, 9, 21, 0.2);
  --spacing-standard: 1rem;
}

/* ==========================================================================
   Estilos base
   ========================================================================== */
/* Tipografía */
.card-content .subtitle,
.annonce-content .subtitle {
  text-transform: uppercase;
}

/* Tags y etiquetas */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.tag {
  width: fit-content;
  margin: 0;
}

/* ==========================================================================
   Colores y variantes
   ========================================================================== */
.is-info {
  background-color: var(--espagnexport-warning);
}

.is-success {
  background-color: var(--espagnexport-primary);
  color: white;
}

/* ==========================================================================
   Componentes
   ========================================================================== */
/* Cards */
.annonce-card {
  overflow: hidden;
  transition: var(--card-transition);
}

/* Imágenes */
.photos-annonce {
  border-radius: 12px;
}

.image-style-an-main-photo.image {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
}

/* Contenedores de altura igual */
.has-equal-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.has-equal-height .card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.has-equal-height .card-content > :last-child {
  margin-top: auto;
}

/* ==========================================================================
   Layout y Grid
   ========================================================================== */
.info-columns {
  display: flex;
  flex-wrap: wrap;
}

.fixed-grid .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.fixed-grid .cell {
  height: 100%;
}

.fixed-grid .cell .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fixed-grid .cell .card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.fixed-grid .cell .card-content .block:nth-child(2) {
  flex-grow: 1;
}

.fixed-grid .cell .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fixed-grid .cell .card-image figure.image.is-4by3 {
  height: auto;
}

/* ==========================================================================
   Formularios
   ========================================================================== */

form.box {
  max-width: 400px;
  margin: 2rem auto;
}

.is-required {
  color: #f14668;
  padding-left: 0.25rem;
}

.field:not(:last-child) {
  margin-bottom: 1rem;
}

.label.form-required {
  font-weight: 600;
}

.label .has-text-danger {
  margin-left: 0.25rem;
}

.form-actions.field {
  margin-top: 1.5rem;
}

/* ==========================================================================
   Navegación
   ========================================================================== */
.navbar-item .annonces-menu {
  background-color: var(--espagnexport-primary);
  color: var(--espagnexport-warning);
}

/* ==========================================================================
   Componentes específicos
   ========================================================================== */
/* Field Group Tags */
.field-group.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.field-group.tags .field-item {
  margin: 0;
}

.field-group.tags .tag {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/* Photos Gallery */
.photos-gallery {
  margin-bottom: 1.5rem;
}

.gallery-grid {
  display: grid;
  gap: 0.5rem;
  aspect-ratio: 16/9;
  max-height: 500px;
  width: 100%;
}

/* Grid para 3 fotos */
.gallery-grid:has(.gallery-item:nth-child(3)) {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
}

/* Grid para 2 fotos */
.gallery-grid:has(.gallery-item:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

/* Grid para 1 foto */
.gallery-grid:has(.gallery-item:only-child) {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  max-height: 400px;
}

.gallery-item {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Para 3 fotos */
.gallery-grid:has(.gallery-item:nth-child(3)) .main-photo {
  grid-row: 1 / -1;
  grid-column: 1;
}

.gallery-grid:has(.gallery-item:nth-child(3)) .secondary-photo {
  grid-column: 2;
}

.photo-container {
  position: relative;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.photo-container a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}

.photo-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.photo-container a:hover img {
  transform: scale(1.05);
}

/* Asegurar que las imágenes de Colorbox mantengan su proporción */
.photo-container .colorbox {
  height: 100%;
  display: block;
}

.photo-container .image {
  height: 100%;
  width: 100%;
  display: block;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media screen and (min-width: 769px) {
  header + .container {
    padding: 70px 0 30px;
  }

  .annonce-card {
    display: flex;
    height: var(--card-height);
  }

  .annonce-card:hover {
    box-shadow: var(--card-shadow);
  }

  .annonce-image {
    width: var(--card-height);
    flex-shrink: 0;
  }

  .annonce-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .annonce-content {
    padding: var(--spacing-standard);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

@media screen and (max-width: 1023px) {
  .fixed-grid .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  /*
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
    width: auto;
  }
  */

  .column.is-half {
    width: 100%;
  }

  .card {
    margin-bottom: 1rem;
  }

  .annonce-card {
    flex-direction: column;
    margin: var(--spacing-standard);
  }

  .annonce-image {
    height: 368px;
    width: 100%;
  }

  .annonce-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .annonce-content {
    padding: var(--spacing-standard);
  }

  .tags {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    width: 100%;
  }

  .fixed-grid .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-columns {
    display: block;
  }

  .has-equal-height {
    height: auto;
    margin-bottom: 1rem;
  }

  .field-group.tags {
    flex-direction: column;
  }

  .field-group.tags .field-item {
    width: 100%;
  }

  .field-group.tags .tag {
    width: fit-content;
  }

  /* Ajustes específicos para la galería en móviles */
  .gallery-grid {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .gallery-item {
    width: 100%;
    aspect-ratio: 16/9;
  }

  .main-photo {
    aspect-ratio: 16/9;
  }

  .secondary-photo {
    aspect-ratio: 16/9;
  }

  .photo-container {
    height: 100%;
  }
}

@media screen and (max-width: 480px) {
  .fixed-grid .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Estilos para la card de información genérica */
.info-generiques-card .card {
  height: 100%;
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
  transition: box-shadow 0.3s ease;
}

.info-generiques-card .card:hover {
  box-shadow: 0 4px 6px rgba(10, 10, 10, 0.15);
}

.info-generiques-card .card-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #dbdbdb;
}

.info-generiques-card .card-header-title {
  color: #363636;
  font-weight: 600;
}

.info-generiques-card .card-content {
  padding: 1.5rem;
}

/* Estilos para los tags */
.info-generiques-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.info-generiques-card .tag {
  font-size: 0.875rem;
  height: auto;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin: 0;
}

.info-generiques-card .tag.is-info {
  background-color: var(--espagnexport-warning);
  color: #fff;
}

.info-generiques-card .tag.is-success {
  background-color: var(--espagnexport-primary);
  color: #fff;
}

/* Estilos para los campos */
.info-generiques-card .field.is-grouped {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.info-generiques-card .field-label {
  flex: 0 0 120px;
  font-weight: 600;
  margin-right: 0.5rem;
  color: #4a4a4a;
}

.info-generiques-card .field-body {
  flex: 1;
  color: #363636;
}

.info-generiques-card .info-details {
  border-top: 1px solid #dbdbdb;
  padding-top: 1rem;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .info-generiques-card .field.is-grouped {
    flex-direction: column;
  }

  .info-generiques-card .field-label {
    margin-bottom: 0.25rem;
  }

  .info-generiques-card .tags {
    flex-direction: column;
  }

  .info-generiques-card .tag {
    width: fit-content;
  }
}


/* ==========================================================================
   Estilos para incoterm calculator
   ========================================================================== */

   .incoterm-image-placeholder {
  width: 100%;
  min-height: 200px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Puedo añadir clases específicas para cada INCOTERM
.incoterm-image-placeholder[data-incoterm="EXW"] {
  /* Estilos específicos para la imagen de EXW
}*/

.frontpage-view {
  padding-top: var(--espagnexport-navbar-height);
}

/* Estilos para título en dispositivos móviles usando Bulma */
@media screen and (max-width: 768px) {
    h1.title {
        font-size: 2em !important;
    }
    h2.title {
      font-size: 1.5em !important;
    }
}

/* Personalización de enlace de PDF descargable */
.field--name-field-esp-download-file,
.field--name-field-servicios-descargable {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-shadow: 2px 2px #fdbd00;
  margin-top: 20px;
}

/*Color boton call to action */
.button.is-primary > a {
  color: white;
}