/* =========================================================
   Tariqarain.com
   Homepage
========================================================= */


/* =========================================================
   Hero
========================================================= */

.tq-home-hero {
    padding: 32px 0 48px;
}

.tq-home-hero__panel {
    position: relative;
    overflow: hidden;

    padding: 48px 48px 0;

    background:
        linear-gradient(
            135deg,
            var(--tq-navy) 0%,
            var(--tq-blue-dark) 55%,
            var(--tq-blue) 100%
        );

    border-radius: var(--tq-radius-xl);
}


/* subtle decorative glow */

.tq-home-hero__panel::before {
    content: "";

    position: absolute;
    top: -160px;
    right: -120px;

    width: 420px;
    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(18, 189, 245, 0.28) 0%,
            rgba(18, 189, 245, 0) 70%
        );

    pointer-events: none;
}


/* -------------------------
   Hero Content
-------------------------- */

.tq-home-hero__content {
    position: relative;
    z-index: 1;

    max-width: 720px;
}

.tq-home-hero__eyebrow {
    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 18px;
    font-weight: 500;
}

.tq-home-hero__title {
    max-width: 680px;

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.tq-home-hero__description {
    max-width: 650px;

    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 17px;
    line-height: 1.6;
}


/* =========================================================
   Marketplace Search
========================================================= */

.tq-marketplace-search {
    position: relative;
    z-index: 2;

    margin-top: 36px;

    background: var(--tq-surface);

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius:
        var(--tq-radius-lg)
        var(--tq-radius-lg)
        0
        0;

    box-shadow: var(--tq-shadow-elevated);
}


/* -------------------------
   Desktop Tabs
-------------------------- */

.tq-marketplace-search__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    padding: 8px;

    border-bottom: 1px solid var(--tq-border-light);
}

.tq-marketplace-search__tab {
    min-height: 52px;

    padding: 10px 16px;

    color: var(--tq-navy);
    background: transparent;

    border: 0;
    border-radius: var(--tq-radius-md);

    font-size: 15px;
    font-weight: 600;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.tq-marketplace-search__tab:hover {
    background: var(--tq-bg-soft);
}

.tq-marketplace-search__tab.is-active {
    color: #ffffff;
    background: var(--tq-blue);
}


/* -------------------------
   Mobile Selector
-------------------------- */

.tq-marketplace-search__mobile-selector {
    display: none;

    padding: 14px;
}

.tq-marketplace-search__mobile-selector select {
    width: 100%;
    height: 52px;

    padding: 0 42px 0 14px;

    color: var(--tq-navy);
    background: var(--tq-surface);

    border: 1px solid var(--tq-border);
    border-radius: var(--tq-radius-md);

    font-weight: 600;
}


/* -------------------------
   Search Form
-------------------------- */

.tq-marketplace-search__form {
    display: grid;

    grid-template-columns:
        minmax(260px, 2.2fr)
        minmax(150px, 1fr)
        minmax(170px, 1fr)
        150px;

    gap: 10px;

    padding: 14px;
}


/* -------------------------
   Fields
-------------------------- */

.tq-marketplace-search__field {
    min-width: 0;
}

.tq-marketplace-search__field input,
.tq-marketplace-search__field select {
    width: 100%;
    height: 52px;

    padding: 0 15px;

    color: var(--tq-text-primary);
    background: var(--tq-surface);

    border: 1px solid var(--tq-border);
    border-radius: var(--tq-radius-md);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tq-marketplace-search__field input::placeholder {
    color: var(--tq-text-muted);
}

.tq-marketplace-search__field input:focus,
.tq-marketplace-search__field select:focus {
    border-color: var(--tq-blue);

    box-shadow:
        0 0 0 3px rgba(11, 99, 246, 0.12);
}


/* -------------------------
   Search Button
-------------------------- */

.tq-marketplace-search__submit {
    height: 52px;

    padding: 0 22px;

    color: #ffffff;
    background: var(--tq-blue);

    border: 1px solid var(--tq-blue);
    border-radius: var(--tq-radius-md);

    font-weight: 600;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.tq-marketplace-search__submit:hover {
    background: var(--tq-blue-dark);
    border-color: var(--tq-blue-dark);
}

.tq-marketplace-search__submit:active {
    transform: scale(0.98);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1024px) {

    .tq-marketplace-search__form {
        grid-template-columns:
            minmax(220px, 2fr)
            minmax(140px, 1fr)
            minmax(150px, 1fr)
            120px;
    }

    .tq-home-hero__title {
        font-size: 42px;
    }
}


@media (max-width: 900px) {

    .tq-home-hero {
        padding-top: 20px;
    }

    .tq-home-hero__panel {
        padding: 32px 24px 0;
    }

    .tq-home-hero__title {
        font-size: 36px;
    }

    .tq-marketplace-search__tabs {
        display: none;
    }

    .tq-marketplace-search__mobile-selector {
        display: block;
        padding-bottom: 0;
    }

    .tq-marketplace-search__form {
        grid-template-columns: 1fr;

        padding-top: 12px;
    }

    .tq-marketplace-search__submit {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .tq-home-hero {
        padding: 16px 0 32px;
    }

    .tq-home-hero__panel {
        padding:
            26px
            16px
            0;

        border-radius: var(--tq-radius-lg);
    }

    .tq-home-hero__eyebrow {
        font-size: 15px;
    }

    .tq-home-hero__title {
        margin-bottom: 12px;

        font-size: 30px;
        line-height: 1.12;
    }

    .tq-home-hero__description {
        font-size: 15px;
    }

    .tq-marketplace-search {
        margin-top: 24px;

        border-radius:
            var(--tq-radius-card)
            var(--tq-radius-card)
            0
            0;
    }

    .tq-marketplace-search__form {
        gap: 8px;

        padding: 12px;
    }
}