/*
 * Component: featured transport carousel wrapper (section 3).
 * Spec: boxed max-width 1500px centred, 48px top/bottom padding, 36px left
 * padding, with the faded Transporter wordmark as the section-wrapper
 * background watermark (--tr-wm set inline in PHP).
 */

.tr-section--transport-carousel {
    position: relative;
    isolation: isolate;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 36px;
}

/* Neutralise the global .tr-home inter-section gap so padding-top is exact. */
.tr-home > .tr-section--transport-carousel {
    margin-top: 0;
}

/* Faded wordmark background watermark on the wrapper. */
.tr-section--transport-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--tr-wm, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(1040px, 88%) auto;
    opacity: 0.08;
    pointer-events: none;
}

@media (max-width: 768px) {
    .tr-section--transport-carousel { padding-left: 16px; }
    .tr-section--transport-carousel::before { background-size: 150% auto; opacity: 0.06; }
}