/* ==================================================================
   OZAVION — Industries page
   Page-specific touches only; everything structural reuses the shared
   section/component system (sections.css, components.css, style.css).
   Loaded via $page_styles on industries.php only. Shared files untouched.
   ================================================================== */

/* Small uppercase label used to introduce a sub-block inside a card. */
.ind-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Industry cards carry several stacked sub-blocks; give them rhythm. */
.ind-card { gap: var(--space-4); }

/* "Example solutions" — quiet dotted list inside the industry cards. */
.ind-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ind-examples li {
    position: relative;
    padding-left: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
}
.ind-examples li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent-2);
}

/* "Explore Solutions" link — pinned to the bottom of each card. */
.ind-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-accent-2);
}
.ind-cta .icon { transition: transform var(--transition); }
.ind-cta:hover .icon { transform: translateX(4px); }

/* Featured travel use-cases read better in two columns on wider screens. */
.ind-usecases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-5);
}
@media (max-width: 560px) {
    .ind-usecases { grid-template-columns: 1fr; }
}

/* Numbered process tiles: float the step number top-right of the card. */
.page--industries .tile--step { position: relative; }
.page--industries .tile--step .step-num {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 34px;
    height: 34px;
    font-size: var(--fs-sm);
}
.page--industries .tile--step .tile__title { padding-right: var(--space-7); }