/* =============================================================================
   Astrolabe — Widget : Bandeau / En-tête de page (jxc-page-heading)
   Modes : standard | serie | auteur
   ============================================================================= */

/* ── BANNER (standard + serie) ───────────────────────────────────────────────── */

.jxc-ph-banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
background-color: #1a1a2e;
min-height: 380px;
overflow: hidden;
}

.jxc-ph-banner__overlay {
position: absolute;
inset: 0;
background-color: rgba(33, 33, 33, 0.6);
pointer-events: none;
}

.jxc-ph-banner__inner {
position: relative;
z-index: 1;
max-width: var(--jxc-content-width, 1200px);
width: 100%;
margin: 0 auto;
padding: 60px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

/* ── Titre commun ────────────────────────────────────────────────────────────── */

.jxc-ph-title {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 56px;
font-weight: 900;
text-transform: uppercase;
color: #ffffff;
line-height: 1.05;
margin: 0;
word-break: break-word;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.50);
}

/* ── Tagline ─────────────────────────────────────────────────────────────────── */

.jxc-ph-tagline {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 22px;
font-weight: 600;
color: #ffffff;
line-height: 1.4;
margin: 0;
max-width: 760px;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ── Sous-titre série (collection · genre) ───────────────────────────────────── */

.jxc-ph-subheading {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ffffff !important;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
margin: 0;
}

.jxc-ph-subheading a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
transition: border-color 0.15s ease, color 0.15s ease;
}

.jxc-ph-subheading a:hover {
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.80);
}

/* ── MODE AUTEUR ─────────────────────────────────────────────────────────────── */

.jxc-ph-auteur {
background-color: #1a1a2e;
padding: 60px 24px 48px;
min-height: calc(280px + var(--jxc-photo-half, 130px));
width: 100%;
overflow: visible;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Overlay pour le mode image de fond */
.jxc-ph-auteur__overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}

.jxc-ph-auteur__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: var(--jxc-content-width, 1200px);
width: 100%;
text-align: center;
position: relative;
z-index: 1;
padding-bottom: 24px;
}

/* ── Photo pastille — chevauche le bas du bandeau ────────────────────────────── */

.jxc-ph-auteur__photo-wrap {
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 6px solid #ffffff;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
z-index: 2;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.jxc-ph-auteur__photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* ── Texte auteur ────────────────────────────────────────────────────────────── */

.jxc-ph-auteur__name {
font-size: 52px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.50);
}

.jxc-ph-auteur__role {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 18px;
font-weight: 500;
color: #ffffff;
margin: 0;
letter-spacing: 0.04em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
.jxc-ph-banner__inner { padding: 80px 40px; }
}

@media (max-width: 767px) {
.jxc-ph-title { font-size: 34px; }
.jxc-ph-auteur__name { font-size: 32px; }
.jxc-ph-tagline { font-size: 15px; }
.jxc-ph-banner { min-height: 260px; }
.jxc-ph-auteur { padding: 40px 24px 36px; }
}

/* ── Breadcrumb dans le bandeau ──────────────────────────────────────────────── */

.jxc-ph-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
width: fit-content;
margin-bottom: 8px;
}

/* Yoast wraps items in <span id="breadcrumb"> — propagate flex */
.jxc-ph-breadcrumb > span,
.jxc-ph-breadcrumb > div {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}

/* Couvre : liens natifs (classe explicite) + liens Yoast (plain <a>) */
.jxc-ph-banner .jxc-ph-breadcrumb,
.jxc-ph-auteur .jxc-ph-breadcrumb,
.jxc-ph-banner .jxc-ph-bc__link,
.jxc-ph-banner .jxc-ph-breadcrumb a,
.jxc-ph-auteur .jxc-ph-bc__link,
.jxc-ph-auteur .jxc-ph-breadcrumb a {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
transition: color 0.15s ease;
}

.jxc-ph-banner .jxc-ph-bc__link:hover,
.jxc-ph-banner .jxc-ph-breadcrumb a:hover,
.jxc-ph-auteur .jxc-ph-bc__link:hover,
.jxc-ph-auteur .jxc-ph-breadcrumb a:hover {
color: #ffffff;
text-decoration: none;
}

.jxc-ph-bc__sep {
color: rgba(255, 255, 255, 0.70);
font-size: 11px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.jxc-ph-bc__current {
font-family: var(--jxc-font, 'Jost', sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}