/* ═══════════════════════════════════════════════════════════════
   IMAHE — image & video hubs
   Tall tool cards mobile · editorial banners desktop
   ═══════════════════════════════════════════════════════════════ */

/* ── mobile-first ── */
.hub-inner { display: flex; flex-direction: column; gap: 14px; }
.hub-inner > .back-tab { align-self: flex-start; }

.hub-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.hub-head .screen-title { margin: 0; }
.hub-inky { display: flex; align-items: center; gap: 8px; }
.hub-speech { font-size: 12px; padding: 8px 10px; max-width: 150px; }
.hub-speech::after { left: 14px; }

.hub-cards { display: flex; flex-direction: column; gap: 20px; }

/* tall tool card */
.hub-tool {
  --tc: var(--riso-pink);
  --tc-dot: var(--halftone);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  min-height: 132px; padding: 18px 18px 18px 28px;
  background: var(--paper-2);
  border: var(--border-ink); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none;
  box-shadow: 6px 6px 0 var(--tc);
  transition: transform 0.1s, box-shadow 0.1s;
}
.hub-tool--pink { --tc: var(--riso-pink); --tc-dot: #FFD2DC; transform: rotate(-1deg); }
.hub-tool--yellow { --tc: var(--riso-yellow); --tc-dot: #FFE8B0; transform: rotate(1deg); }
.hub-tool--teal { --tc: var(--riso-teal); --tc-dot: #BCE8E2; transform: rotate(-1deg); }
.hub-tool--blue { --tc: var(--riso-blue); --tc-dot: #CDD6FF; transform: rotate(-1deg); }
.hub-tool:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 8px 8px 0 var(--tc); }
.hub-tool:active { transform: translate(4px, 4px) rotate(0deg); box-shadow: 1px 1px 0 var(--tc); }
.hub-tool::before { /* ink-edged riso spine */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: var(--tc);
  border-right: 2.5px solid var(--ink-line);
}

.tc-emoji {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  font-size: 40px; line-height: 1;
  background-image: radial-gradient(var(--tc-dot) 1.8px, transparent 2px);
  background-size: 9px 9px;
}
.tc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; }
.tc-title { font-size: 27px; }
.tc-sub { font-family: var(--f-head); font-weight: 600; font-size: 12.5px; color: var(--newsprint-mute); }
.tc-text .cost-badge { margin-top: 4px; }
.tc-arrow { font-size: 30px; transition: transform 0.15s; }
.hub-tool:hover .tc-arrow { transform: translateX(6px); }
.tc-no { display: none; }

/* locked SOON cards — .soon-card skin from app.css + this flex frame */
.hub-soon {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 132px;
  padding: 18px 18px 18px 28px;
  border-radius: var(--radius-lg);
  text-align: left; cursor: pointer;
}
.hub-soon .tc-title { font-size: 24px; color: var(--ink-soft); }
.hub-soon .tc-arrow { font-size: 22px; }

/* ═══ DESKTOP ≥1024px — editorial banners ═══ */
@media (min-width: 1024px) {
  .hub-inner { padding: 30px 40px 48px; gap: 18px; }
  .hub-head { align-items: flex-end; margin-bottom: 6px; }
  .hub-head .screen-title { font-size: 56px; }
  .hub-speech { font-size: 14px; max-width: 220px; }

  .hub-cards { gap: 28px; }
  .hub-tool, .hub-soon { min-height: 176px; padding: 26px 34px 26px 44px; gap: 26px; }

  /* alternate: even banners flip emoji to the right, spine to the right */
  .hub-cards > :nth-child(even) .tc-emoji { order: 1; }
  .hub-cards > :nth-child(even) .tc-arrow { order: 2; }
  .hub-cards > .hub-tool:nth-child(even) { padding: 26px 44px 26px 34px; }
  .hub-cards > .hub-tool:nth-child(even)::before {
    left: auto; right: 0;
    border-right: none; border-left: 2.5px solid var(--ink-line);
  }

  .tc-emoji { width: 128px; height: 128px; font-size: 64px; }
  .tc-title { font-size: 44px; }
  .tc-sub { font-size: 14px; }
  .hub-soon .tc-title { font-size: 36px; }

  .tc-no {
    display: block; position: absolute; top: 14px; right: 20px;
    font-size: 12px; letter-spacing: 0.12em; color: var(--newsprint-mute);
  }
  .hub-cards > :nth-child(even) .tc-no { right: auto; left: 20px; }
}