@import '/assets/css/fonts.css';
@import '/assets/css/variables.css';



:root {
  --cream2: #f5ede0;
}
body { font-family:'Rubik',sans-serif; background:var(--cream); color:var(--text); direction:rtl; }

/* NAV */
nav {
  padding:0 20px;
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  position:fixed; top:0; width:100%;
  background:rgba(253,248,242,0.98);
  z-index:100;
}
.logo { font-size:1.1rem; font-weight:900; color:var(--navy); text-decoration:none; }
.logo span { color:#c46a2a; }
.nav-cta {
  display:flex; align-items:center; gap:6px;
  color:var(--navy); text-decoration:none;
  font-size:0.85rem; font-weight:700;
  padding:7px 14px; border-radius:50px;
  background:#eef4f8;
  transition:background 0.2s, color 0.2s;
  border:none; cursor:pointer; font-family:inherit;
}
.nav-cta:hover { background:var(--orange-light); color:var(--orange-deep); }

/* HERO */
.hero {
  display:grid; grid-template-columns:1fr 380px;
  min-height:52vh;
  border-bottom:1px solid var(--border);
  background:var(--cream2);
  text-decoration:none; color:inherit;
  cursor:pointer; transition:filter 0.2s;
  margin-top:0;
}
.hero:hover { filter:brightness(0.97); }
.hero-content {
  padding:56px 60px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-label {
  font-size:0.65rem; font-weight:700; letter-spacing:0.2em;
  color:#c46a2a; text-transform:uppercase; margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.hero-label::before { content:''; width:28px; height:2px; background:#c46a2a; display:block; }
.hero h1 {
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:900; line-height:1.2; color:var(--navy);
  margin-bottom:16px; letter-spacing:-0.02em;
}
.hero h1 em { font-style:normal; color:var(--orange-deep); }
.hero h1 p { margin:0; }
.post-row-body h3 p { margin:0; }
.hero-excerpt { font-size:0.92rem; color:var(--text-mid); line-height:1.75; margin-bottom:28px; max-width:440px; }
.hero-excerpt p { margin:0 0 0.25em; }
.hero-excerpt p:last-child { margin-bottom:0; }
.hero-read {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--navy); font-weight:700; font-size:0.9rem;
  text-decoration:none; border-bottom:2px solid var(--orange-deep);
  padding-bottom:3px; width:fit-content;
}
.hero-meta {
  margin-top:32px; padding-top:24px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
  font-size:0.78rem; color:var(--text-mid);
}
.hero-meta strong { color:var(--navy); }
.hero-img {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  font-size:6rem;
  align-self:center;
  margin:24px;
  border-radius:16px;
  border:1px solid var(--border);
  aspect-ratio:1/1;
}
.hero-img::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 40% 40%, rgba(246,166,126,0.2) 0%, transparent 65%);
  border-radius:16px;
}
.hero-img img { width:100%; height:100%; object-fit:cover; }
.hero-num {
  position:absolute; bottom:16px; right:16px;
  font-size:0.6rem; color:rgba(255,255,255,0.4); letter-spacing:0.1em;
}

/* POSTS HEADER */
.posts-header {
  padding:36px 60px 18px;
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.posts-header h2 {
  font-size:0.65rem; font-weight:700;
  letter-spacing:0.2em; color:var(--text-light); text-transform:uppercase;
}
.posts-count { font-size:0.78rem; color:var(--text-light); }

/* POST ROW */
.post-row {
  display:grid;
  grid-template-columns:1fr 260px;
  min-height:220px;
  border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit;
  cursor:pointer;
  transition:background 0.18s;
}
.post-row:hover { background:var(--cream2); }
.post-row:hover .row-arrow { background:var(--orange-light); transform:translateX(-4px); }
.post-row.blue { background:#fff; }
.post-row.blue .post-row-img { background:linear-gradient(135deg,var(--navy),var(--navy-mid)); }
.post-row.orange { background:var(--orange-light); }
.post-row.orange .post-row-img { background:linear-gradient(135deg,var(--orange-deep),var(--orange)); }
.post-row.orange .row-num { color:var(--orange-deep); }
.post-row.orange .post-row-body p { color:var(--text-mid); }
.post-row.orange .row-time { color:var(--text-light); }
.post-row.orange .row-arrow { border-color:var(--orange-deep); color:var(--orange-deep); }

.post-row-img {
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; position:relative; overflow:hidden;
  border-right:1px solid var(--border);
  aspect-ratio:1/1;
  align-self:center;
  margin:20px;
  border-radius:14px;
  order:2;
}
.post-row-img::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius:14px;
}
.post-row-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

.post-row-body {
  padding:32px 40px 32px 24px;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  order:1;
}
.row-num {
  font-size:0.6rem; font-weight:700;
  color:var(--text-light); letter-spacing:0.15em;
}
.post-row-body h3 {
  font-size:1.1rem; font-weight:900;
  color:var(--navy); line-height:1.38; letter-spacing:-0.01em;
}
.post-excerpt {
  font-size:0.85rem; line-height:1.7;
  color:var(--text-mid); max-width:500px;
}
.post-excerpt p { margin:0 0 0.25em; }
.post-excerpt p:last-child { margin-bottom:0; }
.row-footer {
  display:flex; align-items:center; justify-content:space-between; margin-top:4px;
}
.row-time { font-size:0.72rem; color:var(--text-light); }
.row-arrow {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-mid); font-size:0.85rem; transition:all 0.2s;
}

/* LOAD MORE */
.load-more {
  padding:40px; text-align:center;
  border-bottom:1px solid var(--border);
  background:#fff;
}
.load-more-btn {
  background:transparent; color:var(--navy);
  border:1.5px solid var(--border);
  padding:13px 36px; border-radius:50px;
  font-size:0.88rem; font-weight:700; cursor:pointer; font-family:inherit;
  transition:all 0.2s;
}
.load-more-btn:hover { border-color:var(--orange-deep); color:var(--orange-deep); }
.load-more-btn:disabled { opacity:0.4; cursor:default; }

/* CTA */
.cta-strip {
  background:var(--navy);
  padding:44px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.cta-strip h3 { font-size:1.4rem; font-weight:900; color:#fff; }
.cta-strip p { font-size:0.88rem; color:rgba(255,255,255,0.75); margin-top:6px; }
.cta-btn-white {
  background:var(--orange); color:var(--navy);
  border:none; padding:13px 32px; border-radius:50px;
  font-size:0.9rem; font-weight:900; cursor:pointer; font-family:inherit;
  white-space:nowrap; flex-shrink:0; transition:transform 0.2s;
  text-decoration:none; display:inline-block;
}
.cta-btn-white:hover { transform:scale(1.04); }

/* FOOTER */
footer {
  background:var(--cream2);
  padding:32px 60px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--text-mid); font-size:0.8rem;
  border-top:1px solid var(--border);
}
.footer-logo { font-size:1rem; font-weight:900; color:var(--navy); }
.footer-logo span { color:#c46a2a; }

/* EMPTY STATE */
.empty-state {
  padding:80px 60px; text-align:center;
  color:var(--text-mid); background:#fff;
  border-bottom:1px solid var(--border);
}

/* HERO PLACEHOLDER - prevents CLS */
#hero-container { min-height:52vh; background:var(--cream2); border-bottom:1px solid var(--border); }
#hero-container:empty { display:block; }
#hero-container:not(:empty) { min-height:auto; background:none; border-bottom:none; }
#posts-list { min-height:880px; }
#posts-list:not(:empty) { min-height:auto; }

/* SKIP LINK */
.skip-link {
  position:absolute; top:-100px; left:0;
  background:var(--navy); color:#fff;
  padding:12px 24px; z-index:200;
  font-size:0.9rem; font-weight:700;
  text-decoration:none; border-radius:0 0 8px 0;
  transition:top 0.2s;
}
.skip-link:focus { top:0; }

/* MOBILE */
@media(min-width:960px){
  .hero { margin-top:60px; }
}
@media(max-width:768px){
  #hero-container { min-height:calc(100vw + 200px); }
  #hero-container:not(:empty) { min-height:auto; }
  #posts-list { min-height:1800px; }
  #posts-list:not(:empty) { min-height:auto; }
  nav { padding:0 20px; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-img { order:-1; margin:20px 20px 0; width:calc(100% - 40px); aspect-ratio:1/1; font-size:4rem; }
  .hero-content { padding:28px 20px 40px; }
  .posts-header { padding:24px 20px 14px; }
  .post-row { grid-template-columns:1fr; min-height:auto; }
  .post-row-img { order:-1; margin:16px 16px 0; width:calc(100% - 32px); aspect-ratio:1/1; border-right:none; font-size:3rem; }
  .post-row-body { padding:20px 20px 24px; }
  .cta-strip { flex-direction:column; padding:36px 20px; text-align:center; }
  footer { flex-direction:column; gap:10px; padding:24px 20px; }
  .load-more { padding:28px 20px; }
}