/* static/dash/finytnews.css — NO RADIUS + MORE BLACK (tile/seam look)
   UPDATED:
   - ✅ carousel arrows removed in renderer (no arrow CSS needed)
   - ✅ yt_main-style GRID overlay on thumbnails
   - ✅ title centered ON thumbnail in transparent framed plate (real text node)
   - ✅ hard no radius
*/

.shell-main .finytnews-root{
  width: 100%;
  box-sizing: border-box;
  margin: 14px 0 18px 0;
  padding: 14px;

  border-radius: 0;
  background: #000;
  color: #fff;

  min-width: 0;
}

/* header */
.shell-main .finytnews-header{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.shell-main .finytnews-title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shell-main .finytnews-subrow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  opacity: 0.85;
  font-size: 12px;
}

.shell-main .finytnews-subtitle{
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0;
  background: rgba(0,0,0,0.35);
}

/* carousel wrap */
.shell-main .finytnews-carousel-wrap{
  position: relative;
  padding: 10px 0;
}

/* carousel */
.shell-main .finytnews-carousel{
  display: flex;
  gap: 1px; /* seam look */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  padding: 0;
  margin: 0;
  min-width: 0;

  background: #000;
}

.shell-main .finytnews-carousel::-webkit-scrollbar{ height: 10px; }
.shell-main .finytnews-carousel::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 0;
}
.shell-main .finytnews-carousel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.20);
  border-radius: 0;
}

/* card */
.shell-main .finytnews-card{
  flex: 0 0 420px;
  scroll-snap-align: start;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;

  padding: 12px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  min-height: 720px;
  height: auto;
  overflow: visible;
}

/* TOP */
.shell-main .finytnews-card-top{
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
}

/* top chips row */
.shell-main .finytnews-topchips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 0.92;
}

/* chip style */
.shell-main .finytnews-chip{
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 4px 10px;

  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0;
  background: rgba(0,0,0,0.55);

  max-width: 100%;
}

.shell-main .finytnews-chip-k{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.70;
  white-space: nowrap;
}

.shell-main .finytnews-chip-v{
  font-size: 12px;
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─────────────────────────
   THUMB: yt_main-like box + grid + centered title plate
   Markup:
     a.finytnews-thumblink (or div ...nolink)
       img.finytnews-thumb   OR div.finytnews-thumb--empty
       div.finytnews-thumbplate > span.finytnews-thumbtext
   ───────────────────────── */

.shell-main .finytnews-thumblink{
  position: relative;
  display: block;
  width: 100%;

  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid rgba(255,255,255,0.10);
  background: #000;
  text-decoration: none;
}

/* image fills the box (edge-to-edge) */
.shell-main .finytnews-thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  background: rgba(0,0,0,0.35);
  z-index: 0;
}

/* empty thumb placeholder */
.shell-main .finytnews-thumb--empty{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  z-index: 0;
}

/* GRID overlay (same pattern as yt_main) */
.shell-main .finytnews-thumblink::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .35;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.14) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 16px);
}

/* centered plate */
.shell-main .finytnews-thumbplate{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;

  width: min(96%, 660px);
  max-height: 78%;
  padding: 12px 16px;
  box-sizing: border-box;

  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;

  text-align: center;
  pointer-events: none; /* click passes through */
  overflow: visible;
}

/* title text inside plate (auto-fit-ish, no clamp) */
.shell-main .finytnews-thumbtext{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  font-size: clamp(11px, 1.15vw + 8px, 16px);
  line-height: 1.10;

  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 0 rgba(0,0,0,0.78);

  display: block;
  white-space: normal;
  text-overflow: clip;

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* BODY */
.shell-main .finytnews-body{
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

/* details styling */
.shell-main .finytnews-det{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.55);
  border-radius: 0;
  padding: 6px 10px;
}

.shell-main .finytnews-sum{
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
  list-style: none;
}
.shell-main .finytnews-sum::-webkit-details-marker{ display:none; }

.shell-main .finytnews-sec-text{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.95;
}

/* UL + quotes */
.shell-main .finytnews-ul{
  margin: 10px 0 0 0;
  padding-left: 18px;
}
.shell-main .finytnews-li{
  margin: 0 0 6px 0;
  font-size: 13px;
  line-height: 1.3;
}

.shell-main .finytnews-quotes{
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.shell-main .finytnews-quote{
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.95;

  padding: 8px 10px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.55);
}

/* BOTTOM small box */
.shell-main .finytnews-bottombox{
  margin-top: 10px;

  display: grid;
  gap: 8px;

  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  background: rgba(0,0,0,0.70);
}

/* misc */
.shell-main .finytnews-empty{ opacity: 0.75; }
.shell-main .finytnews-warn{ margin-top: 10px; opacity: 0.9; }
.shell-main .finytnews-warn-sum{ cursor:pointer; }
.shell-main .finytnews-err{ font-size: 12px; opacity: 0.8; }


/* PATCH: darken the transparent title plate (frame) on thumbnail */

.shell-main .finytnews-thumbplate{
  background: rgba(0,0,0,0.92);              /* was 0.55 */
  border: 1px solid rgba(255,255,255,0.18);  /* was 0.14 (a bit clearer but still subtle) */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset; /* was 0.10 */
}

/* (optional) slightly stronger text for contrast */
.shell-main .finytnews-thumbtext{
  color: rgba(255,255,255,0.94);             /* was 0.92 */
  text-shadow: 0 1px 0 rgba(0,0,0,0.86);     /* was 0.78 */
}