/* ─────────────────────────────────────────────────────────────────────────
   Laser Online — public pages (Blog / Showcase) design tokens & shell.
   A warm, light editorial theme (cream/paper background, dark warm text)
   inspired by Anthropic's marketing site — coordinated with the rest of
   Laser Online via the same brand orange accent (--primary/--accent) used
   across the main app, just without the SPA's dark Monokai backdrop.
   ───────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Estedad';src:url("/static/vendor/fonts/Estedad-Regular.woff2") format('woff2'),url("/static/vendor/fonts/Estedad-Regular.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap;}

:root{
    --bg:#F7F4EE; --bg-soft:#EFEAE0; --card:#FFFFFF; --card-2:#F1ECE2; --text:#26231F; --text-dim:rgba(38,35,31,.66);
    --primary:#E07B39; --accent:#F0914D; --success:#3f7a3f; --border:#E5DFD2; --light:#8c8576; --star:#E3A008;
    --monokai-red:#c4453f; --monokai-cyan:#2f8f9e; --monokai-purple:#8a6fc9;
    --dr-sm: 4px 13px 3px 12px / 13px 3px 12px 4px;
    --dr-md: 9px 22px 8px 20px / 22px 8px 20px 9px;
    --dr-lg: 14px 32px 12px 28px / 32px 12px 28px 14px;
    --dr-pill:50px 44px 50px 46px / 44px 50px 46px 50px;
    --dr-dark:  4px 5px 0 rgba(38,35,31,.10);
    --dr-orange:3px 4px 0 rgba(180,86,28,.35);
    --dr-ghost: 2px 2px 0 rgba(38,35,31,.05);
    --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem;
    --radius-card:16px;
    --max-width:1180px;
}

html{scroll-behavior:smooth;}
body.pub-body{
    background:var(--bg); color:var(--text); font-family:'Estedad','Inter',sans-serif;
    direction:rtl; text-align:right; margin:0; min-height:100vh;
    display:flex; flex-direction:column;
}
.pub-main{flex:1 0 auto;}
a{color:var(--primary); text-decoration:none;}
a:hover{color:var(--accent);}
.container-pub{max-width:var(--max-width); margin:0 auto; padding:0 1.25rem;}

h1,h2,h3,h4,h5,h6{font-family:'Estedad',sans-serif; font-weight:700; color:var(--text); line-height:1.35;}
h1{font-size:clamp(1.6rem,3.2vw,2.6rem);}
h2{font-size:clamp(1.25rem,2.2vw,1.7rem);}
h3{font-size:1.2rem;}
p{line-height:1.9; color:var(--text-dim);}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ph-header{background:rgba(247,244,238,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(38,35,31,.08); position:sticky; top:0; z-index:1000;}
.ph-inner{max-width:var(--max-width); margin:0 auto; padding:.85rem 1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.5rem;}
.ph-nav{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;}
.ph-nav-link{color:rgba(38,35,31,.62); font-weight:500; font-size:.92rem; transition:color .2s; white-space:nowrap;}
.ph-nav-link:hover, .ph-nav-link.active{color:var(--primary); font-weight:700;}
.ph-nav-sep{color:rgba(38,35,31,.35); font-size:.85rem;}
.ph-cta{background:var(--primary); color:#fff !important; padding:.55rem 1.4rem; border-radius:var(--dr-sm); font-weight:700; font-size:.85rem; box-shadow:var(--dr-orange); border:1.5px solid rgba(255,255,255,.25); transition:transform .12s ease; white-space:nowrap;}
.ph-cta:hover{transform:translateY(-2px);}
@media(max-width:680px){ .ph-nav{gap:.35rem;} .ph-nav-link{font-size:.8rem;} .ph-cta{padding:.45rem 1rem; font-size:.78rem;} }

/* ── Premium cards ──────────────────────────────────────────────────────── */
.pcard{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; display:flex; flex-direction:column; height:100%;}
.pcard:hover{transform:translateY(-4px); border-color:rgba(224,123,57,.4); box-shadow:0 14px 30px rgba(38,35,31,.10);}
.pcard-img-wrap{aspect-ratio:16/10; overflow:hidden; background:var(--card-2); position:relative;}
.pcard-img-wrap img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.pcard:hover .pcard-img-wrap img{transform:scale(1.05);}
.pcard-body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1;}
.pcard-cat{color:var(--primary); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;}
.pcard-title{font-size:1.05rem; font-weight:700; color:var(--text); margin:0;}
.pcard-excerpt{font-size:.86rem; color:var(--text-dim); line-height:1.7; margin:0; flex:1;}
.pcard-meta{display:flex; gap:.9rem; font-size:.76rem; color:var(--light); margin-top:.4rem; flex-wrap:wrap;}
.pcard-meta i{margin-left:.25rem;}
.badge-featured{position:absolute; top:.7rem; right:.7rem; background:var(--primary); color:#fff; font-size:.7rem; font-weight:700; padding:.25rem .65rem; border-radius:var(--dr-pill); box-shadow:var(--dr-orange); z-index:2;}

.grid-pub{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:1.5rem;}

/* ── Section headers ────────────────────────────────────────────────────── */
.pub-section-title{display:flex; align-items:center; gap:.6rem; margin:var(--space-4) 0 var(--space-2);}
.pub-section-title h2{margin:0;}
.pub-section-title .bar{width:4px; height:1.4rem; background:var(--primary); border-radius:2px;}

/* ── Filter / search bar (glassmorphism) ───────────────────────────────── */
.pub-filterbar{background:rgba(255,255,255,.6); backdrop-filter:blur(10px); border:1px solid rgba(38,35,31,.08); border-radius:var(--dr-md); padding:1rem 1.2rem; margin-bottom:1.75rem; width:100%;
    display:grid; grid-template-columns:100%; grid-auto-rows:auto; row-gap:.8rem;}
.pub-searchrow{grid-column:1; display:flex; flex-wrap:nowrap; gap:.8rem; align-items:center; width:100%;}
.pub-searchrow .form-control, .pub-searchrow .form-select{background:#fff !important; border-color:var(--border) !important; color:var(--text) !important; border-radius:var(--dr-sm) !important; flex:1 1 auto; min-width:0;}
.pub-searchrow .btn-pub-primary{flex:0 0 auto; white-space:nowrap;}
.sc-category-chips{grid-column:1; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; width:100%;}
.pub-chip{display:inline-flex; align-items:center; padding:.4rem 1rem; border-radius:var(--dr-pill); border:1.5px solid var(--border); color:var(--text-dim); font-size:.82rem; font-weight:600; transition:all .2s; background:#fff;}
.pub-chip:hover{border-color:var(--primary); color:var(--primary);}
.pub-chip.active{background:var(--primary); border-color:var(--primary); color:#fff;}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pub-pagination{display:flex; justify-content:center; gap:.5rem; margin:var(--space-4) 0;}
.pub-pagination a, .pub-pagination span{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:var(--dr-sm); border:1.5px solid var(--border); color:var(--text-dim); font-weight:600; font-size:.85rem; background:#fff;}
.pub-pagination a:hover{border-color:var(--primary); color:var(--primary);}
.pub-pagination .current{background:var(--primary); border-color:var(--primary); color:#fff;}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-pub-primary{background:var(--primary); color:#fff; border:1.5px solid rgba(255,255,255,.25); border-radius:var(--dr-sm); padding:.75rem 2rem; font-weight:700; box-shadow:var(--dr-orange); transition:transform .12s ease; display:inline-flex; align-items:center; gap:.5rem;}
.btn-pub-primary:hover{transform:translateY(-2px); color:#fff;}
.btn-pub-ghost{background:#fff; color:var(--text-dim); border:1.5px solid var(--border); border-radius:var(--dr-sm); padding:.7rem 1.6rem; font-weight:600;}
.btn-pub-ghost:hover{border-color:var(--primary); color:var(--primary);}

/* ── Footer (static / in-flow, unlike the SPA's fixed footer) ─────────── */
.pub-footer-spacer{flex-shrink:0;}
.site-footer{position:static !important; height:auto !important; padding:1.6rem 0 !important; background:var(--bg-soft); border-top:1px solid rgba(38,35,31,.08); margin-top:var(--space-5);}
.footer-content{max-width:var(--max-width); margin:0 auto; padding:0 1.25rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; height:auto !important;}
.footer-nav-link{color:rgba(38,35,31,.55); font-size:.78rem; font-weight:500; text-decoration:none; transition:color .2s;}
.footer-nav-link:hover{color:var(--primary);}
.footer-copyright{color:rgba(38,35,31,.45); font-size:.78rem;}
.social-links{display:flex; gap:.55rem;}
.social-link{width:30px; height:30px; border-radius:50%; background:rgba(224,123,57,.10); border:1px solid rgba(224,123,57,.28); display:flex; align-items:center; justify-content:center; color:var(--primary); text-decoration:none; overflow:hidden;}

/* ── RTL helpers ─────────────────────────────────────────────────────────── */
.me-1{margin-left:.25rem !important;margin-right:0 !important;}
.me-2{margin-left:.5rem !important;margin-right:0 !important;}
.ms-1{margin-right:.25rem !important;margin-left:0 !important;}
.ms-2{margin-right:.5rem !important;margin-left:0 !important;}

/* ── Lazy-load fade-in ──────────────────────────────────────────────────── */
img[loading="lazy"]{background:var(--card-2);}

@media(max-width:768px){
    .grid-pub{grid-template-columns:1fr;}
    .footer-content{justify-content:center; text-align:center;}
}