/* =============================================================================
   BLOG component — default theme
   Generated by Fehmi Demiralp
   ============================================================================= */

.page-blog {
  min-height: 60vh;
}

/* ── Component-specific overrides ────────────────────────────────────────── */
.blog-wrap {
  padding-top: 32px;
}
.blog-heading {
  margin-bottom: 8px;
}
.blog-layout {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  align-items: flex-start;
}
/* topic-121: the mobile @media block used to sit HERE — before the base
   .blog-sidebar rule below. Equal specificity + later position meant the
   base rule silently won on phones (sidebar stayed a 180px column with a
   scrollbar). The block now lives AFTER the sidebar rules. */

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.blog-sidebar {
  flex: 0 0 180px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 8px;
}
.blog-sidebar::-webkit-scrollbar { width: 4px; }
.blog-sidebar::-webkit-scrollbar-track { background: transparent; }
.blog-sidebar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* topic-121: never let flex squeeze the sidebar items. The filter buttons
   carry `overflow: hidden` (ellipsis), which drops their automatic flex
   minimum size to 0 — under the max-height cap the column then compressed
   every button to a few px and clipped the text (seen on tablets). With
   shrink disabled the sidebar scrolls instead. */
.blog-sidebar > * { flex-shrink: 0; }

.blog-sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  padding: 4px 6px 2px;
}
.blog-sidebar-spacer {
  height: 10px;
}
.blog-main {
  flex: 1 1 0;
  min-width: 0;
}

/* topic-121: mobile — sidebar becomes a full-width wrapped chip bar above
   the post list. Placed AFTER the base sidebar rules on purpose (equal
   specificity: source order decides). */
@media (max-width: 640px) {
  .blog-layout { flex-direction: column; align-items: stretch; }
  .blog-sidebar {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    overflow: visible;
  }
  .blog-sidebar-title  { flex: 0 0 100%; width: 100%; }
  .blog-sidebar-spacer { flex: 0 0 100%; height: 4px; }
}

/* ── Card list ────────────────────────────────────────────────────────────── */
.blog-list { display: flex; flex-direction: column; gap: 20px; }

/* ── Card image (topic-121) ─────────────────────────────────────────────────
   Front-matter `picture:` + `adjust: left|right`. The card becomes a
   stretch flex row: the media column is as tall as the text column
   (adaptive — more text lines → taller image), the image preserves its
   aspect ratio and is centred vertically AND horizontally inside the
   column (object-fit: contain). DOM order is media-then-body; the right
   variant flips visually via row-reverse. */
.blog-card--with-img {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}
.blog-card--img-right { flex-direction: row-reverse; }
/* topic-121 (v0.121.5.0): vertical variant — activated by the
   client-side disproportion probe (image's width-limited height < half
   the text height ⇒ side-by-side looks lopsided). Image sits BELOW the
   text by default (`column-reverse`, DOM is media-then-body);
   `adjust: …, top` puts it above. Two-class selectors so these beat the
   single-class row rules regardless of order. */
.blog-card--with-img.blog-card--img-vert { flex-direction: column-reverse; }
.blog-card--with-img.blog-card--img-vert.blog-card--vpos-top {
  flex-direction: column;
}
.blog-card--with-img.blog-card--img-vert .blog-card-media {
  /* v0.121.8.0: stacked → image spans ~92% of the card width, its own
     aspect ratio sets the height (no fixed 180px band, no side gaps).
     The img returns to normal flow here (overriding the absolute
     positioning used only for the horizontal layout). */
  flex: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  position: static;
  display: flex;
  justify-content: center;
}
.blog-card--with-img.blog-card--img-vert .blog-card-media-img {
  position: static;
  width: 92%;
  max-width: 92%;
  height: auto;
  object-fit: contain;
}
.blog-card-body  { flex: 1 1 0; min-width: 0; }
.blog-card-media {
  /* topic-121 fix (v0.121.3.0): the image must NOT contribute to the
     row's height computation — with `height:100%` on the img the
     percentage is indefinite during flex sizing, the browser falls back
     to the natural size and the IMAGE ends up driving the card height
     (giant cards). Absolutely positioning the img removes it from
     layout entirely: the card height comes from the text column alone,
     and the img fills the stretched media box afterwards. */
  flex: 0 0 40%;
  max-width: 25%;
  min-height: 0;
  position: relative;
}
.blog-card-media-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;  /* AR preserved, centred both axes */
  display: block;
}

/* topic-121 (v0.121.6.0): card image stacking has its OWN breakpoint,
   wider than the sidebar's 640px. Live phone test showed a device whose
   CSS viewport sits above 640, so the 640 stack never fired and the
   side-by-side row squeezed the text again. Structurally the
   disproportion ALWAYS occurs on narrow screens (narrow media column →
   contain shrinks the image while the text grows taller), so phones and
   narrow tablets stack unconditionally. Image BELOW the text by default
   (column-reverse; DOM is media-then-body), `adjust: …, top` above. */
@media (max-width: 900px) {
  .blog-card--with-img,
  .blog-card--img-right { flex-direction: column-reverse; gap: 10px; }
  .blog-card--with-img.blog-card--vpos-top { flex-direction: column; }
  /* v0.121.8.0: stacked image ~92% of card width, AR-driven height,
     centred; no fixed band, no side gaps. */
  .blog-card-media {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
    display: flex;
    justify-content: center;
  }
  .blog-card-media-img {
    position: static;
    width: 92%;
    max-width: 92%;
    height: auto;
    object-fit: contain;
  }
}

.blog-card {
  padding: 24px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  cursor: default;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
  border-color: #555;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.blog-date {
  display: inline-block;
  font-size: 0.78rem;
  font-family: monospace;
  color: #888;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 4px 0 10px;
  cursor: pointer;
  color: #111;
}
.blog-card-title h2 { font-size: 1.2rem; margin-bottom: 8px; color: #111; }
.blog-card-title:hover { text-decoration: underline; }

.blog-card-tags { margin-bottom: 10px; }

.blog-card-excerpt {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ── Read more — link variant (blog-read-btn) ─────────────────────────────── */
/* Used when blog-read-btn--button modifier is NOT set                        */
.blog-read-more-wrap {
  margin-top: 8px;
}
.blog-read-more-wrap--newline {
  margin-top: 12px;
  display: block;         /* excerpt altında ayrı satır */
}
.blog-read-more-wrap--continue {
  display: inline;        /* excerpt ile aynı satırda devam */
  margin-left: 6px;
}

.blog-read-btn {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #111;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1.5px solid #ddd;
  border-radius: 0;
  padding: 0 0 1px 0;
  margin-top: 0;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.blog-read-btn:hover {
  color: #333;
  border-color: #333;
  background: transparent;
}

/* ── Read more — button variant (.blog-read-btn--button modifier) ─────────── */
/* WText gets both classes: "blog-read-btn blog-read-btn--button"             */
.blog-read-btn--button {
  display: inline-block;
  margin-top: 4px;
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.blog-read-btn--button:hover {
  background: #0f3460;
  color: #fff;
  border-color: transparent;
}

/* ── Group header (TagGroup sort mode) ───────────────────────────────────── */
.blog-group-header {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  padding: 16px 0 8px;
  border-bottom: 1.5px solid #e0e0e0;
  margin-bottom: 4px;
}
.blog-group-header:first-child { padding-top: 0; }

/* ── Back button (post view) ──────────────────────────────────────────────── */
.blog-back-btn {
  margin-bottom: 28px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  color: #555;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.blog-back-btn:hover {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
}

/* ── Back sticky button (floating) ───────────────────────────────────────── */
.blog-back-sticky {
  position: fixed !important;
  bottom: 28px;
  right: 28px;
  z-index: 500;
  background: #ffffff !important;
  color: #111 !important;
  border: 1.5px solid #111 !important;
  border-radius: 24px !important;
  padding: 10px 22px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.blog-back-sticky:hover {
  background: #1a1a2e !important;
  color: #fff !important;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .blog-back-sticky { bottom: 16px; right: 16px; }
}

/* ── Post view ────────────────────────────────────────────────────────────── */
.blog-post .post-header {
  margin-bottom: 24px;
}
.post-header {
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.post-header h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 10px; }
.blog-post .post-header h1 { margin-bottom: 8px; }
.blog-post .post-tags { margin-top: 8px; }

/* ── Post body extras ─────────────────────────────────────────────────────── */
.blog-hr { border: none; border-top: 1px solid #e0e0e0; margin: 32px 0; }

.blog-figure {
  margin: 28px 0;
  text-align: center;
}
.blog-img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.blog-figure figcaption {
  font-size: 0.82rem;
  color: #888;
  margin-top: 8px;
  font-style: italic;
}

/* ── Video embed ──────────────────────────────────────────────────────────── */
.blog-video .video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.blog-video .video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.post-body .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.88rem;
}
.post-body .md-table th,
.post-body .md-table td {
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  text-align: left;
  color: #333;
}
.post-body .md-table th {
  background: #f4f4f4;
  color: #111;
  font-weight: 700;
}
.post-body .md-table tr:nth-child(even) td {
  background: #fafafa;
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */
.post-body .md-blockquote {
  margin: 12px 0;
  padding: 4px 0 4px 16px;
}
.post-body .md-blockquote p {
  margin: 0;
  color: #444;
  font-style: normal;
}