/* Ogallery Artist - front-end styles
   Deliberately theme-agnostic: no dependency on the active theme's classes. */

/* ---------- Artist Gallery: Grid ---------- */
.oga-grid {
	--oga-grid-cols: 3;
	--oga-grid-gap: 16px;
	display: grid;
	grid-template-columns: repeat(var(--oga-grid-cols), 1fr);
	gap: var(--oga-grid-gap);
}

.oga-grid-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: auto;
}

.oga-grid-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--oga-resize, cover);
	transition: opacity .25s ease, transform .25s ease;
}

.oga-lightbox-trigger {
	cursor: pointer;
	display: block;
}

@media (max-width: 1024px) {
	.oga-grid { --oga-grid-cols: 2; }
}
@media (max-width: 600px) {
	.oga-grid { --oga-grid-cols: 1; }
}

/* ---------- Artist Gallery: Carousel ---------- */
.oga-carousel {
	position: relative;
}

.oga-carousel-frame {
	position: relative;
	display: flex;
	align-items: center;
}

.oga-carousel-viewport {
	overflow: hidden;
	width: 100%;
	position: relative;
	flex: 1 1 auto;
}

.oga-carousel-track {
	--oga-carousel-gap: 16px;
	display: flex;
	will-change: transform;
}

.oga-carousel-slide {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding-right: var(--oga-carousel-gap);
}

.oga-carousel-slide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: var(--oga-resize, cover);
}

.oga-carousel-arrow {
	background: rgba(255, 255, 255, .85);
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	z-index: 2;
	flex: 0 0 auto;
}

.oga-carousel-arrow img,
.oga-carousel-arrow svg {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

/* Arrows "inside": overlay on top of the image, positioned absolute inside the frame. */
.oga-arrows-inside .oga-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.oga-arrows-inside .oga-carousel-prev { left: 8px; }
.oga-arrows-inside .oga-carousel-next { right: 8px; }

/* Arrows "outside": sit to the left/right of the image as flex siblings. */
.oga-arrows-outside .oga-carousel-frame {
	gap: 12px;
}

/* ---------- Dots ---------- */
.oga-carousel-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.oga-dots-outside .oga-carousel-dots {
	margin-top: 12px;
}

.oga-dots-inside .oga-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 3;
}

.oga-carousel-dot {
	width: 10px;
	height: 10px;
	background: #ccc;
	border: none;
	padding: 0;
	cursor: pointer;
}

.oga-dot-shape-circle .oga-carousel-dot { border-radius: 50%; }
.oga-dot-shape-bar .oga-carousel-dot { border-radius: 3px; }
.oga-dot-shape-line .oga-carousel-dot { height: 3px; border-radius: 0; }

.oga-dot-shape-image .oga-carousel-dot {
	background: none;
	width: auto;
	height: auto;
}

.oga-carousel-dot img {
	display: block;
	object-fit: contain;
	border-radius: 0;
	background: none;
}

.oga-carousel-dot .oga-dot-img-active {
	display: none;
}

.oga-carousel-dot.is-active .oga-dot-img-default,
.oga-carousel-dot:hover .oga-dot-img-default {
	display: none;
}

.oga-carousel-dot.is-active .oga-dot-img-active,
.oga-carousel-dot:hover .oga-dot-img-active {
	display: block;
}

.oga-dot-shape-circle .oga-carousel-dot.is-active,
.oga-dot-shape-bar .oga-carousel-dot.is-active,
.oga-dot-shape-line .oga-carousel-dot.is-active {
	background: #333;
}

/* ---------- Artist List ----------
   The whole list flows as one native multi-column block. Each letter group
   carries break-inside:avoid so a group is always kept whole and pushed to
   the next column rather than split; column-fill:balance lets the browser
   distribute groups so column heights stay as close to each other as the
   content allows (an exact match isn't possible with unevenly sized
   groups, but this is the same technique browsers use for balanced
   newspaper-style columns generally). */
.oga-artist-list {
	position: relative;
}

.oga-alpha-columns {
	--oga-columns: 3;
	--oga-column-gap: 24px;
	column-count: var(--oga-columns);
	column-gap: var(--oga-column-gap);
	column-fill: balance;
}

@media (max-width: 1024px) {
	.oga-alpha-columns { column-count: var(--oga-columns-tablet, 2); }
}
@media (max-width: 600px) {
	.oga-alpha-columns { column-count: var(--oga-columns-mobile, 1); }
}

.oga-letter-group {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	/* Forcing block content to report a size to the column-break engine is
	   a long-standing WebKit/Safari quirk workaround for break-inside:avoid. */
	display: inline-block;
	width: 100%;
	margin-bottom: 32px;
	vertical-align: top;
}

/* Alternating column distribution (Column Distribution = Alternating).
   Explicit column containers instead of CSS multi-column flow; nothing here
   matches Sequential markup (.oga-alpha-columns). One .oga-alpha-alt set is
   rendered per distinct column count and shown per device, using the same
   breakpoints as Elementor (tablet <= 1024px, mobile <= 767px). */
.oga-alpha-alt {
	display: none;
	grid-template-columns: repeat(var(--oga-alt-cols, 2), minmax(0, 1fr));
	column-gap: var(--oga-column-gap, 24px);
	align-items: start;
}

.oga-alpha-alt.oga-show-d {
	display: grid;
}

.oga-alpha-col {
	min-width: 0;
}

.oga-alpha-col .oga-letter-group {
	display: block;
}

@media (max-width: 1024px) {
	.oga-alpha-alt.oga-show-d { display: none; }
	.oga-alpha-alt.oga-show-t { display: grid; }
}

@media (max-width: 767px) {
	.oga-alpha-alt.oga-show-t { display: none; }
	.oga-alpha-alt.oga-show-m { display: grid; }
}

.oga-letter-heading {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 600;
}

.oga-artist-names {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oga-artist-item {
	margin: 0 0 8px;
}

.oga-artist-link {
	text-decoration: none;
	display: inline-block;
}

.oga-no-results {
	opacity: .7;
}

/* ---------- Hover image ---------- */
.oga-hover-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 320px;
	pointer-events: none;
	opacity: 0;
	z-index: 9999;
	transition: opacity .2s ease;
}

.oga-hover-image.is-visible {
	opacity: 1;
}

.oga-hover-image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Left/Right modes: fixed to the VIEWPORT, not the document. This was
 * previously `position: absolute`, which anchors to the nearest
 * positioned ancestor - so once the page was scrolled, the hover image
 * stayed pinned near the top of the (long, scrollable) artist list
 * container/document instead of the visible viewport, leaving it far
 * above the fold whenever an artist further down the list was hovered.
 * `position: fixed` keeps this correctly anchored to the viewport at any
 * scroll position - which artist's image is shown is entirely unaffected
 * (the JS above only ever swaps `img[src]` and toggles `.is-visible`; it
 * never repositions this element in Left/Right mode, by design).
 */
.oga-artist-list[data-hover-position="fixed-right"] .oga-hover-image {
	position: fixed;
	top: var(--oga-hover-top-offset, 0px);
	right: var(--oga-hover-right-offset, 0px);
	left: auto;
}

.oga-artist-list[data-hover-position="fixed-left"] .oga-hover-image {
	position: fixed;
	top: var(--oga-hover-top-offset, 0px);
	left: var(--oga-hover-left-offset, 0px);
}

/* Hover image is a desktop (mouse) feature: touch devices have no real hover
   and emulate one on tap, which would flash the image before navigating.
   Capability-based rather than width-based, so a narrow desktop window keeps it. */
@media (hover: none), (pointer: coarse) {
	.oga-artist-list .oga-hover-image {
		display: none;
	}
}

/* ---------- Collapsible Artist List ----------
   The toggle is a real <button>; every box/colour property a theme or
   Elementor kit might restyle is reset (with higher specificity than a bare
   `button` rule) so it renders as plain title + icon. Title/icon colours,
   typography and spacing come from the widget's Style controls. */
.oga-collapsible .oga-collapse-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
}

.oga-collapsible .oga-collapse-toggle:hover,
.oga-collapsible .oga-collapse-toggle:focus,
.oga-collapsible .oga-collapse-toggle:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
}

.oga-collapsible .oga-collapse-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.oga-collapse-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.oga-collapse-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Closed list shows the "closed" icon, open list the "open" icon. */
.oga-collapse-toggle[aria-expanded="false"] .oga-collapse-icon-open,
.oga-collapse-toggle[aria-expanded="true"] .oga-collapse-icon-closed {
	display: none;
}

.oga-collapse-panel {
	padding-top: 12px;
}

.oga-collapse-panel[hidden] {
	display: none;
}

/* ---------- Search box ---------- */
.oga-search-wrap {
	margin-bottom: 24px;
}

.oga-artist-search {
	width: 100%;
	max-width: 320px;
	padding: 8px 12px;
	box-sizing: border-box;
	border: 1px solid #ddd;
}

/* ---------- Lightbox ---------- */
.oga-lightbox-overlay {
	position: fixed;
	inset: 0;
	/* Configurable under Artists > Settings > Lightbox (inline CSS sets the variable);
	   the fallback is the original colour. */
	background: var(--oga-lb-overlay, rgba(0, 0, 0, .9));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 24px;
	box-sizing: border-box;
}

.oga-lightbox-overlay img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.oga-lightbox-overlay .oga-lightbox-close {
	/* Every positioning/box property is set explicitly, with a selector
	   more specific than a theme's or Elementor kit's generic `button`
	   rules, so those cannot move, resize or restyle it. The overlay is
	   position:fixed, so this is positioned against the viewport. */
	position: absolute;
	top: calc(16px + env(safe-area-inset-top, 0px));
	right: calc(24px + env(safe-area-inset-right, 0px));
	bottom: auto;
	left: auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	transform: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.oga-lightbox-overlay .oga-lightbox-close:hover,
.oga-lightbox-overlay .oga-lightbox-close:focus {
	background: none;
	color: #fff;
	opacity: .8;
}

.oga-lightbox-overlay .oga-lightbox-close:focus-visible,
.oga-lightbox-overlay .oga-lightbox-nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Previous / next. Size, colours and position come from the plugin settings
   (inline CSS); these are the structural defaults and a safe fallback. */
.oga-lightbox-overlay .oga-lightbox-nav {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: #fff;
	background: rgba(0, 0, 0, .4);
	line-height: 1;
	cursor: pointer;
}

.oga-lightbox-overlay .oga-lightbox-nav-prev { left: 16px; }
.oga-lightbox-overlay .oga-lightbox-nav-next { right: 16px; }

.oga-lightbox-overlay .oga-lightbox-nav svg {
	display: block;
	width: 60%;
	height: 60%;
	pointer-events: none;
}

.oga-lightbox-overlay .oga-lightbox-nav:disabled {
	opacity: .3;
	cursor: default;
}

/* Let a horizontal swipe change the image without the browser also panning. */
.oga-lightbox-overlay img {
	touch-action: pan-y pinch-zoom;
}

/* Image + caption. The figure fills the overlay's height so a tall image
   shrinks (contain) to leave room for the caption instead of pushing it off
   screen; with no caption it lays out exactly like the bare image did. */
.oga-lightbox-overlay .oga-lightbox-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.oga-lightbox-overlay .oga-lightbox-figure img {
	flex: 0 1 auto;
	min-height: 0;
	object-fit: contain;
}

.oga-lightbox-overlay .oga-lightbox-caption {
	flex: 0 0 auto;
	box-sizing: border-box;
	max-width: 100%;
	max-height: 30%;
	margin: 12px 0 0;
	padding: 0 8px;
	overflow-y: auto;
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
}

.oga-lightbox-overlay .oga-lightbox-caption[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.oga-lightbox-overlay .oga-lightbox-caption {
		font-size: 14px;
		margin-top: 8px;
	}
}

.oga-editor-hint {
	padding: 16px;
	background: #f5f5f5;
	border: 1px dashed #ccc;
	font-style: italic;
}

/* ---------- Default (non-Elementor) single Artist layout ----------
   Only used when no Elementor template is chosen, or Elementor is
   inactive - see OGA_Frontend::render_default_single(). Kept deliberately
   simple: readable, responsive, no dependency on theme classes. */
.oga-default-artist {
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 16px;
}

.oga-default-featured img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 24px;
}

.oga-default-name {
	font-size: 32px;
	margin: 0 0 16px;
}

.oga-default-bio {
	line-height: 1.7;
	margin-bottom: 16px;
}

.oga-default-cv,
.oga-default-portfolio {
	margin-bottom: 32px;
}

/* CV and Portfolio links stacked: keep them close together (margins collapse: 32 + -16). */
.oga-default-cv + .oga-default-portfolio {
	margin-top: -16px;
}

.oga-default-artist h2 {
	margin: 40px 0 16px;
	font-size: 22px;
}

.oga-default-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

@media (max-width: 700px) {
	.oga-default-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}