/* =========================
   Base, Variables & Resets
   ========================= */
:root{
  --color-primary:#d815be;
  --color-secondary:#2766DA;
  --color-bg:#f8f9fa;
  --color-card:#ffffff;
  --color-text:#333;
  --color-text-muted:#666;
  --shadow-soft:0 6px 24px rgba(0,0,0,.08);
  --shadow-med:0 10px 30px rgba(0,0,0,.14);
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:6px;
  --ff-base:"Tajawal",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  --ff-display:"Lalezar",cursive;
  --transition:.28s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-base);
  background-color:var(--color-bg);
  color:var(--color-text);
  direction:rtl;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:3px solid rgba(39,102,218,.35);outline-offset:2px}

/* =========================
   Navbar (subtle gradient + underline hover)
   ========================= */
.navbar{
  background:linear-gradient(135deg, var(--color-primary) 0%, #c113ab 100%);
  border-bottom-left-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.navbar-brand{display:flex;align-items:center}
.navbar-brand img{width:60px;height:60px;border-radius:50%}
.navbar-brand h2,.navbar-brand h3{color:#fff;margin:0;font-family:var(--ff-display)}
.navbar-brand h3{font-size:1.1rem}
.navbar-brand h2{font-size:1.3rem}
.navbar-nav{margin-left:30px}
.nav-link{
  position:relative;
  color:#fff!important;
  font-size:1.1rem;
  padding:1rem 1rem;
  transition:color var(--transition),background-color var(--transition);
  border-radius:var(--radius-sm);
}
.nav-link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:.6rem; height:2px;
  background:rgba(255,255,255,.0); transform:scaleX(0); transform-origin:center;
  transition:transform var(--transition), background var(--transition);
  border-radius:2px;
}
.nav-link:hover,.nav-link:focus-visible{
  color:#fff!important; background-color:rgba(255,255,255,.08);
}
.nav-link:hover::after,.nav-link:focus-visible::after{
  background:rgba(255,255,255,.8); transform:scaleX(1);
}
.navbar-toggler{border:none}

/* =========================
   Hero Section (FIXED GRID)
   ========================= */
/* IMPORTANT: do NOT override Bootstrap's .row flex rules here. */
.hero{ margin-top:2rem; } /* keep spacing only */

/* keep consistent tile height with modern aspect ratio */
.hero-card{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  transition:transform var(--transition), box-shadow var(--transition);
  box-shadow:var(--shadow-soft);
  background:#111; /* for gradual image fade-in look behind */
  isolation:isolate;
}
.hero-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-med) }
.hero-card::before{
  /* subtle glossy vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 100%, rgba(0, 0, 0, 0.981) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
  z-index:1; pointer-events:none;
  opacity:.6;
}
.hero-card-img{
  width:100%;
  /* modern stable height without breaking grid */
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
@supports not (aspect-ratio: 1/1){
  /* fallback for very old browsers */
  .hero-card-img{height: clamp(180px, 28vw, 340px)}
}
.hero-card-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  padding:1rem; color:#fff; text-align:center;
  backdrop-filter:saturate(120%);
}
.hero-card-title{font-size:1.75rem;font-weight:800;margin:0;letter-spacing:.2px}

/* =========================
   Cards (generic, softer modern feel)
   ========================= */
.card{
  background:var(--color-card);
  border:none; overflow:hidden; text-align:right;
  border-radius:var(--radius-lg);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow:var(--shadow-soft);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-med) }
.card-body{ padding:1rem }
.card-title{ font-size:1.4rem; color:var(--color-text); font-weight:800; margin-bottom:.5rem }
.card-text{ font-size:1rem; color:var(--color-text-muted) }

/* =========================
   Advertisement Carousel (glass overlay)
   ========================= */
.ad-card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); transition:transform var(--transition), box-shadow var(--transition) }
.ad-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-med) }
.ad-img{
  width:100%; aspect-ratio:21/9; object-fit:cover; display:block;
}
@supports not (aspect-ratio: 1/1){
  .ad-img{ height: clamp(220px, 35vw, 400px) }
}
.ad-overlay{
  position:absolute; inset:0; color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:1rem;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
  backdrop-filter: blur(2px) saturate(120%);
}
.ad-title{ font-size:1.35rem; font-weight:800; margin:0 }
.ad-description{ font-size:1rem; margin-top:.4rem }
.carousel-control-prev-icon,.carousel-control-next-icon{ background-color:#000; border-radius:50%; padding:10px }

/* =========================
   Latest Added
   ========================= */
.last-added{ padding:2rem 0; text-align:right }
.last-added h1{ font-size:2rem; color:var(--color-secondary); margin-bottom:1rem }
.last-added h4{ font-size:1.1rem; color:var(--color-text-muted); margin-bottom:2rem }
.last-added-a{ text-decoration:none; color:inherit }
.last-added .card{ width:100%; max-width:800px; margin-bottom:20px; background:#fafafa }
.last-added .card:nth-child(odd){ margin-left:auto }   /* right */
.last-added .card:nth-child(even){ margin-right:auto } /* left */

/* =========================
   Categories & Most Read
   ========================= */
.categories{ padding:2rem 0; text-align:right }
.categories h3{ font-size:1.4rem; color:var(--color-secondary); margin-bottom:1rem }
.list-group-item a{
  text-decoration:none; font-size:1.05rem; color:var(--color-text);
  transition:color var(--transition)
}
.list-group-item a:hover,.list-group-item a:focus-visible{ color:var(--color-primary) }

/* =========================
   Footer (soft shadow + hover text)
   ========================= */
footer{
  background:linear-gradient(135deg, var(--color-primary) 0%, #c113ab 100%);
  color:#fff; padding:1rem 0; text-align:center;
  border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.footer-icons a{ text-decoration:none; color:#fff; margin:0 10px; transition:color var(--transition), opacity var(--transition) }
.footer-icons a i{ font-size:1.5rem; margin-right:5px }
.footer-icons a span{ display:none; transition:var(--transition) }
.footer-icons a:hover span,.footer-icons a:focus-visible span{ display:inline-block }
.footer-icons a:hover{ opacity:.9 }

/* =========================
   Modal
   ========================= */
.modal{
  display:none; position:fixed; z-index:1000; inset:0; overflow:auto;
  background: rgba(0,0,0,.45);
}
.modal-content{
  background:#fff; margin:10% auto; padding:20px; border:1px solid #eee;
  width:min(600px,90%); border-radius:var(--radius-lg); text-align:right;
  box-shadow:var(--shadow-soft);
}
.close{ color:#888; float:left; font-size:28px; font-weight:700; cursor:pointer }
.close:hover,.close:focus{ color:#000 }

/* =========================
   Forms & Buttons (micro-interactions)
   ========================= */
.input-container{ margin-bottom:1rem }
.input-container label{ display:block; margin-bottom:.5rem }

input,textarea,.form-control{
  border-radius:var(--radius-lg)!important; border:1px solid #e3e3e3;
  padding:.6rem .8rem; transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition)
}
input:focus,textarea:focus,.form-control:focus{
  border-color:var(--color-secondary); box-shadow:0 0 0 4px rgba(39,102,218,.12); transform: translateZ(0)
}

.button-container button,.send-button,.close-button,.btn-primary{
  border:none; border-radius:var(--radius-lg); padding:.55rem 1rem; cursor:pointer;
  transition:background-color var(--transition), box-shadow var(--transition), transform var(--transition);
  background-color:var(--color-secondary); color:#fff;
}
.button-container .close-button{ background-color:var(--color-primary) }
.send-button:hover,.btn-primary:hover{ background-color:var(--color-primary); box-shadow:var(--shadow-soft); transform: translateY(-1px) }
.close-button:hover{ background-color:var(--color-secondary); box-shadow:var(--shadow-soft); transform: translateY(-1px) }

/* keep this to align submit button to the left below comments */
.comment-submit-left{ display:flex; justify-content:flex-start }

/* =========================
   Article Page
   ========================= */
.essay-content{text-align:right}
.essay-content .card{ margin-bottom:1.5rem }
.essay-content .card-title{ font-size:1.45rem; color:var(--color-text); font-weight:800 }
.essay-content .card-text{ font-size:1rem; color:var(--color-text-muted) }

.comments-section{
  background:#fff; padding:1rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft)
}
.comment-card{ border-radius:var(--radius-lg) }
.comment-author{ font-weight:800; margin-bottom:.5rem }
.comment-text{ font-size:1rem; color:var(--color-text-muted) }

.recommended-section{text-align:right}
.recommended-section h3{ font-size:1.35rem; color:var(--color-secondary); margin-bottom:1rem }
.recommended-card{
  border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-soft);
  transition:transform var(--transition), box-shadow var(--transition)
}
.recommended-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-med) }
.recommended-card .card-body{ padding:.5rem }
.recommended-card .card-title{ font-size:1rem; color:var(--color-text); font-weight:800; margin-bottom:.5rem }

/* Bootstrap override for primary */
.btn-primary{ background-color:var(--color-secondary) }
.btn-primary:hover{ background-color:var(--color-primary) }

.bg-custom{ background:var(--color-primary)!important }
.text-white{ color:#fff!important }

/* ribbon-like h6 chip */
h6,.h6-custom{
  color:#fff!important; background:var(--color-primary);
  border-radius:999px; text-align:center; width:110px; margin-bottom:15px;
  font-size:1rem; display:inline-block; padding:6px 12px; letter-spacing:.2px;
}

/* =========================
   Category Content
   ========================= */
.category-content .category-title{ font-size:2rem; color:var(--color-secondary); margin-bottom:1.5rem; text-align:right }
.category-content .card{ border-radius:var(--radius-lg) }
.category-content .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-med) }
.category-content .card-img-top{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio:16/9; object-fit:cover; display:block }
.category-content .card-title{ font-size:1.15rem; color:var(--color-text); font-weight:800; margin-bottom:.5rem }
.category-content .card-text{ font-size:1rem; color:var(--color-text-muted) }

.category-content .aside h3{ font-size:1.4rem; color:var(--color-secondary); margin-bottom:1rem; text-align:right }
.category-content .aside .list-group-item{ border:none; padding:.75rem 1rem; transition:background-color var(--transition) }
.category-content .aside .list-group-item:hover{ background-color:rgba(0,0,0,.05) }
.category-content .aside .list-group-item a{ text-decoration:none; font-size:1.05rem; color:var(--color-text); transition:color var(--transition) }
.category-content .aside .list-group-item a:hover{ color:var(--color-primary) }

.category-content .random-essays .card{ border-radius:var(--radius-lg) }
.category-content .random-essays .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-med) }
.category-content .random-essays .card-img-top{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio:1/1; object-fit:cover; display:block }
.category-content .random-essays .card-title{ font-size:1.1rem; color:var(--color-text); font-weight:800; margin-bottom:.5rem }

/* =========================
   Utilities / Small Tweaks
   ========================= */
.ad-card{ height:auto!important }
.dateclasse h4{ font-size:12px!important; font-weight:700!important }
@media (max-width:575.98px){
  .nav-link{ font-size:1rem; padding:.75rem .75rem }
  .hero{ margin-top:1.25rem }
  .card-title{ font-size:1.2rem }
  .footer-icons a i{ font-size:1.25rem }
}
button,.btn,input,textarea{ touch-action:manipulation }

/* Modern header look */
.bg-custom{
  background: linear-gradient(135deg, var(--color-primary) 0%, #c113ab 100%) !important;
}
.header-elevated{
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 10;
}

.brand-caption{
  color:#fff;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  line-height: 1;
  margin-right: .25rem;
  opacity: .95;
}

/* Animated underline for links */
.nav-link-underline{ position:relative; }
.nav-link-underline::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:.45rem; height:2px;
  background: rgba(255,255,255,0);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition), background var(--transition);
  border-radius:2px;
}
.nav-link-underline:hover::after,
.nav-link-underline:focus-visible::after,
.navbar .nav-link.active.nav-link-underline::after{
  background: rgba(255,255,255,.85);
  transform: scaleX(1);
}

/* Keep default hover bg subtle */
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible{
  background-color: rgba(255,255,255,.08);
  color:#fff !important;
}

/* crisper brand avatar ring + subtle hover lift */
.brand-logo{ border:2px solid rgba(255,255,255,.35); }
.navbar-brand:hover .brand-logo{ transform: translateY(-2px); transition: transform var(--transition); }

/* make active link underline visible always */
.navbar .nav-link.active.nav-link-underline::after{ background:rgba(255,255,255,.95); transform:scaleX(1); }

/* subtle beveled edge at the top of footer */
.footer-top-accent{
  height: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  opacity:.35;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* pill-like buttons, consistent with your hover style */
.footer-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color:#fff;
  background: rgba(255,255,255,.10);
  padding:.55rem .9rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), opacity var(--transition);
}
.footer-chip i{ font-size:1.15rem; line-height:1; }
.footer-chip:hover,
.footer-chip:focus-visible{
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
  box-shadow: var(--shadow-med);
  color:#fff;
}

/* typography polish */
.footer-copy{
  font-size: .975rem;
  opacity: .95;
}

/* small gap utility for browsers without BS gap */
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }

/* responsive tweaks */
@media (max-width: 575.98px){
  .footer-copy{ margin-top:.75rem; font-size:.92rem; }
  .footer-chip{ padding:.5rem .8rem; }
}

/* ===== About Page ===== */
.about-hero{
  position: relative;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.about-hero-gloss{
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.about-avatar{
  width:110px; height:110px; border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.about-hero-title{ font-family: var(--ff-display); font-size:2rem; }
.about-hero-subtitle{ opacity:.95; }

.about-stats{ padding:1.25rem 0 }
.about-stat{
  background:#fff; border-radius:var(--radius-lg);
  box-shadow: var(--shadow-soft); padding:1rem;
}
.about-stat-number{ font-size:1.6rem; font-weight:800; color:var(--color-secondary) }
.about-stat-label{ color:var(--color-text-muted); }

.about-cards .about-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(39,102,218,.08);
  color: var(--color-secondary);
  padding:.35rem .7rem; border-radius:999px; font-weight:800;
  margin-bottom:.5rem;
}
.about-rich .card-body{ padding:1.25rem }
.about-body-typography{
  line-height:1.9; font-size:1.05rem; color:var(--color-text);
}
.about-body-typography p{ margin-bottom:1rem; }
.about-body-typography p:first-child::first-letter{
  float:right; font-size:2.4rem; line-height:1; padding-left:.35rem; color:var(--color-primary);
}

.about-section-title{
  font-size:1.25rem; color:var(--color-secondary);
  font-weight:800; margin:1.75rem 0 .75rem;
}
.about-timeline-list{
  list-style:none; padding:0; margin:0; position:relative;
}
.about-timeline-list li{
  display:flex; align-items:flex-start; gap:.75rem; margin:.85rem 0;
}
.about-dot{
  width:12px; height:12px; border-radius:50%;
  background: var(--color-primary); flex: 0 0 12px;
  box-shadow: 0 0 0 4px rgba(216,21,190,.12);
  margin-top:.5rem;
}
.about-timeline-list h4{ font-size:1.05rem; margin:0 0 .25rem; }
.about-timeline-list p{ margin:0; color:var(--color-text-muted); }

.about-faq .card-header{ background:#fff; }
.about-faq .btn-link{ color:var(--color-text); font-weight:800; }
.about-faq .btn-link:hover{ text-decoration:none; color:var(--color-primary); }

.about-cta{ padding:1.25rem 0 2rem; }
.about-cta-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background: linear-gradient(135deg, rgba(39,102,218,.08), rgba(216,21,190,.08));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding:1rem 1.25rem;
}
.about-cta-text{ color:var(--color-text-muted); }

@media (max-width:575.98px){
  .about-cta-card{ flex-direction:column; align-items:flex-start; }
}

/* ===== About v2 ===== */
.aboutv2-hero{
  position:relative;
  border-bottom-left-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.aboutv2-gloss{
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.aboutv2-avatar{
  width:120px; height:120px; border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.2);
  object-fit:cover;
}
.aboutv2-title{ font-family:var(--ff-display); font-size:2.1rem; line-height:1.1; }
.aboutv2-subtitle{ opacity:.95; }

/* bio split */
.aboutv2-photo-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  background: #111;
}
.aboutv2-photo{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  display:block;
}
@supports not (aspect-ratio: 1/1){
  .aboutv2-photo{ height: clamp(220px, 35vw, 360px); }
}
.aboutv2-bio .aboutv2-body{
  line-height:1.9; font-size:1.05rem; color:var(--color-text);
}
.aboutv2-bio .aboutv2-body p{ margin-bottom:1rem; }
.aboutv2-quote{
  position:relative; margin:1rem 0 0; padding:.6rem .9rem;
  background:linear-gradient(135deg, rgba(39,102,218,.06), rgba(216,21,190,.08));
  border-radius:var(--radius-md);
  color:var(--color-text);
}
.aboutv2-quote .qmark{ font-size:1.4rem; color:var(--color-primary); margin-left:.35rem; }

/* chip & stats */
.aboutv2-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(39,102,218,.08); color:var(--color-secondary);
  padding:.35rem .7rem; border-radius:999px; font-weight:800; margin-bottom:.5rem;
}
.aboutv2-stats{ padding-top:.5rem; padding-bottom:.5rem; }
.aboutv2-stat{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
  padding:1rem;
}
.aboutv2-num{ font-size:1.6rem; font-weight:800; color:var(--color-secondary) }
.aboutv2-label{ color:var(--color-text-muted) }

/* CTA */
.aboutv2-cta{ padding:1.25rem 0 2rem; }
.aboutv2-cta-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:linear-gradient(135deg, rgba(39,102,218,.08), rgba(216,21,190,.08));
  border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
  padding:1rem 1.25rem;
}
.aboutv2-cta-text{ color:var(--color-text-muted); }

/* Responsive love */
@media (max-width: 991.98px){
  .aboutv2-title{ font-size:1.8rem; }
}
@media (max-width: 575.98px){
  .aboutv2-avatar{ width:96px; height:96px; }
  .aboutv2-title{ font-size:1.55rem; }
  .aboutv2-cta-card{ flex-direction:column; align-items:flex-start; }
}

/* ===== Privacy/Policy layout ===== */
.policy-hero{
  position:relative;
  border-bottom-left-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.policy-title{ font-family:var(--ff-display); font-size:2rem; line-height:1.15; }
.policy-subtitle{ opacity:.95; }
.policy-gloss{
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  pointer-events:none;
}



.policy-wrap{ /* spacing only */ }
.policy-toc .toc-title{
  font-size:1.05rem; font-weight:800; color:var(--color-secondary); margin-bottom:.5rem;
}
.toc-nav{ display:grid; gap:.25rem; }
.toc-nav a{
  display:block; padding:.45rem .6rem; border-radius:var(--radius-md);
  text-decoration:none; color:var(--color-text);
  transition: background-color var(--transition), color var(--transition);
}
.toc-nav a:hover, .toc-nav a:focus-visible{
  background-color: rgba(39,102,218,.08); color:var(--color-secondary);
}
.toc-meta{ display:flex; align-items:center; gap:.5rem; margin-top:.75rem; color:var(--color-text-muted); font-size:.95rem }

@media (min-width: 992px){
  .policy-toc{ position:sticky; top:90px; } /* sticks under navbar */
}

.policy-article .card-body{ padding:1.25rem }
.policy-section + .policy-section{ margin-top:1.25rem; }
.policy-section h2{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.25rem; font-weight:800; color:var(--color-secondary);
  margin-bottom:.4rem;
}
.policy-section p{ color:var(--color-text); line-height:1.9; }
.policy-list{ padding-right:1.15rem; }
.policy-list li{ margin:.25rem 0; color:var(--color-text) }

.policy-top{ display:inline-block; margin-top:1rem; }

/* Mobile tweaks */
@media (max-width:575.98px){
  .policy-title{ font-size:1.6rem; }
}

/* ===== Landing (Home) ===== */
.home { }

/* ===== Home Hero (2×2) ===== */
.home-hero { margin-top: .5rem; }
.home-hero-grid { align-items: stretch; }

/* Tile */
.hero-tile { display:block; text-decoration:none; outline:none; }
.hero-figure{
  position:relative; overflow:hidden; border-radius:14px; margin:0;
  background:#0d0d0d; box-shadow:0 8px 28px rgba(0,0,0,.12);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s;
  isolation:isolate;
}
.hero-tile:focus-visible .hero-figure,
.hero-tile:hover .hero-figure{
  transform: translateY(-4px);
  box-shadow:0 14px 38px rgba(0,0,0,.16);
}

/* Image (stable aspect) */
.hero-img{
  width:100%; display:block; object-fit:cover; aspect-ratio:16/9;
  transform: scale(1.002); transition: transform .5s cubic-bezier(.22,.61,.36,1);
  filter: saturate(102%);
}
@supports not (aspect-ratio: 1/1){
  .hero-img{ height: clamp(180px, 28vw, 320px); }
}
.hero-tile:hover .hero-img{ transform: scale(1.04); }

/* Overlay text */
.hero-overlay{
  position:absolute; inset:0; z-index:2; display:flex;
  flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:1rem .9rem; text-align:right; direction:rtl;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
}
.hero-title{
  margin: .35rem 0 0; color:#fff; font-weight:800; line-height:1.5; font-size:1.05rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-pill{
  display:inline-block; color:#fff; background:rgba(216,21,190,.9);
  border-radius:999px; padding:.25rem .6rem; font-size:.78rem; font-weight:700;
  box-shadow:0 6px 18px rgba(216,21,190,.28);
}

/* Gloss & deep shadow */
.hero-gloss{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 100%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.45) 100%);
  opacity:.25; transition: opacity .28s;
}
.hero-shadow{
  position:absolute; inset:auto 0 0 0; height:38%; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
}
.hero-tile:hover .hero-gloss{ opacity:.35; }

/* Focus ring (keyboard) */
.hero-tile:focus-visible { outline:none; }
.hero-tile:focus-visible .hero-figure{ box-shadow:0 0 0 4px rgba(39,102,218,.25), 0 8px 28px rgba(0,0,0,.14); }

/* Responsive */
@media (max-width: 575.98px){
  .hero-title{ font-size:1rem; }
  .hero-pill{ font-size:.72rem; }
}

/* BODY LAYOUT */
.home-section-title{
  font-size:1.35rem; color:var(--color-secondary); font-weight:800;
}
.home-section-sub{
  margin:0; color:var(--color-text-muted); font-size:.98rem;
}

/* Latest list */
.home-post{ text-decoration:none; color:inherit; }
.home-post + .home-post{ margin-top:.75rem; display:block; }
.home-post-card{
  border:none; border-radius:var(--radius-lg);
  overflow:hidden; transition: transform var(--transition), box-shadow var(--transition);
}
.home-post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-med); }
.home-post-img{
  width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4/3;
}
@supports not (aspect-ratio: 1/1){
  .home-post-img{ height: 140px; }
}
.home-post-title{
  font-size:1.05rem; margin-bottom:.25rem; color:var(--color-text); font-weight:800;
}
.home-post-desc{
  font-size:.98rem; color:var(--color-text-muted);
}
.home-post-meta{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.9rem; color:#999;
}

/* Sidebar */
.home-side{
  border:none; border-radius:var(--radius-lg);
}
.home-side-title{
  font-size:1.05rem; font-weight:800; color:var(--color-secondary); margin-bottom:.6rem;
}
.home-side-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.25rem;
}
.home-side-link{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .7rem; border-radius:var(--radius-md);
  color:var(--color-text); text-decoration:none;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.home-side-link i{ width:18px; text-align:center; }
.home-side-link:hover, .home-side-link:focus-visible{
  background: rgba(39,102,218,.08); color:var(--color-secondary);
  transform: translateY(-1px);
}

/* Responsive tweaks */
@media (max-width: 575.98px){
  .home-hero-title{ font-size:1rem; }
  .home-section-title{ font-size:1.2rem; }
  .home-post-img{ height: 120px; }
}

/* ===== Article (Essay Page) ===== */
.article-wrap{
  border:none; border-radius:var(--radius-lg);
  overflow:hidden; margin-bottom:1rem;
}
.article-header{ padding:1rem 1rem .5rem 1rem; }
.article-chip{
  display:inline-block; padding:.35rem .8rem; border-radius:999px;
  background:linear-gradient(135deg, var(--color-primary), #c113ab); color:#fff;
  font-weight:800; font-size:.9rem; box-shadow:var(--shadow-soft);
}
.article-title{
  margin:.6rem 0 0; font-size:1.6rem; font-weight:800; color:var(--color-text);
  line-height:1.4;
}

.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem;
  color:#888; font-size:.95rem; margin-top:.5rem;
}
.article-meta .meta-item{ display:inline-flex; align-items:center; gap:.35rem; }
.article-meta .meta-sep{ opacity:.6; }

.article-cover{ position:relative; margin:0; overflow:hidden; }
.article-cover img{
  width:100%; display:block; object-fit:cover; aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1){ .article-cover img{ height: clamp(220px, 38vw, 460px); } }
.article-cover-gloss{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(130% 120% at 50% 100%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.35) 100%);
  opacity:.25;
}

.article-body{
  padding:1rem; line-height:1.95; color:var(--color-text);
}
.article-body p{ margin-bottom:1rem; }
.article-body h2, .article-body h3, .article-body h4{
  font-weight:800; color:var(--color-secondary); margin:1.2rem 0 .6rem;
}
.article-body blockquote{
  border-right:4px solid var(--color-primary);
  background:#faf7fb; padding:.75rem 1rem; border-radius:var(--radius-md);
  margin:.75rem 0;
}

.article-breadcrumbs{
  padding: .5rem 1rem 1rem; border-top:1px solid #eee;
}

/* Comments */
.comments{ border:none; border-radius:var(--radius-lg); margin-top:1rem; }
.comments-title{ font-size:1.25rem; font-weight:800; color:var(--color-secondary); margin-bottom:.5rem; }
.comments-form .form-control{ border-radius:var(--radius-lg); }
.comment-item{
  display:flex; gap:.75rem; padding:.75rem 0; border-top:1px dashed #e8e8e8;
}
.comment-item:first-of-type{ border-top:none; }
.comment-avatar{
  width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; color:#fff; flex:0 0 38px;
  background:linear-gradient(135deg, var(--color-primary), #c113ab);
  box-shadow:var(--shadow-soft);
}
.comment-author{ font-weight:800; color:var(--color-text); margin-bottom:.2rem; }
.comment-text{ color:var(--color-text-muted); }

/* Sidebar */
.side-block{ border:none; border-radius:var(--radius-lg); }
.side-title{ font-size:1.05rem; font-weight:800; color:var(--color-secondary); margin-bottom:.6rem; }
.side-post{
  display:grid; grid-template-columns: 88px 1fr; gap:.6rem; align-items:center;
  text-decoration:none; color:inherit; padding:.45rem .35rem; border-radius:var(--radius-md);
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.side-post + .side-post{ margin-top:.15rem; }
.side-post:hover, .side-post:focus-visible{
  background: rgba(39,102,218,.08); transform: translateY(-1px); box-shadow:var(--shadow-soft);
}
.side-post img{
  width:100%; height:64px; object-fit:cover; border-radius:var(--radius-md);
}
.side-post-title{
  font-weight:700; font-size:.98rem; color:var(--color-text);
}

/* Fine-tuning carousel cards already in your CSS */
.ad-card{ border-radius:var(--radius-lg); overflow:hidden; }

/* Responsive */
@media (max-width: 575.98px){
  .article-title{ font-size:1.35rem; }
  .article-meta{ font-size:.92rem; }
  .side-post{ grid-template-columns: 76px 1fr; }
}

/* ===== Category Page ===== */
.category-page{ text-align:right; }

/* Hero */
.cat-hero{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.cat-title{ font-size:1.85rem; font-weight:800; }
.cat-subtitle{ opacity:.95; }
.cat-hero-gloss{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 100%, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.35) 100%);
  opacity:.15;
}

/* Grid cards */
.cat-grid{}
.cat-card{ border:none; border-radius: var(--radius-lg); overflow:hidden; }
.cat-card .card-body{ padding: .9rem .95rem; }
.cat-card .card-footer{ padding: 0 .95rem .95rem; }
.cat-card-media{ display:block; position:relative; overflow:hidden; }
.cat-card-media img{
  width:100%; display:block; object-fit:cover; aspect-ratio:16/9;
  transform: scale(1.001);
  transition: transform var(--transition);
}
@supports not (aspect-ratio: 1/1){
  .cat-card-media img{ height: clamp(180px, 30vw, 260px); }
}
.cat-card:hover .cat-card-media img{ transform: scale(1.03); }

.cat-card-title{
  font-size:1.05rem; font-weight:800; line-height:1.5; margin-bottom:.35rem;
}
.cat-card-title a{ color:var(--color-text); text-decoration:none; }
.cat-card-title a:hover{ color:var(--color-secondary); }

.cat-card-excerpt{
  color:var(--color-text-muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 3.9em;
}
.cat-card-meta{ font-size:.9rem; display:flex; align-items:center; gap:.35rem; }

/* Sidebar */
.side-block{ border:none; border-radius: var(--radius-lg); }
.side-title{ font-weight:800; font-size:1.05rem; color:var(--color-secondary); margin-bottom:.6rem; }
.side-list li+li{ margin-top:.35rem; }
.side-link{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--color-text);
  padding:.35rem .25rem;
  border-radius: var(--radius-md);
  transition: background-color var(--transition), transform var(--transition), color var(--transition);
}
.side-link .dot{
  width:7px; height:7px; border-radius:999px; background: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(216,21,190,.12);
}
.side-link:hover, .side-link:focus-visible{
  background: rgba(39,102,218,.08); color: var(--color-secondary); transform: translateY(-1px);
}

/* Random cards overlay text (already used in your page) */
.card-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center; background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%);
}
.card-title-overlay{ font-size:1rem; font-weight:800; }

/* Utilities */
@media (max-width:575.98px){
  .cat-title{ font-size:1.5rem; }
  .cat-card-title{ font-size:1rem; }
}