/* ==========================================================================
   TLK ACF Hero Module — Full CSS
   File: assets/css/hero.css
   Notes:
   - Theme-agnostic: wraps everything in .tlkmod-* names
   - Patterns controlled by .tlkmod--{pattern} on .tlkmod-hero
   - Brand color via CSS var --brand (set inline by PHP)
   ========================================================================== */

/* ---------- Base / tokens ---------- */
.tlkmod-hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 100% -100%, rgba(12,204,134,.08), transparent 60%),
    radial-gradient(800px 500px at -50% 0%, rgba(14,165,233,.08), transparent 60%);
  --brand:#437b1b;   /* overridden inline via style attr if ACF color provided */
  --ink:#111;
}

/* Gentle bottom divider + tiny bolt row (industrial touch) */
.tlkmod-hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0 50%;
  transform:translateX(-50%);
  width:100vw; height:1px; background:linear-gradient(90deg, #D1D5DB, #D1D5DB);
  z-index: 1;
}
.tlkmod-hero::before {
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:100vw; height:12px; pointer-events:none;
  background:
    radial-gradient(circle, #D1D5DB 0 1.5px, transparent 1.6px) 0 6px/80px 12px repeat-x;
  opacity:.7; z-index: 1;
}

/* ---------- Container widths (Bootstrap-like) ---------- */
.tlkmod-wrap {
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding-left:15px;
  padding-right:15px;
}
@media (min-width:768px) { .tlkmod-wrap { max-width:750px; } }
@media (min-width:992px) { .tlkmod-wrap { max-width:970px; } }
@media (min-width:1200px) {
  .tlkmod-wrap { max-width:1170px; }
  .tlkmod-hero { padding-top:74px; }
}
@media (max-width: 900px) {
  .tlkmod-wrap {
    max-width: 100%; /* Remove max-width constraint on mobile */
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ---------- Layout ---------- */
.tlkmod-grid {
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:32px;
  align-items:center;
  padding-bottom:2rem;
  padding-top: 3rem;
}
@media (max-width:900px) {
  .tlkmod-grid {
    grid-template-columns:1fr;
    gap: 24px; /* More gap between text and image */
    padding-bottom: 3rem; /* Increase bottom padding for the section */
    padding-top: 0rem;
  }
}

/* ---------- Typography & badges ---------- */
.tlkmod-kicker {
  color:#444; text-transform:uppercase; font-weight:700; letter-spacing:.18em; font-size:1.25rem; margin-bottom: 1rem;
}
.tlkmod-h1 {
  /* font-size:clamp(1.9rem,3.6vw,3.1rem); */
  font-size: clamp(34px, 2.75vw, 54px);
  line-height:1.1; 
  margin:.35rem 0 .6rem; 
  color:var(--ink, #111);
}
.tlkmod-p {
  color:black; 
  /* font-size: 1.75rem; */
  font-size: 18px;
}

.tlkmod-badgerow { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; }
.tlkmod-badge {
  display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:0;
  cursor:default; color:var(--ink, #111); font-weight:600;
}
.tlkmod-badge__icon {
  width:14px; height:14px; border-radius:3px; display:inline-block;
  margin-top: -3px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.5 11.5L2.8 8l1.4-1.4 2.3 2.3 5.3-5.3L13.2 5z"/></svg>') no-repeat center/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.5 11.5L2.8 8l1.4-1.4 2.3 2.3 5.3-5.3L13.2 5z"/></svg>') no-repeat center/contain;
  background:var(--brand, #437b1b); box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
}

@media (max-width: 900px) {
  .tlkmod-hero {
    padding: 2rem 0; /* Increase top and bottom padding */
  }

  /* .tlkmod-kicker {
    font-size: 1rem;
    letter-spacing: 0.1em;
  } */

  .tlkmod-h1 {
    /* font-size: clamp(1.5rem, 6vw, 2.5rem); */
    font-size: clamp(34px, 2.75vw, 54px);
    line-height: 1.2; /* Better line spacing */
    margin: 0.5rem 0 1rem; /* More vertical spacing */
  }

  /* .tlkmod-p {
    font-size: 1rem;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .tlkmod-badgerow {
    gap: 8px 12px;
    margin-top: 8px;
  } */

  /* .tlkmod-badge {
    font-size: 0.9rem;
  } */
}

/* ---------- Visual area ---------- */
.tlkmod-visual-outer {
  position:relative;
  isolation:isolate; /* keeps pseudo layers under image stack */
  padding-top: 1rem;
}
.tlkmod-visual {
  position:relative; align-self:stretch; background:#fff; z-index:1;
  display:flex; flex-direction:column; overflow:hidden;
}
.tlkmod-img, .tlkmod-img--2 {
  width:100%; height:auto; object-fit:contain; z-index:1;
}
/* optional overlap if you want a little stack */
/* .tlkmod-img--2 {  margin-top:-6%;  } */

@media (max-width: 900px) {
  .tlkmod-visual-outer {
    padding-top: 1.5rem; /* More space above image */
  }

  .tlkmod-img, .tlkmod-img--2 {
    width: 100%; /* Ensure images scale properly */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center images */
    max-width: 300px; /* Limit max width for better scaling */
  }
}

/* Decorative “blob” behind art (kept subtle, can be disabled) */
.tlkmod-visual::before {
  --blob-size: clamp(270px, 100vw, 980px);
  content:""; position:absolute; left:100%; top:50%; transform:translate(-50%, -50%) scale(1.0);
  width:var(--blob-size); height:var(--blob-size); pointer-events:none; z-index:0;
  background:#ffffff; opacity:1;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Keep header above patterns */
.site-header { position:relative; z-index:50; }

/* ---------- Buttons ---------- */
.tlkmod-cta { margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }
.tlkmod-btn {
  display:inline-block; padding:10px 16px; border-radius:12px; background:var(--brand, #437b1b);
  color:#fff; border:1px solid transparent; text-decoration:none;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tlkmod-btn:hover { background:var(--brand, #437b1b); }
.tlkmod-btn--secondary { background:var(--brand, #437b1b); }

@media (max-width: 900px) {
  .tlkmod-cta {
    flex-direction: column; /* Stack buttons vertically */
    gap: 1rem; /* More space between buttons */
    margin-top: 1.5rem; /* Increase space above buttons */
  }

  .tlkmod-btn {
    width: 100%; /* Full-width buttons for easier tapping */
    padding: 12px 16px; /* Larger button padding */
    font-size: 1.1rem; /* Bigger button text */
    text-align: center; /* Center button text */
  }
}

/* ==========================================================================
   PATTERN SYSTEM
   Apply .tlkmod--{pattern} on .tlkmod-hero (via ACF select)
   Patterns render in .tlkmod-visual-outer::after (and sometimes ::before)
   All patterns feather toward edges using a radial mask so content stays legible.
   ========================================================================== */

/* Shared edge-fade mask for patterns */
.tlkmod-visual-outer::after {
  pointer-events:none; z-index:0;
  -webkit-mask: radial-gradient(85% 75% at 65% 40%, #000 0 60%, transparent 70%);
          mask: radial-gradient(85% 75% at 65% 40%, #000 0 60%, transparent 70%);
}

/* ===== Existing variants retained ===== */

.tlkmod--mesh {
  position: relative; /* Parent must be positioned to contain the absolute pseudo-element */
  width: 100%; /* Ensure the section takes full width of its container */
}

.tlkmod--mesh .tlkmod-visual-outer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally relative to the section */
  width: 200vw; /* Full viewport width for edge-to-edge coverage */
  height: 100%; /* Match the height of the parent section */
  background:
    radial-gradient(80% 70% at 62% 38%, color-mix(in srgb, var(--brand) 25%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 11px, color-mix(in srgb, var(--brand) 18%, transparent) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--brand) 18%, transparent) 11px 12px);
  opacity: 0.5;
  z-index: -1; /* Ensure it stays behind other content */
}
/* .tlkmod--mesh .tlkmod-visual-outer::after{
  content:"";
  position:absolute;
  inset:-10% -14% -10% -6%;
  background:
    radial-gradient(80% 70% at 62% 38%, color-mix(in srgb, var(--brand) 25%, transparent), transparent 60%),
    repeating-linear-gradient(0deg,  transparent 0 11px, color-mix(in srgb, var(--brand) 18%, transparent) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--brand) 18%, transparent) 11px 12px);
  opacity:.5;
  width: 100vw;
} */

/* Hex glow ring (kept, simplified for perf) */
.tlkmod--hex .tlkmod-visual-outer::before {
  content:""; position:absolute; left:52%; top:58%; transform:translate(-50%,-50%);
  width:min(54vw, 820px); aspect-ratio:1; pointer-events:none; z-index:0;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand) 45%, transparent) 0 40%, transparent 45% 100%),
    conic-gradient(from 0deg, color-mix(in srgb, var(--brand) 70%, transparent) 0 5%, transparent 0 100%);
  mix-blend-mode:multiply; filter:blur(1px) drop-shadow(0 30px 60px rgba(0,0,0,.08));
  opacity:.35;
}

/* Diagonal brand beam (applies to the hero container) */
.tlkmod-hero.tlkmod--beam::before {
  content:""; position:absolute; right:0; top:0; width:min(48vw,900px); height:130%;
  background:
    conic-gradient(from 210deg at 85% 15%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 55%),
    radial-gradient(55% 55% at 70% 35%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  opacity:.5; pointer-events:none; z-index:0;
}

/* ===== New manufacturing patterns ===== */

/* 1) Dots — machined plate / jig */
.tlkmod--dots .tlkmod-visual-outer::after {
  content:""; position:absolute; inset:-8% -12% -8% -8%;
  opacity:.45;
  background:
    radial-gradient(circle at center,
      color-mix(in srgb, var(--brand) 28%, transparent) 0 1px, transparent 1px) 0 0/14px 14px,
    radial-gradient(60% 50% at 60% 40%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%);
  filter:saturate(0.9);
}

/* 2) Grid — shop graph paper */
.tlkmod--grid .tlkmod-visual-outer::after {
  content:""; position:absolute; inset:-8% -12% -8% -8%;
  background:
    repeating-linear-gradient(0deg,  transparent 0 19px, color-mix(in srgb, var(--brand) 16%, transparent) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, color-mix(in srgb, var(--brand) 16%, transparent) 19px 20px),
    radial-gradient(70% 60% at 60% 40%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%);
  opacity:.5;
}

/* 3) Blueprint — major/minor grid + diagonal guide */
.tlkmod--blueprint .tlkmod-visual-outer::after {
  content:""; position:absolute; inset:-8% -12% -8% -8%;
  background:
    /* major lines */
    repeating-linear-gradient(0deg,  transparent 0 79px, color-mix(in srgb, var(--brand) 20%, transparent) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--brand) 20%, transparent) 79px 80px),
    /* minor lines */
    repeating-linear-gradient(0deg,  transparent 0 15px, color-mix(in srgb, var(--brand) 10%, transparent) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--brand) 10%, transparent) 15px 16px),
    /* diagonal guide */
    linear-gradient(35deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 40%),
    radial-gradient(70% 60% at 60% 40%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%);
  opacity:.45;
}

/* 4) Hatch — angled CNC/tooling marks */
.tlkmod--hatch .tlkmod-visual-outer::after {
  content:""; position:absolute; inset:-8% -12% -8% -8%;
  background:
    repeating-linear-gradient(25deg,
      color-mix(in srgb, var(--brand) 12%, transparent) 0 2px,
      transparent 2px 12px),
    radial-gradient(70% 60% at 60% 40%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%);
  opacity:.5;
}

/* 5) Perforated — punched metal / pegboard */
.tlkmod--perforated .tlkmod-visual-outer::after {
  content:""; position:absolute; inset:-8% -12% -8% -8%;
  --dot: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent) 0 1.2px, transparent 1.3px);
  background:
    var(--dot) 0 0/16px 16px,
    var(--dot) 8px 8px/16px 16px,
    radial-gradient(70% 60% at 60% 40%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%);
  opacity:.5;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .tlkmod-visual-outer::before,
  .tlkmod-visual-outer::after { animation:none; }
}

/* ---------- Mobile overflow toggle (if needed) ---------- */
@media (max-width:1024px) {
  .tlkmod-hero[data-contain-mobile="true"] .tlkmod-visual { overflow:hidden; }
  .tlkmod-hero[data-contain-mobile="false"] .tlkmod-visual { overflow:visible; }
}