/* Katen CMS overrides — make every uploaded image fit a fixed box (object-fit: cover). */

/* Post grid cards (home + category) */
.post.post-grid .thumb .inner { display: block; overflow: hidden; }
.post.post-grid .thumb .inner img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* Single-post featured image */
.post-single .featured-image {
  border-radius: 10px;
  overflow: hidden;
}
.post-single .featured-image img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .post-single .featured-image img { height: 240px; }
}

/* Sidebar "Recent Posts" thumbnails — round + cover */
.post.post-list-sm.circle .thumb { max-width: 64px; width: 64px; height: 64px; }
.post.post-list-sm.circle .details { margin-left: 84px; }
.post.post-list-sm.circle .thumb .inner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.post.post-list-sm.circle .thumb .inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Instagram strip — auto-sliding marquee */
.insta-marquee-wrap { overflow: hidden; margin-top: 22px; width: 100%; }
.insta-marquee { display: flex; width: max-content; animation: instaScroll 30s linear infinite; }
.insta-marquee-wrap:hover .insta-marquee { animation-play-state: paused; }
.insta-cell { flex: 0 0 auto; width: 240px; padding: 0 5px; }
.insta-cell a { display: block; overflow: hidden; border-radius: 10px; }
.insta-cell img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 10px; }
@keyframes instaScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .insta-cell { width: 160px; }
  .insta-cell img { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .insta-marquee { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* Interior-page header (no hero behind it): keep dark text, normal flow */
.header-personal:not(.light) { position: relative; }
.header-personal:not(.light) .header-top { padding-bottom: 10px; }

/* Equal-height post cards regardless of title length */
.main-content .col-lg-8 .row.gy-4 > [class*="col-"] { display: flex; }
.post.post-grid { width: 100%; height: 100%; display: flex; flex-direction: column; }
.post.post-grid .details { flex: 1 1 auto; }
/* Reserve space so short titles still line up; long titles wrap and the row
   grows to the tallest card (no truncation). */
.post.post-grid .post-title { min-height: 2.7em; }

/* Text-only cards (posts without a featured image) — no broken image, clean layout */
.post.post-grid.no-thumb .thumb { display: none; }
.post.post-grid.no-thumb .details { padding-top: 26px; }
.post.post-grid .meta .meta-category {
  color: #FE4F70; font-weight: 600; text-transform: uppercase;
  font-size: 11px; letter-spacing: .4px;
}

/* Sidebar "About" widget text logo */
.widget-about .text-logo { font-size: 30px; font-weight: 800; line-height: 1; }

/* Hero banner height */
.hero { height: 840px; }

/* Substack social icon — match the X icon sizing */
.social-icons a .icon-substack {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

/* Category pill on post-card images — same size on mobile + desktop */
.post .category-badge {
  font-size: 10px;
  border-radius: 25px;
  padding: 4px 6px;
  left: 8px;
  top: 8px;
}

/* "Explore Topics" list arrows — smaller on mobile */
@media (max-width: 767px) {
  .widget ul.list li a:before { font-size: 9px !important; margin-right: 12px !important; }
  .widget ul.list li { line-height: 2.4rem; }
}

/* Post content: tidy paragraph spacing so editor content reads cleanly */
.post-content p { margin-bottom: 20px; }
.post-content p:empty { display: none; margin: 0; }
/* Force pasted text to use the theme's default body color (ignore inline colors) */
.post-content [style*="color"] { color: inherit !important; }
.post-content font[color] { color: inherit !important; }

/* Like / comment / share action bar */
.post-actions { display: flex; gap: 12px; align-items: center; margin: 26px 0 6px; padding-top: 20px; border-top: 1px solid #ebebeb; }
.post-actions .pa-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #e6e9f2; background: #fff; color: #203656;
  border-radius: 25px; padding: 8px 16px; font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none; transition: all .15s;
}
.post-actions .pa-btn:hover { border-color: #FE4F70; color: #FE4F70; }
.post-actions .pa-btn i { font-size: 16px; }
.post-actions .pa-like.active { background: #FE4F70; border-color: #FE4F70; color: #fff; }

/* Post card stats (likes / comments / share) */
.card-stats { display: flex; align-items: center; gap: 18px; }
.card-stats .stat,
.card-stats button.stat,
.card-stats a.stat {
  display: inline-flex; align-items: center; gap: 7px;
  color: #a4adbd; font-size: 13px; font-weight: 600; line-height: 1;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  outline: 0 !important; padding: 0 !important; margin: 0; border-radius: 0 !important;
  -webkit-appearance: none !important; appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; text-decoration: none;
}
.card-stats .stat:focus,
.card-stats .stat:focus-visible,
.card-stats .stat:active { outline: 0 !important; box-shadow: none !important; border: 0 !important; background: transparent !important; }
.card-stats .stat i { font-size: 16px; }
.card-stats .stat:hover { color: #FE4F70; }
.card-stats .like-card.liked,
.card-stats .like-card.liked i,
.card-stats .like-card.liked .lc { color: #FE4F70 !important; }

/* Comments */
.comments-section { margin-top: 40px; }
.comments-section h3 { font-size: 22px; }
.comment-form textarea { border: 1px solid #e6e9f2; border-radius: 10px; padding: 12px; }
.comment-as { font-size: 14px; color: #7a869c; margin-bottom: 8px; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid #f0f0f4; }
.comment-item .c-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; }
.comment-item .c-head { margin-bottom: 4px; }
.comment-item .c-date { color: #a4adbd; font-size: 12.5px; margin-left: 8px; }
.comment-item .c-text { color: #4a5568; line-height: 1.55; white-space: pre-wrap; }

/* Responsive video embed on single posts */
.post-video { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 30px; border-radius: 10px; overflow: hidden; background:#000; }
.post-video iframe, .post-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Synced profile photo — header avatar + post author photo crop cleanly to a circle */
.header-personal .navbar-brand img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; }
.post .meta .author { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }

/* Contact section (replaces the Instagram strip above the footer) */
.contact-section { margin: 30px 0 10px; }
.contact-section .contact-item { height: 100%; text-decoration: none; }
.contact-section .contact-item h3,
.contact-section .contact-item p { color: inherit; }
.contact-section .contact-item p { word-break: break-word; }