<style>
	.book-showcase {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 30px 0 10px 0;
		padding: 10px 30px 30px 30px ;
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		width: 100%;
		box-sizing: border-box;
		text-align: left;
	}
	
	.book-showcase h2 {
		text-align: left; 
		align-self: flex-start; 
		width: 100%; 
		margin-bottom: 1.5rem;
	}
	
	.book-showcase p {
		margin-block-start: 0;
		margin-block-end: 0;
		margin-bottom: 0.75em;
	}
	
	.book-showcase p:last-child {
		margin-bottom: 0;
	}
					
	.h-sub { 
		font-style: italic;
		font-weight: 400;
		font-size: 0.8em;
		color: #1e8e7a;
		margin-left: 0.4ch;
		white-space: nowrap;
	}

	/* Wrapper */
	.nav-tabs-container {
		overflow: visible;
		border: none;
		border-radius: 0;
		background: transparent;
	}


	/* Section label before tab list */
	.tab-order-label em {
		font-style: italic;
		color: #2c5282;
	}

	/* Tabs container */
	.nav-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		justify-content: center;
		background: transparent;
	}

/* Tab button layout */
	.tab-button {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 0.5rem;

		background-color: #fff;
		color: #1e8e7a;
		border: 2px solid #1e8e7a;
		border-radius: 5px;
		font-size: 0.9rem;
		line-height: 1.2;
		padding: 4px 10px;

		width: 100%;
		max-width: 690px;
		min-width: 360px;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		cursor: pointer;
		transition: background 0.3s, color 0.3s;
		box-sizing: border-box;
	}

	.tab-left {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		flex-shrink: 0;
	}

	.tab-title {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tab-type,
	.tab-date {
		font-size: 0.8em;
		color: #1e8e7a;
		opacity: 0.8;
		flex-shrink: 0;
		min-width: 70px;
	}

	.tab-type {
		text-align: left;
	}
	.tab-date {
		text-align: right;
	}

	.tab-button:hover,
	.tab-button.active {
		background-color: #1e8e7a;
		color: #fff;
	}
	
	.tab-button.active {
	  box-shadow: 0 0 0 3px #1e8e7a55;
	  transform: translateY(-1px);
	}	

	.tab-button:hover .tab-type,
	.tab-button.active .tab-type,
	.tab-button:hover .tab-date,
	.tab-button.active .tab-date {
		color: #fff;
	}

	.tab-button svg {
		width: 1.1em;
		height: 1.1em;
		flex-shrink: 0;
		pointer-events: none;
	}

	.tab-button .icon-linkedin {
		width: 0.85em;
		height: 0.85em;
		background: #ffffff;
		padding: 2px 4px;
		border-radius: 3px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		box-sizing: content-box;
	}
	
	/* === Unified Top Toolbar === */
	.tabs-topbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 690px;
		min-width: 360px;
		width: 100%;
		margin: 0 auto;
		border-radius: 4px; 
		background-color: #bff2e5;
		border-bottom: 1px solid #a7dacc;
		padding: 0.4rem 0.75rem;
		gap: 0.5rem;
		box-sizing: border-box;
	}

	.filter1,
	.filter2 {
		flex-shrink: 0;
	}

	.filter1 select,
	.filter2 select {
		font-size: 0.9rem;
		color: #066a5b;
		border: 1px solid #a7dacc;
		border-radius: 4px;
		padding: 0.35rem 0.5rem; 
		background-color: #fff;
		line-height: 1.2;
		height: 2rem;
		box-sizing: border-box;
	}

	.center-tools {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		gap: 1rem; 
	}

	.sort-label {
		font-weight: 600;
		color: #066a5b;
		font-size: 0.9rem;
		cursor: pointer;
		user-select: none;
		white-space: nowrap;

		background-color: #fff;
		border: 1px solid #a7dacc;
		border-radius: 4px;
		padding: 0.35rem 0.5rem; 
		line-height: 1.2;
		height: 2rem; 
		box-sizing: border-box;

		transition: background-color 0.2s ease, color 0.2s ease;
		text-decoration: none;
	}

	.sort-label:hover,
	.sort-label:focus,
	.sort-label:active {
		text-decoration: none;
		background-color: #e8f8f5;
		outline: none;
	}

	.sort-label:focus-visible {
		box-shadow: 0 0 0 2px #1e8e7a55;
	}

	.tab-arrows {
	  display: flex;
	  align-items: center;
	  gap: 5px;
	}

	.scroll-btn {
	  background: #158b85;
	  color: white;
	  border: none;
	  border-radius: 6px;
	  width: 40px;
	  height: 40px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  cursor: pointer;
	  transition: background 0.2s, opacity 0.2s;
	}

	.scroll-btn:hover:not(:disabled) {
	  background: #10716d;
	}

	.scroll-btn:disabled {
	  opacity: 0.35;
	  cursor: default;
	}

	.scroll-btn .icon {
	  width: 24px;
	  height: 24px;
	  display: block;
	}

	.tabs-statusbar {
	  font-size: 0.8em;
	  color: rgba(0, 0, 0, 0.6);
	  text-align: center;
	  margin: 0.2rem auto 0.4rem auto;
	  padding: 0;
	}

	/* Brand icon colors */
	.icon-youtube path:first-child {
		fill: #ff0000 !important; 
	}
	.icon-youtube path:last-child {
		fill: #ffffff !important; 
	}

	.tab-button:hover .icon-youtube path:first-child,
	.tab-button.active .icon-youtube path:first-child {
		fill: #cc0000 !important;
	}
	.tab-button:hover .icon-youtube path:last-child,
	.tab-button.active .icon-youtube path:last-child {
		fill: #ffffff !important;
	}

	.icon-linkedin path {
		fill: #0a66c2 !important; 
	}

	.tab-button:hover .icon-linkedin path,
	.tab-button.active .icon-linkedin path {
		fill: #0a66c2 !important;
	}
	
	.tab-button .icon-sc {
		width: 0.85em;
		height: 0.85em;
		background: #ffffff;
		padding: 0px 2.5px 1px 2px; 
		border-radius: 3px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: top;
		box-sizing: content-box;
		transform: scale(1.4) translateY(-0.05em); 
	}

	.tab-button .icon-sc + .tab-type {
		margin-left: 0.2rem;
	}

	.icon-podcast path,
	.icon-article path {
		fill: currentColor;
	}

	.tab-button:hover .icon-podcast path,
	.tab-button.active .icon-podcast path,
	.tab-button:hover .icon-article path,
	.tab-button.active .icon-article path {
		fill: #ffffff;
	}
	
	.spinner {
	  width: 42px;
	  height: 42px;
	  border: 4px solid rgba(0,0,0,0.1);
	  border-top-color: #158b85;
	  border-radius: 50%;
	  margin: 2rem auto;
	  animation: spin 0.9s linear infinite;
	}

	@keyframes spin {
	  to { transform: rotate(360deg); }
	}
	
	.content-section {
		width: 100%;
		padding: 10px 30px 30px 30px; 
		box-sizing: border-box;
		margin-bottom: 2rem;
		margin-top: 1rem;
	}

	.content-section h2 {
		text-align: left;
		margin-bottom: 1.5rem;
		width: 100%;
	}

	.content-section.active {
		display: block;
	}

	.content-section {
		display: none; 
	}
		
	.post-title-block {
		background-color: #fff;
		border-radius: 8px 8px 0 0;
		padding: 0.75rem 1rem 0.25rem;
		display: block;
	}

	.post-title-block h2 {
		display: inline-block;
		margin: 0;
		font-size: 1.4rem;
		font-weight: 700;
		color: #005b5b;
		white-space: nowrap;
	}

	.h-sub {
		font-style: italic;
		font-weight: 400;
		font-size: 0.8em;
		color: #1e8e7a;
		margin-left: 0.4ch;
		white-space: nowrap;
	}

	.title-underline {
		border: none;
		height: 2px;
		background-color: #1b7b7b;
		margin-top: 0.4rem;
		margin-bottom: 0.9rem;
	}

	.post-article {
		margin: 1.5rem 0;
		line-height: 1.6;
	}
	
	.post-article a {
		color: #1e8e7a;
		text-decoration: none;
	}
	
	.post-article a:hover {
		text-decoration: underline;
	}
	
	.video-container {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%; /* Maintains a 16:9 aspect ratio */
		height: 0;
		overflow: hidden;
		border-radius: 8px; 
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	}

	.video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
		
	.content-section.linkedin-post {
		background: #fff;
		border: 2px solid #1e8e7a;
		border-radius: 6px;
		padding: 1rem 1.2rem;
		max-width: 560px;
		width: 100%;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	.content-section.linkedin-post h3 {
		font-size: 1.1rem;
		color: #1e8e7a;
		margin-bottom: 0.8rem;
		text-align: left;
	}

	.linkedin-card {
		display: flex;
		flex-direction: column;
		border: 1px solid #ddd;
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
		transition: box-shadow 0.2s ease, transform 0.2s ease;
		color: #222;
		text-decoration: none;
	}

	.linkedin-card:hover {
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
		transform: translateY(-2px);
	}

	.linkedin-card img {
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}

	.linkedin-content {
		padding: 1rem;
	}

	.linkedin-content h4 {
		color: #1e8e7a;
		margin: 0 0 0.5rem;
		font-size: 1.05rem;
	}
	
	.linkedin-content h5 {
		margin: 0 0 0.5rem;
		font-size: 1rem;
	}

	.linkedin-content p {
		margin: 0 0 0.6rem;
		line-height: 1.45;
		font-size: 0.95rem;
	}

	.linkedin-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem 1rem;
		font-size: 0.85rem;
		color: #555;
		flex-wrap: wrap;
	}

	.linkedin-footer a.cta {
		color: #1e8e7a;
		font-weight: 600;
		text-decoration: none;
		margin-bottom: 0.2rem;
	}

	.linkedin-footer .copy-btn {
		margin-bottom: 0.2rem; 
	}

	.linkedin-footer p.figure-note {
		margin-bottom: 0.2rem; 
	}

	button.copy-btn {
		background: #1e8e7a;
		color: white;
		border: none;
		padding: 0.35rem 0.7rem;
		font-size: 0.8rem;
		border-radius: 4px;
		cursor: pointer;
	}

	button.copy-btn:active {
		background: #157364;
	}
	
			
	ul.no-bullets {
	  list-style: none;
	  padding-left: 0;
	  margin-left: 0; 
	}

	ul.no-bullets li {
	  margin-left: 1.5rem;
	  text-indent: -0.15em;
	}
	
	.figure-note {
		font-size: 0.85em;
		font-style: italic;
		color: #666;
	}	


	/* Loading spinner */
	.spinner {
		display: inline-block;
		width: 36px;
		height: 36px;
		border: 3px solid rgba(0, 0, 0, 0.1);
		border-top-color: #1e8e7a;
		border-radius: 50%;
		animation: spin 0.9s linear infinite;
		margin: 2rem auto;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* Fade transition classes */
	.fade-in {
		animation: fadeIn 0.5s ease-in forwards;
	}

	.fade-out {
		animation: fadeOut 0.3s ease-out forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}


	@media (max-width: 600px) {
		.nav-tabs {
			flex-direction: column;
			align-items: center;
			gap: 0.6rem;
		}

		.tab-button {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			text-align: left;
			font-size: 0.9rem;
			line-height: 1.2;
			padding: 4px 10px;
			width: 90%;
			max-width: 400px;
			margin: 0 auto;

			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			box-sizing: border-box;
		}

		.tab-button span {
			margin-top: 0;
		}

		.tab-left {
			gap: 0.2rem;
		}

		.tab-type,
		.tab-date {
			font-size: 0.7em;
			min-width: 60px;
		}

		.tab-button .icon-youtube,
		.tab-button .icon-linkedin,
		.tab-button .icon-sc {
			width: 0.9em;
			height: 0.9em;
		}

		.tab-button .icon-sc {
			transform: scale(1.2) translateY(-0.05em);
		}

		  .tabs-topbar {
			flex-wrap: wrap;
			justify-content: center;
		  }
		  .filter1, .filter2 {
			order: 1;
		  }
		  .center-tools {
			order: 2;
		  }
  
		.content-section {
			padding: 10px 16px 20px;
		}

		.content-section {
		  display: none;
		}

		.content-section.active {
		  display: block;
		}		

		.content-section.linkedin-post {
			max-width: 340px;
			padding: 1rem;
		}

		.content-section.linkedin-post h3 {
			text-align: center;
			font-size: 1rem;
		}

		.linkedin-footer {
			flex-direction: column;
			align-items: center;
		}

		.linkedin-footer a.cta,
		.linkedin-footer .copy-btn,
		.linkedin-footer p.figure-note {
			margin-bottom: 0.1rem;
		}
	}
</style>