/* Mobile improvements for better UI/UX */
:root {
  --gap: 0.75rem;
}

/* ===================== Mobile Menu ===================== */
/* input.css handles visibility/opacity transitions for .mobile-menu.
   responsive.css must NOT use display:none on .mobile-menu — it breaks the animation. */
.mobile-menu__panel {
  width: min(88vw, 360px);
}

/* ===================== Gallery (mobile) ===================== */
/* input.css uses column-based masonry layout for .gallery.
   On small screens we reduce to 1 column (same effect but explicit). */
@media (max-width: 639px) {
  .gallery {
    column-count: 1;
  }
  .gallery__item {
    border-radius: var(--radius-sm);
  }
}

/* Medium screens: 2 columns */
@media (min-width: 640px) and (max-width: 1099px) {
  .gallery {
    column-count: 2;
  }
}

/* ===================== Swatches (mobile) ===================== */
@media (max-width: 639px) {
  .swatches {
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  .swatch-tray {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===================== Product Detail (mobile) ===================== */
@media (max-width: 1023px) {
  .pdetail__media .pdetail__thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0;
    scrollbar-width: none;
  }
  .pdetail__media .pdetail__thumbs::-webkit-scrollbar {
    display: none;
  }
}

/* ===================== Editorial Grid (mobile) ===================== */
@media (max-width: 899px) {
  .editorial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
  }
  .editorial-grid > :first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* ===================== Case / Projects (mobile) ===================== */
@media (max-width: 1023px) {
  .case {
    flex-direction: column;
    gap: var(--gap);
  }
}

/* ===================== Cards ===================== */
.card-modern {
  overflow: hidden;
}

/* Public article and consultation pages use the site's jade/brass palette. */
.article-shell {
  max-width: 52rem;
  margin-inline: auto;
}
.article-body {
  color: var(--color-ink);
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  line-height: 2.15;
}
.article-body > * + * { margin-top: 1.5rem; }
.article-body h2, .article-body h3 { color: var(--color-jade-deep); line-height: 1.5; margin-top: 3rem; }
.article-body h2 { font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 800; border-inline-start: 3px solid var(--color-brass); padding-inline-start: 0.85rem; }
.article-body h3 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 700; }
.article-body p, .article-body li { color: var(--color-ink); }
.article-body ul, .article-body ol { padding-inline-start: 1.5rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.55rem; }
.article-body a { color: var(--color-jade); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-brass); text-underline-offset: 0.24em; }
.article-body a:hover { color: var(--color-brass); }
.article-body blockquote { border-inline-start: 3px solid var(--color-brass); background: color-mix(in srgb, var(--color-brass) 7%, var(--color-bone)); padding: 1.1rem 1.25rem; font-weight: 600; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-tight); }
.article-body pre { direction: ltr; overflow-x: auto; border-radius: var(--r-sharp); background: var(--color-jade-deep); color: var(--color-bone); padding: 1.25rem; text-align: left; }
.article-body code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.88em; }
.article-body :not(pre) > code { background: color-mix(in srgb, var(--color-brass) 12%, var(--color-bone)); padding: 0.15rem 0.35rem; border-radius: 0.2rem; }
.article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9em; }
.article-body th, .article-body td { border: 1px solid var(--hairline); padding: 0.7rem; text-align: start; white-space: nowrap; }
.article-body th { background: color-mix(in srgb, var(--color-jade) 8%, var(--color-bone)); color: var(--color-jade-deep); }
.article-editor { border: 1px solid var(--hairline); border-radius: var(--r-tight); padding: 0.8rem; background: var(--color-bone); }
.article-editor__toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--hairline); }
.article-editor .input-field { min-height: 24rem; }
.article-editor__preview { min-height: 24rem; padding: 0.2rem; }
.article-meta { color: var(--color-stone); font-size: 0.85rem; }
.article-kicker { color: var(--color-brass); font-size: 0.8rem; font-weight: 700; }
.consultation-page .card-modern { background: var(--color-bone); }
.consultation-page .input-field, .consultation-page select, .consultation-page textarea { border-color: var(--hairline-strong) !important; border-radius: 0 !important; background: transparent !important; color: var(--color-ink) !important; }
.consultation-page select, .consultation-page textarea { border-width: 0 0 1px !important; padding-inline: 0.1rem !important; }
.consultation-page .input-field:focus, .consultation-page select:focus, .consultation-page textarea:focus { border-color: var(--color-brass) !important; box-shadow: none !important; }
.consultation-page .contact-icon { background: var(--color-jade); border-radius: var(--r-sharp); }
.consultation-page .contact-icon--brass { background: var(--color-brass); }
.consultation-page .btn-cta { background: var(--color-jade); }
.consultation-page .btn-cta:hover { background: var(--color-jade-deep); }
.gallery__item { display: block; cursor: pointer; }
.gallery__scrim, .gallery__caption { pointer-events: none; }

/* ===================== Accessibility & Touch Targets ===================== */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  .site-nav__link {
    padding-block: 0.6rem;
  }
  .mobile-menu__link {
    padding-block: 1rem;
  }
}

/* ===================== Larger Screens ===================== */
@media (min-width: 1024px) {
  .swatches {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
  .editorial-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .editorial-grid > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (min-width: 1280px) {
  .swatches {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================== Admin Sidebar RTL Fix ===================== */
@media (max-width: 767px) {
  .mobile-menu__panel {
    border-inline-start: 1px solid var(--color-gray-200);
    border-left: none;
  }
}

/* ===================== Safe area padding for notch devices ===================== */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}