/*
Theme Name: Tarot Blog - Enhanced
Theme URI: https://tarotdelosenamorados.eu
Author: Tarot de los Enamorados
Description: Theme created to match Tarot de los Enamorados main site (hero, grid, offer, footer, header, logo, blog templates).
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: tarot-blog
*/

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  color: #222;
  background: #0f0710;
}

/* Container */
.site {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  color: #fff;
}

/* Header */
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
}
.site-logo { font-size:20px; font-weight:700; color:#ffd6f0; text-decoration:none; }

/* Hero */
.hero {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:22px;
}
.hero .hero-bg { width:100%; height:280px; object-fit:cover; display:block; filter:brightness(.35); }
.hero .hero-inner { position:absolute; inset:0; display:flex; align-items:center; padding:28px; gap:24px; }
.hero h1 { margin:0; font-size:34px; color:#fff; }
.hero p { margin-top:8px; color:#f6e6f6; max-width:640px; }

/* Tarot grid */
.tarotGrid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:12px;
}
.tarotCard { background:rgba(255,255,255,0.04); padding:14px; border-radius:10px; text-align:center; color:#fff; }
.tarotCard img { width:100%; height:140px; object-fit:cover; border-radius:8px; }

/* Offer */
.offer { background:linear-gradient(90deg,#8b5cf6,#d63384); padding:18px; border-radius:10px; color:#fff; margin:24px 0; }
.primaryBtn, .secondaryBtn { display:inline-block; padding:10px 14px; border-radius:8px; text-decoration:none; color:#fff; background:#7a1f5a; }

/* Footer */
.site-footer { margin-top:28px; padding:12px 0; color:#d9c6e8; text-align:center; }

/* Responsive */
@media(max-width:900px){
  .tarotGrid{ grid-template-columns:repeat(2,1fr); }
  .hero .hero-inner{ flex-direction:column; align-items:flex-start; }
}