/* business-spotlight.css
   Optimized — Branding: maroon #702E3B, accents and neutrals
*/

:root {
    --brand-maroon: #702E3B;
    --muted: #6b6b6b;
    --bg: #fff;
    --page-max: 1100px;
  }
  
  /* -----------------------
     Base / Layout
     ----------------------- */
  .business-spotlight-page {
    background: linear-gradient(#fff, #fff);
    color: #111;
    font-family: Inter, Helvetica, sans-serif;
  }
  .container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 20px;
  }
  
/* -----------------------
   HERO IMAGE & ABOUT SECTION
   ----------------------- */
   .about-hero-image {
    width: 100%;
    overflow: hidden;
  }
  
  .hero-skyline-img {
    width: 100%;
    max-height: 400px;
    height: auto;
    display: block;
    object-fit: cover;
  }

  
  
  .about-top-section,
  .bs-main > div {
      background-color: white;
      padding: 3rem 1rem;
      text-align: center;
      margin-bottom: 2rem; /* space between sections */
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box; /* makes padding stay inside width */
  }
  
  .about-top-section .section-title {
      color: #7b1e1e; /* Maroon brand color */
      font-size: 2rem;
      margin-bottom: 0.5rem;
  }
  
  .about-top-section .section-subtitle {
      color: #222;
      font-size: 1.25rem;
      margin-bottom: 1rem;
  }
  
  .about-top-section .section-paragraph,
  .bs-main .bs-intro,
  .bs-main .bs-how,
  .bs-main .grid-two {
      color: #222;
      font-size: 1rem;
      max-width: 700px;
      margin: 0 auto 2rem auto;
      line-height: 1.6;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box; /* makes padding stay inside width */
  }
  
  
  .cta-row {
    margin-top: 1.5rem;
  }
  
  .cta-row .btn-primary {
    background-color: #7b1e1e;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
  }
  
  
  /* -----------------------
     Buttons
     ----------------------- */
  .btn {
    text-decoration: none;
    display:inline-block;
    padding:10px 16px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    border: none;
  }
  .btn-primary { background: var(--brand-maroon); color: #fff; }
  .btn-dark    { background: #111; color: #fff; }
  .btn-outline { background: transparent; border: 1px solid #ddd; color: #111; }
  
  /* -----------------------
     Main layout & components
     ----------------------- */
  .bs-main { padding: 32px 0 60px; }
  
  /* two-column intro */
  .grid-two {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
  }
  .section-title {
    font-family: 'Poppins', sans-serif;
    color: var(--brand-maroon);
    font-size: 22px;
    margin: 0 0 10px 0;
  }
  .lead {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 12px 0;
  }
  .bs-features {
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:10px;
    list-style:none;
    padding:0;
    margin-top:12px;
  }
  .bs-features li {
    padding:10px;
    border-radius:8px;
    background:#fafafa;
    border:1px solid #f0f0f0;
  }
  
  /* panel */
  .bs-panel {
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  }
  .panel-title { color: var(--brand-maroon); margin: 0 0 8px 0; }
  .formats ul { margin: 8px 0 0 18px; }
  
  /* coffee */
  .bs-coffee {
    margin-top: 28px;
    background: linear-gradient(90deg,#fff7f0, #fff);
    padding: 18px;
    border-radius:10px;
  }
  .coffee-inner { display:flex; gap:16px; align-items:center; }
  .coffee-text { flex:1; }
  .coffee-photo {
    width:220px;
    height:120px;
    background:#f3f3f3;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#666;
  }
  
  /* how */
  .bs-how { margin-top: 28px; }
  .bs-steps { margin-top: 10px; color: #333; }
  
  /* -----------------------
     Form section
     ----------------------- */
  .bs-form-section,
  .bs-how 
  { margin-top: 28px;
 }
  .bs-form-card {
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  }
  .form-title { text-align:center; color:var(--brand-maroon); margin:0; }
  
  /* form grid */
  .bs-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:14px;
  }
  .bs-form-grid .col-span-2 { grid-column: 1 / -1; }
  
  /* controls */
  input, select, textarea {
    width:100%;
    padding:10px;
    border-radius:6px;
    border:1px solid #ddd;
    font-size:15px;
    box-sizing:border-box;
  }
  textarea { min-height:110px; resize:vertical; }
  
  /* actions */
  .form-actions {
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:flex-start;
  }
  .form-error {
    color: #b00020; /* red */
    font-size: 0.875rem;
    margin-top: 4px;
  }
  .email-alternative { color: var(--muted); font-size:13px; }
  
  /* thank you */
  .hidden { display:none; }
  .thankyou { text-align:center; padding:18px; }
  .thank-title { font-weight:600; color:#222; }
  
  /* footer */
  .bs-footer { margin-top:28px; text-align:center; color:var(--muted); }
  
  /* -----------------------
     Responsive tweaks
     ----------------------- */

/* Desktop */
@media (min-width: 1200px) {
  .hero-skyline-img {
    max-height: 680px;     /* slightly taller on ultra-wide screens */
  }
}

/* Optional: increase spacing on larger screens */
@media (min-width: 900px) {
    .bs-intro {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Tablet */
  @media (max-width: 980px) {
    .grid-two { grid-template-columns: 1fr; }
    .coffee-inner { flex-direction: column; }
    .coffee-photo { width:100%; height:200px; }
    .bs-form-grid { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column; align-items:stretch; }
    .hero-skyline-img {
      max-height: 380px;
    }
  }

  /* Mobile */
  @media (max-width: 520px) {
    .bs-hero-title { font-size: 26px; }
    .bs-hero-inner { padding: 28px 0; }
    .hero-skyline-img {
      max-height: 280px;
    }
  }