/**
 * CSS pour le champ ACF FeatBlock
 * Styles spécifiques au champ FeatBlock, en complément des styles Gutenberg partagés
 */

/* ==========================================================================
   Conteneur spécifique FeatBlock
   ========================================================================== */
.feat-block-field-wrapper {
  /* Hérite des styles de .pib-acf-field-wrapper */
}

/* ==========================================================================
   Sections du champ
   ========================================================================== */
.feat-block-posts-section,
.feat-block-terms-section {
  margin-bottom: var(--pib-acf-spacing-lg, 16px);
}

.feat-block-posts-section:last-child,
.feat-block-terms-section:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Wrapper de sélection de posts
   ========================================================================== */
.feat-block-posts-select-wrapper {
  position: relative;
  margin-bottom: var(--pib-acf-spacing-md, 12px);
}

/* ==========================================================================
   Input de recherche - Utilise les classes partagées
   ========================================================================== */
.feat-block-posts-search {
  /* Les styles sont gérés par .pib-acf-search-input dans le fichier partagé */
}

/* ==========================================================================
   Dropdown des posts - Utilise les classes partagées
   ========================================================================== */
.feat-block-posts-dropdown {
  /* Les styles sont gérés par .pib-acf-dropdown dans le fichier partagé */
}

.feat-block-post-option {
  /* Les styles sont gérés par .pib-acf-dropdown-option dans le fichier partagé */
}

.feat-block-post-title {
  flex: 1;
  font-weight: 400;
  margin-right: var(--pib-acf-spacing-sm, 8px);
}

/* ==========================================================================
   Section des termes de taxonomie
   ========================================================================== */
.feat-block-taxonomy-block {
  margin-bottom: var(--pib-acf-spacing-md, 12px);
}

.feat-block-taxonomy-block h5 {
  margin: 0 0 var(--pib-acf-spacing-sm, 8px);
  font-size: 12px;
  font-weight: 500;
  color: var(--pib-acf-text, #1e1e1e);
}

/* ==========================================================================
   Checkboxes de termes - Utilise les classes partagées
   ========================================================================== */
.feat-block-term-checkbox {
  /* Les styles sont gérés par .pib-acf-checkbox-wrapper dans le fichier partagé */
}

.feat-block-term-checkbox.disabled {
  /* Les styles sont gérés par .pib-acf-checkbox-wrapper.is-disabled dans le fichier partagé */
}

/* ==========================================================================
   Éléments sélectionnés
   ========================================================================== */
.feat-block-selected-items {
  /* Les styles sont gérés par .pib-acf-selected-items dans le fichier partagé */
}

.feat-block-empty-message {
  /* Les styles sont gérés par .pib-acf-empty-message dans le fichier partagé */
}

.feat-block-item {
  /* Les styles de base sont gérés par .pib-acf-item dans le fichier partagé */
  position: relative;
}

/* Style spécifique pour les posts avec bordure gauche colorée */
.feat-block-post-item {
  border-left: 3px solid var(--pib-acf-primary, #3858e9);
}

.feat-block-item-title {
  /* Les styles sont gérés par .pib-acf-item-title dans le fichier partagé */
}

.feat-block-remove-item {
  /* Les styles sont gérés par .pib-acf-remove-btn dans le fichier partagé */
}

/* ==========================================================================
   Section Backfill Override (Cabin uniquement)
   ========================================================================== */
.feat-block-backfill-override {
  /* Les styles de base et le pattern diagonal sont gérés par .pib-acf-override-section dans le fichier partagé */
}

.feat-block-backfill-override label {
  display: flex;
  align-items: center;
  gap: var(--pib-acf-spacing-sm, 8px);
  cursor: pointer;
  font-size: 13px;
}

/* ==========================================================================
   Messages temporaires - Utilise les classes partagées
   ========================================================================== */
.feat-block-temp-message {
  /* Les styles sont gérés par .pib-acf-notice.is-error dans le fichier partagé */
}

/* ==========================================================================
   Intégration ACF - Spécifique à FeatBlock
   ========================================================================== */
.acf-field-feat-block > .acf-label {
  font-weight: 500;
  margin-bottom: var(--pib-acf-spacing-sm, 8px);
}

/* Dans Flexible Content */
.acf-flexible-content .feat-block-field-wrapper {
  margin: 0;
}

/* Dans Repeater */
.acf-repeater .feat-block-field-wrapper {
  background: transparent;
  border: none;
  padding: var(--pib-acf-spacing-sm, 8px) 0;
}

/* ==========================================================================
   États de drag & drop
   ========================================================================== */
.feat-block-item.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
  transform: scale(0.98);
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.feat-block-item.is-drag-over {
  border-color: var(--pib-acf-primary, #3858e9);
  background: var(--pib-acf-primary-light, rgba(56, 88, 233, 0.12));
  border-left-width: 4px;
  box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.15);
  transition: all 0.2s ease;
}

/* Indicateur de position de drop */
.feat-block-item.is-drag-over::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pib-acf-primary, #3858e9);
  border-radius: 2px;
  top: -2px;
  opacity: 0.8;
}

/* Amélioration de la visibilité du drag handle */
.feat-block-post-item .pib-acf-drag-handle {
  opacity: 0.3;
}

.feat-block-post-item:hover .pib-acf-drag-handle {
  opacity: 1;
  color: var(--pib-acf-primary, #3858e9);
}

.feat-block-post-item .pib-acf-drag-handle:hover {
  opacity: 1;
  color: var(--pib-acf-primary, #3858e9);
}

.feat-block-post-item .pib-acf-drag-handle:active {
  cursor: grabbing;
}

/* Agrandir visuellement l'icône SVG sans changer la zone cliquable */
.feat-block-post-item .pib-acf-drag-handle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.15s ease;
}

.feat-block-post-item .pib-acf-drag-handle:hover svg {
  transform: scale(1.15);
}

.feat-block-post-item .pib-acf-drag-handle:active svg {
  transform: scale(0.9);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 782px) {
  .feat-block-posts-dropdown {
    max-height: 200px;
  }
}