/*
 * DigiDollar - [dd_blog_latest] homepage strip.
 * Everything scoped under .ddblh. Tokens mirror dd-bloghub.css.
 * Dark mode via html[data-dracula-scheme="dark"].
 * Hardened against theme content-image rules (.main-article img, div.text img)
 * and the global time{display:none!important} option.
 */

.ddblh{
  --g1:#F8D277;--g2:#E9AE1E;--g3:#C7860C;
  --ink:#2A2012;--muted:rgba(42,32,18,.62);--muted2:rgba(42,32,18,.63);
  --panel:#FFFFFF;--panel2:#FBF4E6;
  --line:rgba(185,125,10,.16);--line2:rgba(185,125,10,.32);
  --news:#C43D2B;--news-soft:#FDEDE9;
  /* Elevation, in two layers. The old single layer was 0 14px 36px -22px:
     a -22px spread pulls the shadow 22px inside the card on every side, so it
     stopped short of the rounded corners and read as a cropped smear under the
     card rather than as the card sitting above the page (owner, 2026-08-27).
     A contact layer that hugs the edge plus a soft ambient layer that reaches
     past the corners is what makes a card look lifted instead of stamped. */
  --shadow:0 1px 2px rgba(120,84,10,.08),0 10px 30px -10px rgba(150,100,12,.28);
  --shadow-lift:0 2px 4px rgba(120,84,10,.1),0 20px 46px -12px rgba(150,100,12,.36);
  direction:rtl;margin:clamp(26px,3.2vw,34px) 0 44px;color:var(--ink);
  font-family:inherit;line-height:1.75;-webkit-font-smoothing:antialiased}
html[data-dracula-scheme="dark"] .ddblh{
  --ink:#F2EBDC;--muted:rgba(242,235,220,.6);--muted2:rgba(242,235,220,.38);
  --panel:rgba(255,247,230,.05);--panel2:rgba(255,247,230,.08);
  --line:rgba(232,184,75,.15);--line2:rgba(232,184,75,.32);
  --news:#FF7A5C;--news-soft:rgba(255,122,92,.13);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 34px -12px rgba(0,0,0,.55);
  --shadow-lift:0 2px 5px rgba(0,0,0,.5),0 24px 56px -14px rgba(0,0,0,.68)}
.ddblh *{box-sizing:border-box}

/* survive theme option "disable date globally" (time{display:none!important}) */
.ddblh time{display:inline!important}

/* survive content-image rules: gold frame, 15px radius, width cap, height:auto */
.ddblh img{
  width:100%!important;height:100%!important;max-width:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  margin:0!important;padding:0!important;object-fit:cover;display:block}

/* ---------- header row ----------
   Deliberately the same shape as the market-pulse header above it: title at
   the start, a quiet action at the end, one plain hairline underneath.
   Was: a gold-gradient «بلاگ دیجی دلار» pill stacked over the title (the
   eyebrow-pill pattern banned in CLAUDE.md) plus a heavy shadowed capsule
   button, which together cost ~30px of extra height and still left the two
   ends of the row floating either side of an empty gap. The hairline does
   the binding now, so nothing needs decorating. */
.ddblh-head{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px 16px;
  padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:17px}
.ddblh-title{margin:0!important;font-size:clamp(18px,2.2vw,23px);font-weight:800;
  color:var(--ink)!important;line-height:1.35}
.ddblh-all{display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--g3)!important;text-decoration:none!important;
  transition:color .22s ease}
.ddblh-all svg{width:15px;height:15px;transition:transform .22s ease}
.ddblh-all:hover{color:var(--ink)!important}
.ddblh-all:hover svg{transform:translateX(-3px)}
/* --g1..--g3 aren't re-tokenised for dark, and #C7860C goes muddy there */
html[data-dracula-scheme="dark"] .ddblh-all{color:var(--g2)!important}
html[data-dracula-scheme="dark"] .ddblh-all:hover{color:var(--ink)!important}

/* ---------- layout ---------- */
.ddblh-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.ddblh-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:860px){.ddblh-grid{grid-template-columns:1fr}}

/* ---------- desktop full-bleed ----------
   The RTL theme caps the content column at 800px
   (`html[dir=rtl] body .no-sidebar div.left-content{max-width:800px}` in the
   parent theme's rtl.min.css), which left this strip far narrower than the
   marketing sections around it. Those escape with the same 100vw breakout
   used by .dd-section in dd-widgets.css; mirror it here and cap the inner
   rows at 1180px so the strip lines up with its neighbours exactly.
   overflow-x:clip (not hidden) keeps the hover lift shadows unclipped. */
@media (min-width:1024px){
  /* box-sizing is load-bearing and was missing: .dd-section in dd-widgets.css
     sets it, this rule said it "mirrors" that breakout, and without it the
     content-box default made the strip 100vw PLUS its 2x40px padding - 80px
     wider than the viewport, which was most of the home page's horizontal
     scrollbar. */
  .ddblh{position:relative;overflow-x:clip;box-sizing:border-box;
    width:calc(100vw - var(--dd-sbw, 0px));max-width:calc(100vw - var(--dd-sbw, 0px));
    margin-inline:calc(50% - (100vw - var(--dd-sbw, 0px)) / 2);
    padding-inline:clamp(16px,4vw,40px)}
  .ddblh-head,.ddblh-grid{max-width:1180px;margin-inline:auto}

  /* more room -> wider hero, roomier rows, equal-height columns */
  .ddblh-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:stretch}
  .ddblh-side{gap:14px}
  /* four rows share the hero's height now, so the floor has to come down or
     the side column outgrows the hero and the two tops stop lining up */
  .ddblh-row{flex:1 1 0;min-height:108px}
  .ddblh-row-media{flex-basis:170px;height:auto;align-self:stretch;
    margin-block:10px;margin-inline-start:10px}
  .ddblh-row-body{padding:14px 18px}
  .ddblh-row-title{font-size:15.5px}
  .ddblh-hero-body{gap:11px;padding:22px 24px 24px}
  .ddblh-excerpt{font-size:14.5px;-webkit-line-clamp:3}
}

/* ---------- hero card ---------- */
.ddblh-hero{position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ddblh-hero:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line2)}
/* No accent rail on the hero card. A 3px gold gradient strip used to sit on
   top edge here; coloured accent bars are banned (DESIGN-BANS.md) - the card
   is carried by its hairline border, image and type weight alone. */
.ddblh-hero-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,#FBF4E6,#F3E3BE)}
.ddblh-hero-media img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.ddblh-hero:hover .ddblh-hero-media img{transform:scale(1.045)}
/* .ddblh-shine is gone (2026-08-27). It was a dark gradient painted over the
   bottom 45% of the cover art, and because the media box ends there it stopped
   dead at the image's own edge - a shadow with a straight cut across it, which
   is what the owner kept reporting. Nothing sat on top of it either: the
   «مقاله» badge is at the top and the title is in the body below, so it was
   darkening the artwork to make a caption legible that was never there.
   Decoration with no meaning - DESIGN-BANS.md says delete it, so it is deleted
   rather than softened. The span is still emitted and now paints nothing. */
.ddblh-hero-body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;flex:1}
.ddblh-hero-title{margin:0!important;font-size:clamp(16.5px,2.2vw,21px);font-weight:900;line-height:1.65}
.ddblh-hero-title a{color:var(--ink)!important;text-decoration:none!important;
  background-image:linear-gradient(90deg,var(--g2),var(--g2));background-repeat:no-repeat;
  background-size:0% 2px;background-position:100% 100%;transition:background-size .35s ease,color .2s ease}
.ddblh-hero-title a:hover{color:var(--g3)!important;background-size:100% 2px}
.ddblh-excerpt{margin:0!important;font-size:13.8px;color:var(--muted);line-height:1.95;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ddblh-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;align-self:flex-start;
  font-size:13px;font-weight:800;color:#fff!important;text-decoration:none!important;
  background:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3));
  border-radius:999px;padding:9px 20px;
  /* A -8px spread on a 41px-tall button shrinks the shadow box 8px on every
     side, and the 20px blur only reaches 10px back out - so ~2px of shadow
     survived and the button read as a flat sticker with its shadow cut off.
     Contact layer + ambient layer, spread kept small enough that the shadow
     clears the button's own edge. */
  box-shadow:0 2px 4px rgba(150,100,12,.18),0 10px 22px -6px rgba(199,134,12,.45);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.ddblh-more svg{width:15px;height:15px;transition:transform .22s ease}
.ddblh-more:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 3px 6px rgba(150,100,12,.2),0 16px 30px -8px rgba(199,134,12,.55)}
.ddblh-more:hover svg{transform:translateX(-3px)}

/* ---------- compact rows ---------- */
.ddblh-row{display:flex;gap:14px;align-items:stretch;flex:0 0 auto;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ddblh-row:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line2)}
.ddblh-row-media{position:relative;flex:0 0 148px;height:112px;align-self:center;
  margin-inline-start:11px;border-radius:13px;overflow:hidden;
  background:linear-gradient(135deg,#FBF4E6,#F3E3BE)}
.ddblh-row-media img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.ddblh-row:hover .ddblh-row-media img{transform:scale(1.06)}
@media (max-width:480px){.ddblh-row-media{flex-basis:118px;min-height:92px}}
.ddblh-row-body{display:flex;flex-direction:column;justify-content:center;gap:7px;
  padding:13px 16px;min-width:0}
.ddblh-row-title{margin:0!important;font-size:14.5px;font-weight:800;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ddblh-row-title a{color:var(--ink)!important;text-decoration:none!important;transition:color .2s ease}
.ddblh-row-title a:hover{color:var(--g3)!important}

/* ---------- badges + meta ---------- */
.ddblh-badge{position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  font-size:11.5px;font-weight:800;color:var(--g3);
  background:rgba(255,253,247,.95);border:1px solid var(--line2);
  border-radius:999px;padding:3px 12px;backdrop-filter:blur(4px)}
.ddblh-badge--news{color:var(--news);background:var(--news-soft);border-color:rgba(196,61,43,.3)}
/* تحلیل sits between the two: analytical, not breaking news. */
.ddblh-badge--analysis{color:#1f5fa8;background:rgba(37,99,168,.11);border-color:rgba(37,99,168,.3)}
.ddblh-badge--sm{top:8px;inset-inline-start:8px;font-size:10.5px;padding:2px 9px}
html[data-dracula-scheme="dark"] .ddblh-badge{background:rgba(24,18,8,.85)}
.ddblh-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:12px;font-weight:600;color:var(--muted2)}
.ddblh-meta time{color:#8A6200;font-weight:800;font-variant-numeric:tabular-nums}
.ddblh-sep{width:4px;height:4px;border-radius:50%;background:var(--line2)}
.ddblh-views{display:inline-flex;align-items:center;gap:4px}
.ddblh-views svg{width:14px;height:14px}

/* ---------- no-image fallback ---------- */
.ddblh-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(90% 120% at 78% -10%,rgba(233,174,30,.3),transparent 55%),
    linear-gradient(135deg,#FBF4E6,#F0DCAE)}
.ddblh-noimg img{width:64px!important;height:64px!important;object-fit:contain;
  mix-blend-mode:multiply;opacity:.9}

@media (prefers-reduced-motion:reduce){
  .ddblh *,.ddblh *::before{animation:none!important;transition:none!important}
}