/* About Us (About.aspx): revealed/hover state of the three profile thumbnails and the social icons.
   Same palette as Styles/card-grid.css (costumes/Droids): green #A7D019 accent on black, cyan #3FF titles.
   Everything is scoped to the hover/focus/active state on purpose: the initial faded look (container
   opacity 0.5, white 5px border, 300x200 thumbnails) comes from the page's own styles and is unchanged.
   (card-grid.css itself isn't linked here because its page-level body/menu rules would restyle this page.) */

.mainimagecontents .view-tenth {
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.mainimagecontents .view-tenth:focus { outline: none; }

/* revealed state: hover (mouse), tap/focus (touch + keyboard), active (click) */
.mainimagecontents .view-tenth:hover,
.mainimagecontents .view-tenth:focus-within,
.mainimagecontents .view-tenth:active {
	border-color: #A7D019;
	background-color: #000;
	background-image: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.mainimagecontents .view-tenth:hover .mask,
.mainimagecontents .view-tenth:focus-within .mask,
.mainimagecontents .view-tenth:active .mask {
	background-color: #000;
	opacity: 1;
}
.mainimagecontents .view-tenth:focus-within img { transform: scale(10); opacity: 0; }
.mainimagecontents .view-tenth:hover h2,
.mainimagecontents .view-tenth:focus-within h2,
.mainimagecontents .view-tenth:active h2 {
	color: #3FF;
	border-bottom-color: rgba(167, 208, 25, 0.6);
	transform: scale(1);
	opacity: 1;
}

/* social icons: current brand marks (Simple Icons, inline SVG) in white on round brand-colour tiles */
.social-row {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px; margin: 14px 10px 0; padding: 0;
}
.social-ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	color: #fff; text-decoration: none;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.social-ico svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.social-ico:hover, .social-ico:focus-visible {
	transform: translateY(-2px) scale(1.08);
	box-shadow: 0 0 0 3px #A7D019, 0 4px 10px rgba(0, 0, 0, 0.7);
	outline: none;
}
.social-ico:focus { outline: none; }
.si-facebook  { background: #0866FF; }
.si-x         { background: #000; box-shadow: 0 0 0 1px #555; }
.si-instagram { background: #FF0069; }
.si-youtube   { background: #FF0000; }
.si-youtube svg { width: 22px; height: 22px; }
.si-pinterest { background: #BD081C; }
.si-smugmug   { background: #6DB944; }

/* Touch fix: the first tap on a faded card only reveals it. While a card isn't revealed its social
   links are visibility:hidden (so they can't be tapped or clicked even though they sit under the finger).
   They switch on 0.3s after a pointer reveal (hover/tap), which is after the tap's own click has finished,
   and immediately for keyboard focus (Tab lands on the card first, then on its links).
   The links are inside the invisible mask in the faded state, so the faded look is unchanged. */
.mainimagecontents .view-tenth .mask a {
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, visibility 0s linear 0s;
}
.mainimagecontents .view-tenth:hover .mask a,
.mainimagecontents .view-tenth:focus-within .mask a {
	visibility: visible;
	pointer-events: auto;
	transition: transform 0.15s ease, box-shadow 0.15s ease, visibility 0s linear 0.3s;
}
.mainimagecontents .view-tenth:focus-visible .mask a,
.mainimagecontents .view-tenth .mask a:focus {
	visibility: visible;
	pointer-events: auto;
	transition: transform 0.15s ease, box-shadow 0.15s ease, visibility 0s linear 0s;
}