/* ==========================================================================
   SHELTER BLOG — CONTENT STYLES  (.entry-content)
   In the future WP theme this is the enqueued editor/content CSS, so what the
   blogger sees in the editor matches the front-end 1:1.
   Includes the NO-PLUGIN image gallery + lightbox styling (Requisito G).
   ========================================================================== */

.entry-content {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
  max-width: var(--measure);
}
.article-grid .entry-content { max-width: none; } /* column already capped by grid */

/* ---- Lead (answer-first, GEO) ----------------------------------------- */
.entry-content .lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink);
  margin-block: var(--sp-5) var(--sp-6);
  font-weight: 400;
}

/* ---- Rhythm ----------------------------------------------------------- */
.entry-content > * + * { margin-top: var(--sp-4); }
.entry-content h2 {
  font-size: var(--fs-h2);
  margin-top: var(--sp-8);
  scroll-margin-top: 130px;      /* so TOC jump-links clear the sticky header */
  letter-spacing: -.01em;
}
.entry-content h3 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-6);
  scroll-margin-top: 130px;
}
.entry-content p  { line-height: var(--lh-body); }
.entry-content a:not(.btn) { color: var(--c-ink); border-bottom: 2px solid var(--cta); padding-bottom: 1px; transition: background var(--t); }
.entry-content a:not(.btn):hover { background: rgba(202,235,53,.22); }
.entry-content strong { font-weight: var(--fw-bold); color: var(--c-ink); }

.entry-content ul:not(.wp-block-gallery),
.entry-content ol { padding-left: 1.4em; }
.entry-content ul:not(.wp-block-gallery) { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-top: var(--sp-2); }
.entry-content li::marker { color: var(--c-mute); }

/* pull quote — neutral border (lime is reserved strictly for CTAs) */
.entry-content blockquote {
  border-left: 3px solid var(--c-ink);
  padding-left: var(--sp-4);
  margin-block: var(--sp-6);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--c-ink);
  font-style: italic;
}

/* standalone hero image inside content */
.entry-content > figure.wp-block-image { margin-block: var(--sp-6); }
.entry-content > figure.wp-block-image img { width:100%; border-radius: var(--radius); }
.entry-content figcaption {
  font-size: var(--fs-caption); color: var(--c-mute);
  text-align: center; margin-top: var(--sp-2);
}

/* ==========================================================================
   IMAGE GALLERY — NO PLUGIN  (Requisito G)
   Two entry points, one look:
   (1) native core Gutenberg Gallery block  .wp-block-gallery
   (2) runs of >=2 consecutive single images auto-wrapped by gallery.js .auto-gallery
   ========================================================================== */
.entry-content .wp-block-gallery,
.entry-content .auto-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block: var(--sp-6);
  list-style: none;
  padding: 0;
}
/* each item grows to its own aspect ratio → justified "Flickr" rows.
   gallery.js sets flex-grow / flex-basis from the natural image ratio. */
.entry-content .wp-block-gallery > figure,
.entry-content .wp-block-gallery > li,
.entry-content .auto-gallery > figure {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.entry-content .wp-block-gallery figure > img,
.entry-content .wp-block-gallery li > img,
.entry-content .auto-gallery figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  cursor: zoom-in;
  transition: transform var(--t-slow) var(--ease-out);
}
.entry-content .wp-block-gallery figure:hover > img,
.entry-content .auto-gallery figure:hover > img { transform: scale(1.05); }

/* gradient placeholder behind gallery items (mockup + lazy-load state) */
.entry-content .wp-block-gallery figure,
.entry-content .auto-gallery figure { background: var(--ph-grad); }

/* caption overlay on gallery items */
.entry-content .wp-block-gallery figcaption,
.entry-content .auto-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 22px 12px 10px;
  font-size: var(--fs-micro); color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(10,10,10,.72));
  opacity: 0; transition: opacity var(--t);
  pointer-events: none;
}
.entry-content .wp-block-gallery figure:hover figcaption,
.entry-content .auto-gallery figure:hover figcaption { opacity: 1; }

/* zoom affordance corner icon */
.entry-content .wp-block-gallery figure::after,
.entry-content .auto-gallery figure::after {
  content: "⤢"; position: absolute; top: 8px; right: 10px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.55); color: #fff; border-radius: var(--radius);
  font-size: 15px; opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.entry-content .wp-block-gallery figure:hover::after,
.entry-content .auto-gallery figure:hover::after { opacity: 1; }

@media (max-width: 560px) {
  .entry-content .wp-block-gallery > figure,
  .entry-content .auto-gallery > figure { flex-basis: 46%; min-width: 44%; }
}

/* ---- editor helper note (mockup only) --------------------------------- */
.editor-hint {
  border:1px dashed var(--c-line); border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4); margin-block:var(--sp-4);
  font-size:var(--fs-caption); color:var(--c-mute); background:var(--c-paper-2);
}
.editor-hint b { color:var(--c-ink); }

/* ==========================================================================
   LIGHTBOX (shared, vanilla — no plugin)
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.93);
}
.lightbox[hidden] { display: none; }
.lb-img { max-width: 90vw; max-height: 84vh; object-fit: contain; border-radius: var(--radius); }
.lb-close, .lb-prev, .lb-next {
  position: fixed; color: var(--cta); background: none; border: 0; cursor: pointer;
  min-width: 56px; min-height: 56px; display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast);
}
.lb-close { top: 16px; right: 20px; font-size: 30px; color: #fff; }
.lb-prev  { left: 8px;  top: 50%; transform: translateY(-50%); font-size: 52px; }
.lb-next  { right: 8px; top: 50%; transform: translateY(-50%); font-size: 52px; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-cap { position: fixed; bottom: 46px; left: 0; right: 0; text-align: center; color: #fff; font-size: var(--fs-caption); padding-inline: var(--gutter); }
.lb-count { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--c-on-dark-mute); font-size: var(--fs-micro); letter-spacing: .1em; }