/* ──────────────────────────────────────────────────────────
   FictionX – Inner Page Header / Title band (`.fx-page-header`)
   A refined, professional hero band for module content pages
   (pages, topics, …). Presents breadcrumb + title + meta.
   RTL-first using logical properties. No shadows on buttons.
   ────────────────────────────────────────────────────────── */

.fx-page-header{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    margin-bottom:24px;
    padding:16px 0 15px;
    background:
        radial-gradient(1150px 420px at 100% -25%, rgba(165,19,19,.10), transparent 55%),
        radial-gradient(820px 360px at -6% 130%, rgba(15,23,42,.06), transparent 55%),
        linear-gradient(158deg, #ffffff 0%, #f7f8fa 58%, #eef0f4 100%);
    border-bottom:1px solid rgba(15,23,42,.07);
}

/* Fine dotted texture, masked so it fades away from the active corner */
.fx-page-header::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:radial-gradient(rgba(15,23,42,.06) 1px, transparent 1.4px);
    background-size:22px 22px;
    -webkit-mask-image:linear-gradient(to bottom left, #000, transparent 72%);
            mask-image:linear-gradient(to bottom left, #000, transparent 72%);
    opacity:.55;
}

/* Soft geometric watermark in the trailing-top corner */
.fx-page-header::before{
    content:"";
    position:absolute;
    inset:-150px -110px auto auto;
    width:300px;height:300px;border-radius:50%;
    background:
        radial-gradient(closest-side, rgba(165,19,19,.07), transparent 70%),
        repeating-conic-gradient(from 0deg, rgba(165,19,19,.05) 0deg 5deg, transparent 5deg 16deg);
    pointer-events:none;
    z-index:0;
}

.fx-page-header > .container{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:24px;
    row-gap:10px;
    animation:fxPageHeaderIn .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fxPageHeaderIn{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:translateY(0);}
}

/* ===== Breadcrumb ===== */
.fx-page-header__crumbs{
    flex:1 1 100%;
    display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;
    margin:0;
    font-size:12px;font-weight:600;color:#7a8590;
}
.fx-page-header__crumbs a{
    color:#7a8590;text-decoration:none;transition:color .2s ease;
}
.fx-page-header__crumbs a:hover{color:#a51313;}
.fx-page-header__crumbs .sep{
    width:5px;height:5px;
    border-top:2px solid #c2c8d0;border-inline-start:2px solid #c2c8d0;
    transform:rotate(-135deg);          /* RTL: chevron pointing to start */
    display:inline-block;
}
[dir="ltr"] .fx-page-header__crumbs .sep{transform:rotate(45deg);}
.fx-page-header__crumbs .current{color:#a51313;}

/* ===== Title row ===== */
.fx-page-header__title{
    flex:1 1 320px;
    display:flex;align-items:center;gap:14px;
    margin:0;
}
/* Decorative leading accent bar */
.fx-page-header__title::before{
    content:"";
    flex-shrink:0;
    width:5px;
    align-self:stretch;
    min-height:26px;
    border-radius:4px;
    background:linear-gradient(180deg, #c11717 0%, #a51313 50%, #7d0f0f 100%);
}
.fx-page-header__title h1,
.fx-page-header__title h2{
    margin:0 !important;
    font-size:23px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:-.2px;
    color:#15202b;
    padding:0;
}

/* ===== Meta chips ===== */
.fx-page-header__meta{
    flex:0 0 auto;
    list-style:none;
    display:flex;align-items:center;flex-wrap:wrap;gap:9px;
    margin:0;padding:0;
}
.fx-page-header__meta li{
    display:inline-flex;align-items:center;gap:7px;
    padding:6px 13px;
    background:linear-gradient(180deg,#ffffff,#fbfbfc);
    border:1px solid rgba(15,23,42,.09);
    border-radius:4px;
    font-size:12.5px;font-weight:600;color:#52596a;
    line-height:1;
    transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.fx-page-header__meta li:hover{
    border-color:rgba(165,19,19,.35);
    color:#15202b;
    transform:translateY(-2px);
}
.fx-page-header__meta li i{
    color:#a51313;font-size:13px;
}
/* {CatName} renders its own <a>; make it blend into the chip */
.fx-page-header__meta li a{
    color:inherit;text-decoration:none;transition:color .2s ease;
}
.fx-page-header__meta li:hover a{color:#a51313;}

/* ===== Responsive ===== */
@media (max-width:767px){
    .fx-page-header{padding:14px 0 13px;margin-bottom:18px;}
    .fx-page-header > .container{row-gap:9px;column-gap:14px;}
    .fx-page-header__title{flex-basis:100%;gap:11px;}
    .fx-page-header__title h1,
    .fx-page-header__title h2{font-size:19px;}
    .fx-page-header__title::before{min-height:22px;width:4px;}
}
@media (max-width:480px){
    .fx-page-header__title h1,
    .fx-page-header__title h2{font-size:19px;}
    .fx-page-header__meta li{padding:6px 12px;font-size:11.5px;}
    .fx-page-header__crumbs{font-size:11.5px;padding:5px 11px;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-page-header > .container{animation:none;}
    .fx-page-header__crumbs a,
    .fx-page-header__meta li{transition:none;}
    .fx-page-header__meta li:hover{transform:none;}
}