/* Boat detail page pieces every site group needs (loaded by <x-detail.scripts>), driven by shared/js/boat-detail.js.
They live here, not in each group's site.css, so the clamp height or the sticky offset is changed in one place. */

/* Description clamped to 6 lines by default. boat-detail.js measures the real rendered height and only reveals
#boatDescriptionToggle when the text overflows, then adds/removes .expanded on click. */
.boat-description-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.boat-description-clamped.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Kontakt card follows the scroll on desktop only (992px matches col-lg, where the sidebar sits beside the content).
Bootstrap stretches col-lg-4 to the full row height, so the card's containing block already spans the row and sticky
stops at the bottom of it, where the section below the row begins. */
@media (min-width: 992px) {
    .boat-contact-sticky {
        position: sticky;
        /* BY fixes its header to the top of the viewport, so the card has to stop below it;
        --sticky-header-offset is set in by/css/site.css and is 0px for the groups whose header scrolls away. */
        top: calc(var(--sticky-header-offset, 0px) + 1rem);
    }
}

/* Meta line, price and charter-price bits of the detail pages (the same in every group). */
.boat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--text-soft);
}

.boat-meta i {
    color: var(--brand-primary);
}

/* Baseline nudge for the small "ab"/"/ Woche" text next to the big charter price: a font hinting quirk between very
different sizes in one line leaves the small text off the price's baseline even with align-items: baseline. A manual
offset, tuned by eye (+3px was worse, -3px overshot), not derived. */
.boat-price-suffix {
    position: relative;
    top: -2px;
}

/* Season prices of a charter boat. Below md the browser puts as many boxes into a row as fit (owner, 2026-10-14):
auto-fill with the width a box needs at least, every box of the grid equally wide - a flex-wrap row would stretch a
lone last box across the whole row. From md on exactly 8 per row.
5.375em (86px at 16px text) is a box's own minimum, a date like "30.08.2026" in the 90% text plus padding and border;
4 boxes fit a 384px phone. */
.boat-season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.375em, 1fr));
    gap: .25rem;
}

@media (min-width: 768px) {
    .boat-season-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

.boat-season-box {
    font-size: 90%;
    padding: .25rem;
}

/* Discount row of a charter boat: tighter than Bootstrap's py-1. */
.boat-discount-row {
    padding: .125rem 0;
}

/* The "anzeigen" of a revealed phone number (<x-detail.provider-card>, <x-detail.contact-card>,
boat-detail.js): hidden, not removed from the DOM - an empty <button> collapses the
line a couple of px shorter than one holding text, which made every phone row jump
the moment it revealed. visibility:hidden keeps the button's box (and the row's
height) exactly as it was, just invisible and out of the hit-test. */
.boat-phone-reveal-hidden {
    visibility: hidden;
}

/* Seller logo of the Anbieter card (<x-detail.provider-card>), next to the label/name
column: the API delivers it in whatever size the seller uploaded, so it is capped
rather than shown at native size - to a 4:3 box (a tall/square upload showed
unreasonably tall next to the one-line name column). */
.boat-office-logo {
    max-width: 140px;
    max-height: 105px;
    width: auto;
    height: auto;
    object-fit: contain;
}