/* ==========================================================================
   eclat-social-rail.css — v72

   The Instagram and TikTok rails as ONE row that scrolls, with arrows that are
   real buttons (focusable, labelled, disabled at the ends). Previously the same
   markup rendered two or three grid rows on desktop and a free-scrolling strip
   on phones, with no controls at all.

   Nothing here autoplays and nothing loads a player: the cards stay poster
   images linking to their page.
   ========================================================================== */

.eclat-srail { position: relative; }

.eclat-srail__track {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(190px, 1fr);
	grid-template-columns: none !important;
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	padding-bottom: 6px;
	scrollbar-width: thin;
}

.eclat-srail__track > * { scroll-snap-align: start; min-width: 0; }

.eclat-srail__track:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 4px; }

.eclat-srail__nav {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wd-line);
	border-radius: 999px;
	background: #fff;
	color: var(--wd-head);
	box-shadow: 0 6px 18px rgba(46, 46, 46, 0.12);
	cursor: pointer;
}

.eclat-srail__nav--prev { inset-inline-start: -14px; }
.eclat-srail__nav--next { inset-inline-end: -14px; }
.eclat-srail__nav:hover { background: var(--wd-accent); color: #fff; border-color: var(--wd-accent); }
.eclat-srail__nav:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 2px; }
.eclat-srail__nav[disabled] { opacity: 0.35; cursor: default; box-shadow: none; }
.eclat-srail__nav svg { transform: none; }
[dir="rtl"] .eclat-srail__nav svg { transform: scaleX(-1); }

/* a rail that fits entirely needs no controls */
.eclat-srail.is-static .eclat-srail__nav { display: none; }

/*
 * Tablets keep the arrows: there is room for them and a pointer is likely.
 * Phones do not — at 360px a 40px control on each edge covers a fifth of the card,
 * and swiping is the platform's own manual control, with the focusable track and
 * the arrow keys still there for anyone using a keyboard. Deliberate, and the
 * reason is here so the next person does not "fix" it.
 */
@media (max-width: 991px) {
	.eclat-srail__track { grid-auto-columns: minmax(46%, 1fr); }
}

@media (max-width: 767px) {
	.eclat-srail__track { grid-auto-columns: minmax(64%, 1fr); }
	.eclat-srail__nav { display: none; }
}

@media (min-width: 1200px) {
	.eclat-srail__track { grid-auto-columns: minmax(220px, 1fr); }
}

/* contact: the follow links, not a gallery */
.eclat-contact__social { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.eclat-contact__k { font-size: 13.5px; font-weight: 700; color: var(--wd-head); }
.eclat-contact__socialrow { display: inline-flex; gap: 8px; }
.eclat-contact__socialrow a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--wd-line);
	color: var(--wd-head);
	background: #fff;
}
.eclat-contact__socialrow a:hover { background: var(--wd-accent); border-color: var(--wd-accent); color: #fff; }
.eclat-contact__socialrow a:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 2px; }

/* ==========================================================================
   The "Content" navigation item as a real disclosure.

   The theme opens submenus on :hover only, so the item added in v72 to make the
   Instagram and TikTok archives reachable from the primary navigation could not
   be opened from a keyboard at all. `.is-open` is what the button sets; the
   hover rule still applies for mouse users, untouched.
   ========================================================================== */

.eclat-hd-menu__list li.eclat-social-item.is-open > .sub-menu,
.eclat-hd-menu li.eclat-social-item.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

button.eclat-social-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
	cursor: pointer;
}

button.eclat-social-nav__toggle:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 3px; }
button.eclat-social-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
button.eclat-social-nav__toggle svg { transition: transform 0.18s ease; }