/* Publicaciones: la escala y el cristal del resto de la web. */
.page-panel--blog .blog-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  max-width: 740px;
  margin-inline: auto;
}

.blog-heading .mobile-section-title {
  display: block;
  margin: 0;
  font-family: Gacor, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--bronze-deep);
}

.page-panel--blog [hidden] { display: none; }
.blog-feed { display: grid; gap: 24px; min-width: 0; }
.blog-feed:empty { display: none; }
.blog-loading { margin: 0; text-align: center; }
.page-panel--blog .blog-empty { flex-grow: 1; }
.blog-empty strong { font-size: 16px; font-weight: 700; }

.blog-post,
.blog-error {
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgb(255 255 255 / 49%), rgb(255 255 255 / 15%));
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / 74%), inset 0 1px 0 rgb(255 255 255 / 76%), 0 16px 32px rgb(69 51 38 / 8%);
}

.blog-post { display: flex; flex-direction: column; gap: 12px; }
.blog-post > * { min-width: 0; }
.blog-post .blog-post__text { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; white-space: pre-line; overflow-wrap: anywhere; }
.blog-carousel { min-width: 0; border-radius: 10px; background: rgb(139 117 96 / 7%); }
.blog-carousel:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; }
.blog-carousel__track { display: flex; gap: 4px; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: inherit; }
.blog-carousel__track::-webkit-scrollbar { display: none; }
.blog-carousel__slide { flex: 0 0 auto; min-width: 0; height: clamp(180px, 56vw, 240px); aspect-ratio: 1; margin: 0; }
.blog-carousel__slide :is(img, video) { display: block; width: 100%; height: 100%; max-width: none; min-height: 0; object-fit: contain; }
.blog-carousel__slide img { -webkit-user-drag: none; user-select: none; }
.blog-carousel__track.is-swiping { cursor: grabbing; }
.blog-post__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.blog-action,
.blog-error button,
.blog-comments__submit {
  min-height: 44px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgb(139 117 96 / 17%);
  border-radius: 12px;
  background: rgb(255 255 255 / 28%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}

.blog-action i { color: var(--bronze-deep); font-size: 20px; }
.blog-action[aria-pressed="true"] { background: rgb(139 117 96 / 12%); border-color: rgb(139 117 96 / 30%); }
.blog-post :is(button, input, textarea, summary):focus-visible,
.blog-comments-modal :is(button, input, textarea):focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; }
.blog-action:disabled,
.blog-comments__submit:disabled { cursor: wait; opacity: .65; }

.blog-comment {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 12px;
  background: rgb(255 255 255 / 25%);
}

.blog-comment__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.blog-comment__author { min-width: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.blog-comment__admin-like { display: inline-flex; align-items: center; font-size: 12px; line-height: 18px; color: var(--bronze-deep); }
.blog-comment__admin-like i { font-size: 13px; }
.blog-comment p.blog-comment__text { margin: 0; color: var(--ink); font-size: 15px; line-height: 24px; white-space: pre-line; overflow-wrap: anywhere; }
.blog-post__comments { display: grid; gap: 24px; min-width: 0; }
.blog-comments__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blog-comments__heading h2 { width: 100%; margin: 0; font-size: 20px; font-weight: 700; line-height: 26px; text-align: center; }
.blog-comments__list { display: grid; gap: 12px; }
.blog-comments__form { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid rgb(139 117 96 / 18%); }
.blog-comments__field { display: grid; gap: 6px; min-width: 0; }
.blog-comments__field label { font-size: 15px; font-weight: 600; }
.blog-comments__field :is(input, textarea) { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid rgb(139 117 96 / 22%); border-radius: 12px; background: rgb(255 255 255 / 40%); color: var(--ink); font: inherit; font-size: 16px; line-height: 24px; }
.blog-comments__field textarea { min-height: 120px; resize: vertical; }
.blog-comments__submit { width: 100%; border: 0; background: #1b1a19; color: #fff; }
.blog-comments__form p.blog-comments__status { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink); }
.blog-comments__status:empty { display: none; }
.blog-error { display: grid; justify-items: center; gap: 12px; text-align: center; }
.blog-error p { margin: 0; }
body.blog-comments-open { overflow: hidden; }
.blog-comments-modal .blog-comments-modal__body { min-width: 0; }

@media (min-width: 961px) {
  .blog-comments-modal .blog-comments-modal__body { padding: 36px; }
}