/* Coin Blog UI polish: homepage hierarchy, engagement widgets and mobile swipe reader. */

/* Trending now: make it feel like an editorial section, not a foreign dashboard card. */
.cb-popular-section{
  margin:28px 0 34px!important;
  padding:22px 0 28px!important;
  border:0!important;
  border-top:1px solid var(--border)!important;
  border-bottom:1px solid var(--border)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.cb-popular-head{align-items:center!important;margin-bottom:15px!important}
.cb-popular-head h2{font-size:clamp(25px,2.4vw,33px)!important;letter-spacing:-.02em}
.cb-popular-head p{font-size:12px!important;color:var(--text3)!important;opacity:1!important}
.cb-popular-tabs{
  gap:3px!important;
  padding:3px!important;
  border:1px solid var(--border)!important;
  background:var(--surf2)!important;
}
.cb-popular-tab{padding:7px 12px!important;color:var(--text2)!important}
.cb-popular-tab.active{
  background:var(--coin-gold,#f5b51b)!important;
  color:#111820!important;
  box-shadow:0 4px 12px rgba(245,181,27,.2)
}
.cb-popular-list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:12px!important}
.cb-popular-item{
  grid-template-columns:32px 104px minmax(0,1fr)!important;
  gap:12px!important;
  min-height:88px;
  padding:10px 12px!important;
  border-radius:8px!important;
  border:1px solid var(--border)!important;
  background:var(--surf)!important;
  box-shadow:none!important;
}
.cb-popular-item:hover{border-color:rgba(232,145,0,.5)!important;box-shadow:0 10px 24px rgba(17,24,32,.08)!important}
.cb-popular-rank{font:700 13px/1 var(--mono,"JetBrains Mono",monospace)!important;color:var(--coin-red,#be1e2d)!important}
.cb-popular-thumb{width:104px!important;height:66px!important;border-radius:6px!important}
.cb-popular-copy em{font-size:9px!important;color:var(--text3)!important;opacity:1!important}
.cb-popular-copy strong{font-size:14px!important;line-height:1.34!important}
.cb-popular-empty{border-radius:8px!important;background:var(--surf2)!important}
.dark .cb-popular-section{background:transparent!important}
.dark .cb-popular-item{background:var(--surf)!important}

/* Quote sharing destination chooser. */
.cb-share-destinations{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surf2)}
.cb-share-destinations[hidden]{display:none!important}
.cb-share-destinations h3{margin:0 0 10px;font:400 21px/1.1 Forum,Georgia,serif}
.cb-share-destination-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cb-share-destination{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surf);
  color:var(--text);text-decoration:none;cursor:pointer;font:700 11px/1.2 var(--mono,"JetBrains Mono",monospace)
}
.cb-share-destination:hover{border-color:rgba(232,145,0,.55);background:rgba(245,181,27,.09)}
.cb-share-destination svg{width:16px;height:16px;fill:currentColor}
.cb-share-copy-status{min-height:18px;margin:8px 2px 0;font-size:11px;color:var(--text3)}

/* The floating next-story panel is intentionally removed. */
.cb-next-panel{display:none!important}

/* Support widget: keep the whole unit and its mascot optically centered. */
.cb-support-cta{right:58px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important}
.cb-support-squirrel{display:block!important;width:180px!important;max-width:none!important;height:auto!important;margin:-2px auto -2px!important;transform:translate(-10px,8px)!important;pointer-events:none!important}

/* Clear, consistent section actions instead of tiny red text. */
.home-section-link,.rail-see-all{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:34px!important;padding:0 14px!important;border:1px solid rgba(17,24,32,.16)!important;
  border-radius:999px!important;background:linear-gradient(180deg,#fff,#edf0f3)!important;
  color:#25313d!important;text-decoration:none!important;text-transform:none!important;
  letter-spacing:0!important;font:700 11px/1 var(--mono,"JetBrains Mono",monospace)!important;
  box-shadow:0 7px 18px rgba(17,24,32,.07)!important;white-space:nowrap
}
.home-section-link:hover,.rail-see-all:hover{border-color:rgba(232,145,0,.55)!important;color:#111820!important;background:linear-gradient(180deg,#fff8e7,#f5e6bc)!important}
.dark .home-section-link,.dark .rail-see-all{background:linear-gradient(180deg,#27323d,#1b242e)!important;color:#e6ebf0!important;border-color:rgba(255,255,255,.18)!important}
.dark .home-section-link:hover,.dark .rail-see-all:hover{background:linear-gradient(180deg,#3b3420,#28271f)!important;color:#fff!important;border-color:rgba(245,181,27,.45)!important}
.home-feature-list-title,.home-topic-title{
  display:inline-flex!important;align-items:center!important;width:max-content;max-width:100%;
  min-height:28px;padding:0 10px!important;margin:0 0 10px!important;border-radius:999px;
  background:rgba(245,181,27,.13)!important;color:var(--text)!important;
  font:700 10px/1 var(--mono,"JetBrains Mono",monospace)!important;text-transform:none!important;letter-spacing:.02em!important
}

/* Market Focus: one large editorial card plus four genuinely smaller cards. */
@media(min-width:1101px){
  .home-mosaic{
    display:grid!important;
    grid-template-columns:minmax(0,.48fr) minmax(0,.48fr) minmax(0,1.04fr)!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;align-items:stretch!important
  }
  .home-mosaic>.home-card-primary{grid-column:3!important;grid-row:1/3!important;min-height:430px!important}
  .home-mosaic>.home-mosaic-side{display:contents!important}
  .home-mosaic>.home-mosaic-side>*{min-height:208px!important;display:grid!important;grid-template-rows:116px minmax(0,1fr)!important}
  .home-mosaic>.home-mosaic-side>*:nth-child(1){grid-column:1;grid-row:1}
  .home-mosaic>.home-mosaic-side>*:nth-child(2){grid-column:2;grid-row:1}
  .home-mosaic>.home-mosaic-side>*:nth-child(3){grid-column:1;grid-row:2}
  .home-mosaic>.home-mosaic-side>*:nth-child(4){grid-column:2;grid-row:2}
  .home-mosaic>.home-mosaic-side>*>.home-card-media{height:116px!important;min-height:116px!important;aspect-ratio:auto!important}
  .home-mosaic>.home-mosaic-side>*>.home-card-media img{width:100%!important;height:100%!important;object-fit:cover!important}

  /* Feature sections alternate sides so the homepage reads as a zigzag instead
     of one straight column of banners. _home.js already tags every second
     section with .reverse (currently Institutional Money); the rule that used
     to live here forced the same hierarchy on all of them and cancelled it out. */
  .home-feature-row,.home-feature-row.reverse{
    display:grid!important;
    gap:16px!important;align-items:stretch!important
  }
  .home-feature-row{grid-template-columns:minmax(0,1.03fr) minmax(0,1.12fr)!important}
  .home-feature-row>.home-feature-side{grid-column:1!important;grid-row:1!important;min-width:0}
  .home-feature-row>.home-feature-main{grid-column:2!important;grid-row:1!important;min-width:0}
  /* Mirrored variant: lead banner left, compact 2x2 grid right. */
  .home-feature-row.reverse{grid-template-columns:minmax(0,1.12fr) minmax(0,1.03fr)!important}
  .home-feature-row.reverse>.home-feature-main{grid-column:1!important}
  .home-feature-row.reverse>.home-feature-side{grid-column:2!important}
  .home-feature-main>.home-card{height:100%!important;min-height:430px!important}
  .home-feature-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .home-feature-list>.home-topic-item{min-height:196px!important}
  .home-feature-list>.home-topic-item>img,.home-feature-list>.home-topic-item>.home-topic-ph{height:112px!important;aspect-ratio:auto!important;object-fit:cover!important}
  .home-feature-list>.home-topic-item>span{padding:11px 12px!important;gap:5px!important}
  .home-feature-list>.home-topic-item strong{font-size:16px!important;line-height:1.18!important}

  /* Shorts News: mirrored against Market Focus above it, so the lead banner
     moves to the left column and the small tiles to the right. Overrides the
     right-hand placement in insights/home-layout-tuning.css. */
  .home-shorts-strip{grid-template-columns:minmax(0,1.05fr) minmax(0,.475fr) minmax(0,.475fr)!important}
  .home-shorts-strip>.home-short-tile:first-child{grid-column:1!important}
  .home-shorts-strip>.home-short-tile:nth-child(2){grid-column:2!important}
  .home-shorts-strip>.home-short-tile:nth-child(3){grid-column:3!important}

  /* Shorts: keep the lower small card the same scale as the two upper cards. */
  .home-shorts-strip>.home-short-tile:nth-child(4){
    grid-column:2/4!important;grid-row:2!important;justify-self:center!important;
    width:calc(50% - 7px)!important;max-width:none!important;
    grid-template-columns:1fr!important;grid-template-rows:116px minmax(0,1fr)!important
  }
  .home-shorts-strip>.home-short-tile:nth-child(4)>img,
  .home-shorts-strip>.home-short-tile:nth-child(4)>.home-short-tile-ph{
    width:100%!important;height:116px!important;min-height:116px!important;aspect-ratio:auto!important;object-fit:cover!important
  }
  .home-shorts-strip>.home-short-tile:nth-child(4)>.home-short-tile-copy{align-content:start!important;padding:12px 13px!important}

  /* More To Read: mirrored against Payments & Stablecoins above it - lead
     banner left, two compact cards stacked right. */
  .home-wide-strip{
    display:grid!important;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:14px!important
  }
  .home-wide-strip>*:first-child{grid-column:1!important;grid-row:1/3!important;min-height:430px!important}
  .home-wide-strip>*:nth-child(2){grid-column:2!important;grid-row:1!important;min-height:208px!important}
  .home-wide-strip>*:nth-child(3){grid-column:2!important;grid-row:2!important;min-height:208px!important}
  .home-wide-strip>*:nth-child(2) .home-card-title,.home-wide-strip>*:nth-child(3) .home-card-title{font-size:22px!important}
}

/* 821-1100px: the explicit grid placement above stops applying here, so without
   this block the feature sections would swap sides every time the window
   crosses 1100px. Same rhythm, expressed with order instead of grid columns. */
@media(min-width:821px) and (max-width:1100px){
  .home-feature-row{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important}
  .home-feature-row>.home-feature-side{order:0!important}
  .home-feature-row>.home-feature-main{order:1!important}
  .home-feature-row.reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important}
  .home-feature-row.reverse>.home-feature-main{order:0!important}
  .home-feature-row.reverse>.home-feature-side{order:1!important}
}

/* Dedicated mobile swipe reader. The normal archive remains untouched. */
.cb-swipe-reader{position:fixed;inset:0;z-index:2147483400;background:#0b1220;color:#f5f7fb;display:flex;flex-direction:column}
.cb-swipe-reader[hidden]{display:none!important}
.cb-swipe-reader-head{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(11,18,32,.96);backdrop-filter:blur(12px)}
.cb-swipe-reader-title{font:800 13px/1 var(--mono,"JetBrains Mono",monospace);text-transform:uppercase;letter-spacing:.04em;color:#f5b51b}
.cb-swipe-reader-progress{font:700 11px/1 var(--mono,"JetBrains Mono",monospace);color:rgba(255,255,255,.7)}
.cb-swipe-reader-close{width:36px;height:36px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:22px;cursor:pointer}
.cb-swipe-reader-feed{flex:1;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.cb-swipe-reader-feed::-webkit-scrollbar{display:none}
.cb-swipe-reader-card{min-height:calc(100dvh - 58px);box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;padding:18px 16px 28px;display:flex;flex-direction:column;justify-content:center;gap:13px;background:linear-gradient(180deg,#0b1220 0%,#101c2d 100%)}
.cb-swipe-reader-card img{display:block;width:100%;max-height:43dvh;object-fit:cover;border-radius:14px;background:rgba(255,255,255,.04)}
.cb-swipe-reader-card time,.cb-swipe-reader-card .cb-swipe-meta{font:700 10px/1.3 var(--mono,"JetBrains Mono",monospace);text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.58)}
.cb-swipe-reader-card h2{margin:0;font:700 clamp(26px,7vw,38px)/1.08 Forum,Georgia,serif;color:#fff}
.cb-swipe-reader-card p{margin:0;font-size:16px;line-height:1.58;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.cb-swipe-reader-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cb-swipe-reader-actions a,.cb-swipe-reader-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.07);color:#fff;text-decoration:none;font:700 11px/1 var(--mono,"JetBrains Mono",monospace);cursor:pointer}
.cb-swipe-reader-actions .primary{background:#f5b51b;color:#111820;border-color:#f5b51b}
body.cb-swipe-reader-open{overflow:hidden!important}
body.cb-swipe-reader-open .cb-support-cta{display:none!important}

@media(max-width:820px){
  .cb-popular-section{padding-top:18px!important}
  .cb-popular-head{align-items:flex-start!important}
  .cb-popular-list{grid-template-columns:1fr!important}
  .home-section-link,.rail-see-all{min-height:32px!important;padding:0 12px!important;font-size:10px!important}
  .home-section-head{align-items:flex-start!important;gap:12px!important}
  .home-mosaic,.home-feature-row,.home-feature-row.reverse,.home-wide-strip{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto!important}
  .home-mosaic>.home-card-primary,.home-mosaic>.home-mosaic-side,.home-feature-row>.home-feature-side,.home-feature-row>.home-feature-main,.home-wide-strip>*{grid-column:1!important;grid-row:auto!important}
  .home-feature-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cb-support-cta{right:38px!important}
  .cb-support-squirrel{width:150px!important;transform:translate(-8px,7px)!important}
}
@media(max-width:560px){
  .cb-share-destination-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-popular-item{grid-template-columns:28px 78px minmax(0,1fr)!important}
  .cb-popular-thumb{width:78px!important;height:56px!important}
  .home-section-head{display:flex!important;flex-direction:column!important}
  .home-feature-list{grid-template-columns:1fr!important}
  .cb-support-cta{right:34px!important;bottom:13px!important}
  .cb-support-squirrel{width:144px!important;transform:translate(-7px,6px)!important}
}
@media(prefers-reduced-motion:reduce){.cb-swipe-reader-feed{scroll-behavior:auto!important}}