/* ==========================================================================
   AIRISH - Artwork Gallery Page Stylesheet (css/artwork.css)
   ========================================================================== */

/* Header Utility Icons */
.header-action-icon {
  font-size: 18px;
}

/* Hidden elements by default */
#searchSection {
  display: none;
}

#artworkDetailOverlay {
  display: none;
}

/* Section Header Typography & Spacing */
.gallery-section-header {
  margin-top: -5px;
  margin-bottom: 12px;
}

.gallery-sub-curated {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.gallery-badge-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-sage);
}

.gallery-discover-header {
  margin-top: 15px;
  margin-bottom: -10px;
}

.gallery-batch-spaced {
  margin-top: 14px;
}

.gallery-footer-banner {
  margin-top: 14px;
}

/* Bento Card Aspect Ratio Utilities */
.aspect-1-1 {
  aspect-ratio: 1 / 1.1;
}

.aspect-1-0 {
  aspect-ratio: 1 / 1.0;
}

.aspect-1-15 {
  aspect-ratio: 1 / 1.15;
}

.aspect-1-05 {
  aspect-ratio: 1 / 1.05;
}

.aspect-1-25 {
  aspect-ratio: 1 / 1.25;
}

.aspect-1-2 {
  aspect-ratio: 1 / 1.2;
}

.aspect-1-35 {
  aspect-ratio: 1 / 1.35;
}

/* Accessibility Modal Styles */
.a11y-label-title {
  font-size: var(--text-sm);
  font-weight: 700;
  display: block;
}

.a11y-label-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-right: 5px;
}

.a11y-group-spaced {
  padding: 12px 0;
}

.a11y-group-title {
  font-size: var(--text-sm);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.a11y-font-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.a11y-sensory-tip {
  margin-top: 14px;
  padding: 12px;
  background: rgba(148, 210, 189, 0.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 210, 189, 0.2);
}

.a11y-sensory-text {
  font-size: 0.72rem;
  color: var(--accent-sage);
  line-height: 1.5;
}

/* Note: In-page detail overlay and standalone artwork detail are canonically styled by css/artwork-detail.css */


/* Rental Sheet Subtitle & Selected Artwork Card */
.sheet-subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sheet-artwork-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--bg-tertiary);
  padding: 10px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

#sheetArtworkThumb {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

#sheetArtworkTitle {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

#sheetArtworkArtist {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

#sheetDiscountText {
  color: var(--accent-sage);
}

#sheetFinalTotalPrice {
  color: var(--accent-sage);
  font-size: 1.1rem;
}

/* Empty State */
.bento-empty-box {
  padding: 48px 20px;
  text-align: center;
}

.bento-empty-icon {
  font-size: 36px;
  color: var(--accent-sage);
  opacity: 0.8;
  margin-bottom: 10px;
  display: inline-block;
}

.bento-empty-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.bento-empty-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}