/* ==================================================
   Marketplace Corner Styles - Unicorner
   ================================================== */
   
/* ==================================================
   Marketplace Hero
================================================== */

.marketplace-hero {

    position: relative;

    min-height: 72vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #ffffff;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.hero-overlay {

    width: 100%;

    background: rgba(32, 22, 12, .48);

    padding: 7rem 2rem;

}

.hero-content {

    max-width: 760px;

    margin: 0 auto;

}

.corner-label {

    display: block;

    font-size: .9rem;

    letter-spacing: .25em;

    text-transform: uppercase;

    color: #d7b04a;

    margin-bottom: 1rem;

}

.marketplace-hero h1 {

    font-size: clamp(3rem, 6vw, 4.8rem);

    margin: 0 0 1rem;

    color: #ffffff;

}

.hero-tagline {

    font-size: 1.6rem;

    color: #ffffff;

    margin-bottom: 1.5rem;

}

.hero-intro {

    font-size: 1.1rem;

    line-height: 1.8;

    color: #f7f3ec;

    margin-bottom: 2.5rem;

}

/* ==================================================
   Welcome Section
================================================== */

.marketplace-section {

    background: #fcfaf6;

    padding: 6rem 2rem;

}

.content-wrapper {

    max-width: 900px;

    margin: 0 auto;

}

.marketplace-section h2 {

    font-size: 2.8rem;

    color: #4f3926;

    margin-bottom: 1rem;

}

.section-divider {

    width: 80px;

    height: 3px;

    background: #caa13d;

    margin: 0 0 2.5rem;

    border-radius: 2px;

}

.marketplace-section p {

    font-size: 1.1rem;

    line-height: 2;

    color: #5b5348;

    margin-bottom: 1.8rem;

}

/* ==================================================
   Marketplace Divider
================================================== */

.marketplace-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1.5rem;

    max-width: 700px;

    margin: 6rem auto;

}

.marketplace-divider .divider-line {

    flex: 1;

    height: 2px;

    background: linear-gradient(to right,
            transparent,
            #caa13d,
            transparent);

}

.marketplace-divider .divider-icon {

    color: #caa13d;

    font-size: 1.6rem;

    line-height: 1;

}

/* ==================================================
   Community
================================================== */

.marketplace-community {

    background: #f7f1e6;

    padding: 6rem 2rem;

}

.wrap {

    max-width: 1200px;

    margin: 0 auto;

}

.marketplace-community h2 {

    text-align: center;

    font-size: 2.7rem;

    color: #4f3926;

    margin-bottom: 1rem;

}

.section-intro {

    max-width: 700px;

    margin: 0 auto 3rem;

    text-align: center;

    font-size: 1.15rem;

    color: #6a5b49;

    line-height: 1.8;

}

.community-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.community-text p {

    line-height: 1.9;

    color: #5b5348;

    margin-bottom: 1.5rem;

}

.community-list {

    background: #fcfaf6;

    border: 1px solid #d9cdb3;

    border-radius: 16px;

    padding: 2rem;

    box-shadow: 0 10px 25px rgba(70, 55, 25, .08);

}

.community-list h3 {

    color: #4f3926;

    margin-bottom: 1.2rem;

}

.community-list ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.community-list li {

    margin-bottom: .9rem;

    line-height: 1.6;

}

.community-callout {

    margin-top: 4rem;

    text-align: center;

    background: #fffdf9;

    border: 2px solid #d9cdb3;

    border-radius: 18px;

    padding: 3rem;

    box-shadow: 0 14px 32px rgba(60, 45, 20, .08);

}

.community-callout h3 {

    color: #4f3926;

    font-size: 2rem;

    margin-bottom: 1rem;

}

.community-callout p {

    max-width: 760px;

    margin: 0 auto 2rem;

    line-height: 1.9;

}

/* ==================================================
   Feature Cards
================================================== */

.services-section {

    background: #fcfaf6;

    padding: 6rem 2rem;

}

.corner-wrapper {

    max-width: 1200px;

    margin: 0 auto;

}

.services-section h2 {

    text-align: center;

    font-size: 2.7rem;

    color: #4f3926;

    margin-bottom: 1rem;

}

.search-intro {

    max-width: 760px;

    margin: 0 auto 4rem;

    text-align: center;

    line-height: 1.8;

    color: #6a5b49;

    font-size: 1.15rem;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:2.5rem;

}

.feature-card {

    background: #fdfbf8;

    border: 1px solid #d9cdb3;

    border-radius: 18px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    box-shadow: 0 10px 28px rgba(70, 55, 25, .08);

    transition: all .35s ease;

}

.feature-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 22px 42px rgba(70, 55, 25, .16);

}

.feature-image img {

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    display: block;

    border-radius: 12px;

}

.feature-content {

    padding: 2rem;

    display: flex;

    flex-direction: column;

    flex: 1;

}

.feature-content h3 {

    color: #4f3926;

    font-size: 1.6rem;

    margin-bottom: 1rem;

}

.feature-content h3::after {

    content: "";

    display: block;

    width: 55px;

    height: 3px;

    background: #caa13d;

    margin-top: .7rem;

    border-radius: 3px;

}

.feature-content p {

    line-height: 1.9;

    color: #5b5348;

    flex: 1;

}

.center-button {

    grid-column: 1 / -1;

    text-align: center;

    margin-top: 1rem;

}

/* ==================================================
   Buttons
================================================== */

.button,
.hero-button,
.whatnot-button {

    display: inline-block;

    padding: 0.9rem 2rem;

    background: #caa13d;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    border-radius: 999px;

    transition: all .3s ease;

    box-shadow: 0 6px 16px rgba(70, 55, 25, .18);

}

.button:hover,
.hero-button:hover,
.whatnot-button:hover {

    background: #b88f2f;

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(70, 55, 25, .25);

}

.center-button {

    text-align: center;

    margin-top: 3rem;

}

/* ==================================================
   Mobile
================================================== */

@media (max-width:768px) {

    /* Hero */

    .marketplace-hero {

        min-height: 60vh;

    }

    .hero-overlay {

        padding: 5rem 1.5rem;

    }

    .marketplace-hero h1 {

        font-size: 2.6rem;

    }

    .hero-tagline {

        font-size: 1.3rem;

    }

    .hero-intro {

        font-size: 1rem;

    }


    /* Sections */

    .heritage-section,
    .heritage-community,
    .services-section {

        padding: 4rem 1.5rem;

    }


    /* Community */

    .community-grid {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }

    .community-list {

        margin-top: 1rem;

    }


    /* Feature Cards */

    .feature-grid {

        grid-template-columns: 1fr;

    }

    .feature-card {

        max-width: 500px;

        margin: 0 auto;

    }


    /* Typography */

    .heritage-section h2,
    .heritage-community h2,
    .services-section h2 {

        font-size: 2.2rem;

    }

}