/**
 * GETU Shopping — blog (Dicas & Receitas) archive + single post.
 *
 * PRODUCTION MAPPING POINT
 * ------------------------
 * Deploy to wp-content/themes/bricks-child/assets/css/getu-blog.css.
 * Enqueued site-wide by getu-chrome.php; component-scoped, so it no-ops off the
 * blog pages (nothing else carries .bl-*/.chip/.post-card/.prose-getu/.pin/.toc).
 *
 * Ported from blog-archive.html + single-blog.html. COLORS are literal hex (not
 * var(--wine-*)): on WP the unprefixed reference color vars don't exist — color
 * comes from Tailwind utilities — whereas --shadow-*/--ease-* ARE aliased on
 * .getu-vanilla-scope, so those stay as vars. .reveal is global (getu-home.css).
 */

/* Editorial type sizes */
.bl-h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); line-height: .98; }
.bl-lead { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.bl-title { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem); line-height: 1.02; }

/* Category filter chips */
.chip { border: 1px solid rgba(110,26,42,.18); background: #fff; color: rgba(36,16,21,.7);
  border-radius: 9999px; padding: .5rem 1.1rem; font-size: 13px; font-weight: 600;
  transition: color .2s, background-color .2s, border-color .2s, transform .2s var(--ease-out); }
.chip:hover { border-color: rgba(110,26,42,.4); transform: translateY(-1px); }
.chip[aria-current="true"] { background: #6E1A2A; border-color: #6E1A2A; color: #fff; }

/* Post card media zoom (lift comes from the global .pcard) */
.post-card .post-media { overflow: hidden; }
.post-card .post-media img { transition: transform .7s var(--ease-out); }
@media (hover: hover) { .post-card:hover .post-media img { transform: scale(1.05); } }

/* Category tag over the image */
.tag { position: absolute; top: .85rem; left: .85rem; z-index: 2; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  background: rgba(20,6,10,.72); color: #F6F1EA; padding: .3rem .7rem; border-radius: 9999px;
  backdrop-filter: blur(4px); }

/* ---- Single-post article prose ---- */
.prose-getu { max-width: 68ch; }
.prose-getu > p { font-size: 17px; line-height: 1.75; color: rgba(36,16,21,.82); margin-top: 1.35rem; }
.prose-getu > p.lead { font-size: 20px; line-height: 1.65; color: rgba(36,16,21,.7); }
.prose-getu > p.lead::first-letter { font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: 3.6rem; line-height: .8; float: left; margin: .35rem .6rem 0 0; color: #5A1320; }
.prose-getu h2 { font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.125rem); line-height: 1.1; margin-top: 3rem; padding-top: .25rem; scroll-margin-top: 96px; }
.prose-getu h2::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; background: #C8A45D; margin-bottom: 1rem; }
.prose-getu h3 { font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.5rem); line-height: 1.15; margin-top: 1.9rem; color: #3A0F18; scroll-margin-top: 96px; }
.prose-getu strong { color: #241015; font-weight: 600; }
.prose-getu a { color: #5A1320; text-decoration: underline; text-underline-offset: 2px; }
.prose-getu ul { margin-top: 1.2rem; padding-left: 1.2rem; }
.prose-getu ul li { position: relative; font-size: 16px; line-height: 1.7; color: rgba(36,16,21,.8); padding-left: 1.1rem; margin-top: .55rem; list-style: none; }
.prose-getu ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 9999px; background: #C8A45D; }

/* Pull-quote */
.pull { border-left: 3px solid #C8A45D; padding: .4rem 0 .4rem 1.4rem; margin: 2.4rem 0;
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.4rem,1.1rem+1.1vw,1.75rem);
  line-height: 1.3; color: #5A1320; }

/* Inline product callout — the blog → shop bridge */
.pin { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 1.1rem;
  background: linear-gradient(180deg, rgba(239,231,219,.6), rgba(239,231,219,.25));
  border: 1px solid rgba(110,26,42,.12); border-radius: 1rem; padding: 1rem 1.2rem; margin: 2rem 0;
  box-shadow: var(--shadow-raised); }
.pin img { width: 92px; height: 92px; object-fit: contain; }
@media (max-width: 520px) { .pin { grid-template-columns: 64px 1fr; } .pin .pin-cta { grid-column: 1 / -1; } .pin img { width: 64px; height: 64px; } }

/* Sticky table of contents */
.toc { position: sticky; top: 96px; }
.toc a { display: block; font-size: 13px; line-height: 1.35; color: rgba(36,16,21,.55); padding: .4rem 0 .4rem .9rem;
  border-left: 2px solid rgba(110,26,42,.12); transition: color .2s, border-color .2s; }
.toc a:hover, .toc a.active { color: #5A1320; border-color: #6E1A2A; }