/* ==========================================================================
   Vocelli Pizza case study — "Adding the Sauce" editorial-collage theme.
   Loaded only on projects/vocelli.html, after the theme-agnostic
   assets/css/projects.css (lightbox mechanics, reveal-on-scroll, base
   .gallery-item/.back-link structure). Scoped under .vocelli-theme (set on
   <body>) using its own --vocelli-* tokens, never the site's global
   --maroon/--cream/--ink names, so the shared navbar/footer keep the site's
   own look untouched. Section classes are namespaced with a vl- prefix
   since the site already defines a global .hero (see style.css) — this
   avoids any collision without touching that shared rule.

   The desktop composition is nine full-width raster artwork panels (each
   already final editorial design, approved section by section) with real
   campaign assets — deck slides, the content calendar, sample posts, three
   videos, and creator-research screenshots — overlaid at fixed percentage
   positions matching each panel's approved torn-paper mount. Every panel
   scales as one block (background image width:100%, overlays positioned in
   %), so the whole page scales proportionally at any viewport without
   cropping; no separate mobile artwork exists yet pending a readability
   review, per the desktop-only approval.
   ========================================================================== */

.vocelli-theme {
  --vocelli-cream: #f4ecd9;
  --vocelli-paper: #e8d8b8;
  --vocelli-green: #073e2f;
  --vocelli-green-dark: #052f25;
  --vocelli-red: #b52831;
  --vocelli-mint: #b9dfcf;
  --vocelli-ink: #171512;

  background: #9c9586;
}

.vocelli-theme * { box-sizing: border-box; }

.vocelli-theme main {
  padding: clamp(20px, 3.5vw, 44px) 20px 64px;
}

.vocelli-theme img { display: block; max-width: 100%; }

.vocelli-theme a:focus-visible,
.vocelli-theme button:focus-visible,
.vocelli-theme video:focus-visible,
.vocelli-theme [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .vocelli-theme * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============== RETURN LINK (above the artwork) ============== */
.vocelli-theme .vl-return-wrap {
  max-width: 1440px;
  margin: 0 auto 20px;
}

.vocelli-theme .back-link {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--vocelli-green);
  text-decoration: underline;
  text-decoration-color: var(--vocelli-red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.vocelli-theme .back-link:hover,
.vocelli-theme .back-link:focus-visible {
  color: var(--vocelli-green);
}
.vocelli-theme .back-link:hover .back-link-arrow,
.vocelli-theme .back-link:focus-visible .back-link-arrow {
  transform: translateX(-4px);
}
.vocelli-theme .back-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  text-decoration: none;
}

/* ============== PAGE CONTAINER ============== */
.vocelli-theme .vl-page {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  background: var(--vocelli-cream);
  position: relative;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

/* Neutralize the shared .gallery-item masonry defaults (width:100%,
   margin-bottom, hover zoom) — this page pins each real asset at an
   absolute, approved percentage position with its own rotation, so those
   defaults would misalign the composition; the hover zoom is also turned
   off to preserve the exact approved static collage. */
.vocelli-theme .gallery-item { margin: 0; }
.vocelli-theme .gallery-item:hover img,
.vocelli-theme .gallery-item:focus-visible img { transform: none; }

.vocelli-theme .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============== PHASE 1 — HERO ============== */
.vocelli-theme .vl-hero { width: 100%; }
.vocelli-theme .vl-hero img { width: 100%; height: auto; }

/* ============== PHASE 2 — BRIEF + RESEARCH ============== */
.vocelli-theme .vl-brief-research { width: 100%; }
.vocelli-theme .vl-brief-research img { width: 100%; height: auto; }

/* ============== PHASE 3 — CONTENT PILLARS ============== */
.vocelli-theme .vl-pillars { width: 100%; }
.vocelli-theme .vl-pillars img { width: 100%; height: auto; }

/* ============== PHASE 4 — CAMPAIGN DECK ============== */
.vocelli-theme .vl-deck { width: 100%; }
.vocelli-theme .vl-deck-visual { position: relative; width: 100%; }
.vocelli-theme .vl-deck-bg { width: 100%; height: auto; }

.vocelli-theme .vl-deck-slide {
  position: absolute;
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
  border-radius: 2px;
}
.vocelli-theme .vl-deck-slide img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* ============== PHASE 5 — CONTENT CALENDAR ============== */
.vocelli-theme .vl-calendar { width: 100%; }
.vocelli-theme .vl-calendar-visual { position: relative; width: 100%; }
.vocelli-theme .vl-calendar-bg { width: 100%; height: auto; }

.vocelli-theme .vl-calendar-overlay {
  position: absolute;
  left: 38%;
  top: 21%;
  width: 43%;
  height: auto;
  transform: rotate(-2.2deg);
  transform-origin: center;
  filter: drop-shadow(0 3px 4px rgba(23, 21, 18, 0.12));
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
}
.vocelli-theme .vl-calendar-overlay img { width: 100%; height: auto; }

/* ============== PHASE 6 — SOCIAL CREATIVE ============== */
.vocelli-theme .vl-creative { width: 100%; }
.vocelli-theme .vl-creative-visual { position: relative; width: 100%; }
.vocelli-theme .vl-creative-bg { width: 100%; height: auto; }

.vocelli-theme .vl-creative-overlay {
  position: absolute;
  left: 32.5%;
  top: 17%;
  width: 48%;
  height: auto;
  transform: rotate(-1deg);
  transform-origin: center;
  filter: drop-shadow(0 3px 4px rgba(23, 21, 18, 0.12));
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
}
.vocelli-theme .vl-creative-overlay img { width: 100%; height: auto; }

/* ============== PHASE 7 — SOCIAL VIDEO ============== */
.vocelli-theme .vl-social-video { width: 100%; }
.vocelli-theme .vl-social-video-visual { position: relative; width: 100%; }
.vocelli-theme .vl-social-video-bg { width: 100%; height: auto; }

.vocelli-theme .vl-social-video-clip {
  position: absolute;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  overflow: hidden;
  border-radius: 10px;
  transform-origin: center;
  background: var(--vocelli-green-dark);
}
.vocelli-theme .vl-social-video-clip.v1 { left: 31.25%; top: 12.5%; width: 13.85%; transform: rotate(-2deg); }
.vocelli-theme .vl-social-video-clip.v2 { left: 49.3%; top: 11.2%; width: 12.75%; transform: rotate(0deg); }
.vocelli-theme .vl-social-video-clip.v3 { left: 66.65%; top: 13.5%; width: 11.9%; transform: rotate(2deg); }

/* ============== PHASE 8 — INFLUENCER STRATEGY ============== */
.vocelli-theme .vl-influencer { width: 100%; }
.vocelli-theme .vl-influencer-visual { position: relative; width: 100%; }
.vocelli-theme .vl-influencer-bg { width: 100%; height: auto; }

.vocelli-theme .vl-influencer-sheet {
  position: absolute;
  height: auto;
  object-fit: contain;
  transform-origin: center;
  filter: drop-shadow(0 3px 4px rgba(23, 21, 18, 0.12));
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
}
.vocelli-theme .vl-influencer-sheet img { width: 100%; height: auto; }
.vocelli-theme .vl-influencer-sheet.s1 { left: 5.2%; top: 57%; width: 27.2%; transform: rotate(-1.2deg); }
.vocelli-theme .vl-influencer-sheet.s2 { left: 35.5%; top: 56.5%; width: 26.7%; transform: rotate(0deg); }
.vocelli-theme .vl-influencer-sheet.s3 { left: 65.5%; top: 57.5%; width: 27.2%; transform: rotate(1.2deg); }

/* ============== PHASE 9 — PRESENTATION & OUTCOME ============== */
.vocelli-theme .vl-outcome { width: 100%; }
.vocelli-theme .vl-outcome img { width: 100%; height: auto; }

/* ============== PROJECTS-PAGE TICKET ============== */
/* The ticket is used exactly as supplied with no additional card chrome;
   only hover/focus motion is added here, kept intentionally subtle. */
.project-card-vocelli {
  display: block;
  line-height: 0;
  transform: rotate(-1.2deg);
  transition: transform 0.25s ease;
}
.project-card-vocelli img {
  display: block;
  width: 100%;
  height: auto;
}
.project-card-vocelli:hover,
.project-card-vocelli:focus-visible {
  transform: translateY(-4px) rotate(-0.3deg);
}
.project-card-vocelli:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .project-card-vocelli { transition: none; }
}