/* Print-expose (dealer one-pager / full-info sheet) - App\Library\Print,
   resources/views/layouts/print.blade.php + print/expose-{itemtype}.blade.php.
   Used both on-screen (window.print()) and by headless Chrome's
   --print-to-pdf (App\Library\Print\PrintPdfRenderer) - @media print rules
   below apply in BOTH cases, since Chrome's print-to-pdf runs the same
   print media/paginate pipeline a physical print would.

   The core page (header, title/price, hero, .print-facts, QR, .print-contact)
   deliberately mirrors the OLD BY site's print page (?print=1 of a detail
   page, css/print-detail-view.css there): same proportions, same plain
   (non-bold) label/value fact rows, same logo-left/URL+date-right header.
   .print-section below it is this project's own addition for the "full"
   variant (more photos, full specs, equipment, description). */

@page {
    size: A4;
    margin: 12mm;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 24px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 1.4;
    color: #000;
    background: #f4f4f4;
}

.print-page {
    max-width: 210mm;
    margin: 0 auto;
    background: #fff;
    padding: 10mm;
}

.print-toolbar {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    max-width: 210mm;
    margin: 0 auto 12px;
}

.print-toolbar button,
.print-toolbar a {
    font: inherit;
    font-size: 10pt;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #1a1a1a;
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
}

.print-toolbar button:hover,
.print-toolbar a:hover {
    background: #1a1a1a;
    color: #fff;
}

/* ---- "Als PDF herunterladen" click feedback (resources/views/layouts/
print.blade.php) - hidden by default, toggled via .is-visible by that
layout's own script. ---- */
.print-pdf-overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1em;
    text-align: center;
    z-index: 1000;
}

.print-pdf-overlay.is-visible {
    display: flex;
}

/* Either the wait or the failure notice (.is-failed), never both. */
.print-pdf-failed,
.print-pdf-overlay.is-failed .print-pdf-wait {
    display: none;
}

.print-pdf-overlay.is-failed .print-pdf-failed {
    display: block;
    max-width: 28em;
    padding: 0 16px;
}

.print-pdf-close {
    margin-top: 14px;
    padding: 6px 18px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.print-pdf-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border: 4px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: print-pdf-spin 0.8s linear infinite;
}

@keyframes print-pdf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- header: logo left, URL + print date right ---- */
.print-masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 5px;
}

.print-masthead img {
    max-width: 220px;
    max-height: 50px;
    object-fit: contain;
}

.print-masthead .print-masthead-text {
    font-weight: bold;
    font-size: 1.1em;
}

.print-masthead-meta {
    text-align: right;
    font-size: 0.85em;
    color: #333;
}

.print-hr {
    border: none;
    border-top: 1px solid #999;
    margin: 0 0 10px;
}

/* ---- title + price ---- */
.print-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

.print-title-row h1 {
    font-size: 1.7em;
    font-weight: bold;
    margin: 0;
}

.print-price {
    text-align: right;
    white-space: nowrap;
}

.print-price .amount {
    font-size: 1.5em;
    font-weight: bold;
}

.print-price .amount-old {
    text-decoration: line-through;
    color: #888;
    font-size: 0.85em;
}

.print-price .price-note {
    font-size: 0.8em;
    color: #888;
}

/* ---- hero photo ---- */
.print-hero {
    display: block;
    width: 100%;
    max-height: 115mm;
    object-fit: contain;
    margin-bottom: 20px;
    page-break-inside: avoid;
}

/* ---- key facts: two plain label/value columns, no bold, no borders, like the
   old site's page (unlike the .boat-attr-row rows of the full-only sections
   further down). A CSS grid (not a flex row per fact) so the values line up in
   one column however wide the longest label is - label and value are sibling
   grid items, emitted in pairs directly inside .print-facts-col. ---- */
.print-facts {
    display: flex;
    gap: 24px;
    margin-bottom: 10px;
    page-break-inside: avoid;
}

.print-facts .print-facts-col {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    row-gap: 1px;
    align-content: start;
}

.print-facts .label {
    white-space: nowrap;
}

/* ---- QR code: centered, no frame, like the old page's plain <img> ----
   The <svg> itself also carries an explicit width/height (App\Library\Print\
   QrCode::svg()), not just this rule: an SVG with neither has no intrinsic
   size and fills its container, which happened when the PDF export's headless
   Chrome rendered the page before this stylesheet had loaded. The stylesheet
   is inlined for the PDF path now (PrintPdfRenderer); the SVG attributes stay
   as a second, independent safety net. */
.print-qr {
    text-align: center;
    margin: 10px 0;
    page-break-inside: avoid;
}

.print-qr svg {
    width: 40mm;
    height: 40mm;
}

/* ---- provider/contact box: same two-column layout as .print-facts ---- */
.print-contact {
    display: flex;
    gap: 24px;
    page-break-inside: avoid;
}

.print-contact .print-facts-col > div {
    padding: 1px 0;
}

/* ---- full-variant-only sections below the core page ---- */
.print-section {
    margin-top: 16px;
    margin-bottom: 16px;
    page-break-inside: avoid;
}

.print-section h2 {
    font-size: 1.2em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    margin: 0 0 8px;
}

/* Classes emitted by <x-attribute-row> (resources/views/components/
attribute-row.blade.php) - reused here rather than a hand-rolled row markup
so the full-only sections below get its empty-value auto-hiding for free.
Only the print views use that component. */
.boat-attr-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border-bottom: 1px dotted #ddd;
    font-size: 0.95em;
}

.boat-attr-label {
    color: #555;
}

.boat-attr-value {
    font-weight: bold;
    text-align: right;
}

.print-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.print-photos img {
    width: 100%;
    height: 32mm;
    object-fit: cover;
    page-break-inside: avoid;
}

.print-description {
    font-size: 0.95em;
    white-space: pre-line;
}

@media print {
    body {
        padding: 0;
        background: #fff;
    }

    .print-page {
        padding: 0;
    }

    .no-print {
        display: none !important;
    }
}