/* ==========================================================================
   Men's Groups cards — /ways-to-get-involved/kofc
   Module 149 (contentarray, category 79), outline 17, CSS row
   "Men's Groups Cards" (priority 0).
   Card = Intro Image + title only. What this file does:
     1. square corners — the module class suffix carries
        grid-g-grid-border-radius-1-point-5, which in particle.css puts 24px on
        BOTH the tile (.g-content-array > .g-grid) and the wrapper INSIDE it
        (.g-content-array > .g-grid > .g-block). The inner one has
        overflow:hidden, so leaving it alone keeps clipping the photo into
        rounded corners even when the tile itself is square.
     2. the whole tile is one link — the title link's ::after is stretched over
        the card, and the image anchor is taken out of the hit test
     3. breathing room below the title — it sat flush on the card's bottom edge
     4. hover feedback: lift + deeper shadow + slight image zoom + title
        underline; motion dropped under prefers-reduced-motion, the shadow
        change kept
   Scoped by the inline-module id, so no other grid on the site is touched.
   Two rules below carry !important because shared particle.css sets the same
   properties with !important:
     .grid-g-grid-box-shadow .g-content-array>.g-grid   { box-shadow: … !important }
     .grid-bg-img-flush-white .g-array-item-title       { padding: 0 1rem !important }
   ========================================================================== */

/* --- 1. square corners, on every box in the chain ----------------------- */
body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid,
body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid > .g-block,
body.site-1 #module-contentarray-149-particle .g-array-item,
body.site-1 #module-contentarray-149-particle .g-array-item-image,
body.site-1 #module-contentarray-149-particle .g-array-item-image img,
body.site-1 #module-contentarray-149-particle .g-array-item-title,
body.site-1 #module-contentarray-149-particle .g-item-title {
	border-radius: 0 !important;
}

body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid,
body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid > .g-block {
	overflow: hidden;
}

body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid {
	position: relative;
	transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}

/* --- 2. one link covering the whole tile -------------------------------- */
body.site-1 #module-contentarray-149-particle .g-array-item {
	position: relative;
}

/* the title link carries the card's accessible name; stretch its hit area */
body.site-1 #module-contentarray-149-particle .g-array-item-title .g-item-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* the image anchor points at the same article — let clicks fall through to
   the stretched title link instead of stacking a second target on top */
body.site-1 #module-contentarray-149-particle .g-array-item-image a {
	pointer-events: none;
}

body.site-1 #module-contentarray-149-particle .g-array-item-image img {
	transition: transform .3s ease-in-out;
}

/* --- 3. space under the title ------------------------------------------- */
body.site-1 #module-contentarray-149-particle .g-array-item-title {
	padding-bottom: 1.6rem !important;
}

/* --- 4. hover ----------------------------------------------------------- */
@media (hover: hover) {
	body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, .38) !important;
	}

	body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid:hover .g-array-item-image img {
		transform: scale(1.04);
	}

	body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid:hover .g-item-title a {
		text-decoration: underline;
	}
}

/* --- reduced motion: keep the colour/shadow cue, drop the movement ------ */
@media (prefers-reduced-motion: reduce) {
	body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid,
	body.site-1 #module-contentarray-149-particle .g-array-item-image img {
		transition: none !important;
	}

	body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid:hover {
		transform: none !important;
	}

	body.site-1 #module-contentarray-149-particle .g-content-array > .g-grid:hover .g-array-item-image img {
		transform: none !important;
	}
}