/*
"Boot verkaufen" landing page (resources/views/by/article/offerboat.blade.php): BY's own blocks. What the three
groups' pages share (sections, headings, steps, closing band) is in shared/css/offerboat.css, loaded before this.
DRAFT: rough layout only, to judge structure and content - the final look comes later.
*/

.offerboat {
    --ob-band: #f3f7fa;
}

/* BY's headline has the size and weight of the page's section headings (.ob-h2 in shared/css/offerboat.css, "Warum Sie
Ihr Boot bei uns verkaufen"), with more room below it (Carsten, 2026-10-29). */
.ob-h1 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.ob-hero {
    padding: 3rem 0;
    background: linear-gradient(180deg, var(--ob-band), #fff);
}

/* The hero's text beside the tile (two columns from lg up) starts at the tile's upper edge: the headline's own line
spacing leaves a little air above its letters, it is pulled up by that. The room between the column's blocks is set
by hand below (owner, 2026-10-13); the column is not stretched to the tile's height. */
@media (min-width: 992px) {
    .ob-hero-text > .ob-h1 {
        margin-top: -.2em;
    }
}

/* "Already registered?" and the price list line, below the buttons. */
.ob-hero-lines {
    margin-top: 1.25rem;
}

.ob-claim-block {
    width: fit-content;
    max-width: 100%;
    margin-top: 1.75rem;
}

/* The flags of the page's languages, from the first to the last letter of the claim above them. */
.ob-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 1.75rem;
    line-height: 1;
}

.ob-flags a {
    display: block;
}

.ob-flags .flag-icon {
    display: block;
}

/* The claim below the hero's text. In the headings' font: the text font has no bold cut here (600 at most). */
.ob-claim {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.3;
    color: var(--brand-primary);
}

.ob-band-light {
    background: var(--ob-band);
}

/* Hero picture: the map of BY's domains (Carsten, 2026-10-29), as wide as its column, so its right edge is that of
the three advantages below; its own proportions at every width, rounded like the other boxes. */
.ob-hero-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--by-radius);
}

/* The photos of the four steps (1080x675, 16:10 like this box; Carsten, 2026-10-29): one box for all, anchored at the
top left, where the step's number lies over the picture. */
.ob-step-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 1rem;
    object-fit: cover;
    object-position: top left;
    border: 1px solid #dde6ec;
    border-radius: .75rem;
    background: #fff;
}

.ob-type-photo {
    border-radius: .75rem .75rem 0 0;
}

/* The two pictures "sell a sailboat / a motorboat": less vivid and tuned towards the brand colour, so they sit
calmer on the page than the hero's picture (owner, 2026-10-13). Done here and not in the files: the strength is
two numbers, and the pictures stay as they were supplied. */
.ob-type-media {
    position: relative;
    overflow: hidden;
    border-radius: .75rem .75rem 0 0;
}

.ob-type-media .ob-type-photo {
    filter: saturate(.8);
}

.ob-type-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--brand-primary-rgb), .08);
    pointer-events: none;
}

.ob-tile {
    height: 100%;
    padding: 1.5rem;
    border-radius: .75rem;
    background: var(--ob-band);
    text-align: center;
}

.ob-tile-icon {
    display: block;
    margin-bottom: .75rem;
    font-size: 2.2rem;
    color: var(--brand-primary);
}

/* The step's number over its upper left corner. */
.ob-steps > li::before {
    top: -.75rem;
    left: -.75rem;
}

/* The two boat type cards: the light grey box of BY without a border, the button at the foot of the card, so both
buttons stand at the same height whatever the length of the text (Carsten, 2026-11-01). */
.ob-type {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--by-surface);
    border-radius: .75rem;
}

.ob-type > .p-4 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ob-type-button {
    align-self: flex-start;
    margin-top: auto;
}

/* The guide's three steps: the number graphic on the left, the text beside it; on a phone the graphic a little smaller. */
.ob-guide-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 2rem;
}

.ob-guide-number {
    flex-shrink: 0;
    width: 4.75rem;
    height: auto;
}

@media (max-width: 575.98px) {
    .ob-guide-step {
        gap: 1rem;
    }

    .ob-guide-number {
        width: 3rem;
    }
}

/* Each FAQ question in a white box on the light band, like the checklist's boxes; two boxes side by side from
desktop width on, one below the other on a phone or tablet. */
.ob-faq-grid {
    display: grid;
    gap: 1rem;
}

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

.ob-faq-item {
    padding: 1.5rem;
    background: #fff;
    border-radius: .75rem;
}

.ob-faq-item > :last-child {
    margin-bottom: 0;
}

.ob-list li {
    margin-bottom: .25rem;
}

.ob-checklist {
    columns: 2 16rem;
    padding: 0;
    list-style: none;
}

/* The checklist as three white boxes on the light band, one column each. */
.ob-check-box {
    columns: auto;
    height: 100%;
    margin: 0;
    padding: 1.5rem;
    background: #fff;
    border-radius: .75rem;
}

.ob-checklist li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .5rem;
    break-inside: avoid;
}

.ob-checklist li::before {
    content: "\F270"; /* bi-check2-circle */
    position: absolute;
    left: 0;
    font-family: bootstrap-icons;
    color: var(--brand-primary);
}

/* Every button of the page has the height and font size of the homepage's .btn-section-cta (by/css/site.css): 52px
high, 16px text (Carsten, 2026-10-15). Bootstrap's .btn has a 1px border, so the line is 50px; ".offerboat .btn" also
outranks .btn-lg. */
.offerboat .btn {
    font-size: 1rem;
    line-height: 50px;
    padding: 0 1.5rem;
}

/* A blue arrow pointing right in front of each step's heading (Carsten, 2026-10-29). */
.ob-step-head i {
    color: var(--brand-primary);
    margin-right: .4rem;
}