/*
The "sell a boat" page of every group (resources/views/{by,regio,bkm}/article/offerboat.blade.php): what the three
pages share. Loaded by that page alone, before the group's own offerboat.css, which adds its blocks (BY's hero and
tiles, Regio's cards, BKM's tiles and account box) and may override these.
DRAFT: rough layout to judge structure and content - the final look comes later.
*/

/* This page is white (the site's light grey of base.css would reach below a short page). */
body {
    background-color: #fff;
}

.ob-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* White like the page, so the first section follows it without a second full gap. */
.ob-hero {
    padding: 3rem 0 0;
}

.ob-h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: .5rem;
}

.ob-h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.ob-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.ob-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .75rem;
}

/* The steps: numbered circles, two columns from tablet width, four from desktop width up. Where the circle sits
is the group's (BY: over the corner of the step, BKM: beside its text). */
.ob-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: ob-step;
}

.ob-steps > li {
    position: relative;
    counter-increment: ob-step;
}

.ob-steps > li::before {
    content: counter(ob-step);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
}

@media (min-width: 768px) {
    .ob-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .ob-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The closing band in the site colour. */
.ob-cta {
    padding: 3rem 0;
    background: var(--brand-primary);
    color: #fff;
}

.ob-cta a:not(.btn) {
    color: #fff;
}