/* Kracker Luftwaffe Archive — page-specific additions on top of
   /ARCSS/database-default-styles.css (or the large-text variant).
   Only ever linked from this page: the shared stylesheet used by the
   other ~20 database tables is untouched by this file. */

/* Image/caption layout inside table cells */
#searchresults td img { display: block; margin-bottom: 4px; }
#searchresults td br  { content: ''; display: block; margin: 0; line-height: 0; font-size: 0; }
#searchresults td em  { display: block; margin-bottom: 6px; }

/* Header/info/footer blocks stay aligned with the header image width.
   The results table itself keeps its existing on-screen behaviour
   (full window width, plus the shared stylesheet's table{width:110%})
   untouched here on purpose. */
.kracker-fixed-width {
    width: 1200px;
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.kracker-fixed-width div[style*="margin-left:-100px"],
.kracker-fixed-width div[style*="margin-left: -100px"],
.kracker-fixed-width div[style*="margin-left:-20px"],
.kracker-fixed-width div[style*="margin-left: -20px"] {
    margin-left: 0 !important;
}
.kracker-fixed-width div[style*="width:780px"],
.kracker-fixed-width div[style*="width: 780px"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Cap the Notes column instead of letting it grow unbounded (legacy of
   an earlier attempt to widen the whole page). The largest image placed
   in it is 300px, so 400px leaves room for a wrapped caption beside it.
   Screen only — the print block below sets its own width. */
#searchresults td.Notes {
    max-width: 400px;
    overflow-wrap: break-word;
}

/* ----------------------------------------------------------------
   Print
   #searchresults is the only table on this page, so this targets it
   directly. Requires format_header() in functions.php to emit
   class='$key' on each <th> (see accompanying functions.php patch) —
   table-layout:fixed sizes columns from the header row, not the data
   rows, so without that the widths below won't take effect.
   ---------------------------------------------------------------- */
@media print {
    @page { size: landscape; margin: 0.4in; }

    #searchresults {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    /* Give the three image-bearing columns the width their content
       actually needs, matching their on-screen size, instead of the
       old approach of dividing the page evenly across all 13 columns
       (which is what was clipping the photos). */
    #searchresults th.Photos, #searchresults td.Photos { width: 170px !important; }
    #searchresults th.Awards, #searchresults td.Awards { width: 95px  !important; }
    #searchresults th.Notes,  #searchresults td.Notes  { width: 400px !important; max-width: 400px !important; }

    /* Links and AuthorComments stay visible on screen (Links especially —
       used widely elsewhere in Kracker) but are hidden on a printout only,
       to free width for the Photo/Awards/Notes columns above. */
    #searchresults th.Links, #searchresults td.Links,
    #searchresults th.AuthorComments, #searchresults td.AuthorComments {
        display: none !important;
    }

    #searchresults td, #searchresults th {
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Safety net: if a column still ends up narrower than its image for
       any reason, shrink the image to fit rather than clip it. */
    #searchresults td.Photos img,
    #searchresults td.Awards img,
    #searchresults td.Notes img {
        max-width: 100% !important;
        height: auto !important;
    }
}