/* ============================================================
   invocations.css  -  Invocations/Evocations listing page
   ============================================================ */

:root {
    --pad-x: 12.5%;
    --primary: #775347;
    --primaryHover: rgba(119,83,71,.08);
    --secondery: #fdeedb;
    --seconderyHover: #e4d6c5;
    --thirdly: #c79c78;
    --thirdlyHover: #b38c6c;
    --transformBG: #fffaf6;
    --white: #fff;
    --black: #000;
    --border: rgba(0,0,0,.12);
    --lightGrey: #f8f8f8;
    --radius: 10px;
    --transition: .36s;
    --margin: 15px;
}

@font-face { font-family:'ITCHandelGothicArabic'; src:url('../font/Tajawal-Regular.ttf') format('truetype'); }
@font-face { font-family:'Yuzarsif'; src:url('../font/Yuzarsif-Regular.ttf') format('truetype'); }
@font-face { font-family:'Amiri'; src:url('../font/Amiri-Regular.ttf') format('truetype'); }

*, *::before, *::after { font-family:'ITCHandelGothicArabic',serif; margin:0; padding:0; box-sizing:border-box; }

body {
    background: var(--transformBG);
    display: grid;
    grid-template-areas: "header" "main" "footer";
    gap: var(--margin);
}

/* ============================================================
   HERO
   ============================================================ */
.page-hero {
    position: relative;
    background: linear-gradient(135deg, #2c1a15 0%, #4a2f27 55%, var(--primary) 100%);
    padding: 52px var(--pad-x) 44px;
    overflow: hidden;
}
.page-hero::before {
    content:'';
    position:absolute; inset:0;
    background: url('../images/banners/invocations.jpg') center/cover no-repeat;
    opacity:.12;
}
.page-hero::after {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse at 25% 60%, rgba(199,156,120,.15) 0%, transparent 60%);
}

.ph-inner {
    position:relative; z-index:1;
    display:flex; flex-direction:column; gap:14px;
    max-width:660px;
}

.ph-breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ph-breadcrumb a { color:rgba(255,255,255,.7); text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:4px; transition:color .2s; }
.ph-breadcrumb a:hover { color:var(--thirdly); }
.ph-breadcrumb .sep { color:rgba(255,255,255,.35); font-size:11px; }
.ph-breadcrumb .cur { color:rgba(255,255,255,.9); font-size:13px; }

.ph-label {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 14px;
    border-radius:50px;
    background:rgba(199,156,120,.2);
    color:var(--thirdly);
    border:1px solid rgba(199,156,120,.35);
    font-size:12px; font-weight:600; letter-spacing:.3px;
    width:fit-content;
}

.ph-title {
    font-family:'Yuzarsif',serif;
    font-size: clamp(28px, 4vw, 46px);
    color:var(--white);
    line-height:1.25;
}

.ph-sub {
    font-size:15px;
    color:rgba(255,255,255,.7);
    line-height:1.6;
    max-width:520px;
}

.ph-stats {
    display:flex; gap:20px; flex-wrap:wrap;
}

.ph-stat {
    display:flex; align-items:center; gap:6px;
    color:rgba(255,255,255,.75);
    font-size:13px;
}
.ph-stat i { color:var(--thirdly); font-size:14px; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
body main {
    grid-area:main;
    margin: 0;
    padding: 0;
}

.invocations-inner {
    padding: 0 var(--pad-x) 56px;
}

/* ============================================================
   TYPE SWITCHER TABS
   ============================================================ */
.type-switcher {
    display:flex;
    gap:8px;
    padding: 20px 0 0;
    flex-wrap:wrap;
}

.type-tab {
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 22px;
    border-radius:50px;
    border:1.5px solid rgba(119,83,71,.2);
    background:var(--white);
    color:#555;
    font-size:14px;
    text-decoration:none;
    transition:all .2s;
    font-weight:500;
    cursor:pointer;
}
.type-tab:hover { background:var(--secondery); border-color:var(--thirdly); color:var(--primary); }
.type-tab.active { background:var(--primary); border-color:var(--primary); color:var(--white); font-weight:700; }
.type-tab i { font-size:14px; }

/* ============================================================
   FILTER BAR + ADD BUTTON ROW
   ============================================================ */
.invocations-controls {
    display:flex;
    align-items:center;
    gap:12px;
    padding: 16px 0;
    flex-wrap:wrap;
}

.filter-bar {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    flex:1;
    align-items:center;
}

.filter-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 16px;
    border-radius:50px;
    border:1px solid var(--border);
    background:var(--white);
    color:#555;
    font-size:13px;
    text-decoration:none;
    transition:all .2s;
    cursor:pointer;
    white-space:nowrap;
}
.filter-chip:hover { background:var(--secondery); border-color:var(--thirdly); color:var(--primary); }
.filter-chip.active { background:var(--primary); color:var(--white); border-color:var(--primary); }
.filter-chip i { font-size:12px; }

.add-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px;
    border-radius:50px;
    border:none;
    background:var(--thirdly);
    color:var(--white);
    font-size:13px;
    font-family:'ITCHandelGothicArabic',serif;
    cursor:pointer;
    transition:all .2s;
    white-space:nowrap;
}
.add-btn:hover { background:var(--thirdlyHover); transform:translateY(-1px); }

/* ============================================================
   INVOCATION CARD
   ============================================================ */
.inv-card {
    display:grid;
    grid-template-columns: 54px 1fr;
    gap:0;
    background:var(--white);
    border-radius:14px;
    border:1px solid rgba(0,0,0,.06);
    margin-bottom:16px;
    overflow:hidden;
    cursor:pointer;
    transition:all .25s;
    box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.inv-card:hover {
    box-shadow:0 6px 24px rgba(119,83,71,.1);
    border-color:rgba(199,156,120,.3);
    transform:translateY(-2px);
}

.inv-num {
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:var(--white);
    font-size:15px;
    font-weight:700;
    font-family:'Yuzarsif',serif;
    min-height:110px;
    border-right:3px solid var(--thirdly);
    flex-shrink:0;
}

.inv-body {
    padding:16px 20px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.inv-arabic {
    font-family:'Amiri',serif;
    font-size:20px;
    color:#1a0f0a;
    direction:rtl;
    text-align:right;
    line-height:1.8;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.inv-french {
    font-size:14px;
    color:#444;
    line-height:1.65;
    font-weight:600;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.inv-meta {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-top:2px;
}

.inv-tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px;
    border-radius:50px;
    font-size:11.5px;
    background:var(--lightGrey);
    color:#666;
    border:1px solid rgba(0,0,0,.08);
}
.inv-tag i { font-size:11px; color:var(--thirdly); }
.inv-tag.source { background:rgba(199,156,120,.1); color:var(--primary); border-color:rgba(199,156,120,.2); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:24px 0 8px;
    flex-wrap:wrap;
}

.pagination a, .pagination span {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--white);
    color:var(--primary);
    font-size:13px;
    text-decoration:none;
    transition:all .2s;
}
.pagination a:hover { background:var(--secondery); border-color:var(--thirdly); }
.pagination a.active { background:var(--primary); color:var(--white); border-color:var(--primary); }
.pagination span.dots { border:none; background:none; color:#aaa; }

/* ============================================================
   SKELETON
   ============================================================ */
.skeleton-wrap { display:flex; flex-direction:column; gap:16px; }

.skeleton-card {
    display:grid;
    grid-template-columns:54px 1fr;
    background:var(--white);
    border-radius:14px;
    border:1px solid rgba(0,0,0,.06);
    overflow:hidden;
    height:110px;
}

.sk-num {
    background: linear-gradient(90deg,#e8d8cc 25%,#f0e4dc 50%,#e8d8cc 75%);
    background-size:200% 100%;
    animation:skeleton-shimmer 1.4s infinite;
}

.sk-body {
    padding:16px 20px;
    display:flex; flex-direction:column; gap:10px;
}

.skeleton-box {
    border-radius:6px;
    background: linear-gradient(90deg,#ede7e3 25%,#f5f0ed 50%,#ede7e3 75%);
    background-size:200% 100%;
    animation:skeleton-shimmer 1.4s infinite;
    height:14px;
}
.skeleton-box.sk-line.wide  { width:85%; }
.skeleton-box.sk-line.mid   { width:60%; }
.skeleton-box.sk-line.short { width:40%; }

@keyframes skeleton-shimmer {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

.real-content.hidden { display:none; }
.skeleton-wrap.hidden { display:none; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    display:flex; flex-direction:column; align-items:center;
    gap:12px; padding:64px 24px; text-align:center;
}
.es-icon {
    width:72px; height:72px; border-radius:50%;
    background:var(--secondery);
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:var(--thirdly);
}
.empty-state h3 { font-size:20px; color:var(--primary); }
.empty-state p  { font-size:14px; color:#777; max-width:320px; line-height:1.6; }
.es-action {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 22px;
    border-radius:50px;
    background:var(--primary);
    color:var(--white);
    text-decoration:none;
    font-size:13px;
    transition:background .2s;
}
.es-action:hover { background:var(--thirdly); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) { :root { --pad-x:5%; } }

@media (max-width:768px) {
    :root { --pad-x:var(--margin); }
    .page-hero { padding:32px var(--pad-x) 28px; }
    .type-tab { font-size:13px; padding:8px 16px; flex:1; justify-content:center; }
    .inv-arabic { font-size:17px; }
    .inv-french { font-size:13px; }
    .inv-card { grid-template-columns:44px 1fr; }
    .inv-num { font-size:13px; }
}

@media (max-width:480px) {
    .inv-meta { gap:4px; }
    .inv-tag { font-size:11px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
body footer {
    grid-area:footer;
    background:var(--primary); color:var(--white);
    padding:var(--margin); font-size:16px;
}
body footer .guide { margin:0 var(--pad-x) 20px; display:flex; flex-wrap:wrap; gap:var(--margin); }
body footer .guide div { flex-grow:1; }
body footer .guide div p { font-size:16px; }
body footer .guide div h4 { font-size:17px; margin:6px 0; }
body footer .guide .links { margin-left:6px; display:grid; gap:3.5px; }
body footer .guide .links a { text-decoration:none; font-size:15px; color:var(--white); }
body footer hr { margin:30px var(--pad-x) 10px; height:.001rem; color:grey; }
body footer .copyright { margin:0 var(--pad-x); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--margin); }
body footer .copyright .social { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--margin); font-size:22px; }
body footer .copyright .social a { text-decoration:none; color:var(--white); transition:color .3s; }
body footer .copyright .social a:hover { color:var(--thirdly); }

@media (max-width:768px) {
    body footer .guide, body footer hr, body footer .copyright { margin:var(--margin) var(--margin) 0; }
}