$htmlPath = "site\index.html"
$html = Get-Content $htmlPath -Raw

# Replace the inline style on .sample-grid with just the class
$html = $html -replace '<div class="sample-grid" style="display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center;">', '<div class="sample-grid">'

Set-Content -Path $htmlPath -Value $html -Encoding UTF8
Write-Host "Removed inline styles from sample-grid in index.html"

$cssPath = "site\assets\style.css"
$css = Get-Content $cssPath -Raw

$newCss = @"
/* --- SAMPLE GRID --- */
.sample-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 30px;
  align-items: center;
}
"@

# Add to the end of the file, before the responsive block if possible, or just append it.
# Actually I'll insert it right before `/* --- TRENDY TOOL CARDS --- */`
$css = $css -replace '/\* --- TRENDY TOOL CARDS --- \*/', "$newCss`n/* --- TRENDY TOOL CARDS --- */"

# Now add the responsive stacking for sample-grid inside the 760px media query
$responsiveStack = @"
  .sample-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
"@

$css = $css -replace '(\@media \(max-width: 760px\)\{)', "`$1`n$responsiveStack"

Set-Content -Path $cssPath -Value $css -Encoding UTF8
Write-Host "Updated style.css with responsive .sample-grid"
