/*
  KB — UX Widget: Honored Presence
  File: assets/ux/ux-widget-honored-presence.css

  IMPORTANT:
  - CSS ONLY (no PHP).
  - ux-tokens.css and ux-layout.css are loaded globally by the plugin.
*/

/* =========================
   HERO surface (wide banner)
   ========================= */
.kbmb-widget--honored-presence{
  border-radius: var(--kb-radius-xl);
  padding: clamp(22px, 2.6vw, 42px);
  background: transparent;
  box-shadow: var(--kb-shadow-lg);
  overflow: hidden;

  /* HERO feel */
  min-height: clamp(360px, 44vh, 520px);
}

/* Make inner layout breathe */
.kbmb-widget--honored-presence .kbmb-hp{
  display: grid;
  gap: clamp(16px, 2.0vw, 26px);
}

/* =========================
   TOP ROW — “cinéma” 2 cols
   ========================= */
.kbmb-widget--honored-presence .kbmb-hp__top{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto; /* headline has room */
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
}

/* Right = avatar / Left = phrase */
.kbmb-widget--honored-presence .kbmb-hp__right{ order: 1; }
.kbmb-widget--honored-presence .kbmb-hp__left{ order: 2; }

/* =========================
   AVATAR (bigger, cinematic)
   ========================= */
.kbmb-widget--honored-presence .kbmb-hp__avatar{
  width: clamp(220px, 20vw, 360px);
  height: clamp(220px, 20vw, 360px);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--kb-shadow-md);
  border: 2px solid rgba(212, 175, 55, 0.35);
}

.kbmb-widget--honored-presence .kbmb-hp__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kbmb-widget--honored-presence .kbmb-hp__avatar-placeholder{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.06);
}

/* Photo action button stays clean */
.kbmb-widget--honored-presence .kbmb-hp__photo-actions{
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.kbmb-widget--honored-presence .kbmb-hp__file-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--kb-radius-md);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}
.kbmb-widget--honored-presence .kbmb-hp__file{ display:none; }

/* =========================
   TRIBUTE — headline, noble
   ========================= */
.kbmb-widget--honored-presence .kbmb-hp__tribute-input,
.kbmb-widget--honored-presence .kbmb-hp__tribute-text{
  width: 100%;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: 0.2px;

  background: transparent;
  border: 0;
  box-shadow: none;

  color: rgba(212, 175, 55, 0.95);
  font-family: ui-serif, "Georgia", "Times New Roman", serif;
  font-weight: 550;

  padding: 6px 0;
}

/* Input specifics */
.kbmb-widget--honored-presence .kbmb-hp__tribute-input{
  outline: none;
}
.kbmb-widget--honored-presence .kbmb-hp__tribute-input::placeholder{
  color: rgba(212, 175, 55, 0.60);
}
.kbmb-widget--honored-presence .kbmb-hp__tribute-input:focus{
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.kbmb-widget--honored-presence .kbmb-hp__tribute-input,
.kbmb-widget--honored-presence .kbmb-hp__tribute-text{
  text-shadow:
    0 1px 0 rgba(0,0,0,0.35),
    0 10px 30px rgba(212,175,55,0.12);
}

/* =========================
   META — compact + aligned
   ========================= */
.kbmb-widget--honored-presence .kbmb-hp__meta{
  display: grid;
  gap: 14px;
}

/* Keep displayed name/date quiet (the hero is the phrase) */
.kbmb-widget--honored-presence .kbmb-hp__name{
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.kbmb-widget--honored-presence .kbmb-hp__dates{
  margin-top: 6px;
  color: rgba(255,255,255,0.70);
  font-size: 14px;
}

/* Form fields — neutral, no bands */
.kbmb-widget--honored-presence .kbmb-hp__fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 18px;
  max-width: 980px;
}

.kbmb-widget--honored-presence .kbmb-hp__dates-edit{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 18px;
  align-items: start;
}

.kbmb-widget--honored-presence .kbmb-hp__input{
  width: 100%;
  padding: 10px 0;

  background: transparent;
  border: 0;
  box-shadow: none;

  color: rgba(255,255,255,0.92);
  outline: none;
}

.kbmb-widget--honored-presence .kbmb-hp__input:focus{
  border-bottom: 1px solid rgba(255,255,255,0.28);
}

/* Date labels (CSS-only) */
.kbmb-widget--honored-presence .kbmb-hp__dates-edit .kbmb-hp__birth,
.kbmb-widget--honored-presence .kbmb-hp__dates-edit .kbmb-hp__death{
  position: relative;
  padding-top: 18px;
}

.kbmb-widget--honored-presence .kbmb-hp__dates-edit .kbmb-hp__birth::before{
  content: "Date de naissance";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  letter-spacing: 0.2px;
}

.kbmb-widget--honored-presence .kbmb-hp__dates-edit .kbmb-hp__death::before{
  content: "Date de décès (optionnel)";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  letter-spacing: 0.2px;
}

/* Save button (kept discreet) */
.kbmb-widget--honored-presence .kbmb-hp__save{
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-radius: var(--kb-radius-md);
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: rgba(255,255,255,0.95);
  cursor: pointer;
}

/* =========================
   Bottom actions — gold pills
   ========================= */
.kbmb-widget--honored-presence .kbmb-hp__actions{
  display:flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}

.kbmb-widget--honored-presence .kbmb-hp__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;

  background: #d4af37;
  border: 1px solid rgba(212,175,55,0.55);
  color: #2c3e50;

  text-decoration:none;
  font-weight: 600;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .kbmb-widget--honored-presence .kbmb-hp__top{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .kbmb-widget--honored-presence .kbmb-hp__left,
  .kbmb-widget--honored-presence .kbmb-hp__right{
    order: initial;
  }
  .kbmb-widget--honored-presence .kbmb-hp__photo-actions{
    justify-content: center;
  }
  .kbmb-widget--honored-presence .kbmb-hp__fields{
    grid-template-columns: 1fr;
  }
  .kbmb-widget--honored-presence .kbmb-hp__dates-edit{
    grid-template-columns: 1fr;
  }
}
/* =========================
   Layout cinématique (2 colonnes) — meta sous la phrase
   ========================= */

/* La grille principale pilote TOUT (phrase + avatar + meta + actions) */
.kbmb-widget--honored-presence .kbmb-hp{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto;
  grid-template-areas:
    "phrase avatar"
    "meta   avatar"
    "actions avatar";
  gap: clamp(14px, 2vw, 22px) clamp(18px, 3vw, 46px);
  align-items: start;
}

/* On “ouvre” le conteneur top pour que ses enfants deviennent des items de grille */
.kbmb-widget--honored-presence .kbmb-hp__top{
  display: contents;
}

/* Placement des zones */
.kbmb-widget--honored-presence .kbmb-hp__right{ grid-area: phrase; }
.kbmb-widget--honored-presence .kbmb-hp__left{  grid-area: avatar; justify-self: end; }
.kbmb-widget--honored-presence .kbmb-hp__meta{  grid-area: meta;  margin-top: -6px; }
.kbmb-widget--honored-presence .kbmb-hp__actions{ grid-area: actions; margin-top: 6px; }

/* Meta plus lisible sous la phrase */
.kbmb-widget--honored-presence .kbmb-hp__fields{
  margin-top: 6px;
  max-width: 980px;
}
/* ===== HERO full-bleed background (sans décaler le widget) ===== */

/* 1) Le widget reste dans le flux normal (centré par le layout existant) */
.kbmb-widget--honored-presence{
  position: relative;
  overflow: hidden; /* garde le rendu propre */
}

/* 2) On étend UNIQUEMENT le fond en pleine largeur via un calque */
.kbmb-widget--honored-presence::before{
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;

  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  /* Base HERO color */
  background: #2c3e50;

  /* Subtle premium depth (vignette + soft gold bloom) */
  background-image:
    radial-gradient(900px 420px at 20% 25%, rgba(212,175,55,0.10), transparent 60%),
    radial-gradient(900px 520px at 80% 70%, rgba(255,255,255,0.05), transparent 65%),
    radial-gradient(1200px 700px at 50% 50%, transparent 55%, rgba(0,0,0,0.35) 100%);
}

.kbmb-widget--honored-presence::after{
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;

  inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  transform: translateX(-30%) translateY(-10%);
  opacity: .25;
  animation: kbmb_hp_sweep 10s ease-in-out infinite;
}

@keyframes kbmb_hp_sweep{
  0%   { transform: translateX(-35%) translateY(-12%); opacity:.14; }
  50%  { transform: translateX(10%)  translateY(6%);  opacity:.25; }
  100% { transform: translateX(-35%) translateY(-12%); opacity:.14; }
}

/* 3) Le contenu reste au-dessus du calque */
.kbmb-widget--honored-presence > *{
  position: relative;
  z-index: 1;
}