/* index.css - homepage specific styles (mobile-first) */

.hero{
  background-image: url('../images/combine_texture.png');
  background-position:center;
  background-size:cover;
  min-height:68vh;
}
.hero-inner .eyebrow{color:var(--gold);font-family:"Playfair Display",serif;font-size:0.95rem;letter-spacing:0.06em}
.hero-inner h1{
  margin:0;
  color:var(--gold);
  font-family:"Playfair Display",serif;
  font-size:1.6rem;
  line-height:1.18;
  text-shadow:0 6px 18px rgba(0,0,0,0.45);
}
/* reduce visual noise lines (roller/dholpuri) if any elements floating */
.hero .floating-tags{display:none}

/* mobile spacing for CTA */
.hero .btn{margin-top:14px}

/* highlights stack */
.highlights{display:flex;flex-direction:column;gap:16px;padding:36px 0}
.card{background:var(--card);padding:16px;border-radius:12px;text-align:center;border:1px solid rgba(212,175,55,0.06)}
.card h3{color:var(--gold);font-family:"Playfair Display",serif;margin-bottom:8px}
.card p{color:var(--muted);font-size:0.95rem}

/* tablet + desktop adjustments */
@media(min-width:700px){
  .hero-inner h1{font-size:2.4rem}
  .hero{min-height:72vh;padding:80px 0}
  .highlights{flex-direction:row;gap:28px;padding:80px 0}
  .card{padding:24px}
}
/* --------------------------
   FINAL MOBILE FIXES (HOME)
   -------------------------- */

@media (max-width: 768px) {

  /* Make gold text brighter & more visible */
  .hero-inner h1,
  .hero-inner .eyebrow {
    color: #ffdb70 !important; /* brighter golden */
    text-shadow: 0 4px 12px rgba(0,0,0,0.7);
  }

  /* Hero heading size fix */
  .hero-inner h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    padding: 0 10px;
  }

  /* Subtitle fix */
  .hero-inner .subtitle {
    font-size: 0.95rem !important;
    padding: 0 12px;
  }

  /* Hide broken floating category labels (ROLLER, DHOLPURI) */
  .floating-tags,
  .tagline,
  .hero .tag-roller,
  .hero .tag-dholpuri {
    display: none !important;
  }

  /* Button adjusts */
  .hero .btn {
    padding: 12px 32px !important;
    font-size: 1rem !important;
    margin-top: 12px;
  }

  /* Improve spacing */
  .hero {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Bottom description fix */
  .hero-inner p {
    font-size: 0.95rem !important;
    padding: 0 16px;
    line-height: 1.5;
  }
}