/*
Theme Name: Artisan d'Art — enfant de My Listing
Theme URI: https://artisandart.fr/
Description: Thème enfant de My Listing 2.16. Refonte de la fiche artisan (desktop + mobile) aux couleurs d'artisandart.fr. Aucune fonctionnalité du thème parent n'est retirée : tout passe par la surcharge de styles et un seul gabarit.
Author: artisandart.fr
Template: my-listing
Version: 1.0.0
Text Domain: artisandart-child
*/

/* ==========================================================================
   SOMMAIRE
   1. Jetons de marque
   2. Bandeau de couverture  (corrige le bug <picture> du thème)
   3. Logo en badge          (corrige le recadrage circulaire)
   4. En-tête de fiche — desktop
   5. En-tête de fiche — mobile (bascule à 1200px, imposée par le JS du thème)
   6. Boutons d'action
   7. Onglets
   8. Blocs de contenu en cartes
   9. Bloc « détails » en grille d'attributs
  10. Galerie
  11. Vignettes de l'annuaire
   ========================================================================== */


/* 1. JETONS DE MARQUE
   Relevés sur le site en production : vert de marque, Poppins, cartes
   blanches sur fond gris clair.
   ========================================================================== */

:root {
  --aa-vert: #005C54;
  --aa-vert-fonce: #00403A;
  --aa-vert-pale: #EAF1F0;
  --aa-encre: #242429;
  --aa-texte: #3F444B;
  --aa-gris: #5A5F66;
  --aa-gris-clair: #6E737A;
  --aa-fond: #FAF6F0;
  --aa-bordure: #E4E4E4;
  --aa-or: #7A5C1E;
  --aa-or-pale: #FBF7EE;
  --aa-rayon: 5px;
}


/* 1bis. FOND GENERAL
   ========================================================================== */

body,
.single-job-listing,
.profile-body,
.listing-tab {
  background: var(--aa-fond) !important;
}


/* 2. BANDEAU DE COUVERTURE
   Le thème pose `aspect-ratio` et `object-fit` sur <picture>, qui n'est pas
   un élément remplacé : les deux propriétés n'ont aucun effet et l'image est
   rendue à sa taille naturelle dans un conteneur plus petit. On les reporte
   sur le <img> intérieur, seul élément que ces propriétés concernent.
   Les !important sont nécessaires : le thème écrit ces valeurs en style inline.
   ========================================================================== */

.profile-cover {
  /* On garde la geometrie du theme (padding-bottom en %) : forcer `height`
     casse le positionnement absolu du bloc titre, qui est ancre sur la
     section de couverture. 24% au lieu de 35%, plafonne sur grand ecran. */
  padding-bottom: 24% !important;
  max-height: 420px !important;
  position: relative;
}

/* Voile sombre en bas du bandeau : sans lui, le titre blanc devient illisible
   sur une photo claire. */
.profile-cover:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(20, 20, 22, .72), rgba(20, 20, 22, 0));
  pointer-events: none;
  z-index: 1;
}

/* Le bloc titre repasse au-dessus du voile.
   ATTENTION : ne jamais poser `position` ici. .listing-main-info est en
   position:absolute avec top:-30px ; le repasser en relative le fait
   remonter au-dessus du bandeau. On ne touche qu'au z-index. */
.main-info-desktop .listing-main-info {
  z-index: 2;
}

.profile-cover picture {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  aspect-ratio: auto !important;
}

.profile-cover picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}


/* 3. LOGO EN BADGE
   Le thème affiche le logo en rond, en background-size: cover. Un logo au
   format paysage (le cas courant chez les artisans) y perd les deux tiers de
   sa largeur. On passe en `contain` sur fond blanc, dans un cadre rectangulaire.
   background-origin: content-box fait respirer le logo dans son cadre.
   ========================================================================== */

.profile-avatar,
.lf-avatar {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #FFFFFF !important;
  background-origin: content-box !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}


/* 4. EN-TÊTE DE FICHE — DESKTOP (au-dessus de 1200px)
   ========================================================================== */

@media (min-width: 1201px) {

  .profile-avatar {
    width: 156px !important;
    height: 92px !important;
    border-radius: var(--aa-rayon) !important;
    left: 0 !important;
    padding: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  }

  .profile-header .profile-name,
  .profile-name {
    padding-left: 180px !important;
    margin-left: 0 !important;
  }
}

.profile-name h1,
.profile-name h1.case27-primary-text {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  color: var(--aa-encre);
  letter-spacing: -0.01em;
}

/* Titre en blanc UNIQUEMENT tant qu'il est posé sur la photo. Sous 1200px le
   script du thème sort le bloc du bandeau : sur fond crème il doit redevenir
   sombre, sinon il devient invisible. */
.main-info-desktop .profile-name h1,
.main-info-desktop .profile-name h1.case27-primary-text {
  color: #FFFFFF !important;
}

.main-info-desktop .profile-name .profile-tagline {
  color: rgba(255, 255, 255, .88) !important;
}

.main-info-desktop .profile-name .edit-listing i {
  color: #FFFFFF;
}

.main-info-mobile .profile-name h1,
.main-info-mobile .profile-name h1.case27-primary-text {
  color: var(--aa-encre) !important;
}

/* Sous-titre / note : gris lisible plutôt que le gris pâle d'origine */
.profile-name .profile-tagline,
.pa-below-title .profile-tagline {
  color: var(--aa-gris);
  font-weight: 400;
}


/* 5. EN-TÊTE DE FICHE — MOBILE
   IMPORTANT : la bascule se fait à 1200px et non 768px. Le script
   single-listing.js du thème déplace le bloc .listing-main-info dans
   .main-info-mobile sous 1200px — il sort alors de la section de couverture.
   Toute règle mobile écrite à 767px laisse donc la zone 768–1200px sans style.
   Le logo est empilé au-dessus du titre, conformément à la maquette validée.
   ========================================================================== */

@media (max-width: 1200px) {

  .profile-cover {
    padding-bottom: 0 !important;
    height: 200px !important;
    max-height: none !important;
  }

  .profile-cover:after { display: none; }

  .main-info-mobile .listing-main-info {
    padding: 0 16px;
  }

  .main-info-mobile .profile-name,
  .profile-header .profile-name {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 0 0 0 !important;
    margin-left: 0 !important;
    float: none !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* Sans ces trois propriétés, le thème tronque les noms d'atelier longs. */

  .main-info-mobile .profile-avatar,
  .profile-header .profile-avatar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 12px 0 !important;
    width: 120px !important;
    height: 68px !important;
    padding: 7px !important;
    border-radius: var(--aa-rayon) !important;
    flex: 0 0 auto !important;
  }

  .profile-name h1,
  .profile-name h1.case27-primary-text {
    font-size: 23px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    margin: 0 !important;
  }
}


/* 6. BOUTONS D'ACTION (appeler, site web, e-mail…)
   Rendus par templates/single-listing/quick-actions/*.php — on ne touche
   qu'à l'habillage, jamais au comportement.
   ========================================================================== */

.listing-main-buttons .lmb-calltoaction a,
.listing-main-buttons a.lmb-calltoaction {
  background: var(--aa-vert);
  color: #FFFFFF;
  border-radius: var(--aa-rayon);
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;           /* cible tactile confortable */
  transition: background .15s ease-in-out;
}

.listing-main-buttons .lmb-calltoaction a:hover,
.listing-main-buttons a.lmb-calltoaction:hover {
  background: var(--aa-vert-fonce);
  color: #FFFFFF;
}

/* Détails de couverture (effectif, année de création…) */
.listing-main-buttons li.price-or-date .lmb-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aa-gris-clair);
}

.listing-main-buttons li.price-or-date .value {
  font-size: 15px;
  font-weight: 500;
  color: var(--aa-encre);
}


/* 7. ONGLETS
   ========================================================================== */

.profile-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--aa-bordure);
}

.profile-menu .listing-tab-toggle {
  font-size: 14px;
  font-weight: 600;
  color: var(--aa-gris);
}

.profile-menu li.active .listing-tab-toggle {
  color: var(--aa-vert);
  box-shadow: inset 0 -3px 0 var(--aa-vert);
}

.profile-menu .items-counter {
  background: var(--aa-vert-pale);
  color: var(--aa-vert);
  font-weight: 600;
}


/* 8. BLOCS DE CONTENU EN CARTES
   Chaque bloc configuré dans le type de liste sort dans un .element.
   Un bloc sans valeur ne s'affiche pas : les gabarits du thème font un
   `return` quand le champ est vide — les fiches incomplètes ne laisseront
   donc pas de cadres vides.
   ========================================================================== */

.profile-body {
  background: var(--aa-fond);
}

.listing-tab .element {
  background: #FFFFFF;
  border: 1px solid var(--aa-bordure);
  border-radius: var(--aa-rayon);
  box-shadow: none;
  padding: 26px 30px;
  margin-bottom: 24px;
}

.listing-tab .element .pf-head h2,
.listing-tab .element .pf-head h3,
.listing-tab .element .block-heading {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--aa-encre);
  margin: 0 0 18px 0;
}

.listing-tab .element .pf-body,
.listing-tab .element .wp-editor-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--aa-texte);
}

/* Confort de lecture : on borne la longueur de ligne du texte courant. */
.block-type-text .wp-editor-content > p {
  max-width: 78ch;
}


/* 9. BLOC « DÉTAILS » EN GRILLE D'ATTRIBUTS
   Le thème sort une liste verticale ; on la met en grille comme la maquette.
   La structure HTML reste celle du thème (ul.outlined-list > li).
   ========================================================================== */

.block-type-details .outlined-list.details-block-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 28px;
}

.block-type-details .outlined-list.details-block-content > li {
  border: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--aa-encre);
}

.block-type-details .outlined-list.details-block-content > li i {
  color: var(--aa-vert);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 991px) {
  .block-type-details .outlined-list.details-block-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
  }
}

@media (max-width: 480px) {
  .block-type-details .outlined-list.details-block-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 10. GALERIE
   Le theme sort une grille de 3 colonnes de 356px alimentee par la taille
   `medium` (300x200) : les images sont donc etirees et floues. Le filtre PHP
   de functions.php sert desormais la taille `large` ; la grille passe a 4
   colonnes pour des vignettes plus proches de la taille reelle.
   ========================================================================== */

.gallery-grid.photoswipe-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.gallery-grid .gallery-item {
  height: 190px !important;
  border-radius: var(--aa-rayon);
  overflow: hidden;
  display: block;
}

.gallery-grid .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

@media (max-width: 1200px) {
  .gallery-grid.photoswipe-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .gallery-grid .gallery-item { height: 130px !important; }
}


/* 11. VIGNETTES DE L'ANNUAIRE
   Même correction de logo que sur la fiche, pour que la liste et la fiche
   soient cohérentes.
   ========================================================================== */

.lf-item-container {
  border-radius: var(--aa-rayon);
  border: 1px solid var(--aa-bordure);
}

.lf-avatar {
  border-radius: var(--aa-rayon) !important;
  padding: 5px !important;
}

.lf-item-container .lf-head h4,
.lf-item-container .listing-preview-title {
  font-weight: 700;
  color: var(--aa-encre);
}