/* ==========================================================================
   DETAIL ART — Floral Studio Artwork (Clean & Level)
   ========================================================================== */

.detail-art {
  --art-position: 75% 52%;
  --art-tint: #dce9e5;
}

.detail-art .inside-main {
  overflow: clip;
}

.detail-art .page-intro {
  position: relative;
  isolation: isolate;
  padding: 40px 0 60px;
}

.detail-art .page-intro:before {
  content: '';
  position: absolute;
  inset: -20px -5% 0;
  z-index: -2;
  background: linear-gradient(90deg, var(--inside-color) 0%, transparent 60%),
              linear-gradient(0deg, var(--inside-color) 0%, transparent 50%),
              url('assets/bloom.jpg') var(--art-position) / cover no-repeat;
  opacity: 0.35;
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.detail-art .page-intro p {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  padding: 24px 28px;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transform: none !important;
  max-width: 480px;
}

.detail-art .deliverables > div:first-child:after {
  content: '';
  display: block;
  max-width: 380px;
  height: 280px;
  margin: 36px 0 20px;
  background: url('assets/bloom.jpg') var(--art-position) / cover no-repeat;
  border: 8px solid #fffdf5;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: none !important;
  outline: 1px solid var(--ink-border);
}

.detail-art .deliverable-list {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  padding: 12px 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-border);
  box-shadow: var(--shadow-sm);
  transform: none !important;
}

.art-1 { --art-position: 15% 35%; }
.art-2 { --art-position: 85% 70%; }
.art-3 { --art-position: 45% 90%; }
.art-4 { --art-position: 100% 48%; }
.art-5 { --art-position: 20% 70%; }
.art-6 { --art-position: 65% 95%; }

@media (max-width: 768px) {
  .detail-art .deliverables > div:first-child:after {
    max-width: 100%;
    height: 200px;
  }
}