/**
 * Image Grid Inserter — style.css  v1.5.0
 *
 * Frontend stylesheet for .my-image-grid.
 */

/* =========================================================================
   Reset
   ========================================================================= */
.my-image-grid *,
.my-image-grid *::before,
.my-image-grid *::after {
	box-sizing: border-box;
}

/* =========================================================================
   Grid container
   ========================================================================= */
.my-image-grid {
	display:               grid;
	grid-template-columns: repeat( 2, 1fr );
	gap:                   12px;
	width:                 100%;
	max-width:             1200px;
	margin-inline:         auto;
	margin-block:          1.5em;
	padding:               0;
	list-style:            none;
	inline-size: 		   fit-content;
}
/* Prevent WordPress injected <p> tags from becoming empty grid cells */
.my-image-grid > p {
	display: none !important;
}
/* =========================================================================
   Images (fallback when cards are not rendered)
   ========================================================================= */
.my-image-grid > img {
	display:         block;
	width:           100%;
	height:          auto;
	object-fit:      cover;
	object-position: center center;
	border-radius:   6px;
	background:      white;
	border:          none;
	outline:         none;
	color:           transparent;
	box-shadow:      0 2px 8px rgba( 0, 0, 0, 0.12 );
	transition:      transform 0.2s ease, box-shadow 0.2s ease;
	max-width: 		 350px;
}

.my-image-grid > img:hover {
	transform:  translateY( -3px ) scale( 1.02 );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.18 );
}

/* =========================================================================
   Responsive — mobile first
   ========================================================================= */
@media ( max-width: 600px ) {
	.my-image-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Edge cases
   ========================================================================= */
.my-image-grid:has( > img:only-child ) {
	grid-template-columns: 1fr;
}

/* =========================================================================
   Accessibility
   ========================================================================= */
@media ( prefers-reduced-motion: reduce ) {
	.my-image-grid > img          { transition: none; }
	.my-image-grid > img:hover    { transform: none; }
}

/* =========================================================================
   Card layout  (.igp-card-wrap / .igp-card)
   ========================================================================= */
.igp-card-wrap {
	display: flex;
	flex-direction: column;
}

.igp-card {
	display:        flex;
	flex-direction: column;
	height:         100%;
	background:     #fff;
	border-radius:  8px;
	overflow:       hidden;
	box-shadow:     0 2px 8px rgba( 0, 0, 0, 0.12 );
	transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.igp-card:hover {
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.18 );
	transform:  translateY( -2px );
}

.igp-card .igp-card__figure {
	margin:      0 !important;
	padding:     0 !important;
	line-height: 0;
	flex-shrink: 0;
}

.igp-card .igp-card__figure a {
	display:     block;
	line-height: 0;
}

.igp-card .igp-card__img {
	display:         block;
	width:           100%;
	max-width:       350px;
	object-fit:      cover;
	object-position: center center;
	border-radius:   8px 8px 0 0;
	background:      #f0f0f0;
	border:          none;
	outline:         none;
	color:           transparent;
	box-shadow:      none;
	transition:      none;
}

.igp-card .igp-card__img:hover {
	transform:  none;
	box-shadow: none;
}

.igp-card__title {
	margin:      8px 12px 4px !important;
	padding:     0 !important;
	font-size:   0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color:       #1e1e1e;
	word-break:  break-word;
	text-align: center;
}

.igp-card__actions {
	padding:    6px 12px 12px;
	margin-top: auto;
}

.igp-card__actions-inner {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

.igp-card__pdf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 5px 12px;
	width: 100%;

	background: linear-gradient(90deg, #3b82f6, #06b6d4);
	border: 1px solid #3b82f6;
	border-radius: 4px;

	font-size: 0.8125rem;
	font-family: inherit;
	font-weight: 500;
	color: #fff;
	text-decoration: none;

	cursor: pointer;
	white-space: nowrap;

	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

/* Hover */
.igp-card__pdf-btn:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	color: #fff; /* keep text white on hover */
}

/* Focus (keyboard accessibility) */
.igp-card__pdf-btn:focus-visible {
	outline: 3px solid rgba(59, 130, 246, 0.5);
	outline-offset: 2px;
}

/* Active (click feedback) */
.igp-card__pdf-btn:active {
	transform: translateY(0px);
}

.igp-card__pdf-btn:focus-visible {
	outline:        2px solid #2271b1;
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.igp-card,
	.igp-card__pdf-btn { transition: none; }
	.igp-card:hover     { transform: none; }
}

/* =========================================================================
   Classic Editor (TinyMCE) canvas overrides
   ========================================================================= */

/* Grid container */
.mce-content-body .my-image-grid {
	grid-template-columns: repeat( 2, 1fr );
	margin-block:          0;
	inline-size:           auto;   /* let TinyMCE canvas control width */
	max-width:             100%;
}

/* Fallback bare <img> (before the_content rewrites to cards) */
.mce-content-body .my-image-grid > img {
	height:       auto;
	aspect-ratio: 4 / 3;
	max-width:    100%;
}

/* Card wrapper — fill its grid cell */
.mce-content-body .igp-card-wrap {
	display:        flex;
	flex-direction: column;
	min-width:      0;   /* prevents grid blow-out */
}

/* Card box */
.mce-content-body .igp-card {
	display:        flex;
	flex-direction: column;
	height:         100%;
	background:     #fff;
	border-radius:  8px;
	overflow:       hidden;
	box-shadow:     0 2px 8px rgba( 0, 0, 0, 0.12 );
}

/* Figure / link wrapper */
.mce-content-body .igp-card .igp-card__figure {
	margin:      0 !important;
	padding:     0 !important;
	line-height: 0;
	flex-shrink: 0;
}

.mce-content-body .igp-card .igp-card__figure a {
	display:     block;
	line-height: 0;
}

/* Card image — uniform aspect ratio */
.mce-content-body .igp-card .igp-card__img {
	display:         block;
	width:           100%;
	max-width:       100%;
	aspect-ratio:    4 / 3;
	height:          auto;
	object-fit:      cover;
	object-position: center center;
	border-radius:   8px 8px 0 0;
	background:      #f0f0f0;
	border:          none;
	box-shadow:      none;
}

/* Title */
.mce-content-body .igp-card__title {
	margin:      8px 12px 4px !important;
	padding:     0 !important;
	font-size:   0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color:       #1e1e1e;
	word-break:  break-word;
}

/* Action row */
.mce-content-body .igp-card__actions {
	padding:    6px 12px 12px;
	margin-top: auto;
}

.mce-content-body .igp-card__actions-inner {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

/* PDF download button */
.mce-content-body .igp-card__pdf-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	padding:         5px 12px;
	background:      #f6f7f7;
	border:          1px solid #c3c4c7;
	border-radius:   4px;
	font-size:       0.8125rem;
	font-weight:     500;
	color:           #2c3338;
	text-decoration: none;
	cursor:          pointer;
	white-space:     nowrap;
}

/* Single-image: collapse to 1 column (fallback, :has not always available in older browsers) */
@supports selector( :has( > * ) ) {
	.mce-content-body .my-image-grid:has( > .igp-card-wrap:only-child ) {
		grid-template-columns: 1fr;
	}
}