/* =========================================
   Ariza Stone — Case Study Overrides
   Extends case-study.css template
   ========================================= */

/* --- Strategy Tabs --- */
.strategy-tabs-container { margin-top: 3rem; }

.strategy-nav {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 3rem;
}
.strategy-tab {
    padding: 8px 20px;
    border: 1px solid var(--border); border-radius: 100px;
    background: transparent; color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.4s var(--ease-organic);
}
.strategy-tab:hover {
    border-color: rgba(234, 229, 222, 0.25);
    color: var(--text-primary);
}
.strategy-tab.active {
    background: rgba(142, 131, 114, 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

.strategy-content-area { position: relative; min-height: 350px; }

.strategy-panel {
    display: none; opacity: 0;
    transform: translateY(16px);
    transition: all 0.5s var(--ease-organic);
}
.strategy-panel.active {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem; align-items: center;
    opacity: 1; transform: translateY(0);
}
.strategy-panel-text h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem; font-weight: 400;
    color: var(--accent);
    margin-bottom: 1rem;
}
.strategy-panel-visual {
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.strategy-panel-visual img,
.strategy-panel-visual video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

@media (max-width: 768px) {
    .strategy-panel.active { grid-template-columns: 1fr; }
}

/* --- Brand Identity Grids --- */
.brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem; margin: 2rem 0;
}
/* Small applications row (business cards, textures) */
.brand-applications-small {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; margin: 2rem 0;
}
.brand-app-sm {
    margin: 0; border-radius: 8px;
    aspect-ratio: 4/3;
}
.brand-app-sm img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

@media (max-width: 768px) {
    /* Brand paired grids stay 2-col on mobile */
    .brand-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.5rem 0; }
    .brand-applications-small { grid-template-columns: 1fr; }
    .brand-app-sm { aspect-ratio: auto; }
}

/* CTA fixes */
.cs-cta .copy-large {
    margin: 0 auto;
}
.cs-cta .cs-cta-btn {
    margin-top: 2rem;
}

/* Brand identity: tighter visual-block margins inside grids */
#brand-identity .brand-grid .visual-block,
#brand-identity .brand-applications-small .visual-block {
    margin: 0;
}

/* --- Browser Mockup --- */
.browser-mockup {
    background: #2B2A28;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    margin-top: 3rem;
}
.browser-topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 12px 16px;
    background: #2B2A28;
    border-bottom: 1px solid var(--border);
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots .dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }
.browser-url {
    flex: 1;
    background: rgba(234, 229, 222, 0.06);
    border-radius: 6px; padding: 6px 14px;
    font-size: 0.7rem; color: var(--text-secondary);
    font-family: var(--font-body); letter-spacing: 0.5px;
}
.browser-screen { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.browser-screen video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* --- AI Content Grid --- */
.ai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; margin-top: 3rem;
}
.ai-grid .visual-block {
    margin: 0; aspect-ratio: 3/4;
}
.ai-grid .visual-block img,
.ai-grid .visual-block video {
    height: 100%; object-fit: cover;
}
@media (max-width: 768px) {
    .ai-grid { grid-template-columns: 1fr; }
    .ai-grid .visual-block { aspect-ratio: 16/9; }
}

/* --- Social Slider --- */
.social-slider {
    width: 100%; overflow: hidden;
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}
.social-track {
    display: flex; gap: 1.5rem;
    width: max-content;
    animation: slide-left 45s linear infinite;
}
.social-track:hover { animation-play-state: paused; }

@keyframes slide-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.phone-frame {
    width: 200px; aspect-ratio: 9/19.5;
    background: #000;
    border-radius: 32px;
    border: 6px solid #2B2A28;
    position: relative; overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6),
                inset 0 0 2px 1px rgba(255,255,255,0.08);
}
.phone-frame video {
    width: 100%; height: 100%;
    object-fit: cover; background: #000;
}
/* Dynamic Island */
.phone-frame::after {
    content: '';
    position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 16px;
    background: #000; border-radius: 16px;
    z-index: 5;
    border: 0.5px solid rgba(255,255,255,0.04);
}
/* Screen reflection */
.phone-frame::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(255,255,255,0.04) 0%, transparent 50%);
    z-index: 4; pointer-events: none;
}

/* --- PR Row --- */
.pr-row {
    display: flex; flex-wrap: wrap; gap: 3rem;
    justify-content: flex-start;
    margin: 2rem 0 3rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* =========================================
   MOBILE OPTIMIZATION
   ========================================= */
@media (max-width: 480px) {
    /* Hero */
    .cs-hero { padding: 110px 0 50px 0; }
    .hero-meta {
        flex-direction: column; gap: 0.5rem;
        font-size: 0.75rem;
    }
    .tag-row { gap: 0.5rem; }
    .tag { padding: 6px 14px; font-size: 0.65rem; letter-spacing: 1px; }

    /* Sections tighter */
    .cs-section { padding: 3rem 0; }
    .contained { padding: 0 6%; }

    /* Strategy tabs */
    .strategy-tabs-container { margin-top: 2rem; }
    .strategy-nav { gap: 6px; margin-bottom: 2rem; }
    .strategy-tab { padding: 7px 14px; font-size: 0.6rem; letter-spacing: 1px; }
    .strategy-content-area { min-height: auto; }
    .strategy-panel.active { gap: 2rem; }
    .strategy-panel-text h3 { font-size: 1.1rem; }

    /* Visual blocks: tighter in grids */
    .visual-block { border-radius: 8px; margin: 1.5rem 0; }
    #brand-identity .visual-block { margin: 0; border-radius: 6px; }
    #brand-identity .brand-grid { gap: 0.4rem; margin: 0.4rem 0; }
    #brand-identity .contained + .contained { margin-top: 0; }

    /* Browser mockup */
    .browser-mockup { border-radius: 8px; margin-top: 2rem; }
    .browser-topbar { padding: 8px 12px; gap: 0.6rem; }
    .browser-dots .dot { width: 7px; height: 7px; }
    .browser-url { font-size: 0.6rem; padding: 5px 10px; }

    /* AI grid */
    .ai-grid { gap: 0.5rem; margin-top: 2rem; }

    /* Social slider */
    .phone-frame {
        width: 160px;
        border-radius: 26px; border-width: 5px;
    }
    .phone-frame::after { width: 40px; height: 13px; top: 8px; }
    .social-slider { padding: 2rem 0; }
    .social-track { gap: 1rem; }

    /* Stats */
    .stats-row { padding: 3rem 0; }
    .stat-block .number { font-size: 2.5rem; }
    .stat-block .label { font-size: 0.65rem; letter-spacing: 2px; }

    /* PR row */
    .pr-row { gap: 1.5rem; font-size: 0.75rem; }

    /* CTA */
    .cs-cta { padding: 3rem 0 2rem; }
    .cs-cta .text-label { margin-bottom: 0.8rem; }
    .cs-cta .text-title-medium { margin-bottom: 0.8rem; }
    .cs-cta .cs-cta-btn { margin-top: 1.2rem; }

    /* Next case study */
    .cs-next { flex-direction: column; gap: 1.5rem; align-items: flex-start; padding: 2.5rem 0; }
    .next-title { font-size: 1rem; }

    /* Gradient dividers */
    .gradient-divider { margin: 0; }
}