/* ===========================================
   NILE CALLIGRAPHY — CONTENT SECTIONS
=========================================== */


/* ===========================================
   SECTION HEADERS
=========================================== */

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-tag {
    display: inline-block;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.section-header h2 {
    margin-bottom: 18px;
}

.section-header p {
    color: var(--muted);
    max-width: 650px;
    margin: 0 auto;
}


/* ===========================================
   FEATURED COLLECTION
=========================================== */

.gallery {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}


/* ===========================================
   ARTWORK ROW SECTIONS
=========================================== */

.artwork-row-section {
    width: min(1200px, 92%);
    margin: 0 auto 70px;
}

.artwork-row-header {
    margin-bottom: 22px;
}

.artwork-row-header .section-tag {
    margin-bottom: 0;
}

.artwork-row {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 24px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) transparent;
}


/* ===========================================
   ARTWORK ROW SCROLLBAR
=========================================== */

.artwork-row::-webkit-scrollbar {
    height: 6px;
}

.artwork-row::-webkit-scrollbar-track {
    background: transparent;
}

.artwork-row::-webkit-scrollbar-thumb {
    background: rgba(198, 161, 91, 0.5);
    border-radius: 10px;
}

.artwork-row::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}


/* ===========================================
   GALLERY CARD
=========================================== */

.gallery-card {
    flex: 0 0 330px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 3px;

    overflow: hidden;

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

    display: flex;

    flex-direction: column;
}

.artwork-row .gallery-card {
    flex: 0 0 330px;
}

.gallery-card:hover {
    transform: translateY(-7px);

    box-shadow: var(--shadow-luxury);
}


/* ===========================================
   GALLERY IMAGE
=========================================== */

.gallery-image {
    width: 100%;

    overflow: hidden;

    background: #EAE5DB;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Portrait artwork */

.gallery-image.portrait-image {
    aspect-ratio: 4 / 5;
}


/* Horizontal artwork */

.gallery-image.horizontal-image {
    aspect-ratio: 3 / 2;
}


/* Actual artwork */

.gallery-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    display: block;

    transition: transform 0.6s ease;
}

.gallery-card:hover .gallery-image img {
    transform: scale(1.025);
}


/* ===========================================
   GALLERY CARD CONTENT
=========================================== */

.gallery-card-content {
    min-height: 280px;

    padding: 25px 24px 28px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.gallery-card-tag {
    display: inline-block;

    color: var(--secondary);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.gallery-card h3 {
    font-family: var(--heading);

    font-size: 29px;

    color: var(--primary);

    margin-bottom: 10px;
}

.gallery-card p {
    color: var(--muted);

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 22px;
}


/* Keeps all View Artwork buttons at the bottom */

.gallery-card .primary-btn {
    display: inline-block;

    width: 100%;

    text-align: center;

    margin-top: auto;
}


/* ===========================================
   RECOGNITION
=========================================== */

.recognition {
    background: var(--background);
}

.recognition-grid {
    display: grid;

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

    gap: 25px;
}

.recognition-card {
    background: var(--white);

    padding: 40px 30px;

    border-radius: 4px;

    text-align: center;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.recognition-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-luxury);
}

.recognition-card h3 {
    margin-bottom: 12px;
}

.recognition-card p {
    color: var(--muted);

    font-size: 16px;
}


/* ===========================================
   ABOUT AFAQ
=========================================== */

.about-afaq {
    background:
        linear-gradient(
            135deg,
            var(--white) 0%,
            var(--background) 100%
        );

    border-top: 1px solid var(--border);

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

.about-container {
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}

.about-text {
    max-width: 820px;

    margin: 0 auto;
}

.about-text .section-tag {
    margin-bottom: 20px;
}

.about-text h2 {
    max-width: 720px;

    margin: 0 auto 25px;
}

.about-text p {
    max-width: 700px;

    margin: 0 auto 35px;

    color: var(--muted);

    font-size: 18px;

    line-height: 1.9;
}

.about-text .primary-btn {
    display: inline-block;
}


/* ===========================================
   COMMUNITY STATS
=========================================== */

.stats {
    display: grid;

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

    gap: 30px;

    text-align: center;

    background: var(--primary);

    color: var(--white);
}

.stats h2 {
    color: var(--secondary);

    font-size: 56px;

    margin-bottom: 8px;

    font-family: var(--heading);
}

.stats p {
    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;

    letter-spacing: 0.5px;
}


/* ===========================================
   HOW TO ORDER
=========================================== */

.ordering {
    max-width: 900px;

    margin: 0 auto;
}

.ordering h2 {
    text-align: center;

    margin-bottom: 50px;
}

.ordering ol {
    list-style: none;

    counter-reset: order-step;

    padding: 0;

    margin: 0;
}

.ordering li {
    counter-increment: order-step;

    position: relative;

    display: flex;

    align-items: center;

    min-height: 72px;

    margin-bottom: 18px;

    padding: 20px 25px 20px 85px;

    background: var(--white);

    border: 1px solid var(--border);

    color: var(--muted);

    font-size: 17px;

    line-height: 1.6;

    box-shadow: var(--shadow-soft);

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

.ordering li::before {
    content: counter(order-step);

    position: absolute;

    left: 25px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--secondary);

    border-radius: 50%;

    color: var(--secondary);

    font-family: var(--heading);

    font-size: 20px;

    font-weight: 600;
}

.ordering li:hover {
    transform: translateX(6px);

    border-color: rgba(198, 161, 91, 0.55);

    box-shadow: var(--shadow-luxury);
}


/* ===========================================
   TESTIMONIALS
=========================================== */

.reviews {
    background: var(--background);

    border-top: 1px solid var(--border);

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

.reviews > h2 {
    text-align: center;

    margin-bottom: 50px;
}

.review-grid {
    display: grid;

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

    gap: 30px;

    max-width: 1000px;

    margin: 0 auto;
}

.review-card {
    position: relative;

    background: var(--white);

    padding: 38px 35px 35px;

    border: 1px solid var(--border);

    border-radius: 3px;

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.review-card::before {
    content: "“";

    position: absolute;

    top: 12px;

    right: 25px;

    font-family: Georgia, serif;

    font-size: 72px;

    line-height: 1;

    color: rgba(198, 161, 91, 0.16);
}

.review-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-luxury);
}

.review-card h3 {
    color: var(--secondary);

    font-size: 17px;

    letter-spacing: 3px;

    margin-bottom: 22px;
}

.review-card p {
    color: var(--muted);

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 25px;
}

.review-card strong {
    display: block;

    color: var(--primary);

    font-size: 13px;

    letter-spacing: 1px;

    font-weight: 700;
}


/* ===========================================
   CONTACT
=========================================== */

.contact {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    background: var(--primary);

    color: var(--white);

    border-radius: 4px;

    padding: 70px 50px;

    box-shadow: var(--shadow-luxury);
}

.contact h2 {
    color: var(--white);

    margin-bottom: 20px;
}

.contact p {
    max-width: 650px;

    margin: 0 auto 32px;

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

    font-size: 17px;

    line-height: 1.8;
}

.contact .primary-btn {
    display: inline-block;

    background: var(--secondary);

    color: var(--primary);

    border-color: var(--secondary);
}

.contact .primary-btn:hover {
    background: var(--white);

    color: var(--primary);

    border-color: var(--white);
}


/* ===========================================
   RESPONSIVE
=========================================== */

@media (max-width: 768px) {

    .section-header {
        margin-bottom: 45px;
    }

    .section-header h2 {
        font-size: 38px;
    }

    .artwork-row-section {
        width: 92%;

        margin-bottom: 55px;
    }

    .artwork-row {
        gap: 20px;

        padding-bottom: 20px;
    }

    .artwork-row .gallery-card {
        flex-basis: 285px;
    }

    .gallery-card-content {
        min-height: 270px;

        padding: 22px 20px 24px;
    }

    .gallery-card h3 {
        font-size: 26px;
    }

    .stats h2 {
        font-size: 46px;
    }

    .ordering h2 {
        margin-bottom: 35px;
    }

    .ordering li {
        padding: 18px 18px 18px 70px;

        font-size: 16px;
    }

    .ordering li::before {
        left: 18px;

        width: 36px;

        height: 36px;

        font-size: 18px;
    }

    .about-text h2 {
        font-size: 38px;
    }

    .about-text p {
        font-size: 16px;
    }

    .contact {
        padding: 50px 25px;
    }

    .contact p {
        font-size: 16px;
    }
}


@media (max-width: 480px) {

    .artwork-row .gallery-card {
        flex-basis: 270px;
    }

    .artwork-row {
        gap: 18px;
    }

    .gallery-card-content {
        min-height: 260px;
    }
}

/* ===========================================
   HOMEPAGE INTERACTION LAYER
   Motion stays restrained and respects reduced-motion preferences.
=========================================== */
.signature-collection { overflow: hidden; }
.signature-showcase { width: min(1200px, 100%); margin: 0 auto; }
.signature-row { scroll-snap-type: x mandatory; cursor: grab; user-select: none; }
.signature-row.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.signature-row .signature-card { scroll-snap-align: start; }
.signature-card { position: relative; transform-style: preserve-3d; will-change: transform; }
.signature-card .card-content { position: relative; z-index: 1; }
.signature-card .primary-btn { display: block; width: 100%; text-align: center; margin-top: 20px; }
.signature-image { aspect-ratio: 4 / 5; height: auto; }
.signature-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 18px; }
.carousel-hint { margin: 0; color: rgba(255,255,255,.82); font-size: 13px; letter-spacing: .4px; }
.carousel-hint span { color: rgba(255,255,255,.55); }
.carousel-controls { display: flex; gap: 10px; }
.carousel-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(198,161,91,.55); border-radius: 50%; background: transparent; color: var(--secondary); font-size: 22px; transition: background .25s ease, color .25s ease, transform .25s ease; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: var(--secondary); color: var(--primary); transform: translateY(-2px); }
.carousel-progress { height: 2px; margin-top: 8px; overflow: hidden; background: rgba(255,255,255,.18); }
.carousel-progress span { display: block; width: 50%; height: 100%; background: var(--secondary); transform-origin: left center; transition: width .2s ease; }

/* Reveal on entry: no hidden content if JavaScript is unavailable. */
.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.js-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.js-motion [data-reveal-delay="1"] { transition-delay: .08s; }
.js-motion [data-reveal-delay="2"] { transition-delay: .16s; }
.js-motion [data-reveal-delay="3"] { transition-delay: .24s; }

/* Client stories use clear pathways rather than invented testimonials. */
.home-stories { background: var(--white); border-top: 1px solid var(--border); }
.story-grid { align-items: stretch; }
.story-card { display: flex; flex-direction: column; min-height: 285px; padding: 34px 30px; border-radius: 2px; transform-style: preserve-3d; }
.story-index { display: inline-block; margin-bottom: 22px; color: var(--secondary); font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.story-card h3 { margin-bottom: 13px; }
.story-card p { flex: 1; }
.story-link, .text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--primary); font-weight: 700; font-size: 13px; letter-spacing: .3px; }
.story-link span, .text-link span { color: #a37b34; transition: transform .25s ease; }
.story-link:hover span, .text-link:hover span { transform: translate(3px,-2px); }
.stories-footer { margin-top: 30px; text-align: center; }

/* Working navigation and search controls */
.skip-link { position: fixed; z-index: 2000; top: 10px; left: 10px; padding: 12px 18px; background: var(--white); color: var(--primary); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.header-action { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); background: transparent; color: var(--primary); font-size: 22px; }
.header-action:hover { background: var(--secondary); }
.site-search { position: relative; z-index: 30; padding: 22px max(6%, calc((100% - 1100px)/2)); background: #fffdf8; border-bottom: 1px solid var(--border); box-shadow: 0 12px 25px rgba(0,0,0,.07); }
.site-search[hidden] { display: none; }
.site-search label { display: block; margin-bottom: 8px; color: var(--primary); font-weight: 700; }
.site-search-row { display: flex; gap: 10px; }
.site-search input { min-width: 0; flex: 1; padding: 13px 15px; border: 1px solid var(--border); background: white; font: inherit; }
.site-search .primary-btn { padding: 12px 20px; }
.search-close { width: 42px; background: transparent; font-size: 26px; }
.search-feedback { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

@media (max-width: 768px) {
  .carousel-toolbar { align-items: flex-start; }
  .carousel-hint span { display: block; }
  .signature-row .signature-card { flex-basis: min(82vw, 350px); }
  .story-card { min-height: 0; }
  .site-search-row { flex-wrap: wrap; }
  .site-search input { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
}