/* We Hall Beauty — blog.css | Complementa style.css */

/* ===== Hero do artigo ===== */
.blog-hero{padding:140px 0 80px;background:linear-gradient(160deg,var(--preto-quente) 0%,#2a1a10 60%,var(--preto) 100%);position:relative;overflow:hidden;text-align:center}
.blog-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 55% 40%,rgba(141,48,28,.20) 0%,transparent 65%);pointer-events:none}
.blog-hero-eyebrow{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--bege);margin:0 0 18px;display:block;opacity:.85;position:relative}
.blog-hero h1{font-family:var(--font-titulo);font-size:clamp(1.9rem,4.5vw,3rem);color:var(--branco);font-weight:600;max-width:860px;margin:0 auto 24px;line-height:1.2;position:relative}
.blog-hero-meta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;position:relative}
.blog-cat-chip{display:inline-block;padding:5px 16px;border-radius:var(--raio-pill);background:var(--primario);color:var(--branco);font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;transition:opacity .2s}
.blog-cat-chip:hover{opacity:.82}
.blog-hero-meta span{font-size:.82rem;color:rgba(255,255,255,.50)}
.blog-hero-meta-sep{color:rgba(255,255,255,.25);font-size:.75rem}

/* ===== Breadcrumb ===== */
.blog-breadcrumb{background:var(--bege-claro);border-bottom:1px solid rgba(141,48,28,.10);padding:13px 0;font-size:.78rem}
.blog-breadcrumb ol{display:flex;align-items:center;list-style:none;max-width:var(--container);margin:0 auto;padding:0 32px;flex-wrap:wrap}
.blog-breadcrumb li{display:flex;align-items:center}
.blog-breadcrumb li:not(:last-child)::after{content:'/';color:rgba(141,48,28,.25);margin:0 8px}
.blog-breadcrumb a{color:var(--texto-suave);transition:color .2s}
.blog-breadcrumb a:hover{color:var(--primario)}
.blog-breadcrumb li:last-child{color:var(--preto);font-weight:500}

/* ===== Corpo do artigo ===== */
.blog-article-wrap{max-width:780px;margin:0 auto;padding:64px 24px 80px}
.blog-article-wrap p{font-size:1.03rem;line-height:1.88;color:#383838;margin:0 0 24px}
.blog-article-wrap h2{font-family:var(--font-titulo);font-size:clamp(1.4rem,3vw,1.85rem);color:var(--preto);font-weight:600;margin:52px 0 16px;padding-bottom:13px;border-bottom:2px solid rgba(141,48,28,.12);line-height:1.25}
.blog-article-wrap h3{font-family:var(--font-titulo);font-size:1.15rem;color:var(--primario);font-weight:600;margin:32px 0 10px}
.blog-article-wrap ul{margin:0 0 24px;padding-left:24px}
.blog-article-wrap ul li{font-size:1.03rem;line-height:1.8;color:#383838;margin-bottom:6px}

/* ===== CTA box ===== */
.blog-cta-box{background:linear-gradient(135deg,var(--preto-quente) 0%,#2a1a10 100%);border-radius:var(--raio-lg);padding:44px 36px;text-align:center;margin:56px 0 0;position:relative;overflow:hidden}
.blog-cta-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(141,48,28,.18) 0%,transparent 70%);pointer-events:none}
.blog-cta-box h3{font-family:var(--font-titulo);color:var(--branco);font-size:1.6rem;margin:0 0 12px;font-weight:600;position:relative}
.blog-cta-box p{color:rgba(255,255,255,.65);font-size:.95rem;margin:0 0 26px;position:relative}
.btn-cta-blog{display:inline-block;padding:15px 36px;background:var(--primario);color:var(--branco);font-weight:700;font-size:.92rem;border-radius:var(--raio-pill);text-decoration:none;letter-spacing:.5px;transition:background .2s,box-shadow .2s,transform .2s;position:relative}
.btn-cta-blog:hover{background:var(--primario-claro);box-shadow:var(--shadow-brand);transform:translateY(-2px)}

/* ===== Hero do blog index ===== */
.blog-index-hero{padding:140px 0 80px;background:linear-gradient(160deg,var(--preto-quente) 0%,#2a1a10 100%);text-align:center;position:relative;overflow:hidden}
.blog-index-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(141,48,28,.18) 0%,transparent 65%)}
.blog-index-hero h1{font-family:var(--font-titulo);font-size:clamp(2.2rem,5vw,3.6rem);color:var(--branco);font-weight:600;margin:0 0 18px;position:relative;line-height:1.15}
.blog-index-hero h1 em{font-style:italic;color:var(--bege)}
.blog-index-hero p{color:rgba(255,255,255,.60);font-size:1rem;max-width:520px;margin:0 auto;line-height:1.65;position:relative}

/* ===== Barra de categorias ===== */
.blog-cats-bar{background:var(--branco);border-bottom:1px solid rgba(141,48,28,.10);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.blog-cats-bar::-webkit-scrollbar{display:none}
.blog-cats-inner{display:flex;align-items:center;max-width:var(--container);margin:0 auto;padding:0 32px;min-width:max-content}
.blog-cats-inner a{display:inline-block;padding:16px 18px;font-size:.82rem;font-weight:600;color:var(--texto-suave);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.blog-cats-inner a:hover,.blog-cats-inner a.ativo{color:var(--primario);border-bottom-color:var(--primario)}

/* ===== Grid de cards ===== */
.blog-grid-sec{background:var(--creme);padding:64px 0 80px}
.blog-grid-full{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-sec-titulo{font-family:var(--font-titulo);font-size:clamp(1.4rem,2.5vw,1.9rem);color:var(--preto);font-weight:600;margin:0 0 36px}
/* Cores de fundo por categoria */
.blog-foto--unhas{background:linear-gradient(135deg,#1a0e0e 0%,#3d1a12 100%) !important}
.blog-foto--cabelos{background:linear-gradient(135deg,#0e1a0e 0%,#1a3d1a 100%) !important}
.blog-foto--maquiagem{background:linear-gradient(135deg,#1a0e1a 0%,#3d1228 100%) !important}
.blog-foto--cilios-e-sobrancelhas{background:linear-gradient(135deg,#0e141a 0%,#102a3d 100%) !important}
.blog-foto--estetica-facial-e-corporal{background:linear-gradient(135deg,#1a100e 0%,#3d2212 100%) !important}
.blog-foto--depilacao{background:linear-gradient(135deg,#1a1a0e 0%,#363d10 100%) !important}
.blog-foto--podologia{background:linear-gradient(135deg,#0e0e1a 0%,#12123d 100%) !important}
.blog-foto--spa{background:linear-gradient(135deg,#0e1a1a 0%,#10363d 100%) !important}
.blog-foto--dia-da-noiva{background:linear-gradient(135deg,#1a1015 0%,#2d1822 100%) !important}
.blog-foto--institucional{background:linear-gradient(135deg,#111209 0%,#252918 100%) !important}
.blog-foto-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.8rem;opacity:.35;user-select:none;pointer-events:none}

/* ===== Imagem de destaque do artigo ===== */
.blog-featured-img{display:block;margin:0 0 36px;border-radius:var(--raio-lg);overflow:hidden;aspect-ratio:16/9;max-height:480px}
.blog-featured-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Responsivo ===== */
@media(max-width:1024px){.blog-grid-full{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .blog-grid-full{grid-template-columns:1fr}
  .blog-hero{padding:110px 0 64px}
  .blog-article-wrap{padding:40px 20px 60px}
  .blog-cta-box{padding:32px 20px}
  .blog-cta-box h3{font-size:1.35rem}
  .blog-cats-inner{padding:0 16px}
  .blog-breadcrumb ol{padding:0 16px}
}