/*
Theme Name: HerLabs Site
Text Domain: herlabs-site
Version: 0.2.0
*/

/* ========== Utilidades mínimas ========== */
.u-max { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.u-hide { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.u-rounded { border-radius: 16px; }
.u-shadow { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.u-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width:1024px){ .u-grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){  .u-grid-3{ grid-template-columns:1fr; } }

/* ========== Tipografía (fallback) ========== */
:root { --font-peridot: "Peridot PE Variable", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
body  { font-family: var(--font-peridot); }

/* ========== HERO (cover con CTA dentro – si usás patrón Gutenberg) ========== */
/* (lo dejamos por si seguís usando el patrón; no interfiere con el template puro) */
.hero-cover{
  border-radius:0 !important;
  overflow:visible;
  position:relative;
}
.hero-cover .wp-block-cover__inner-container{ position:relative; }

.hero-text{
  max-width:none;
  width:40vw;
  margin-left:9vw;
  margin-right:auto;
}
.hero-text h1{ margin:16px 0 0; line-height:1.08; }

@media (max-width:1200px){ .hero-text{ width:48vw; margin-left:7vw; } }
@media (max-width:900px){  .hero-text{ width:60vw; margin-left:6vw; } }
@media (max-width:700px){  .hero-text{ width:86vw; margin-left:7vw; } }

.tag-pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:6px;
  font-weight:700; font-size:14px;
  width:auto; max-width:max-content;
  white-space:nowrap;
}
.cta-pill .wp-block-button__link,
.cta-pill-link{
  border-radius:8px; padding:12px 22px; font-weight:700;
  text-decoration:none; display:inline-block;
}

/* ========== Tarjetas (cover) ========== */
.service-card{ position:relative; overflow:hidden; }
.service-card .service-title{
  position:absolute; left:16px; bottom:12px;
  background:rgba(253,251,247,.95); padding:6px 10px;
  border-radius:10px; font-weight:600;
}

/* ========== Chips ========== */
.chip{ border:1px solid rgba(0,0,0,.06); }
.chip .chip-bar{ border-top-left-radius:12px; border-top-right-radius:12px; margin:-10px -16px 8px -16px; }

/* (Opcional) Grilla de 4 columnas para servicios */
.u-grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media (max-width:1200px){ .u-grid-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){  .u-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .u-grid-4{ grid-template-columns:1fr; } }

/* =========================================================
   HERO PLAIN (template sin bloques)
   - full-bleed cover con CTA superpuesto
   - control en vivo con variables CSS (left/width/shift)
   ========================================================= */
.hero-plain{ position:relative; isolation:isolate; }
.hero-plain__bg{
  min-height: var(--hero-min-h, 520px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-plain__inner{
  position:absolute;
  top:50%;
  left: var(--hero-left, 9vw);
  transform: translateY(-50%);
  width: var(--hero-width, 40vw);
}
.hero-plain__inner h1{ line-height:1.08; margin:16px 0 0; }

/* Botón superpuesto, estable y editable por variable */
.hero-plain__cta{
  position:absolute;
  left:50%;
  bottom:0;
  transform: translate(-50%, var(--hero-btn-shift, 50%));
  z-index: 5;
}

/* Responsivo del template puro */
@media (max-width:1200px){
  .hero-plain{ --hero-left:7vw; --hero-width:48vw; }
}
@media (max-width:900px){
  .hero-plain{ --hero-left:6vw; --hero-width:60vw; }
}
@media (max-width:700px){
  .hero-plain{ --hero-left:7vw; --hero-width:86vw; --hero-btn-shift: 40%; }
}