/* ---- Design tokens ---- */
:root{
    --brand:  #FEB900;
    --ok:     #22c55e;
    --ink-1:  #0f172a;
    --ink-2:  #475569;
    --card-bg:#ffffff;
    --line:   #e5e7eb;
    --wrap-max: 1200px;
    --wrap-pad: clamp(16px, 4vw, 28px);
    --wrap-w: min(var(--wrap-max), calc(100vw - (var(--wrap-pad) * 2)));
}

body {
    background: #F5F6F7;
}

section {
    padding: 0;
}

/* ----- Details layout ----- */
main.container {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 28px;
    align-items: start;
    width: var(--wrap-w);
    margin-inline: auto;
}

main.container > .hero-carousel {
  grid-column: 1 / -1;
}

main.container > .listing-head {
  grid-column: 1 / -1;
}

.btn:hover,
.btn:first-child:active,
.btn:first-child:active :not(.btn-check)+.bnt:active {
    background: var(--brand);
    border-color: var(--brand);
}

.details-left > * + *{
  margin-top: 20px;
}

.details-right{
    position: relative;
}

@media (max-width: 1100px){
    main.container {
        width: auto;
        grid-template-columns: 1fr;
    }
}

.listing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 16px;
}

@media (max-width: 900px){
  .listing-head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px 0;
  }
  .listing-price{
        order: 3;
        flex: 0 0 100%;
        margin-top: 6px;
        text-align: left;
        font-size: clamp(28px, 6vw, 36px);
        line-height: 1.15;
  }
}

.listing-badges {
    display: grid;
    align-content: start;
    gap: 8px;
}

.listing-title { 
    margin: 0;
    font-weight: 800;
    font-size: clamp(40px,3.2vw,48px);
}

.listing-price {
    color: var(--brand);
    font-weight: 800;
    font-size: clamp(40px,3.2vw,48px);
    line-height: 1.2;
}

/* ---- Card Shell ---- */
.about-card {
    /* padding: 34px 0;
    margin: 21px 0; */

    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 34px;
    margin: 21px 0 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ---- Titles ---- */
.residential-title {
    margin: 0 0 10px 0;
    color: var(--ink-1);
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 24px);
}

/* Mobile padding tweak (keeps your previous behavior) */
@media (max-width: 900px) {
    .residential-card,
    .listing-head,
    .agent-card,
    .gallery-card {
        padding: 16px;
    }
}

.pill {
    color:var(--brand);
    align-self: flex-start;
    padding: .3rem .6rem;
    font-weight: 600;
    font-size: .9rem;
    width: fit-content;
}