/**
 * print-event.css
 * ==========================================================
 * Styles specifically tailored for printing a single event page (`single-dig_event.php`).
 *
 * Purpose:
 * - Optimize content for readability on paper.
 * - Remove non-essential interactive elements (menus, buttons, sidebars, footer, etc.).
 * - Ensure important information (title, date, time, location, description, gallery) is presented clearly.
 * - Control page layout, margins, and potential page breaks.
 * - Format the event gallery into a responsive 3-column layout using Flexbox (v2) for print compatibility.
 *
 * Usage:
 * This stylesheet should be registered and enqueued conditionally ONLY when viewing
 * a single 'dig_event' post type, specifically for the 'print' media type.
 *
 * @package   Digentus\Events\Print\CSS
 * @author    Pedro Rodriguez <pedro@example.com> // Replace with actual email
 * @copyright Copyright (c) 2024-2025 // Update year if needed
 * @license   GPL-2.0-or-later
 * @link      https://example.com // Replace with actual plugin URI
 * @since     5.0.z | Gallery layout updated to Flexbox (v2) 5.2.x
 */

/* ==========================================================================
   1. Page Setup & Margins (@page rule)
   ========================================================================== */
@page {
    margin: 1.5cm;
    @bottom-center {
        content: "Page " counter(page);
        font-size: 9pt; color: #555; text-align: center;
        vertical-align: top; padding-top: 0.5cm;
    }
}

/* ==========================================================================
   2. Media Print Block - Contains all print-specific overrides
   ========================================================================== */

@media print {

	/* --- 2.1 Global Resets & Base Styles for Print --- */
	body {
		margin: 0 !important; padding: 0 !important; background: #fff !important;
		color: #000 !important; font-size: 11pt; line-height: 1.4;
		orphans: 3; widows: 3;
	}

	/* --- 2.2 Reset Main Theme/Content Containers --- */
	body, #page, #content, #primary, .site-content, #main, .site-main, .dig-event-single-main, article.dig-event-single-view {
		margin: 0 !important; padding: 0 !important; width: 100% !important;
		max-width: 100% !important; border: none !important; box-shadow: none !important;
		background: none !important; float: none !important; box-sizing: border-box !important;
	}
	.entry-content { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }

	/* --- 2.3 Hide Unwanted Elements --- */
	#secondary, .sidebar, header.site-header, footer.site-footer, nav, .nav-links, .comment-respond, .comments-area, .dig-event-back-button-wrapper, .dig-event-item-actions, #wpadminbar, button, input[type="button"], input[type="submit"], input[type="reset"], iframe, script, style, .screen-reader-text {
		display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important;
		overflow: hidden !important; position: absolute !important; left: -9999px;
	}

	/* --- 2.4 Header Area Styling --- */
	.dig-event-single-view .entry-header { position: relative; padding: 0 0 0.5em 0; margin: 0 0 1.5em 0; border-bottom: 1px solid #ccc; page-break-after: avoid; width: 100%; box-sizing: border-box; }
	/* --- 2.5 QR Code Styling --- */
	.dig-event-qr-wrapper { position: absolute; top: 0; right: 0; width: 65px; height: auto; z-index: 10; page-break-inside: avoid; }
	.dig-event-qr-wrapper img { display: block; width: 100%; height: auto; border: 1px solid #eee; }
	/* --- 2.6 Title Styling --- */
	.dig-event-single-view .entry-title { font-size: 18pt; font-weight: bold; margin: 0 80px 0.4em 0; padding: 0; display: block; page-break-after: avoid; color: #000; width: auto; }
	/* --- 2.7 Metadata Styling --- */
	.entry-meta.dig-single-event-meta { font-size: 10pt; color: #333; border-bottom: none !important; padding: 0; margin: 0.5em 80px 0 0; display: block; line-height: 1.6; width: auto; }
	.entry-meta.dig-single-event-meta span { display: inline-block; margin-right: 1.5em; margin-bottom: 0.3em; white-space: normal; }
	.entry-meta.dig-single-event-meta .dashicons { vertical-align: middle; margin-right: 0.2em; font-size: 1.2em; }
	/* --- 2.8 Featured Image (Thumbnail) Styling --- */
	.dig-event-thumbnail { max-width: 45% !important; height: auto !important; float: right; margin: 0.5em 0 1em 1.5em !important; border: 1px solid #eee; display: block; page-break-inside: avoid; }
	/* --- 2.9 General Text & Link Styling --- */
	p, li { margin-bottom: 1em; line-height: 1.4; }
	h1, h2, h3, h4, h5, h6 { page-break-after: avoid; color: #000; margin-top: 1.5em; margin-bottom: 0.6em; font-weight: bold; }
	a { color: #000 !important; text-decoration: none !important; }
	a[href]::after { content: "" !important; display: none !important; }

	/* --- 2.10 Event Gallery Styling for Print (Using Flexbox - v2 Attempt) --- */
	.dig-event-single-gallery {
		page-break-before: auto;
		margin-top: 2em;
		clear: both;
        width: 100%;
        box-sizing: border-box;
	}
	.dig-event-single-gallery h3 {
		font-size: 14pt;
		border-bottom: 1px solid #ccc;
		padding-bottom: 0.3em;
		margin-bottom: 1em;
		page-break-after: avoid;
	}

	/* --- Flexbox Layout for the Gallery List --- */
	ul.dig-gallery-image-list {
		display: flex;                 /* Use Flexbox */
		flex-wrap: wrap;               /* Allow items to wrap */
		justify-content: flex-start;   /* Align items to the left */
		align-items: flex-start;       /* Align items to the top */
		margin: 0 -5px;                /* Negative margin to counteract padding on items */
		padding: 0;
		list-style: none;
        width: 100%;
	}

	/* Gallery List Items */
	ul.dig-gallery-image-list li {
    	flex: 0 0 calc(33.333% - 10px); /* Resta el padding horizontal total */
    	padding: 0 5px 10px 5px;
    	margin: 0;
    	page-break-inside: avoid;
    	break-inside: avoid;
    	-webkit-column-break-inside: avoid;
    	box-sizing: border-box;
    	overflow: hidden;
    }
	/* --- END FLEXBOX v2 --- */

	/* Gallery Image Styling */
	ul.dig-gallery-image-list img {
        display: block;
        width: 100%;         /* Image fills the LI container */
        max-width: 100%;     /* Ensure image doesn't exceed container */
		height: 200px;        /* Maintain aspect ratio */
		/*border: 1px solid #ccc;*/
		box-shadow: none;
		object-fit: cover;
	}
	/* Gallery Link Styling */
	ul.dig-gallery-image-list a {
		display: block; /* Make link wrap the image */
	}
	/* Hide Printed URLs for Gallery Links */
	ul.dig-gallery-image-list li a::after {
		content: "" !important;
		display: none !important;
	}

	/* --- 2.11 Meta Handling for Print (if using screen-only/print-only spans) --- */
	.entry-meta.dig-single-event-meta .screen-only { display: none !important; visibility: hidden; }
	.entry-meta.dig-single-event-meta .print-only { display: inline !important; visibility: visible !important; text-decoration: none !important; color: inherit !important; border-bottom: none !important; }

} /* End @media print */