/* ──────────────────────────────────────────────────────────
   FictionX – moi-1  Album category page (fx-album)
   Hero + album cards grid + image gallery with hover overlay.
   RTL-first (logical properties). No box-shadow on buttons per
   template UI rule. No AOS dependency (content always visible).
   ────────────────────────────────────────────────────────── */

.fx-album{
    background:
        radial-gradient(900px 480px at 100% 0%, rgba(165,19,19,.05), transparent 60%),
        #f4f5f7;
    padding-top:6px;
    padding-bottom:60px;
}

/* ===== Hero ===== */
.fx-album__hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:40px 0 36px;
    margin-bottom:38px;
    color:#fff;
    background:
        radial-gradient(700px 300px at 85% -10%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(135deg, #7d0f0f 0%, #a51313 55%, #c2302f 100%);
}
.fx-album__hero::after{
    content:"";
    position:absolute;
    inset-block-end:-70px;inset-inline-end:-50px;
    width:240px;height:240px;border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
    z-index:-1;
}
.fx-album__crumb{
    font-size:12.5px;
    margin-bottom:12px;
    color:rgba(255,255,255,.85);
}
.fx-album__crumb a{color:rgba(255,255,255,.92) !important;text-decoration:none;}
.fx-album__crumb a:hover{color:#fff !important;}
.fx-album__crumb .main-color,
.fx-album__crumb i{color:rgba(255,255,255,.6) !important;margin:0 6px;}
.fx-album__title{
    margin:0;
    font-size:28px;font-weight:800;letter-spacing:.3px;color:#fff;
}
.fx-album__meta{
    list-style:none;margin:14px 0 0;padding:0;
    display:flex;gap:10px;flex-wrap:wrap;
}
.fx-album__meta li{
    display:inline-flex;align-items:center;gap:7px;
    padding:5px 13px;border-radius:4px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    font-size:12.5px;font-weight:600;color:#fff;
}

/* ===== Section label ===== */
.fx-album__section-head{
    display:flex;align-items:center;justify-content:center;gap:16px;
    margin:8px auto 24px;
    max-width:520px;
}
.fx-album__section-head + .fx-album__section-head,
.fx-album-cats + .fx-album__section-head{margin-top:46px;}
.fx-album__section-line{
    flex:1;height:1px;
    background:linear-gradient(90deg, transparent, rgba(15,23,42,.16), transparent);
}
.fx-album__section-label{
    font-size:14.5px;font-weight:700;color:#3a4451;letter-spacing:.4px;
}

/* ===== Album (sub-category) cards ===== */
.fx-album-cats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    margin-bottom:10px;
}
.fx-album-cat{
    position:relative;
    display:flex;flex-direction:column;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:4px;
    overflow:hidden;
    text-decoration:none !important;
    color:inherit !important;
    isolation:isolate;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),
               border-color .35s ease;
}
.fx-album-cat:hover{
    transform:translateY(-6px);
    border-color:rgba(165,19,19,.40);
}
.fx-album-cat::before{
    content:"";
    position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg, transparent, #a51313 30%, #a51313 70%, transparent);
    opacity:0;transition:opacity .35s ease;z-index:4;
}
.fx-album-cat:hover::before{opacity:1;}
.fx-album-cat__media{
    position:relative;
    aspect-ratio:16/10;
    background-color:#e9eaee;
    background-size:cover;
    background-position:center top;
    transform-origin:center top;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
@supports not (aspect-ratio:1){.fx-album-cat__media{height:170px;}}
.fx-album-cat:hover .fx-album-cat__media{transform:scale(1.05);}
.fx-album-cat__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(15,23,42,.30));
}
.fx-album-cat__count{
    position:absolute;z-index:2;
    top:12px;inset-inline-end:12px;
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 11px;border-radius:4px;
    background:rgba(165,19,19,.94);
    color:#fff;font-size:12px;font-weight:700;
}
.fx-album-cat__body{
    flex:1;display:flex;flex-direction:column;gap:6px;
    padding:16px 18px;
}
.fx-album-cat__title{
    font-size:16px;font-weight:700;color:#15202b;line-height:1.4;
    transition:color .25s ease;
}
.fx-album-cat:hover .fx-album-cat__title{color:#a51313;}
.fx-album-cat__desc{
    font-size:13px;line-height:1.7;color:#7a8590;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ===== Image gallery (masonry: equal column width, natural heights) =====
   Grid + per-item row-span (computed in album-masonry.js) so tiles flow
   in reading order and fill the vertical gaps above them. */
.fx-album-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:8px;        /* base unit; JS sets grid-row-end span */
    column-gap:16px;
    align-items:start;
}
.fx-album-tile{
    position:relative;
    display:block;
    grid-row-end:span 32;      /* sensible default before JS/img load */
    margin-bottom:16px;        /* vertical gap between stacked tiles */
    border-radius:4px;
    overflow:hidden;
    background-color:#e9eaee;
    text-decoration:none !important;
    isolation:isolate;
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.fx-album-tile__img{
    display:block;
    width:100%;
    height:auto;
}
.fx-album-tile:hover{transform:translateY(-4px);}
.fx-album-tile__overlay{
    position:absolute;inset:0;
    display:flex;flex-direction:column;justify-content:flex-end;
    gap:10px;
    padding:14px;
    background:linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,.72));
    opacity:0;
    transition:opacity .35s ease;
}
.fx-album-tile:hover .fx-album-tile__overlay{opacity:1;}
.fx-album-tile__actions{
    display:flex;gap:8px;
    transform:translateY(-6px);
    transition:transform .35s ease;
}
.fx-album-tile:hover .fx-album-tile__actions{transform:none;}
.fx-album-tile__btn{
    width:38px;height:38px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.92);
    color:#a51313 !important;font-size:14px;
    text-decoration:none !important;
    transition:background .25s ease,color .25s ease,transform .25s ease;
}
.fx-album-tile__btn:hover{background:#a51313;color:#fff !important;transform:scale(1.08);}
.fx-album-tile__caption{
    font-size:13px;font-weight:600;color:#fff;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fx-album-tile__caption a{color:#fff !important;text-decoration:none;}

/* Mobile tile variant (always shows caption) */
.fx-album-tile--mobile .fx-album-tile__overlay{
    opacity:1;
    background:linear-gradient(180deg, rgba(15,23,42,0) 45%, rgba(15,23,42,.65));
}

/* ===== Pagination polish ===== */
.fx-album .pagination,
.fx-album-pager{display:flex;justify-content:center;margin-top:30px;}

/* ===== Responsive ===== */
@media (max-width:1199px){
    .fx-album-cats{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:991px){
    .fx-album__title{font-size:23px;}
    .fx-album-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
    .fx-album-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:600px){
    .fx-album-cats{grid-template-columns:1fr;}
    .fx-album-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;}
    .fx-album-tile{margin-bottom:12px;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-album-cat,.fx-album-cat::before,.fx-album-cat__media,
    .fx-album-cat__title,.fx-album-tile,.fx-album-tile__overlay,
    .fx-album-tile__actions,.fx-album-tile__btn{transition:none !important;}
    .fx-album-cat:hover,.fx-album-tile:hover{transform:none !important;}
    .fx-album-cat:hover .fx-album-cat__media{transform:none !important;}
}