/* ===========================================
   NILE CALLIGRAPHY — RESPONSIVE
=========================================== */


/* ===========================================
   TABLET — 900px
=========================================== */

@media (max-width: 900px) {

    /* Header */

    .top-header {
        padding: 22px 25px;
    }

    .logo h1 {
        font-size: 28px;

        letter-spacing: 4px;
    }

    nav ul {
        gap: 28px;
    }


    /* Hero */

    .hero-content {
        margin-left: 7%;
    }

    .hero h2 {
        font-size: 58px;
    }


    /* Footer */

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

        gap: 40px;
    }
}


/* ===========================================
   MOBILE — 768px
=========================================== */

@media (max-width: 768px) {

    /* General */

    section {
        padding: 60px 6%;
    }

    h2 {
        font-size: 38px;
    }

    p {
        font-size: 16px;
    }


    /* Header */

    .top-header {
        padding: 18px 20px;
    }

    .logo h1 {
        font-size: 23px;

        letter-spacing: 3px;
    }

    .left-tools button,
    .right-tools button {
        font-size: 18px;

        width: 38px;

        height: 38px;
    }


    /* Navigation */

    nav {
        padding: 14px 15px;
    }

    nav ul {
        gap: 18px;
    }

    nav a {
        font-size: 12px;
    }


    /* Hero */

    .hero {
        min-height: 78vh;

        background-position: center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.68),
                rgba(0, 0, 0, 0.35)
            );
    }

    .hero-content {
        max-width: 88%;

        margin-left: 6%;
    }

    .hero h2 {
        font-size: 44px;

        line-height: 1.08;
    }

    .hero p {
        font-size: 17px;

        max-width: 100%;
    }

    .hero-buttons {
        gap: 12px;
    }


    /* Products */

    .card {
        flex-basis: 280px;
    }

    .card img {
        height: 340px;
    }


    /* Gallery */

    .gallery-scroll img {
        flex: 0 0 280px;

        width: 280px;

        height: 380px;
    }


    /* Reviews */

    .review-grid {
        grid-template-columns: 1fr;
    }


    /* Footer */

    footer {
        padding: 60px 7% 25px;
    }
}


/* ===========================================
   SMALL PHONES — 480px
=========================================== */

@media (max-width: 480px) {

    /* Announcement */

    .announcement {
        font-size: 11px;

        padding: 9px 12px;
    }


    /* Header */

    .top-header {
        grid-template-columns:
            auto 1fr auto;

        padding: 16px 15px;
    }

    .logo h1 {
        font-size: 19px;

        letter-spacing: 2px;
    }


    /* Navigation */

    nav ul {
        gap: 12px;
    }

    nav a {
        font-size: 11px;

        letter-spacing: 0.5px;
    }


    /* Hero */

    .hero {
        min-height: 75vh;
    }

    .hero h2 {
        font-size: 37px;
    }

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

    .hero-tag {
        font-size: 11px;

        letter-spacing: 1.5px;

        padding: 7px 12px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: flex-start;
    }


    /* Products */

    .card {
        flex-basis: 270px;
    }

    .card img {
        height: 330px;
    }


    /* Gallery */

    .gallery-scroll img {
        flex-basis: 260px;

        width: 260px;

        height: 350px;
    }


    /* Footer */

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

        gap: 35px;

        text-align: center;
    }

    footer {
        padding: 55px 7% 20px;
    }
}

/* ============================================================
   RESPONSIVE HARDENING — ALL PAGES
   Preserves the existing visual theme while preventing mobile overflow.
============================================================ */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; overflow-x: hidden; }
main, section, header, footer, .container, .exhibition-wide-container { min-width: 0; }
img, video, iframe, canvas, svg { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { max-width: 100%; }
nav ul { min-width: 0; }
nav a { white-space: nowrap; }

/* The catalogue already has its own layout; keep its nav usable on narrow screens. */
@media (max-width: 900px) {
  .exhibition-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(22px, 4vw, 48px); }
  .exhibition-hero { min-height: auto; padding: 70px 0; }
  .hero-meta-item { min-width: 0; }
  .exhibition-page section { padding-left: 5%; padding-right: 5%; }
  .catalogue-page .top-header { padding-left: 4%; padding-right: 4%; }
}
@media (max-width: 768px) {
  section { padding: clamp(42px, 8vw, 60px) 5%; }
  h1 { font-size: clamp(34px, 8vw, 48px); }
  h2 { font-size: clamp(30px, 7vw, 40px); }
  h3 { font-size: clamp(23px, 5vw, 29px); }
  p { overflow-wrap: anywhere; }
  .top-header { grid-template-columns: 1fr auto; gap: 12px; padding: 16px 5%; }
  .top-header .left-tools { display: none; }
  .logo { justify-self: start; text-align: left; min-width: 0; }
  .logo h1 { white-space: normal; font-size: clamp(17px, 4vw, 24px); letter-spacing: clamp(1px, .5vw, 3px); }
  .right-tools { gap: 8px; }
  nav { padding: 10px 4%; }
  nav ul { display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 20px; overflow-x: auto; overflow-y: hidden; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  nav li { flex: 0 0 auto; }
  nav a { font-size: 12px; }
  .hero-content { margin-left: 0; max-width: 100%; padding: 28px 5%; }
  .hero h2 { font-size: clamp(36px, 8.5vw, 52px); }
  .hero-buttons { flex-wrap: wrap; }
  .products-grid, .product-grid, .review-grid, .blog-grid, .footer-container, .about-grid, .contact-grid, .faq-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .card, .product-card, .review-card, .blog-card { min-width: 0; max-width: 100%; }
  .card img, .product-card img, .blog-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .gallery-scroll { gap: 14px; overflow-x: auto; max-width: 100%; }
  .gallery-scroll img { flex: 0 0 min(78vw, 320px); width: min(78vw, 320px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .exhibition-hero { padding: 54px 0 48px; }
  .exhibition-hero-inner { width: 90%; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .exhibition-hero h2 { font-size: clamp(43px, 11vw, 68px); line-height: .98; letter-spacing: -1px; }
  .exhibition-hero-lead { font-size: 16px; margin-bottom: 24px; }
  .exhibition-hero-visual { justify-content: center; }
  .hero-image-frame { width: min(100%, 430px); }
  .hero-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-meta-item { padding: 12px; }
  .catalogue-hero { min-height: 460px; padding: 62px 5%; }
  .catalogue-preview { padding: 48px 5%; }
  .catalogue-nav { padding-left: 5%; padding-right: 5%; }
  .catalogue-nav ul { gap: 18px; }
  .catalogue-page .top-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .catalogue-logo h1 { font-size: clamp(14px, 3.8vw, 21px); }
  .header-enquire { font-size: 11px; }
  .footer-container { text-align: left; }
  .primary-btn, .secondary-btn { max-width: 100%; text-align: center; padding: 13px 20px; }
}
@media (max-width: 480px) {
  .announcement { line-height: 1.5; }
  .top-header { padding: 14px 4%; }
  .logo h1 { font-size: 17px; letter-spacing: 1.2px; }
  .right-tools button, .left-tools button { width: 36px; height: 36px; }
  nav ul { gap: 16px; }
  nav a { font-size: 11px; }
  .hero { min-height: 70vh; }
  .hero h2 { font-size: clamp(32px, 9vw, 40px); }
  .hero-buttons { align-items: stretch; }
  .hero-buttons a { width: 100%; }
  .hero-meta { grid-template-columns: minmax(0, 1fr); }
  .hero-image-caption { left: 14px; right: 14px; bottom: 14px; padding: 10px 12px; }
  .exhibition-hero h2 { font-size: clamp(38px, 10.5vw, 50px); }
  .catalogue-page .top-header { gap: 7px; }
  .catalogue-home-mark { width: 32px; height: 32px; }
  .header-enquire { white-space: normal; text-align: right; }
  .catalogue-hero h2 { font-size: clamp(43px, 13vw, 62px); }
  .catalogue-hero p { font-size: 14px; }
  footer { padding-left: 5%; padding-right: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}