/**
 * Artist page blocks.
 *
 * Deliberately minimal. Typography, color and spacing for headings and body
 * copy come from the Elementor widget each shortcode sits inside, so this
 * file only handles the things a shortcode has to lay out for itself:
 * the story band, the work grid, and the contact buttons.
 */

/* ---------------------------------------------------------------------
 * Story panels
 * ------------------------------------------------------------------ */

.kcg-gw-artist__panels {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A row holding fewer panels than the grid is centered, never stranded
   against the left margin with a hole beside it. */
.kcg-gw-artist__panels--1 {
	grid-template-columns: minmax(0, 32%);
	justify-content: center;
}

.kcg-gw-artist__panels--2 {
	grid-template-columns: repeat(2, minmax(0, 32%));
	justify-content: center;
}

.kcg-gw-artist__panelhead {
	margin: 0 0 10px;
}

.kcg-gw-artist__panel p {
	margin: 0 0 14px;
}

.kcg-gw-artist__panel p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Work grid
 * ------------------------------------------------------------------ */

.kcg-gw-artist__works {
	display: grid;
	gap: 34px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	justify-content: center;
}

.kcg-gw-artist__works--cols2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kcg-gw-artist__works--cols4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Fewer pieces than columns: center the row so one lonely painting sits in
   the middle of the page rather than stranded off to one side. */
.kcg-gw-artist__works--short {
	grid-auto-flow: column;
	grid-template-columns: none;
}

.kcg-gw-artist__piece {
	margin: 0;
	max-width: 450px;
	width: 100%;
}

/**
 * 450 px on the longer side, whichever side that is.
 *
 * The cap applies to width and height alike, and the image is never given
 * both at once, so it scales on its own proportions and cannot be stretched
 * or squashed. A tall painting reaches 450 high, a wide one reaches 450
 * across, and neither is cropped to make a tidier grid.
 *
 * 450 is chosen against the 1375 px content width: three pieces in a row get
 * roughly 440 px each, so a single piece on its own lands at the same size a
 * piece in a full row will, and the section does not change character as
 * artists add work.
 */
.kcg-gw-artist__frame {
	display: flex;
	align-items: center;
	justify-content: center;
}

.kcg-gw-artist__frame img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 450px);
	max-height: 450px;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* Card and image titles are centered, so a row of them reads as uniform. */
.kcg-gw-artist__piecetitle {
	margin-top: 12px;
	text-align: center;
	font-family: "Roboto Slab", Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	color: #283971;
}

/* ---------------------------------------------------------------------
 * Contact buttons
 * ------------------------------------------------------------------ */

.kcg-gw-artist__links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: center;
}

.kcg-gw-artist__link {
	display: inline-block;
	padding: 13px 30px;
	border: 2px solid #283971;
	border-radius: 25px;
	background: #283971;
	color: #ffffff;
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kcg-gw-artist__link:hover,
.kcg-gw-artist__link:focus {
	background: #1c2a52;
	border-color: #1c2a52;
	color: #ffffff;
}

.kcg-gw-artist__link--mail {
	background: #d4b45a;
	border-color: #d4b45a;
	color: #283971;
}

.kcg-gw-artist__link--mail:hover,
.kcg-gw-artist__link--mail:focus {
	background: #c2a44b;
	border-color: #c2a44b;
	color: #283971;
}

.kcg-gw-artist__link--tel {
	background: transparent;
	color: #283971;
}

.kcg-gw-artist__link--tel:hover,
.kcg-gw-artist__link--tel:focus {
	background: #283971;
	color: #ffffff;
}

/* On a navy band the outlined variants would vanish, so they invert. */
.kcg-gw-artist__links--onDark .kcg-gw-artist__link,
.elementor-section[data-kcg-dark] .kcg-gw-artist__link {
	border-color: #ffffff;
}

.elementor-section[data-kcg-dark] .kcg-gw-artist__link--tel {
	color: #ffffff;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.kcg-gw-artist__works,
	.kcg-gw-artist__works--cols4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px;
	}

	.kcg-gw-artist__panels {
		gap: 26px;
	}
}

@media (max-width: 767px) {
	.kcg-gw-artist__panels,
	.kcg-gw-artist__panels--1,
	.kcg-gw-artist__panels--2,
	.kcg-gw-artist__works,
	.kcg-gw-artist__works--cols2,
	.kcg-gw-artist__works--cols4 {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
		gap: 28px;
	}

	.kcg-gw-artist__works--short {
		grid-auto-flow: row;
	}

	.kcg-gw-artist__frame img {
		max-height: 340px;
	}

	.kcg-gw-artist__links {
		flex-direction: column;
		align-items: stretch;
	}

	.kcg-gw-artist__link {
		text-align: center;
	}
}

/* ---------------------------------------------------------------------
 * The artist's own photograph
 *
 * The circular frame used to live on an Elementor image widget. Now that
 * the picture comes from the artist's record it has to be styled here, or
 * an uploaded portrait would land as a bare rectangle.
 * ------------------------------------------------------------------ */

.kcg-gw-artist__photo,
.elementor-shortcode img.kcg-gw-artist__photo,
.elementor-widget-shortcode img.kcg-gw-artist__photo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 340px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 4px solid #d4b45a;
	border-radius: 50%;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	background: #eef1f6;
}

@media (max-width: 767px) {
	.kcg-gw-artist__photo {
		max-width: 240px;
	}
}

/* ---------------------------------------------------------------------
 * Story panel typography
 *
 * These sit inside a shortcode widget rather than a text widget, so
 * Elementor's typography controls do not reach them. Matched by hand to the
 * approved artist page: Roboto Slab headings, Roboto body.
 * ------------------------------------------------------------------ */

.kcg-gw-artist__panelhead {
	font-family: "Roboto Slab", Georgia, serif;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.35;
	color: #283971;
	text-align: left;
}

.kcg-gw-artist__panel p {
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15.5px;
	line-height: 27px;
	color: #4a5568;
	text-align: left;
}

/* ---------------------------------------------------------------------
 * The framed portrait
 *
 * The artist chooses what shows inside the circle on the Artist Login
 * page, and that choice arrives here as three custom properties. Nothing
 * is cut from the file: the wrapper is the window, the picture sits
 * behind it, and --kcg-x / --kcg-y decide which part of it shows.
 *
 * The frame moves from the image to this wrapper so that the gold border
 * stays a true circle no matter how the picture behind it is positioned.
 * ------------------------------------------------------------------ */

.kcg-gw-artist__portrait {
	position: relative;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 4px solid #d4b45a;
	border-radius: 50%;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	background: #eef1f6;
}

.kcg-gw-artist__portrait img.kcg-gw-artist__photo,
.kcg-gw-artist__portrait .elementor-shortcode img.kcg-gw-artist__photo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	object-fit: cover;
	object-position: var(--kcg-x, 50%) var(--kcg-y, 50%);
	transform: scale(var(--kcg-zoom, 1));
	transform-origin: var(--kcg-x, 50%) var(--kcg-y, 50%);
}

@media (max-width: 767px) {
	.kcg-gw-artist__portrait {
		max-width: 240px;
	}
}