/* ============================================================
   Shapes Infinity — blog page layer (layout only)
   The system — chips, hero, cards, pills, banner, footer —
   lives in playground.css. This file only arranges the
   featured panel and the writing-queue rows.
   ============================================================ */

/* ---- featured: art card beside the white featured card ---- */
.featured-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap);
  align-items: stretch;
}
.featured-panel .art-card img { height: 100%; object-fit: cover; }
.featured-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.featured-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); max-width: 22ch; }
.featured-card p { max-width: 56ch; }
.featured-card .pill { margin-top: 26px; }
@media (max-width: 899px) {
  .featured-panel { grid-template-columns: 1fr; }
  .featured-panel .art-card img { height: auto; aspect-ratio: 3 / 2; }
}

/* ---- queue: stacked full-width white rows ---- */
.queue-list { display: grid; gap: 12px; }
.queue-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 18px 24px;
  align-items: center;
}
.queue-row .card-tag { margin-bottom: 0; justify-self: start; }
.queue-row h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-bottom: 6px; }
.queue-row p { max-width: 62ch; }
.queue-row .pill { justify-self: end; white-space: nowrap; }

/* the pills are now published-article links — the shared interactive styling applies */

@media (max-width: 767px) {
  .queue-row { grid-template-columns: 1fr; gap: 12px; }
  .queue-row .pill { justify-self: start; }
}

/* ---- fresh from the console: admin-published posts ---- */
.fresh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap); align-items: start;
}
.fresh-grid .block-card { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.fresh-grid .block-card:hover h3 { color: var(--orange); }
@media (max-width: 1099px) { .fresh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) { .fresh-grid { grid-template-columns: 1fr; } }

/* AR mode: console-published cards hold mostly English content — keep LTR;
   the dir="auto" on inner text still renders Arabic titles correctly */
html[dir="rtl"] .fresh-grid .block-card { direction: ltr; }

/* ---- the latest three: big numbered feature cards ---- */
.sr-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap); align-items: stretch;
}
.feature-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 320px; text-decoration: none; overflow: hidden;
}
.feature-card .feature-num {
  position: absolute; top: -0.18em; inset-inline-end: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4.4rem, 7vw, 7rem); line-height: 1;
  color: var(--ink); opacity: 0.07; pointer-events: none;
}
.feature-card h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); max-width: 18ch; }
.feature-card p { margin-top: 4px; }
.feature-card .pill { margin-top: auto; }
.feature-card .card-tag { margin-bottom: 18px; }
.feature-card:hover h3 { color: #c25400; }
@media (max-width: 1099px) { .feature-grid { grid-template-columns: 1fr; } .feature-card { min-height: 0; } }

/* ---- journal hero: brand band + subscribe ---- */
.journal-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 4vw, 60px); align-items: end;
  background:
    radial-gradient(600px 300px at 90% -20%, rgba(255, 255, 255, 0.25), transparent 60%),
    linear-gradient(135deg, #ff6b00, #ffb21e);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px);
  margin-top: 8px;
  color: #1a1005;
}
.journal-kicker {
  display: inline-block; font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 14px; opacity: 0.85;
}
.journal-hero h1 { font-size: clamp(1.9rem, 4vw, 3.3rem); max-width: 18ch; }
.journal-hero-side p { font-weight: 550; font-size: 0.98rem; line-height: 1.65; max-width: 44ch; }
.subscribe-row {
  display: flex; gap: 8px; margin-top: 18px;
  background: #fff; border-radius: 14px; padding: 6px;
  box-shadow: 0 10px 30px rgba(26, 16, 5, 0.25);
  max-width: 440px;
}
.subscribe-row input[type="email"] {
  flex: 1; min-width: 0; border: 0; background: none;
  font: inherit; font-size: 0.95rem; padding: 10px 14px; color: #1a1005;
}
.subscribe-row input[type="email"]:focus-visible { outline: 2px solid #ff6b00; border-radius: 8px; }
.subscribe-hp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.subscribe-btn {
  border: 0; border-radius: 10px; cursor: pointer;
  background: #1a1005; color: #fff;
  font: inherit; font-weight: 700; font-size: 0.9rem;
  padding: 11px 22px;
  transition: transform var(--dur-tap) var(--ease-fluid), opacity 0.2s;
}
.subscribe-btn:hover { opacity: 0.88; }
.subscribe-btn:active { transform: scale(0.96); }
.subscribe-msg { margin-top: 12px; font-weight: 650; font-size: 0.88rem; }
@media (max-width: 899px) { .journal-hero { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.journal-hero-copy, .journal-hero-side { min-width: 0; }

/* ---- journal grid: image cards ---- */
.journal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 34px); align-items: start;
}
.journal-card { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.journal-thumb {
  display: block; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.journal-thumb img { width: 100%; height: auto; display: block; transition: transform 0.45s var(--ease-fluid); }
.journal-card:hover .journal-thumb img { transform: scale(1.045); }
.journal-meta { font-size: 0.76rem; font-weight: 650; color: var(--muted); margin-bottom: 8px; }
.journal-card h3 { font-size: 1.18rem; line-height: 1.25; }
.journal-card:hover h3 { color: #c25400; }
.journal-card p {
  margin-top: 8px; font-size: 0.92rem; color: var(--muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.journal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.journal-tags span {
  font-size: 0.72rem; font-weight: 650; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 4px 12px;
}
@media (max-width: 1099px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 649px) { .journal-grid { grid-template-columns: 1fr; } }