/* LPC — Joomla 6 additions on top of the J3 stylesheets (which stay as they were). */

/* Site tools, bottom left: accessibility above cookies, in the brand green. */
.lpc-tools { position: fixed; left: 20px; bottom: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 12px; }
.lpc-tools__btn {
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #fff; border-radius: 50%;
	color: #fff; background: #00A82A; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer; transition: background .15s, transform .15s;
}
.lpc-tools__btn:hover, .lpc-tools__btn[aria-expanded="true"] { background: #2b363c; transform: scale(1.06); }
.lpc-tools__btn:focus-visible { outline: 3px solid #00A82A; outline-offset: 3px; }
.has-consent-button .ck-icon { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 767.98px) { .lpc-tools { left: 12px; bottom: 12px; gap: 8px; } .lpc-tools__btn { width: 40px; height: 40px; } }
@media print { .lpc-tools { display: none; } }

/* Error page in the site chrome. */
.lpc-error .central { padding: 60px 20px 80px; text-align: center; }
.lpc-error h1 { color: #00A82A; }

/* Galleries (AllMedias albums 1-4, ex Widgetkit "gallery" widgets): masonry like Widgetkit's dynamic grid, 20px gutter,
   hover = picture zoom + dark overlay + magnifier. Column counts per widget as they were in Widgetkit. */
.blocks-allmedias-gallery .am-grid { display: block; column-gap: 20px; }
.blocks-allmedias-gallery .am-grid > li { break-inside: avoid; padding-bottom: 20px; }
.blocks-allmedias-gallery .am-item { margin: 0; border-radius: 0; }
.blocks-allmedias-gallery .am-item img { transition: transform .3s ease-out; }
.blocks-allmedias-gallery .am-item a::before {
	content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .15s linear;
	background: rgba(0, 0, 0, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / 50px no-repeat;
}
.blocks-allmedias-gallery .am-item:hover a::before, .blocks-allmedias-gallery .am-item a:focus-visible::before { opacity: 1; }
.blocks-allmedias-gallery .am-item:hover img { transform: scale(1.1); }
.blocks-allmedias-gallery .am-item::after, .blocks-allmedias-gallery .am-caption { display: none; }
/* Module galleries ("primary" panels): light box under the picture. */
.realisations .blocks-allmedias-gallery .am-item { padding-bottom: 20px; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 2px; }
.realisations .blocks-allmedias-gallery .am-item a { overflow: hidden; }
.blocks-allmedias-gallery .am-gallery--square .am-item img { aspect-ratio: auto; height: auto; object-fit: initial; }
/* Commercial album (Widgetkit "title" on): the title under the picture, as Widgetkit's panel title. */
.item-page[item="3"] .blocks-allmedias-gallery .am-caption { display: block; position: static; padding: 20px 0 0; color: #444; text-align: center; opacity: 1; }
.item-page[item="3"] .blocks-allmedias-gallery .am-caption-title { font: 300 18px/24px GrotaSans, sans-serif; letter-spacing: 0; white-space: normal; overflow: visible; }
.item-page[item="3"] .blocks-allmedias-gallery .am-caption-meta { display: none; }
.item-page[item="3"] .blocks-allmedias-gallery .am-item a { overflow: hidden; }
/* Columns per screen size (--lpc-cols, read by js/template.js; CSS columns without JS). */
.blocks-allmedias-gallery .am-grid { --lpc-cols: 1; columns: var(--lpc-cols); }
@media (min-width: 480px) { .realisations .am-grid, .item-page[item="2"] .am-grid { --lpc-cols: 2; } }
@media (min-width: 768px) { .realisations .am-grid, .item-page[item="2"] .am-grid { --lpc-cols: 3; } .item-page[item="3"] .am-grid { --lpc-cols: 2; } }
@media (min-width: 960px) { .item-page[item="2"] .am-grid { --lpc-cols: 4; } .item-page[item="3"] .am-grid { --lpc-cols: 3; } }
@media (min-width: 1220px) { .item-page[item="2"] .am-grid { --lpc-cols: 5; } }

/* Videos (ex AllVideos): 16:9 embeds. */
.lpc-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lpc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Contact form (Convert Forms 1, ex Form Maker 12) over the header picture: labels left, small light inputs right,
   outlined button — measured on the J3 page (rows 42px, label column 202px, inputs 160×24, textarea 160×102). */
.pluscontact .convertforms { --cf-gap: 0; width: 360px; max-width: 100%; margin: 0 0 18px; font: 16px/18px GrotaSans, sans-serif; }
.pluscontact .cf-fields { display: block; margin: 0; }
.pluscontact .cf-control-group { display: flex; align-items: flex-start; min-height: 42px; margin: 0; padding: 0; }
.pluscontact .cf-form-wrap { padding: 0; }
.pluscontact .cf-fields { padding: 15px 0 0; }
.pluscontact .cf-control-label { flex: 0 0 202px; padding: 2px 2px 0; text-align: left; }
.pluscontact .cf-label { margin: 0; color: #fff; font: 19.2px/17px GrotaSans, sans-serif; }
.pluscontact .cf-required-label { color: red; font-size: 16px; }
.pluscontact .cf-control-input { flex: 0 0 160px; padding-top: 9px; }
.pluscontact .cf-input { box-sizing: border-box; width: 160px; height: 24px; padding: 0 3px; border: 1px solid #b7b7b7; border-radius: 0;
	background: #f8f8f8; color: #999; font: italic 13px/18px GrotaSans, sans-serif; box-shadow: none; }
.pluscontact textarea.cf-input { height: 102px; }
.pluscontact .captcha-container { display: flex; align-items: center; gap: 8px; color: #fff; white-space: nowrap; }
.pluscontact [data-type="captcha"] .cf-input { width: 52px; }
.pluscontact .cf-control-group[data-type="submit"] { display: block; padding: 22px 0 38px 6px; text-align: left; }
.pluscontact .cf-control-group[data-type="submit"] .cf-control-input { padding: 0; }
.pluscontact .cf-btn { margin: 5px; padding: 5px 40px; border: 1px solid #fff; background: rgba(0, 0, 0, .3); color: #fff; font: 18px/35px GrotaSans, sans-serif; }
.pluscontact .cf-response { color: #fff; }
/* Tablets: the desktop rows (label column 202px), 204px inputs, centered in the full-width box. */
[device="pad"] .pluscontact .convertforms { width: 406px; margin: 0 auto 18px; }
[device="pad"] .pluscontact .cf-control-input { flex-basis: 204px; }
[device="pad"] .pluscontact .cf-input { width: 204px; }
[device="pad"] .pluscontact .cf-control-group[data-type="submit"] { padding-top: 32px; }
/* Phones: one centered 208px column, label above its input (rows 56px), as Form Maker on the J3 site. */
@media (max-width: 767.98px) {
	.pluscontact .convertforms { width: 204px; margin: 0 auto 18px; position: relative; left: 2px; }
	.pluscontact .cf-fields { padding-top: 0; }
	.pluscontact .cf-control-group { display: block; min-height: 0; padding-bottom: 7px; }
	.pluscontact .cf-control-label { padding: 2px 2px 6px; }
	.pluscontact .cf-control-input { padding: 0 0 0 2px; }
	.pluscontact .cf-input { width: 208px; max-width: none; }
	.pluscontact .cf-control-group[data-type="submit"] { padding: 18px 0 0 6px; }
}

/* ConsentKit in the brand colours (its hosted theme sets these on :root; html:root wins). Green darkened to #007A1F for
   AA contrast with white text (5.5:1; the brand #00A82A gives 3.2:1). The oui4all panel uses the same colours (plugin options). */
html:root { --ck-accent: #007A1F; --ck-bg: #ffffff; --ck-text: #2b363c; --ck-radius: 0; }