/* ════════════════════════════════════════════════════════════
   BYTES YATRA — ARTICLE TOOLS
   Floating share bar (views, share, zoom) + responsive post content.
   Loaded on single posts only (see by_scripts in functions.php)
   ════════════════════════════════════════════════════════════ */

/* ── Zoom (A− / A+) ─────────────────────────────────────────────
   article.js sets --by-zoom on .by-article. CSS zoom scales text,
   tables and images together and reflows them to the column width,
   so nothing overflows sideways. */
.by-article__body,
.by-article .by-toc,
.by-article .by-specs-section { zoom:var(--by-zoom, 1); }

/* ── View count under the title ─────────────────────────────── */
.by-article__views {
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.5rem;
  font-size:.85rem; font-weight:600; color:var(--by-text-muted);
}
.by-article__views i { color:var(--by-primary); }
.by-article__views #by-view-count { color:var(--by-text); font-weight:700; }

/* ── Floating bar ────────────────────────────────────────────────
   Round buttons floating at mid-height with no box behind them: left side
   on desktop, laptop and tablet; right edge on phones. No column is
   reserved — the article keeps its full width and the buttons float over
   it. The bottom of the screen is left free for the sticky ad. */
.by-float {
  --fb-size: 40px;
  position:fixed; z-index:850;
  top:50%; transform:translateY(-50%);
  left:max(10px, calc((100vw - var(--by-container, 1280px)) / 2 - 68px));
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:0;
  background:transparent;
  font-family:var(--by-body-font);
  transition:opacity .2s;
}
.by-float.is-hidden { opacity:0; pointer-events:none; }
.by-float__btn {
  width:var(--fb-size); height:var(--fb-size); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; padding:0; cursor:pointer;
  font-size:1.05rem; color:#fff; text-decoration:none;
  box-shadow:0 2px 8px rgba(17,24,39,.25);
  transition:transform .15s ease, filter .15s ease;
}
.by-float__btn:hover { transform:scale(1.08); filter:brightness(1.08); color:#fff; }
.by-float__btn:focus-visible { outline:2px solid var(--by-primary); outline-offset:2px; }
.by-float__btn--fb   { background:#1877F2; }
.by-float__btn--msg  { background:linear-gradient(45deg,#0099FF,#A033FF 60%,#FF5280); }
.by-float__btn--cp   { background:#4B5563; }
.by-float__btn--wa   { background:#25D366; }

.by-float__sep { display:none; }

.by-float__zoom {
  width:var(--fb-size); height:var(--fb-size); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--by-border); border-radius:50%;
  background:var(--by-surface, #fff); color:var(--by-text);
  font-weight:800; font-size:.8rem; cursor:pointer; padding:0;
  box-shadow:0 2px 8px rgba(17,24,39,.2);
  transition:background .15s, color .15s;
}
.by-float__zoom:hover:not(:disabled) { background:var(--by-primary); color:#fff; border-color:var(--by-primary); }
.by-float__zoom:disabled { opacity:.4; cursor:default; }
.by-float__zoom sup { font-size:.7em; margin-left:1px; }

/* Toast ("Link copied") */
.by-float-toast {
  position:fixed; left:50%; top:20px; z-index:900;
  transform:translate(-50%, -10px); opacity:0; pointer-events:none;
  background:#111827; color:#fff; font-size:.85rem; font-weight:500;
  padding:.55rem 1rem; border-radius:8px; max-width:calc(100vw - 32px); text-align:center;
  transition:opacity .2s, transform .2s;
}
.by-float-toast.is-visible { opacity:1; transform:translate(-50%, 0); }

/* Laptop / tablet: buttons sit at the left screen edge */
@media (min-width:601px) and (max-width:1439.98px) {
  .by-float { --fb-size:38px; left:8px; }
}

/* Phone: compact buttons on the right edge */
@media (max-width:600px) {
  .by-float { --fb-size: 32px; left:auto; right:6px; gap:.35rem; }
  .by-float__btn { font-size:.9rem; }
  .by-float__zoom { font-size:.72rem; }
}

@media print { .by-float, .by-float-toast { display:none !important; } }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE POST CONTENT — applies to anything added in the editor
   ════════════════════════════════════════════════════════════ */
.by-article__body { min-width:0; }

/* Nothing pasted in (fixed-width divs, images, embeds) may exceed the column */
.by-article__body *:not(table):not(thead):not(tbody):not(tfoot):not(tr):not(th):not(td):not(col):not(colgroup) {
  max-width:100%;
}
.by-article__body a { overflow-wrap:anywhere; }

/* Images & figures */
.by-article__body img,
.by-article__body picture,
.by-article__body svg { height:auto; }
.by-article__body figure { margin-left:0; margin-right:0; }
.by-article__body figcaption,
.by-article__body .wp-element-caption { font-size:.85em; color:var(--by-text-muted); text-align:center; margin-top:-.75rem; }

/* Video & embeds: keep the aspect ratio while shrinking */
.by-article__body video { width:100%; height:auto; }
.by-article__body iframe { max-width:100%; border:0; }
.by-article__body iframe[src*="youtube"],
.by-article__body iframe[src*="youtu.be"],
.by-article__body iframe[src*="vimeo"],
.by-article__body iframe[src*="facebook.com/plugins/video"],
.by-article__body iframe[src*="tiktok.com/embed"] {
  width:100% !important; height:auto !important; aspect-ratio:16/9;
}
.by-article__body iframe[src*="tiktok.com/embed"] { aspect-ratio:9/16; max-width:340px; margin:0 auto; display:block; }
.by-article__body iframe[src*="google.com/maps"] { width:100% !important; }
.by-article__body .twitter-tweet,
.by-article__body .instagram-media,
.by-article__body .tiktok-embed,
.by-article__body .fb-post { max-width:100% !important; min-width:0 !important; }

/* Tables: horizontal scroll inside their own box instead of breaking the page */
.by-article__body .by-table-wrap {
  width:100%; max-width:100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:1.25rem 0;
}
.by-article__body .by-table-wrap > table { margin:0 !important; }
.by-article__body figure.wp-block-table .by-table-wrap { margin:0; }

/* Code */
.by-article__body pre { max-width:100%; overflow-x:auto; white-space:pre-wrap; }

@media (max-width:782px) {
  /* Floats pasted from other sites stack on small screens */
  .by-article__body .alignleft,
  .by-article__body .alignright,
  .by-article__body img[align] {
    float:none !important; display:block; margin-left:auto !important; margin-right:auto !important;
  }
  /* Multi-column layouts stack */
  .by-article__body .wp-block-columns { flex-wrap:wrap !important; }
  .by-article__body .wp-block-column { flex-basis:100% !important; }
  .by-article__body .wp-block-media-text { grid-template-columns:100% !important; }
  .by-article__body .wp-block-media-text > .wp-block-media-text__content { grid-column:1 !important; grid-row:2 !important; padding:1rem 0 !important; }
  .by-article__body .wp-block-media-text > .wp-block-media-text__media { grid-column:1 !important; grid-row:1 !important; }
  /* Wide tables: keep columns readable and let the wrapper scroll */
  .by-article__body .by-table-wrap > table th,
  .by-article__body .by-table-wrap > table td { min-width:90px; }
}