/* ================================================================
   INDEX PAGE — PAGE-SPECIFIC STYLES
   Location: /home/kitchenbrand/public_html/T-Belle/styles/index.css

   Requires global.css to be loaded first.
   Contains only styles unique to the homepage layout.

   Sections:
     1. Hero
     2. Services
     3. Featured Properties (layout; card styles in featured-properties.css)
     4. Valuation form
     5. About
     6. Communities
     7. Testimonials
     8. SEO content block
     9. Page-level responsive overrides
================================================================ */


/* ================================================================
   1. HERO
================================================================ */
.hero {
    padding:             0 44px;
    min-height:          75vh;
    display:             flex;
    justify-content:     center;
    align-items:         center;
    flex-direction:      column;
    position:            relative;
    overflow:            hidden;
    width:               100%;
    background-image:    url('https://www.teresabelle.com/graphics/Hero-Ai.jpg');
    background-color:    var(--main-dark);
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center;
}
.hero-left {
    position:        relative;
    z-index:         1;
    padding:         40px 60px 72px;
    max-width:       720px;
    background:      rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius:   8px;
}
.hero-eyebrow {
    font-size:      10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--main-light);
    margin-top:     10px;
    margin-bottom:  22px;
}
.hero h1 {
    font-family:   var(--serif);
    font-size:     58px;
    font-weight:   300;
    color:         var(--white);
    line-height:   1.08;
    margin-bottom: 20px;
}
.hero h1 em {
    font-style: italic;
    color:      var(--main-light);
}
.hero-sub {
    font-size:     15px;
    font-weight:   300;
    color:         rgba(255,255,255,0.8);
    line-height:   1.75;
    max-width:     460px;
    margin-bottom: 40px;
}
.hero-actions {
    display:   flex;
    gap:       14px;
    flex-wrap: wrap;
}


/* ================================================================
   2. SERVICES
================================================================ */
.services-wrapper {
    border-top:    1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.services {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.svc {
    padding:      36px;
    border-right: 1px solid var(--border);
    cursor:       pointer;
    transition:   background 0.2s;
}
.svc:last-child { border-right: none; }
.svc:hover      { background: var(--main-pale); }
.svc-num {
    font-family:   var(--serif);
    font-size:     48px;
    font-weight:   300;
    color:         var(--main-pale);
    line-height:   1;
    margin-bottom: -8px;
}
.svc h3 {
    font-family:   var(--serif);
    font-size:     20px;
    font-weight:   400;
    color:         var(--charcoal);
    margin-bottom: 8px;
    position:      relative;
}
.svc p     { font-size: 13px; color: var(--muted); line-height: 1.6; }
.svc-arrow { font-size: 14px; color: var(--main); margin-top: 16px; display: block; }


/* ================================================================
   3. FEATURED PROPERTIES
   Layout wrapper only. Card styles live in featured-properties.css.
================================================================ */
.view-all-wrap { text-align: center; margin-top: 36px; }


/* ================================================================
   4. VALUATION FORM
================================================================ */
.valuation {
    display:               grid;
    grid-template-columns: 1fr 380px;
    background:            var(--main);
}
.val-left                { padding: 80px 44px; }
.val-left .sec-title     { color: var(--white); }
.val-left .sec-title em  { color: rgba(255,255,255,0.7); }
.val-left .sec-sub       { color: rgba(255,255,255,0.7); max-width: 420px; }
.val-right               { background: var(--white); padding: 48px 36px; }
.val-right h3            { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--charcoal); margin-bottom: 24px; }
.val-right h3 em         { font-style: italic; color: var(--main); }
.vfield                  { margin-bottom: 12px; }
.vfield input {
    width:       100%;
    padding:     12px 16px;
    border:      1px solid #E0ECEB;
    background:  var(--off-white);
    font-family: var(--sans);
    font-size:   13px;
    color:       var(--charcoal);
    outline:     none;
    transition:  border-color 0.2s;
}
.vfield input:focus       { border-color: var(--main); }
.vfield input::placeholder { color: var(--muted); font-size: 12px; }
.vsub {
    width:          100%;
    padding:        14px;
    background:     var(--main-dark);
    color:          var(--white);
    border:         none;
    font-family:    var(--sans);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background 0.2s;
}
.vsub:hover { background: var(--main-deep); }
.vnote      { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; }


/* ================================================================
   5. ABOUT
================================================================ */
.about-section {
    display:               grid;
    grid-template-columns: 360px 1fr;
}
.about-img-col {
    background:  var(--main-pale);
    display:     flex;
    align-items: stretch;
    overflow:    hidden;
}
.about-img-col img  { width: 100%; object-fit: cover; object-position: top center; }
.about-text         { padding: 72px 52px; }
.about-text .sec-title { margin-bottom: 20px; }
.about-bio          { font-size: 14px; color: var(--mid); line-height: 1.8; margin-bottom: 20px; }

/* Agent stats row (years, homes sold, volume) */
.about-stats {
    display:       flex;
    gap:           28px;
    flex-wrap:     wrap;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.about-stat      { text-align: center; }
.about-stat-num  { font-family: var(--serif); font-size: 30px; font-weight: 300; color: var(--main-dark); line-height: 1.1; }
.about-stat-label { font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.creds-row       { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.cred-pill {
    padding:        7px 14px;
    border:         1px solid var(--border);
    font-size:      10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--main-deep);
    background:     var(--main-pale);
}
.contact-row     { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.contact-item    { font-size: 13px; color: var(--mid); }
.contact-item a  { color: var(--main-dark); font-weight: 500; text-decoration: none; }
.contact-item a:hover { color: var(--main); }


/* ================================================================
   6. COMMUNITIES
================================================================ */
.communities              { padding: 72px 44px; background: var(--charcoal); }
.communities .sec-title   { color: var(--white); }
.communities .sec-title em { color: var(--main-light); }
.communities .sec-sub     { color: rgba(255,255,255,0.45); }
.comm-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:                   1px;
    background:            rgba(255,255,255,0.06);
}
.comm-card {
    background:  var(--charcoal);
    padding:     28px 24px;
    cursor:      pointer;
    transition:  background 0.2s;
    border-left: 3px solid transparent;
}
.comm-card:hover,
.comm-card.active    { background: rgba(10,186,181,0.08); border-left-color: var(--main); }
.comm-name           { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--white); margin-bottom: 6px; }
.comm-desc           { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.6; margin-bottom: 12px; }
.comm-meta           { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--main); }
.comm-meta a         { color: var(--main); text-decoration: none; }
.comm-meta a:hover   { color: var(--main-light); }


/* ================================================================
   7. TESTIMONIALS
================================================================ */
.testimonials {
    padding:    72px 44px;
    background: var(--main-pale);
}
.testi-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:                   20px;
    margin-top:            36px;
}
.tcard  { background: var(--white); padding: 28px; border-top: 3px solid var(--main); }
.tquote { font-family: var(--serif); font-size: 16px; font-weight: 300; font-style: italic; color: var(--charcoal); line-height: 1.7; margin-bottom: 18px; }
.tname  { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--main-deep); }
.tsub   { font-size: 11px; color: var(--muted); margin-top: 2px; }


/* ================================================================
   8. SEO CONTENT BLOCK
================================================================ */
.seo {
    padding:    64px 44px;
    border-top: 1px solid var(--border);
}
.seo .sec-title { font-size: 28px; margin-bottom: 32px; }
.seo-grid       { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; }
.seo-col h3     { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--charcoal); margin-bottom: 10px; }
.seo-col h3 em  { font-style: italic; color: var(--main); }
.seo-col p      { font-size: 13px; color: var(--muted); line-height: 1.75; }


/* ================================================================
   9. PAGE-LEVEL RESPONSIVE OVERRIDES
================================================================ */
@media (max-width: 900px) {
    .hero              { padding: 40px 20px 60px; min-height: auto; }
    .hero h1           { font-size: 40px; }
    .hero-left         { padding: 32px 28px 48px; }
    .services          { grid-template-columns: 1fr; }
    .svc               { border-right: none; border-bottom: 1px solid var(--border); }
    /* .listings-section and .lcard-grid responsive rules are in featured-properties.css */
    .valuation         { grid-template-columns: 1fr; }
    .val-left          { padding: 48px 20px; }
    .val-right         { padding: 36px 20px; }
    .about-section     { grid-template-columns: 1fr; }
    .about-img-col     { min-height: 300px; }
    .about-text        { padding: 40px 20px; }
    .communities       { padding: 48px 20px; }
    .comm-grid         { grid-template-columns: 1fr 1fr; }
    .testimonials      { padding: 48px 20px; }
    .testi-grid        { grid-template-columns: 1fr; }
    .seo               { padding: 48px 20px; }
    .seo-grid          { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 650px) {
    .comm-grid { grid-template-columns: 1fr; }
}