/*!
 |------------------------------------------------------------------
 | showcase.css — Platform tab showcase + Industries grid (raas landing).
 |------------------------------------------------------------------
 |
 | Loaded via @push('styles') from marketing/raas/platform.blade.php.
 | Builds only on the tokens + primitives in base.css (--z-* custom
 | properties, .raas-section rhythm, .raas-eyebrow).  Industries rules
 | serve marketing/raas/industries.blade.php — both sections ship as one
 | composition, so the two share this file.
 |
 | Tabs      .raas-tabs / .raas-tab (pill buttons, navy when selected)
 | Panels    .raas-tabpanel + .raas-panel-grid (screenshot | copy halves)
 | Frames    .raas-shot (fixed 4/3 crop) and .raas-panel-visual--text
 |           (navy card for modules with no honest capture to show —
 |           never a fabricated UI).
 | Industries .raas-industry-grid cards with .raas-flow chip journeys.
 */

/* ---------- Platform: tab bar ---------- */
.raas-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 2rem 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.raas-tab {
    padding: .5rem 1rem;
    border: 1.5px solid var(--z-line);
    border-radius: 999px;
    background: var(--z-white);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--z-muted);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.raas-tab:hover {
    border-color: var(--z-blue);
    color: var(--z-blue);
}

.raas-tab[aria-selected="true"] {
    background: var(--z-navy);
    border-color: var(--z-navy);
    color: #FFFFFF;
}

/* ---------- Platform: panels ---------- */
.raas-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .raas-panel-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

.raas-tabpanel:focus-visible {
    outline-offset: 6px;
}

/* Graceful fallback: without the showcase JS the tab buttons cannot
   switch panels, so every panel stacks into view instead of leaving
   eight modules unreachable.  The marker class is set by showcase.js
   itself (not raas.js), so a failure of either script degrades safely. */
html:not(.raas-tabs-js) .raas-tabpanel[hidden] {
    display: block;
    margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* ---------- Platform: screenshot frame ---------- */
.raas-shot {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    background: var(--z-white);
    box-shadow: var(--z-shadow-card);
}

.raas-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ---------- Platform: navy card for panels without a real capture ---------- */
.raas-panel-visual--text {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    border-radius: var(--z-radius);
    background: var(--z-navy);
    color: var(--z-navy-ink);
    text-align: center;
    box-shadow: var(--z-shadow-card);
}

.raas-visual-icon {
    display: inline-flex;
    color: var(--z-blue-soft);
}

.raas-visual-icon svg {
    width: 44px;
    height: 44px;
}

.raas-visual-label {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #FFFFFF;
}

.raas-visual-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.raas-visual-chips span {
    padding: .25rem .65rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--z-navy-soft);
    white-space: nowrap;
}

/* ---------- Platform: copy half ---------- */
.raas-panel-text h3 {
    margin-bottom: .625rem;
}

.raas-panel-text p {
    color: var(--z-muted);
}

.raas-module-list {
    display: grid;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.raas-module-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--z-muted);
}

.raas-module-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--z-green);
}

.raas-screens-note {
    margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* ---------- Industries: cards ---------- */
.raas-industry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 640px) {
    .raas-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .raas-industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.raas-industry-card {
    padding: 1.5rem 1.5rem 1.75rem;
    background: var(--z-white);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.raas-industry-card:hover {
    transform: translateY(-3px);
    border-color: #D3DEF2;
    box-shadow: var(--z-shadow-card);
}

.raas-industry-card h3 {
    margin-bottom: 1rem;
}

/* ---------- Industries: micro-flow chips ---------- */
.raas-flow {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.raas-flow-step {
    position: relative;
    padding: .3rem .7rem;
    border: 1px solid var(--z-line);
    border-radius: 999px;
    background: var(--z-paper);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--z-navy);
    white-space: nowrap;
}

.raas-flow-step + .raas-flow-step {
    margin-left: 1.1rem;
}

.raas-flow-step + .raas-flow-step::before {
    content: "→";
    position: absolute;
    left: -1.1rem;
    width: 1.1rem;
    text-align: center;
    font-weight: 400;
    color: var(--z-muted);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .raas-tab { transition: none; }
    .raas-industry-card { transition: none; }
    .raas-industry-card:hover { transform: none; }
}