/* =====================================================================
   Blog, gallery and likes. Loaded after site.css.
   (The home-page banner lives in site.css.)
   ===================================================================== */

:root {
  --heart: #ff3b5c;
}

/* Blog list ------------------------------------------------------------- */
.load-more-wrap { text-align: center; margin: 32px 0 0; }
.load-more-wrap .btn.is-loading { opacity: .6; pointer-events: none; }
.post-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-card .post-list-title { font-size: 22px; }
.post-list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px !important; }
.post-list-left { display: inline-flex; align-items: center; gap: 10px; }
.post-list-meta .tag { margin: 0; }
.likes-mini { color: var(--ink-3); font-size: .85rem; }
.work-card time { color: var(--ink-3); font-size: .85rem; }

/* Single post ------------------------------------------------------------ */
.post-gallery { padding-top: clamp(28px, 5vw, 56px); }
.post-head { padding-top: clamp(28px, 5vw, 48px); }
.post-head.no-image { padding-top: clamp(64px, 11vw, 140px); }
.h-post { font-size: 34px; margin: 0; animation: title-focus .9s ease-out both; }   /* post title on desktop; phone size in the media block at the end */
@keyframes title-focus { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }   /* title comes into focus while the image and text slide up */
.post-meta { color: var(--ink-3); font-size: .9rem; margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }

.post-body { font-size: 1.12rem; line-height: 1.7; color: #2a2d31; padding-top: 16px; padding-bottom: 8px; }   /* gap under the title; phone value in the media block at the end */
.post-body p { margin: 0 0 1.3em; }

/* Gallery (featured + extra images, chevrons left/right) ------------------ */
/* Each slide keeps its own aspect ratio: the image is shown whole, scaled to fit the column. */
/* Slides sit side by side in a row; site.js slides the row left/right (buttons, keys, or a finger drag)
   and keeps the row's height matched to the slide on screen. */
.gallery { position: relative; }
.gallery-track { display: flex; align-items: flex-start; overflow: hidden; touch-action: pan-y; transition: height .35s ease; }
.gallery-track.is-dragging { cursor: grabbing; }
.gallery-slide { flex: 0 0 100%; width: 100%; margin: 0; transition: transform .4s cubic-bezier(.25,.8,.3,1); }
.gallery-track.is-dragging .gallery-slide { transition: none; }
.gallery-slide img {
  display: block; width: auto; max-width: 100%; max-height: 82vh; height: auto; margin: 0 auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
  -webkit-user-drag: none; user-select: none;
}
.gallery-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 96px; border: 0; padding: 0 0 8px; background: none;
  color: #fff; font-size: 72px; line-height: 1; font-weight: 300;
  text-shadow: 0 1px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6);
  display: grid; place-items: center; cursor: pointer; opacity: .85;
  transition: opacity .15s ease, transform .15s ease;
}
.gallery-btn:hover, .gallery-btn:focus-visible { opacity: 1; transform: translateY(-50%) scale(1.08); outline: 0; }
.gallery-btn.prev { left: 6px; }
.gallery-btn.next { right: 6px; }
.gallery-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.gallery-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.25); transition: transform .15s ease, background-color .15s ease;
}
.gallery-dots button[aria-selected="true"] { background: var(--ink); transform: scale(1.3); }
@media (max-width: 575.98px) {
  .gallery-btn { width: 44px; height: 80px; font-size: 56px; }
  .gallery-btn.prev { left: 0; } .gallery-btn.next { right: 0; }
}

/* Likes ------------------------------------------------------------------ */
.post-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px 0 6px; border-top: 1px solid var(--line); }
.like-box { display: inline-flex; margin: 0; }
.like-btn, .pixie-dust {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; padding: 6px 2px; font: inherit; font-weight: 600;
  color: var(--ink); cursor: pointer; border-radius: 8px;
}
.like-btn:disabled, .like-btn.is-maxed { cursor: default; }
.like-btn .heart { display: inline-grid; place-items: center; }
.like-btn .heart svg { fill: none; stroke: var(--heart); stroke-width: 2; transition: fill .15s ease, transform .15s ease; }
.like-btn:hover .heart svg { transform: scale(1.08); }
.like-btn.is-liked .heart svg, .like-btn.is-maxed .heart svg { fill: var(--heart); }
.like-btn.pop .heart { animation: heart-pop .45s cubic-bezier(.2,.9,.3,1.4); }
.like-btn { gap: 4px; }
.like-btn .like-count { min-width: 1.2em; text-align: left; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

/* "pixie-dust" = the share button. Named on purpose so ad blockers do not hide it:
   .share-btn is a generic hide rule in Fanboy's Social Blocking List (uBlock Origin, AdGuard, Brave). */
.pixie-dust { color: var(--ink-2); font-weight: 500; }
.pixie-dust svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pixie-dust:hover { color: var(--ink); }
.pixie-dust.is-copied { color: #1b6b3a; }
.pixie-dust .pixie-dust-label { font-size: .95rem; }

/* About the author (text from Settings > Blog Settings, logo as the profile picture) */
.post-author { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.post-author-pic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; object-fit: contain; padding: 4px; background: var(--ink); }   /* logo sits smaller inside the circle */
.post-author-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.post-back { margin-top: 28px; }
.post-back a { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.post-back a:hover { color: var(--ink); }
.post-back span { font-size: 1.3em; line-height: 0; margin-right: 2px; }
@keyframes heart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45) rotate(-8deg); }
  60%  { transform: scale(.92) rotate(4deg); }
  100% { transform: scale(1); }
}
/* little hearts that float up on each tap */
.like-btn .float {
  position: absolute; left: 8px; top: 4px; pointer-events: none;
  width: 14px; height: 14px; fill: var(--heart);
  animation: heart-float .9s ease-out forwards;
}
@keyframes heart-float {
  0%   { opacity: 1; transform: translate(0, 0) scale(.6); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -70px) scale(1.2); }
}
/* Reduce Motion (common on phones): keep the floating hearts, just calmer and shorter */
@media (prefers-reduced-motion: reduce) {
  .like-btn.pop .heart { animation: none; }
  .h-post { animation: none; }
  .gallery-track, .gallery-slide { transition: none; }
  .like-btn .float { animation-duration: .6s; }
}

/* Phones: one row for likes, share, category and date, all the same text size */
@media (max-width: 575.98px) {
  .post-actions { flex-wrap: nowrap; gap: 12px; }
  .post-meta { gap: 8px; }
  .like-btn .like-count, .pixie-dust .pixie-dust-label, .post-meta .tag, .post-meta time { font-size: 13px; }
  .post-meta .tag { margin: 0; padding: .25em .6em; }
  .post-body { font-size: 16px; padding-top: 6px; }
  .h-post { font-size: 26px; letter-spacing: -0.8pt; }
}