/**
 * IMS Resources Library Block Styles
 *
 * Two-column on desktop, single column on mobile. Reuses the same colour
 * vocabulary as the rest of the IMS theme (CTA yellow, dark text, light
 * gray borders) so the block fits next to the existing product-page
 * surfaces without restyling.
 *
 * @package IMS_by_Soul_Country
 */

.ims-resources {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ims-resources__heading {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-dark, #111111);
}

/* ==========================================================================
   Controls (search + pills)
   ========================================================================== */

.ims-resources__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.ims-resources__search {
	position: relative;
	flex: 1 1 280px;
	max-width: 480px;
}

.ims-resources__search-input {
	width: 100%;
	padding: 0.6rem 2.5rem 0.6rem 0.85rem;
	border: 1px solid var(--color-light-gray, #d1d5db);
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--color-dark, #111111);
	background: #ffffff;
}

.ims-resources__search-input:focus {
	outline: none;
	border-color: var(--color-cta, #FAB000);
	box-shadow: 0 0 0 3px rgba(250, 176, 0, 0.18);
}

.ims-resources__search-clear {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	font-size: 1.25rem;
	color: #6b7280;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}

.ims-resources__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ims-resources__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #ffffff;
	border: 1px solid var(--color-light-gray, #d1d5db);
	color: var(--color-dark, #111111);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ims-resources__pill:hover {
	border-color: var(--color-cta, #FAB000);
}

.ims-resources__pill.is-active {
	background: var(--color-cta, #FAB000);
	border-color: var(--color-cta, #FAB000);
	color: #111111;
}

.ims-resources__pill-count {
	background: rgba(0, 0, 0, 0.08);
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.ims-resources__pill.is-active .ims-resources__pill-count {
	background: rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   Groups
   ========================================================================== */

.ims-resources__group + .ims-resources__group {
	margin-top: 1.5rem;
}

.ims-resources__group-heading {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #4b5563;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ims-resources__group-count {
	background: #f3f4f6;
	color: #374151;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
}

/* ==========================================================================
   List
   ========================================================================== */

.ims-resources__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 0.75rem;
}

.ims-resources__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	background: #ffffff;
	border: 1px solid var(--color-light-gray, #e5e7eb);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ims-resources__item:hover {
	border-color: var(--color-cta, #FAB000);
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.18);
	transform: translateY(-1px);
}

/* Search + pill filtering toggle the `hidden` attribute on cards and
   groups. The base `.ims-resources__item` rule sets `display:flex`,
   which would otherwise beat the user-agent `[hidden]` rule and keep
   filtered results visible — so hide them explicitly. */
.ims-resources__item[hidden],
.ims-resources__group[hidden] {
	display: none !important;
}

.ims-resources__link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	text-decoration: none;
	color: inherit;
}

.ims-resources__icon {
	flex: 0 0 auto;
}

.ims-resources__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ims-resources__title {
	font-weight: 600;
	color: var(--color-dark, #111111);
	font-size: 0.95rem;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ims-resources__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.78rem;
	color: #6b7280;
}

.ims-resources__type,
.ims-resources__page,
.ims-resources__sku {
	background: #f3f4f6;
	border-radius: 999px;
	padding: 0.05rem 0.5rem;
}

.ims-resources__action {
	flex: 0 0 auto;
	color: #9ca3af;
	transition: color 0.15s ease, transform 0.15s ease;
}

.ims-resources__link:hover .ims-resources__action {
	color: var(--color-cta, #FAB000);
	transform: translateX(2px);
}

.ims-resources__source-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 1rem 0.65rem;
	font-size: 0.75rem;
	color: #6b7280;
	text-decoration: none;
	border-top: 1px dashed #e5e7eb;
	padding-top: 0.6rem;
}

.ims-resources__source-thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-light-gray, #e5e7eb);
	border-radius: 6px;
	background: #ffffff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ims-resources__source-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ims-resources__source-label {
	flex: 1 1 auto;
	min-width: 0;
}

.ims-resources__source-link:hover {
	color: var(--color-cta, #FAB000);
}

.ims-resources__source-link:hover .ims-resources__source-thumb {
	border-color: var(--color-cta, #FAB000);
}

/* ==========================================================================
   Empty / no-match states
   ========================================================================== */

.ims-resources__empty,
.ims-resources__no-matches {
	margin: 1rem 0;
	padding: 1.25rem;
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	color: #6b7280;
	text-align: center;
	font-size: 0.95rem;
}

/* Lazy-loaded results wrapper: mirrors the panel's column spacing so the
   document list keeps the same rhythm once it is injected. */
.ims-resources__results {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ims-resources__loading {
	margin: 1rem 0;
	padding: 1.25rem;
	color: #6b7280;
	text-align: center;
	font-size: 0.95rem;
}

/* ==========================================================================
   Collapsible (accordion)
   ========================================================================== */

.ims-resources__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 0.85rem 0;
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--color-light-gray, #e5e7eb);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: border-color 0.15s ease;
}

.ims-resources__toggle:hover {
	border-color: var(--color-cta, #FAB000);
}

.ims-resources__heading--toggle {
	margin: 0;
}

.ims-resources__toggle-chevron {
	flex: 0 0 auto;
	display: inline-flex;
	color: #6b7280;
	transition: transform 0.2s ease, color 0.15s ease;
}

.ims-resources__toggle:hover .ims-resources__toggle-chevron {
	color: var(--color-cta, #FAB000);
}

.ims-resources.is-open .ims-resources__toggle-chevron {
	transform: rotate(180deg);
}

.ims-resources__panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ims-resources__panel[hidden] {
	display: none !important;
}

/* ==========================================================================
   Carousel
   ========================================================================== */

.ims-resources__carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ims-resources__carousel .ims-resources__list--carousel {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	/* `proximity` (not `mandatory`): a mandatory snap container in
	   Chromium cancels programmatic smooth scrolls from the arrow
	   buttons, so they appear to do nothing while wheel scrolling still
	   works. Proximity keeps a gentle snap without fighting scrollTo(). */
	scroll-snap-type: x proximity;
	gap: var(--ims-rl-gap, 1rem);
	padding: 0.25rem 0.25rem 0.75rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.ims-resources__carousel .ims-resources__list--carousel > .ims-resources__item {
	flex: 0 0 calc(
		(100% - (var(--ims-rl-visible, 6) - 1) * var(--ims-rl-gap, 1rem)) / var(--ims-rl-visible, 6)
	);
	min-width: 240px;
	scroll-snap-align: start;
}

.ims-resources__nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-light-gray, #d1d5db);
	background: #ffffff;
	color: var(--color-dark, #111111);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.3);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ims-resources__nav:hover {
	border-color: var(--color-cta, #FAB000);
	color: var(--color-cta, #FAB000);
}

.ims-resources__nav[hidden] {
	display: none;
}

/* ==========================================================================
   Editor preview
   ========================================================================== */

.ims-resources-editor {
	position: relative;
	padding: 0.5rem;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	background: #fafafa;
}

/* The preview is server-rendered with live links, a search box, type
   pills and carousel arrows. Inside the editor those elements would
   capture clicks and make the block feel unselectable, so neutralise
   interaction on the preview — every setting lives in the block sidebar
   (Inspector) instead. A single click anywhere now selects the block. */
.ims-resources-editor .ims-resources {
	pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
	.ims-resources__list:not(.ims-resources__list--carousel) {
		grid-template-columns: 1fr;
	}

	.ims-resources__heading {
		font-size: 1.4rem;
	}

	.ims-resources__pill {
		font-size: 0.8rem;
		padding: 0.35rem 0.7rem;
	}

	/* On phones the arrows take up too much room; rely on touch swipe and
	   let each card fill most of the viewport so the next one peeks in. */
	.ims-resources__nav {
		display: none;
	}

	.ims-resources__carousel .ims-resources__list--carousel > .ims-resources__item {
		flex-basis: 80%;
		min-width: 80%;
	}
}