/* =========================================================
   FINAL RESPONSIVE SYSTEM
   Desktop → Tablet → Mobile
========================================================= */

/* ---------- GLOBAL RESPONSIVE FIXES ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

.container,
.section-container,
.header-container,
.footer-container,
.page-hero-content,
.hero-content,
.breadcrumb-container {
    width: min(1200px, calc(100% - 64px));
    margin-inline: auto;
}

section {
    width: 100%;
}


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
   1200px
========================================================= */

@media (max-width: 1200px) {

    :root {
        --side-space: 24px;
    }

    .container,
    .section-container,
    .header-container,
    .footer-container,
    .page-hero-content,
    .hero-content,
    .breadcrumb-container {
        width: min(1100px, calc(100% - 48px));
    }

    .nav-list {
        gap: 1.25rem;
    }

    .logo {
        width: 200px;
    }

    .logo img {
        width: 160px;
    }

    /* Large grids */

    .category-grid,
    .jewellery-grid,
    .collection-grid,
    .education-grid,
    .blog-grid,
    .gallery-grid,
    .info-grid,
    .contact-info-grid,
    .contact-faq-grid,
    .materials-grid,
    .bridal-categories,
    .style-grid,
    .collection-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shapes-grid,
    .why-us-grid,
    .philosophy-grid,
    .process-timeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shape-overview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .guide-navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .four-cs-grid,
    .certificate-four-cs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLET
   991px
========================================================= */

@media (max-width: 991px) {

    :root {
        --header-height: 76px;
    }

    /* ---------- HEADER ---------- */

    .header-container {
        min-height: var(--header-height);
        width: calc(100% - 32px);
    }

    .logo {
        width: 170px;
        height: 64px;
    }

    .logo img {
        width: 145px;
    }

    .header-cta {
        display: none;
    }

    .mobile-menu-button {
        display: inline-flex;
        flex-shrink: 0;
    }

    .main-navigation {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;

        width: 100%;
        max-width: 100vw;
        height: calc(100dvh - var(--header-height));

        padding: 20px 24px 40px;

        background: rgba(21, 19, 15, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);

        overflow-y: auto;
        overflow-x: hidden;

        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
    }

    .main-navigation.nav-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-list {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(214, 189, 145, 0.16);
    }

    .nav-link {
        width: 100%;
        min-height: 54px;
        padding: 15px 4px;
        font-size: 1rem;
    }

    /* Mobile dropdown */

    .dropdown-menu {
        position: static;
        width: 100%;
        min-width: 0;

        transform: none !important;

        display: none;

        padding: 4px 0 12px 18px;

        background: transparent;
        border: 0;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .dropdown.menu-open .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        color: rgba(255, 255, 255, 0.78);
        padding: 11px 8px;
    }


    /* ---------- CONTAINERS ---------- */

    .container,
    .section-container,
    .footer-container,
    .page-hero-content,
    .hero-content,
    .breadcrumb-container {
        width: calc(100% - 40px);
        max-width: 100%;
    }


    /* ---------- HERO ---------- */

    .hero-section {
        grid-template-columns: 1fr;
    }

    .hero-content {
        padding: 70px 0 60px;
    }

    .hero-image {
        min-height: 480px;
        max-height: 560px;
    }

    .hero-title {
        max-width: 760px;
    }

    .hero-description {
        max-width: 680px;
    }


    /* ---------- TWO COLUMN SECTIONS ---------- */

    .intro-grid,
    .contact-form-grid,
    .newsletter-grid,
    .story-grid,
    .sourcing-grid,
    .vision-mission-grid,
    .shape-detail-grid,
    .guide-intro-grid,
    .guide-content-grid,
    .guide-metal-grid,
    .shape-setting-grid,
    .four-c-detail-grid,
    .final-checklist-grid,
    .diamond-introduction-grid,
    .anatomy-grid,
    .certification-grid,
    .buying-guide-grid,
    .diamond-comparison,
    .category-feature-grid,
    .collection-detail-grid,
    .consultation-grid,
    .location-grid {
        grid-template-columns: 1fr;
    }


    /* ---------- IMAGE SECTIONS ---------- */

    .intro-image,
    .contact-form-image,
    .story-image,
    .sourcing-image,
    .shape-detail-image,
    .guide-intro-image,
    .guide-content-image,
    .guide-metal-image,
    .shape-setting-image,
    .four-c-detail-image,
    .final-checklist-image,
    .category-feature-image,
    .collection-detail-image,
    .consultation-image,
    .location-image {
        min-height: 380px;
    }


    /* ---------- FEATURED / CRAFTSMANSHIP ---------- */

    .featured-collection-container,
    .craftsmanship-container,
    .craftsmanship-detail-container {
        grid-template-columns: 1fr;
    }

    .featured-image,
    .craftsmanship-image {
        min-height: 420px;
    }

    .featured-content,
    .craftsmanship-content,
    .craftsmanship-detail-content {
        padding: 3rem 2rem;
    }

    .craftsmanship-content {
        order: 2;
    }

    .craftsmanship-image {
        order: 1;
    }


    /* ---------- GENERAL GRIDS ---------- */

    .category-grid,
    .jewellery-grid,
    .collection-grid,
    .education-grid,
    .blog-grid,
    .gallery-grid,
    .info-grid,
    .contact-info-grid,
    .contact-faq-grid,
    .materials-grid,
    .bridal-categories,
    .category-highlights,
    .jewellery-mini-grid,
    .style-grid,
    .collection-features,
    .why-us-grid,
    .philosophy-grid,
    .process-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shapes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shape-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buying-steps-grid,
    .setting-guide-grid,
    .questions-grid,
    .certificate-check-grid,
    .mistakes-grid,
    .balance-grid,
    .certification-feature-grid,
    .verification-steps,
    .related-guides-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .four-cs-grid,
    .certificate-four-cs-grid,
    .four-c-info-grid,
    .clarity-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shape-characteristics,
    .metal-options,
    .guide-four-cs,
    .shape-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* ---------- TIMELINE ---------- */

    .heritage-timeline::before {
        display: none;
    }

    .heritage-item {
        grid-template-columns: 120px 1fr;
    }


    /* ---------- FOOTER ---------- */

    .footer-container,
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }


    /* ---------- FORMS ---------- */

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .booking-form {
        grid-template-columns: 1fr;
    }

    .auth-form[data-form="register"].is-active {
        grid-template-columns: 1fr;
    }

    .auth-form[data-form="register"] .form-group,
    .auth-form[data-form="register"] button,
    .auth-form[data-form="register"] .auth-message {
        grid-column: auto;
    }


    /* ---------- BANNERS ---------- */

    .guide-highlight,
    .consultation-guide-banner,
    .faq-help-banner,
    .shape-guide-banner {
        grid-template-columns: auto 1fr;
    }

    .guide-highlight>.btn,
    .consultation-guide-banner>.btn,
    .faq-help-banner>.btn,
    .shape-guide-banner>.btn {
        grid-column: 1 / -1;
        justify-self: start;
    }


    /* ---------- TABLE ---------- */

    .four-cs-table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .four-cs-table {
        min-width: 680px;
    }
}


/* =========================================================
   MOBILE
   767px
========================================================= */

@media (max-width: 767px) {

    :root {
        --side-space: 14px;
        --header-height: 72px;
    }

    body {
        font-size: 14px;
    }

    section {
        padding: 54px 0;
    }


    /* ---------- CONTAINERS ---------- */

    .container,
    .section-container,
    .footer-container,
    .page-hero-content,
    .hero-content,
    .breadcrumb-container {
        width: calc(100% - 28px);
        max-width: none;
    }


    /* ---------- TYPOGRAPHY ---------- */

    h1 {
        font-size: clamp(2.35rem, 10vw, 4rem);
    }

    h2 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    h3 {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    p {
        font-size: 0.92rem;
        line-height: 1.65;
    }


    /* ---------- HEADER ---------- */

    .header-container {
        width: calc(100% - 24px);
        min-height: 72px;
        gap: 6px;
        justify-content: space-between;
    }

    .logo {
        width: 165px !important;
        height: 62px !important;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .logo img {
        width: 190px !important;
        max-width: none !important;
        height: auto !important;
        object-fit: contain;
        transform: scale(1.6);
        transform-origin: left center;
    }

    .header-actions {
        gap: 5px;
        flex-shrink: 0;
    }

    .header-action,
    .mobile-menu-button,
    .auth-toggle {
        width: 40px;
        height: 40px;
    }

    .main-navigation {
        height: auto !important;
        max-height: calc(100dvh - var(--header-height)) !important;
        overflow-y: auto;
    }


    /* ---------- HERO ---------- */

    .hero-content {
        padding: 55px 0 50px;
    }

    .hero-subtitle,
    .section-label,
    .content-label {
        font-size: 0.65rem;
        letter-spacing: 0.14em;
    }

    .hero-title {
        margin: 0.8rem 0;
    }

    .hero-description {
        font-size: 0.92rem;
        margin-bottom: 1.5rem;
    }

    .hero-buttons,
    .final-cta-buttons,
    .cta-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn,
    .final-cta-buttons .btn,
    .cta-buttons .btn,
    button[type="submit"] {
        width: 100%;
        min-height: 48px;
    }

    .hero-image {
        min-height: 330px;
        max-height: 430px;
    }

    .hero-scroll {
        display: none;
    }


    /* ---------- SECTION HEADINGS ---------- */

    .section-heading {
        display: block;
        margin-bottom: 1.5rem;
    }

    .section-heading .text-link {
        margin-top: 0.8rem;
    }


    /* ---------- ALL GRIDS → ONE COLUMN ---------- */

    .category-grid,
    .jewellery-grid,
    .collection-grid,
    .education-grid,
    .blog-grid,
    .gallery-grid,
    .info-grid,
    .contact-info-grid,
    .contact-faq-grid,
    .materials-grid,
    .bridal-categories,
    .category-highlights,
    .jewellery-mini-grid,
    .why-us-grid,
    .collection-features,
    .style-grid,
    .philosophy-grid,
    .process-timeline,
    .shapes-grid,
    .shape-overview-grid,
    .guide-navigation,
    .buying-steps-grid,
    .setting-guide-grid,
    .questions-grid,
    .certificate-check-grid,
    .mistakes-grid,
    .balance-grid,
    .certification-feature-grid,
    .verification-steps,
    .related-guides-grid,
    .four-cs-grid,
    .certificate-four-cs-grid,
    .four-c-info-grid,
    .clarity-feature-grid,
    .shape-characteristics,
    .metal-options,
    .guide-four-cs,
    .shape-choice-grid,
    .formation-timeline,
    .diamond-shapes-preview-grid,
    .care-preview-grid,
    .buying-guide-steps,
    .certification-mistakes-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        width: 100%;
        gap: 0.8rem;
        padding: 1.1rem 0.9rem;
        align-items: flex-start;
    }

    .contact-info-card h3 {
        font-size: 1rem;
        line-height: 1.35;
    }

    .contact-info-card p {
        font-size: 0.85rem;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }



    /* ---------- CONTENT GRIDS ---------- */

    .intro-grid,
    .contact-form-grid,
    .newsletter-grid,
    .story-grid,
    .sourcing-grid,
    .vision-mission-grid,
    .shape-detail-grid,
    .guide-intro-grid,
    .guide-content-grid,
    .guide-metal-grid,
    .shape-setting-grid,
    .four-c-detail-grid,
    .final-checklist-grid,
    .diamond-introduction-grid,
    .anatomy-grid,
    .certification-grid,
    .buying-guide-grid,
    .diamond-comparison,
    .category-feature-grid,
    .collection-detail-grid,
    .consultation-grid,
    .location-grid,
    .featured-collection-container,
    .craftsmanship-container,
    .craftsmanship-detail-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }


    /* ---------- IMAGES ---------- */

    .hero-image,
    .intro-image,
    .contact-form-image,
    .story-image,
    .sourcing-image,
    .shape-detail-image,
    .guide-intro-image,
    .guide-content-image,
    .guide-metal-image,
    .shape-setting-image,
    .four-c-detail-image,
    .final-checklist-image,
    .category-feature-image,
    .collection-detail-image,
    .consultation-image,
    .location-image,
    .featured-image,
    .craftsmanship-image,
    .craftsmanship-detail-image {
        min-height: 280px;
        height: auto;
    }

    .shape-card-image,
    .setting-guide-image,
    .related-guide-image {
        height: 230px;
    }


    /* ---------- FEATURED / CONTENT ---------- */

    .featured-content,
    .craftsmanship-content,
    .craftsmanship-detail-content {
        padding: 2.2rem 1.25rem;
    }

    .collection-details {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .collection-details>div {
        padding: 0.8rem 0;
    }


    /* ---------- CARDS ---------- */

    .why-us-card,
    .testimonial-card,
    .philosophy-card,
    .process-step,
    .buying-step-card,
    .question-card,
    .certificate-check-card,
    .balance-card,
    .four-c-card,
    .certificate-c-card {
        padding: 1.2rem;
    }


    /* ---------- BANNERS ---------- */

    .guide-highlight,
    .consultation-guide-banner,
    .faq-help-banner,
    .shape-guide-banner {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.35rem;
        text-align: center;
    }

    .guide-highlight-icon,
    .consultation-guide-icon,
    .faq-help-icon {
        margin-inline: auto;
    }

    .guide-highlight>.btn,
    .consultation-guide-banner>.btn,
    .faq-help-banner>.btn,
    .shape-guide-banner>.btn {
        grid-column: auto;
        width: 100%;
    }


    /* ---------- FORMS ---------- */

    .form-row,
    .contact-form,
    .booking-form {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper,
    .booking-card,
    .collection-detail-content {
        padding: 1.2rem;
    }

    input,
    select,
    textarea {
        width: 100%;
        max-width: 100%;
    }

    textarea {
        min-height: 130px;
    }


    /* ---------- FAQ ---------- */

    .faq-category-heading {
        align-items: flex-start;
    }

    .faq-category-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .faq-search-box {
        width: 100%;
    }


    /* ---------- HERITAGE ---------- */

    .heritage-timeline::before {
        display: none;
    }

    .heritage-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem 0;
    }

    .heritage-content {
        padding: 0 0 1rem;
    }


    /* ---------- FOOTER ---------- */

    .footer-container,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-newsletter {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    .footer-newsletter>div {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.3rem !important;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .footer-logo {
        width: min(210px, 80vw);
    }

    .contact-social-links {
        flex-direction: row;
    }


    /* ---------- NEWSLETTER ---------- */

    .newsletter-form {
        width: 100%;
        min-height: 54px;
    }


    /* ---------- SEARCH ---------- */

    .search-container {
        width: calc(100% - 24px);
        max-width: 760px;
        padding: 1.1rem;
    }

    .search-form {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.55rem 0.45rem 0.9rem;
        border-radius: 999px;
        box-sizing: border-box;
    }

    .search-form input[type="search"] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        padding: 0.75rem 0.25rem;
        border: none;
        outline: none;
        background: transparent;
    }

    .search-form button[type="submit"] {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0;
        flex: 0 0 48px;
        border: none;
        border-radius: 50% !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--gold), var(--gold-deep));
        color: var(--white);
    }

    .search-form button[type="submit"] i {
        font-size: 0.95rem;
        line-height: 1;
    }

    /* Close X inside search bar */
    .search-form .search-inline-close {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0;
        flex: 0 0 32px;
        border: none !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: rgba(17, 17, 17, 0.55) !important;
        box-shadow: none !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .search-form .search-inline-close:hover {
        color: var(--gold-deep) !important;
        background: transparent !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .search-close {
        top: 10px;
        right: 10px;
    }


    /* ---------- TABLE ---------- */

    .four-cs-table-wrapper {
        width: 100%;
        overflow-x: auto;
        border-radius: 8px;
    }

    .four-cs-table {
        min-width: 650px;
    }


    /* ---------- BACK TO TOP ---------- */

    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
}


/* =========================================================
   SMALL MOBILE
   480px
========================================================= */

@media (max-width: 480px) {

    section {
        padding: 44px 0;
    }

    .container,
    .section-container,
    .footer-container,
    .page-hero-content,
    .hero-content,
    .breadcrumb-container {
        width: calc(100% - 20px);
    }

    .header-container {
        width: calc(100% - 18px);
    }

    .logo {
        width: min(210px, 80vw);
    }

    .logo img {
        width: min(210px, 80vw);
    }

    .header-action,
    .mobile-menu-button,
    .auth-toggle {
        width: 38px;
        height: 38px;
    }

    .header-actions {
        gap: 3px;
    }

    .main-navigation {
        top: var(--header-height);
        height: calc(100dvh - var(--header-height));
        padding-inline: 14px;
    }

    .hero-content {
        padding: 48px 0 42px;
    }

    .hero-image {
        min-height: 270px;
        max-height: 360px;
    }

    .hero-title {
        font-size: clamp(2.15rem, 12vw, 3rem);
    }

    .hero-description {
        font-size: 0.88rem;
    }

    .featured-image,
    .craftsmanship-image,
    .story-image,
    .craftsmanship-detail-image,
    .intro-image,
    .contact-form-image,
    .shape-detail-image,
    .guide-intro-image,
    .guide-content-image,
    .guide-metal-image,
    .shape-setting-image,
    .four-c-detail-image,
    .final-checklist-image {
        min-height: 250px;
    }

    .shape-card-image,
    .setting-guide-image,
    .related-guide-image {
        height: 210px;
    }

    .featured-content,
    .craftsmanship-content,
    .craftsmanship-detail-content {
        padding: 1.8rem 1rem;
    }

    .contact-form-wrapper,
    .booking-card,
    .collection-detail-content {
        padding: 1rem;
    }

    .vision-card,
    .mission-card {
        padding: 1.35rem;
    }

    .faq-category-heading {
        gap: 0.7rem;
    }

    .faq-category-heading h2 {
        font-size: 1.7rem;
    }

    .footer-logo {
        width: 185px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   360px
========================================================= */

@media (max-width: 360px) {

    .container,
    .section-container,
    .footer-container,
    .page-hero-content,
    .hero-content,
    .breadcrumb-container {
        width: calc(100% - 16px);
    }

    .header-container {
        width: calc(100% - 12px);
    }

    .logo {
        width: min(210px, 80vw);
    }

    .logo img {
        width: min(210px, 80vw);
    }

    .header-action,
    .mobile-menu-button,
    .auth-toggle {
        width: 36px;
        height: 36px;
    }

    h2 {
        font-size: 1.9rem;
    }

    .hero-title {
        font-size: 2.1rem;
    }

    .hero-image {
        min-height: 230px;
    }

    .featured-content,
    .craftsmanship-content {
        padding: 1.5rem 0.85rem;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}