/* ============================================================
   Content & Creative Illustration — Claude Design
   "Services Hero - Content & Creative"
   Composing tile + variants panel. Lives under "The Reality"
   on /services/content-creative/. Prefix .cc-* so nothing collides.
   ============================================================ */

.cc-ill-section {
    background: #FAFAF7;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.cc-ill-section__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: center;
}

.cc-ill {
    width: 100%;
    max-width: 1240px;
    aspect-ratio: 16 / 9;
    position: relative;
    background: #FAFAF7;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(17, 24, 39, 0.06);
    color: #111827;
    font-family: var(--font-primary, 'Plus Jakarta Sans'), system-ui, sans-serif;
}
.cc-ill *,
.cc-ill *::before,
.cc-ill *::after { box-sizing: border-box; }

.cc-ill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(217, 119, 6, 0.04), transparent 60%);
    pointer-events: none;
}

.cc-ill__inner {
    position: absolute;
    inset: 8% 8%;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 6%;
    align-items: stretch;
}

/* ── Centerpiece — composing tile ─────────────── */
.cc-comp {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #FFFFFF;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 22px 50px rgba(17, 24, 39, 0.08),
        0 2px 4px rgba(17, 24, 39, 0.04);
    display: flex;
    flex-direction: column;
}

.cc-comp__band {
    height: 38%;
    background: linear-gradient(135deg, #F4D7B5 0%, #D97706 100%);
    position: relative;
    overflow: hidden;
}
.cc-comp__band::after {
    content: '';
    position: absolute;
    right: -10%;
    top: -20%;
    width: 60%;
    height: 130%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.cc-comp__mark {
    position: absolute;
    top: 18px;
    left: 22px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 13px;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.cc-comp__cat {
    position: absolute;
    top: 25px;
    right: 22px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
}

.cc-comp__body {
    flex: 1;
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cc-comp__h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: -1px;
    line-height: 1.05;
    color: #111827;
    margin: 0;
}
.cc-comp__h1 em {
    font-style: italic;
    color: #D97706;
    font-weight: 500;
}

.cc-comp__sub { display: flex; flex-direction: column; gap: 5px; }
.cc-comp__sub span {
    height: 5px;
    background: rgba(17, 24, 39, 0.10);
    border-radius: 2px;
}
.cc-comp__sub span:nth-child(1) { width: 95%; }
.cc-comp__sub span:nth-child(2) { width: 82%; }
.cc-comp__sub span:nth-child(3) { width: 60%; }

.cc-comp__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #111827;
    text-transform: uppercase;
}
.cc-comp__cta-arrow {
    width: 28px;
    height: 1px;
    background: #111827;
    position: relative;
}
.cc-comp__cta-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #111827;
    border-top: 1px solid #111827;
    transform: rotate(45deg);
    transform-origin: top right;
}

.cc-comp__pulse {
    position: absolute;
    bottom: 14px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: rgba(17, 24, 39, 0.5);
    text-transform: uppercase;
}
.cc-comp__pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D97706;
    animation: cc-comp-pulse 1.6s ease-in-out infinite;
}
@keyframes cc-comp-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ── Variants panel ─────────────────────────────── */
.cc-variants {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 0;
}
.cc-variants__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}
.cc-variants__head-lbl {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(17, 24, 39, 0.5);
    text-transform: uppercase;
}
.cc-variants__head-title {
    font-family: var(--font-primary, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: #111827;
    letter-spacing: -0.2px;
}
.cc-variants__counter {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(17, 24, 39, 0.6);
}
.cc-variants__counter strong {
    color: #D97706;
    font-family: var(--font-primary, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 300;
    font-size: 22px;
    letter-spacing: -0.5px;
    margin-right: 4px;
}

.cc-variants__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.cc-v {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: cc-v-in 6s ease-in-out infinite;
    opacity: 0;
}
@keyframes cc-v-in {
    0%        { opacity: 0; transform: translateY(6px); }
    14%, 92%  { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(6px); }
}
.cc-v:nth-child(1) { animation-delay: 0s; }
.cc-v:nth-child(2) { animation-delay: 0.3s; }
.cc-v:nth-child(3) { animation-delay: 0.6s; }
.cc-v:nth-child(4) { animation-delay: 0.9s; }
.cc-v:nth-child(5) { animation-delay: 1.2s; }
.cc-v:nth-child(6) { animation-delay: 1.5s; }

.cc-v__band {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.cc-v__body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-v__line {
    height: 4px;
    background: rgba(17, 24, 39, 0.18);
    border-radius: 2px;
}
.cc-v__line--short {
    height: 3px;
    width: 60%;
    background: rgba(17, 24, 39, 0.10);
}

/* variant color treatments */
.cc-v--a .cc-v__band { background: linear-gradient(135deg, #F4D7B5, #D97706); }
.cc-v--b .cc-v__band { background: #111827; }
.cc-v--b .cc-v__line { background: rgba(255, 255, 255, 0.9); }
.cc-v--c .cc-v__band { background: linear-gradient(180deg, #FFF8EE, #F4D7B5); }
.cc-v--d .cc-v__band { background: linear-gradient(135deg, #2A2520, #D97706); }
.cc-v--e .cc-v__band { background: #FAFAF7; border-bottom: 1px solid rgba(17, 24, 39, 0.08); }
.cc-v--e .cc-v__band::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #D97706;
}
.cc-v--f .cc-v__band { background: #FFFFFF; }
.cc-v--f .cc-v__band::after {
    content: '';
    position: absolute;
    inset: 20%;
    border: 1px solid #D97706;
}

/* subtle "shape" decoration on band */
.cc-v__band-shape {
    position: absolute;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.cc-v--a .cc-v__band-shape { top: -20%; right: -15%; }
.cc-v--d .cc-v__band-shape { top: 30%;  right: -25%; }

.cc-v__mark {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.95);
}
.cc-v--c .cc-v__mark,
.cc-v--e .cc-v__mark,
.cc-v--f .cc-v__mark {
    border-color: rgba(17, 24, 39, 0.4);
    color: rgba(17, 24, 39, 0.7);
}

/* ── Bottom corner marks ─────────────────────────── */
.cc-ill__mark {
    position: absolute;
    bottom: 28px;
    left: 36px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(17, 24, 39, 0.35);
}
.cc-ill__mark strong { color: #111827; font-weight: 500; }
.cc-ill__mark-line {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: rgba(217, 119, 6, 0.5);
    vertical-align: middle;
    margin: 0 8px;
}
.cc-ill__index {
    position: absolute;
    bottom: 28px;
    right: 36px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(17, 24, 39, 0.35);
}
.cc-ill__index strong { color: #D97706; font-weight: 500; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 920px) {
    .cc-ill { aspect-ratio: 4 / 5; }
    .cc-ill__inner {
        grid-template-columns: 1fr;
        inset: 6%;
        gap: 6%;
        align-items: stretch;
    }
    .cc-comp { aspect-ratio: 5 / 6; }
    .cc-ill__mark,
    .cc-ill__index { bottom: 16px; }
    .cc-ill__mark  { left: 20px; }
    .cc-ill__index { right: 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cc-comp__pulse-dot { animation: none; opacity: 1; }
    .cc-v { animation: none; opacity: 1; transform: none; }
}