/* 

Theme Name: TARA India
Author: Richik Majumder
Version: 1.0
*/



/* Global styles */
/* Put the global styles in this file, such as typography, colors, and layout settings. */

@import url('https://fonts.cdnfonts.com/css/semringah');
@import url('https://fonts.cdnfonts.com/css/futura-std-4');


/* Basic resets */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	--nav-h: 56px;
	--gap: 16px;
	--brand-size: 18px;
	--radius: 12px;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

	--primary-color: #116EB1;
	--accent-color: #D85620;
	--accent-color-light2: #BDE5EF;
	--accent-color-light1: #FBAF8C;
	--accent-color-dark1: #0b4670;
	--accent-color-dark2: #52392e;
	--accent-color-dark3: #8b1b6d;
	--neutral-dark: #0f172a;
	--neutral-dark-02: #434850;
	--neutral-white: #FDFEFE;
	--neutral-offwhite: #EEF2F6;
	--neutral-light-blue: #BDE5EF;
	--neutral-light-pink: #FFD0F3;
	--neutral-light-gray: #e3e6ea;
	--neutral-dark-gray: #b0b2b5;

	--text-color-light: var(--neutral-white);
	--text-color-dark: var(--neutral-dark);
	--text-color-accent: var(--accent-color);
	--background-light-white: var(--neutral-white);
	--background-light-blue: var(--neutral-light-blue);
	--background-light-pink: var(--neutral-light-pink);
	--background-light-gray: var(--neutral-light-gray);
	--background-dark: var(--neutral-dark);
}



/* custom scrollbar styles */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


::-webkit-scrollbar-thumb {
  background: var(--neutral-dark-gray);
  border-radius: 6px;
}


.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
}

/* utility classes */
h2 {
	font-size: clamp(.8rem, 4vw + .5rem, 1.8rem);
	margin: 0 0 clamp(1rem, 1.5rem, 1.5rem) 0;
}

h3{
	font-size: clamp(.6rem, 3vw + .4rem, 1.4rem);
	margin: 0 0 clamp(1rem, 1.5rem, 1.5rem) 0;
}

p{
	line-height: 1.5rem;
}

.width-fit-content {
	/* This is the default and usually all you need */
	width: auto; 
	/* This ensures the browser uses the content-based sizing algorithm */
	table-layout: auto;
}

.semingrah {
	font-family: 'Semringah', sans-serif !important;
	font-weight: 400 !important;
}

.consolas {
	font-family: 'Consolas', monospace;
}

.bold, 
strong {
	font-weight: 600 !important;
	letter-spacing: 0.1em;
}

.inline{
	display: inline-block;
}

.heading-accent {
	color: var(--accent-color);
}

.link-accent{	color: var(--accent-color);
	font-weight: 500;
	transition: 0.3s all;
}

.m-1{ margin: 5px; }
.m-2{ margin: 10px; }

.mt-1{ margin-top: 5px; }
.mt-2{ margin-top: 10px; }
.mt-3{ margin-top: 15px; }

.my-1{ margin: 5px 0; }
.my-2{ margin: 10px 0; }
.my-3{ margin: 15px 0; }
.mx-1{ margin: 0px 5px; }
.mx-2{ margin: 0px 10px; }
.mx-3{ margin: 0 15px; }

.p-1{ padding: 5px; }
.p-2{ padding: 10px; }

.py-1{ padding: 5px 0px; }
.py-2{ padding: 10px 0px; }

body {
	margin: 0;
	font-family: 'Futura Std', sans-serif;
	font-weight: 400;
	color: var(--neutral-dark-02);
}


/* Buttons */
.btn, 
.btn-mobile-menu {	
	display:inline-flex; 
	align-items:center; 
	justify-content:center;
	padding:5px 10px; 
	border-radius:5px; 
	text-decoration:none; 
	font-weight:500; 
	border:2px solid transparent;
}

.btn-primary{ 
	background:var(--accent-color); 
	color:var(--neutral-white); 
	border-color:var(--accent-color); 
	transition: 0.2s all;
}

.btn-primary:hover{ 
	filter:brightness(0.90);
	scale: 1.02; 
}

.btn-accent {
	background: var(--accent-color);
	color: var(--neutral-white);
	border-color: var(--accent-color);
	transition: 0.5s all;
}

.btn-accent:hover {
	filter: brightness(0.95);
}
.btn.secondary{ 
	border-color: var(--neutral-white); 
	color:inherit; 
	background: var(--neutral-white);
	transition: 0.5s all;
}
.btn.secondary:hover{ 
	background:var(--neutral-white); 
}

.btn-outline {
	background: #ffffff00;
	color: var(--accent-color);
	border-color: var(--border);
	transform: background 0.2s ease;
	transition: 0.5s all;
}

.btn-outline-light {
	background: #ffffff00;
	color: var(--text-color-light);
	border-color: var(--text-color-light);
	transition: 0.5s all;
}

.btn-outline-dark {
	background: #ffffff00;
	color: var(--text-color-light);
	border-color: var(--text-color-light);
	transition: 0.5s all;
}

.btn-outline:hover,
.btn-outline-light:hover {
	filter:brightness(0.90);
	scale: 1.02; 
}

#btn-know-more {
	min-width: 120px;
}


/* custom theme specific styles */
/* the generic container */


.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Only apply min-height where actually needed */
main#page-content.container {
  min-height: 46vh;
}

/* Grid wrapper for the cards */
.cards-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	max-width: 100%;
	overflow-x: scroll;
}

.cards-grid-02 {
	display: grid;
	align-items: stretch;
	grid-auto-rows: 1fr 1fr 1fr;
	grid-auto-columns: 2fr;
	grid-template-areas: 
	"first-card second-card third-card"
	"first-card fourth-card fourth-card";
	gap: 1rem 2rem;
}

/* Card container */
.card, 
.card-02,
.card-03,
.card-04 {
	border-radius: 5px;
	border: 2px dashed var(--neutral-dark);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	background: var(--neutral-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}
.card {
	margin: 2rem 0rem;
	max-width: 250px;
	min-width: 220px;
	max-height: 350px;
	justify-content: space-around;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.card-03 {
	padding: 1rem;
	justify-content: flex-start;
}

.card-04 {
	max-height: 370px;
	padding: 1rem;
	align-items: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

/* Image section */
.card-image, .card-image-02 {
	position: relative;
	width: 90%;
	height: 8rem;
	margin-top: -10%;
	border-radius: 5px;
}

.card-image img, 
.card-image-02 img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	border: 2px solid var(--neutral-dark-gray);
}

/* Text content */
.card-body, 
.card-body-02 {
	position: relative;
	padding: 1rem 1.1rem 1.1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 95%;
}

.card-body-03 {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card-title, 
.card-title-02,
.card-title-03, 
.card-title-04 {
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--neutral-dark);

	/* 1. Force the content onto a single line */
	white-space: nowrap; 
	
	/* 2. Hide any content that overflows the container width */
	overflow: hidden; 
	
	/* 3. Display the ellipsis at the point of clipping */
	text-overflow: ellipsis;
	max-width: 90%;
}

/* Truncated text */
.card-text,
.card-text-02,
.card-text-03{
	font-size: 0.9rem;
	line-height: 1.5;
	color: #6a6056;

	display: -webkit-box;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-text-04{
	font-size: 0.9rem;
	line-height: 1.5;
	color: #6a6056;

	display: -webkit-box;
	-webkit-line-clamp: 9;
	line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* recent posts */
.read-more-wrapper {
	display:flex; 
	padding: 5px;
	justify-content: center; 
	align-items: center;
}




/* page numbers - paginated view */
/* --- 1. General Container & Reset (Review) --- */
.archive-pagination {
	margin: 3rem auto;
	text-align: center;
	width: fit-content;

	/* Hide the accessibility heading generated by WordPress */
	/* Target the WordPress generated element inside the custom function */
	.archive-pagination .screen-reader-text {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute;
	}

	/* --- 2. Styling the Links Wrapper (Flexbox) --- */
	& .nav-links {
		display: flex; 
		gap: 5px; /* Space between elements */
		align-items: center;
		justify-content: center;
		padding: 10px 0;

		/* --- 3. Styling Individual Page Numbers, Prev, Next, First, Last --- */
		/* --- Remove list styling from the main pagination list --- */
		& ul {
			list-style: none; 
			margin: 0;
			padding: 0;
			display: flex;
			gap: 5px;

			/* ---  Ensure each list item (<li>) displays inline --- */
			li {
				display: block; /* Each item should behave like a block element inside the flex container */
				margin: 0; /* Remove any default margins on list items */
				

				/* --- Refine the link styling for the 'list' type output --- */
				/* The page-numbers class is applied to the <a> tag inside the <li> */
				& a.page-numbers,
				& .page-numbers.current {
					padding: 10px 15px;
					text-decoration: none;
					font-size: 1rem;
					border-radius: 50%; 
					transition: all 0.2s ease-in-out;
				}
				
				& a.page-numbers {
					color: var(--accent-color);
					border: 2px dashed var(--accent-color-light1);
				}

				& a.page-numbers:hover,
				& a.page-numbers:focus {
					background-color: #f0f0f0;
					border-color: var(--accent-color);
					background-color: var(--accent-color-light1);
				}

				& .page-numbers.current {
					padding: 12px 16px;
					background-color: var(--accent-color);
					color: var(--neutral-white);
					border: 2px dashed var(--accent-color);
				}
			}
		}
	}
	
	/* --- 7. Final Adjustments for Prev/Next Arrows --- */

	& .first,
	& .last {
		min-width: unset; 
		padding: 10px 15px;
		text-decoration: none;
		font-size: 1rem;
		color: var(--accent-color);
		border-radius: 50%; 
		transition: all 0.2s ease-in-out;
		font-weight: bold;
		min-width: unset; 
		border: 2px dashed var(--accent-color-light1);
	}
}



/* GB style overrides */
/* media handle styles for pages like blog, page, etc. */
#media-handles a{
	text-decoration: none;
}

.media-handle {
	width: 30px;
	height: 30px;
	margin: 0 .5rem 0 0;
}


/* table */
.wp-block-table, 
.gb-custom-table {
	width: 100%;
	padding: 10px;
	border-collapse: collapse;
	overflow: hidden;
	font-family: Arial, sans-serif;
	color: #333; /* Dark gray text */
	text-align: left;
	
	/* 2. Table Headers (<thead>) */
	& thead {
		border: 1px solid black;
	}
	
	& th {
		/* Subtle header background */
		background-color: var(--neutral-light-gray);
		color: #555; /* Medium gray for header text */
		font-weight: 500;
		padding: 12px 15px;
		border-bottom: 2px solid #ddd;
		letter-spacing: 0.5px;
	}
	
	/* 3. Table Data Cells (<td>) */
	& td {
		padding: 10px 15px;
		border-bottom: 1px solid #eeeeee;
	}
	
	/* 4. Striping for Readability (Alternate Row Colors) */
	& tr:nth-child(even) {
		background-color: #fafafa;
	}
	
	/* 5. Hover Effect (Optional, but highly recommended for UX) */
	& tbody tr:hover {
		background-color: #f5f5f5;
		cursor: default;
	}

	/* 6. Remove the final border for a clean look */
	& tbody tr:last-child td {
		border-bottom: none;
	}
}


/* Responsive designs */
@media(min-width: 768px) {
	.cards-grid-02 {
		grid-auto-rows: 1fr 1fr 1fr;
		grid-auto-columns: 1fr;
		grid-template-areas: 
		"first-card second-card fourth-card"
		"first-card third-card fourth-card";
	}
}

@media(max-width:1024px) {
	.card-text-02, 
	.card-text-04 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.card-text-02 {
		-webkit-line-clamp: 4;
		line-clamp: 4; 
	}
	.card-text-04 {
		-webkit-line-clamp: 12;
		line-clamp: 12; 
	}
}

@media(max-width: 768px) {
	
	.card-title-03 p { flex: 1; }

	.card-text-04 {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3; 
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

@media(max-width: 525px) {
	.cards-grid-02 {
		gap: .5rem;
	}
	.card-02 {
		max-height: 420px;
	}
	.card-text-02 {
		-webkit-line-clamp: 7;
		line-clamp: 7; 
	}
}

@media(max-width: 725px) {
	.cards-grid-02 {
		grid-auto-rows: 1fr 1fr;
		grid-auto-columns: 1fr 1fr 1fr;
		grid-template-areas: 
		"first-card second-card"
		"first-card third-card"
		"fourth-card fourth-card";
	}
}

@media (max-width: 600px) {
	.btn {
		width: 100%;
		max-width: 130px;
	}
	.btn-mobile-menu {
		width: 100%;
	}
	.btn-short{
		width: 48%;
	}
}


@media (max-width: 768px) {
  .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
  }

  .wp-block-table table {
	min-width: 900px; /* adjust based on column count */
  }
}

/* NEWSLETTER SECTION */

.tara-newsletter{
background:#f5f7f6;
padding:90px 20px;
text-align:center;
}

.tara-newsletter-container{
max-width:800px;
margin:auto;
}

.tara-newsletter h2{
font-size:34px;
margin-bottom:15px;
font-weight:600;
}

.tara-newsletter-text{
font-size:18px;
color:#555;
margin-bottom:35px;
line-height:1.6;
}

/* FORM LAYOUT */

.tara-form-row{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

/* INPUTS */

.tara-input{
padding:14px 16px;
border-radius:6px;
border:1px solid #ddd;
font-size:16px;
width:240px;
}

/* BUTTON */

.tara-subscribe-button{
background:#00D084;
color:white;
border:none;
padding:14px 28px;
border-radius:6px;
font-size:16px;
cursor:pointer;
font-weight:600;
transition:0.3s;
}

.tara-subscribe-button:hover{
background:#00b874;
}

/* MOBILE */

@media (max-width:600px){

.tara-form-row{
flex-direction:column;
}

.tara-input{
width:100%;
}

.tara-subscribe-button{
width:100%;
}

}

:root {

  --ti-blue:      #1B6FBF;
  --ti-teal:      #04A1B2;
  --ti-pink:      #E83A8D;
  --ti-orange:    #EC672E;
  --ti-yellow:    #FEDC3A;



  --ti-blue-50:   #E3F0FB;
  --ti-teal-50:   #E0F5F7;
  --ti-pink-50:   #FDE8F3;
  --ti-orange-50: #FEF0E8;
  --ti-yellow-50: #FFF9D6;


  --ti-blue-800:   #0D3D7A;
  --ti-teal-800:   #075A64;
  --ti-pink-800:   #7A1248;
  --ti-orange-800: #7A2E08;
  --ti-yellow-800: #6B4700;


  --ti-blue-600:   #145899;
  --ti-teal-600:   #097888;
  --ti-pink-600:   #BF2470;
  --ti-orange-600: #B84918;
  --ti-yellow-600: #B07A00;


  --ti-navy:      #0D3D7A;


  --ti-font: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;


  --ti-radius:    10px;
  --ti-radius-lg: 14px;
}

.ti-page {
  font-family: var(--ti-font);
  color: #2a2a2a;
  line-height: 1.7;
  max-width: 860px;
  margin: 0 auto;
}

.ti-page *, .ti-page *::before, .ti-page *::after {
  box-sizing: border-box;
}

.ti-page h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ti-blue);
  margin: 0 0 12px;
  line-height: 1.25;
}

.ti-page h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}

.ti-page h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 16px 0 4px;
}

.ti-page p {
  font-size: 15px;
  margin: 0 0 14px;
  color: #3a3a3a;
}

.ti-page p:last-child { margin-bottom: 0; }

.ti-page strong { font-weight: 700; }
.ti-page em { font-style: italic; }

.ti-sec {
  margin-top: 48px;
}

.ti-sec-sm {
  margin-top: 28px;
}

.ti-centered {
  text-align: center;
}

.ti-centered h2,
.ti-centered p {
  text-align: center;
}

.ti-sh {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.ti-sh::before {
  content: '';
  display: block;
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ti-sh h2 { margin: 0; }

.ti-sh--center {
  justify-content: center;
  margin-bottom: 12px;
}
.ti-sh--center::before { display: none; }

.ti-sh--blue::before   { background: var(--ti-blue); }
.ti-sh--teal::before   { background: var(--ti-teal); }
.ti-sh--pink::before   { background: var(--ti-pink); }
.ti-sh--orange::before { background: var(--ti-orange); }
.ti-sh--yellow::before { background: var(--ti-yellow); }

.ti-label {
  display: inline-block;
  font-family: var(--ti-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}

.ti-label--light { color: rgba(255,255,255,0.65); }
.ti-label--blue  { color: var(--ti-blue); }
.ti-label--teal  { color: var(--ti-teal-600); }

.ti-intro-box {
  background: var(--ti-blue-50);
  border-left: 4px solid var(--ti-blue);
  border-radius: 0 var(--ti-radius) var(--ti-radius) 0;
  padding: 20px 24px;
  margin-bottom: 32px;
}
.ti-intro-box p { color: var(--ti-blue-800); margin: 0; }
.ti-intro-box p + p { margin-top: 10px; }

.ti-intro-box--teal   { background: var(--ti-teal-50);   border-color: var(--ti-teal); }
.ti-intro-box--teal p { color: var(--ti-teal-800); }

.ti-intro-box--pink   { background: var(--ti-pink-50);   border-color: var(--ti-pink); }
.ti-intro-box--pink p { color: var(--ti-pink-800); }

.ti-intro-box--orange   { background: var(--ti-orange-50); border-color: var(--ti-orange); }
.ti-intro-box--orange p { color: var(--ti-orange-800); }

.ti-intro-box--yellow   { background: var(--ti-yellow-50); border-color: var(--ti-yellow); }
.ti-intro-box--yellow p { color: var(--ti-yellow-800); }

.ti-dark-band {
  background: var(--ti-navy);
  border-radius: var(--ti-radius-lg);
  padding: 36px 32px;
  margin-top: 12px;
}

.ti-dark-band h2 { color: var(--ti-blue-50); }
.ti-dark-band p  { color: rgba(227,240,251,0.85); }

.ti-dark-band--full {
  border-radius: 0;
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 24px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 24px));
  padding-left: 32px;
  padding-right: 32px;
}

.ti-band {
  border-radius: var(--ti-radius-lg);
  padding: 36px 32px;
}

.ti-band--blue   { background: var(--ti-blue-50); }
.ti-band--teal   { background: var(--ti-teal-50); }
.ti-band--pink   { background: var(--ti-pink-50); }
.ti-band--orange { background: var(--ti-orange-50); }
.ti-band--yellow { background: var(--ti-yellow-50); }

.ti-band--blue   h2 { color: var(--ti-blue-800); }
.ti-band--teal   h2 { color: var(--ti-teal-800); }
.ti-band--pink   h2 { color: var(--ti-pink-800); }
.ti-band--orange h2 { color: var(--ti-orange-800); }
.ti-band--yellow h2 { color: var(--ti-yellow-800); }

.ti-band--blue   p { color: var(--ti-blue-800); opacity: .9; }
.ti-band--teal   p { color: var(--ti-teal-800); opacity: .9; }
.ti-band--pink   p { color: var(--ti-pink-800); opacity: .9; }
.ti-band--orange p { color: var(--ti-orange-800); opacity: .9; }
.ti-band--yellow p { color: var(--ti-yellow-800); opacity: .9; }

.ti-cta-band {
  border-radius: var(--ti-radius-lg);
  padding: 20px;
  margin-top: 48px;
  background: linear-gradient(135deg,
    var(--ti-pink-50)   0%,  var(--ti-pink-50)   20%,
    var(--ti-blue-50)   20%, var(--ti-blue-50)   40%,
    var(--ti-yellow-50) 40%, var(--ti-yellow-50) 60%,
    var(--ti-orange-50) 60%, var(--ti-orange-50) 80%,
    var(--ti-teal-50)   80%, var(--ti-teal-50)   100%
  );
}

.ti-cta-band__inner {
  background: rgba(255,255,255,0.84);
  border-radius: var(--ti-radius);
  padding: 28px 24px;
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}

.ti-cta-band__text { flex: 1; min-width: 220px; }
.ti-cta-band__text h2 { color: #1a1a1a; margin-bottom: 10px; }
.ti-cta-band__text p  { color: #444; margin: 0; }

.ti-cta-band__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.ti-btn {
  display: inline-block;
  font-family: var(--ti-font);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 6px;
  text-align: center;
  transition: opacity .2s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.ti-btn:hover { opacity: .85; }

.ti-btn--blue   { background: var(--ti-blue);   color: #fff !important; }
.ti-btn--teal   { background: var(--ti-teal);   color: #fff !important; }
.ti-btn--pink   { background: var(--ti-pink);   color: #fff !important; }
.ti-btn--orange { background: var(--ti-orange); color: #fff !important; }
.ti-btn--yellow { background: var(--ti-yellow); color: #3a2000 !important; }

.ti-btn--outline-blue   { background: transparent; color: var(--ti-blue) !important;   border: 2px solid var(--ti-blue); }
.ti-btn--outline-teal   { background: transparent; color: var(--ti-teal) !important;   border: 2px solid var(--ti-teal); }
.ti-btn--outline-pink   { background: transparent; color: var(--ti-pink) !important;   border: 2px solid var(--ti-pink); }
.ti-btn--outline-orange { background: transparent; color: var(--ti-orange) !important; border: 2px solid var(--ti-orange); }

.ti-btn--outline-blue:hover   { background: var(--ti-blue-50); }
.ti-btn--outline-teal:hover   { background: var(--ti-teal-50); }
.ti-btn--outline-pink:hover   { background: var(--ti-pink-50); }
.ti-btn--outline-orange:hover { background: var(--ti-orange-50); }

.ti-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.ti-btn-row--center { justify-content: center; }

.ti-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.ti-card {
  background: #fff;
  border-radius: var(--ti-radius);
  padding: 20px 18px;
  border-top: 5px solid transparent;
}

.ti-card h3 { font-size: 15px; color: #1a1a1a; margin-bottom: 8px; }
.ti-card p  { font-size: 13px; color: #555; line-height: 1.6; margin: 0; }

.ti-card--blue   { border-color: var(--ti-blue); }
.ti-card--teal   { border-color: var(--ti-teal); }
.ti-card--pink   { border-color: var(--ti-pink); }
.ti-card--orange { border-color: var(--ti-orange); }
.ti-card--yellow { border-color: var(--ti-yellow); }

.ti-card--left {
  border-top: none;
  border-left: 4px solid transparent;
  border-radius: 0 var(--ti-radius) var(--ti-radius) 0;
  padding: 16px 20px;
}

.ti-card--left.ti-card--blue   { border-color: var(--ti-blue);   background: var(--ti-blue-50); }
.ti-card--left.ti-card--teal   { border-color: var(--ti-teal);   background: var(--ti-teal-50); }
.ti-card--left.ti-card--pink   { border-color: var(--ti-pink);   background: var(--ti-pink-50); }
.ti-card--left.ti-card--orange { border-color: var(--ti-orange); background: var(--ti-orange-50); }
.ti-card--left.ti-card--yellow { border-color: var(--ti-yellow); background: var(--ti-yellow-50); }

.ti-findings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ti-findings li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--ti-font);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 18px;
  border-radius: var(--ti-radius);
}

.ti-findings li:nth-child(5n+1) { background: var(--ti-blue-50);   color: var(--ti-blue-800); }
.ti-findings li:nth-child(5n+2) { background: var(--ti-teal-50);   color: var(--ti-teal-800); }
.ti-findings li:nth-child(5n+3) { background: var(--ti-pink-50);   color: var(--ti-pink-800); }
.ti-findings li:nth-child(5n+4) { background: var(--ti-orange-50); color: var(--ti-orange-800); }
.ti-findings li:nth-child(5n+5) { background: var(--ti-yellow-50); color: var(--ti-yellow-800); }

.ti-findings__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.ti-findings li:nth-child(5n+1) .ti-findings__dot { background: var(--ti-blue); }
.ti-findings li:nth-child(5n+2) .ti-findings__dot { background: var(--ti-teal); }
.ti-findings li:nth-child(5n+3) .ti-findings__dot { background: var(--ti-pink); }
.ti-findings li:nth-child(5n+4) .ti-findings__dot { background: var(--ti-orange); }
.ti-findings li:nth-child(5n+5) .ti-findings__dot { background: var(--ti-yellow); }

.ti-tag {
  display: inline-block;
  font-family: var(--ti-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
}

.ti-tag--blue   { background: var(--ti-blue);   color: #fff; }
.ti-tag--teal   { background: var(--ti-teal);   color: #fff; }
.ti-tag--pink   { background: var(--ti-pink);   color: #fff; }
.ti-tag--orange { background: var(--ti-orange); color: #fff; }
.ti-tag--yellow { background: var(--ti-yellow); color: #3a2000; }

.ti-tag--soft-blue   { background: var(--ti-blue-50);   color: var(--ti-blue-800); }
.ti-tag--soft-teal   { background: var(--ti-teal-50);   color: var(--ti-teal-800); }
.ti-tag--soft-pink   { background: var(--ti-pink-50);   color: var(--ti-pink-800); }
.ti-tag--soft-orange { background: var(--ti-orange-50); color: var(--ti-orange-800); }
.ti-tag--soft-yellow { background: var(--ti-yellow-50); color: var(--ti-yellow-800); }

.ti-accordion {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

.ti-accordion__item { border-bottom: 1px solid #e8e8e8; }
.ti-accordion__item:last-child { border-bottom: none; }

.ti-accordion__trigger {
  width: 100%;
  background: #fafafa;
  border: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--ti-font);
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  transition: background .15s ease;
}

.ti-accordion__trigger:hover,
.ti-accordion__trigger[aria-expanded="true"] { background: #f0f0ee; }

.ti-accordion__chevron {
  font-size: 11px;
  color: #aaa;
  transition: transform .25s ease;
  flex-shrink: 0;
}

.ti-accordion__trigger[aria-expanded="true"] .ti-accordion__chevron {
  transform: rotate(180deg);
}

.ti-accordion__body {
  display: none;
  padding: 20px 20px 24px;
  font-family: var(--ti-font);
  font-size: 14px;
  color: #3a3a3a;
  line-height: 1.75;
}

.ti-accordion__body.open {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ti-accordion__photo {
  width: 110px;
  height: 110px;
  border-radius: var(--ti-radius);
  object-fit: cover;
  flex-shrink: 0;
}

.ti-accordion__content { flex: 1; min-width: 200px; }

.ti-accordion__body h4 {
  color: var(--ti-blue);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 14px 0 3px;
}

.ti-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.ti-media-card {
  background: #fff;
  border-radius: var(--ti-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ti-media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.ti-media-card__embed { display: block; }
.ti-media-card__embed iframe { display: block; width: 100%; border-radius: 0; }

.ti-media-card__body {
  padding: 16px 18px 20px;
}

.ti-media-card__body h3 {
  font-family: var(--ti-font);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1a1a1a;
}

.ti-media-card__body p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.ti-media-card { border-top: 4px solid transparent; }
.ti-media-card:nth-child(3n+1) { border-color: var(--ti-blue); }
.ti-media-card:nth-child(3n+2) { border-color: var(--ti-pink); }
.ti-media-card:nth-child(3n+3) { border-color: var(--ti-teal); }

.ti-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 36px;
}

.ti-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #e0e0e0;
}

.ti-timeline__item {
  position: relative;
  padding: 0 0 28px 24px;
}

.ti-timeline__item:last-child { padding-bottom: 0; }

.ti-timeline__dot {
  position: absolute;
  left: -36px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px currentColor;
}

.ti-timeline__item:nth-child(5n+1) .ti-timeline__dot { background: var(--ti-blue);   color: var(--ti-blue); }
.ti-timeline__item:nth-child(5n+2) .ti-timeline__dot { background: var(--ti-teal);   color: var(--ti-teal); }
.ti-timeline__item:nth-child(5n+3) .ti-timeline__dot { background: var(--ti-pink);   color: var(--ti-pink); }
.ti-timeline__item:nth-child(5n+4) .ti-timeline__dot { background: var(--ti-orange); color: var(--ti-orange); }
.ti-timeline__item:nth-child(5n+5) .ti-timeline__dot { background: var(--ti-yellow); color: var(--ti-yellow); }

.ti-timeline__title {
  font-family: var(--ti-font);
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}

.ti-timeline__body {
  font-family: var(--ti-font);
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

.ti-festival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.ti-festival-card {
  background: #fff;
  border-radius: var(--ti-radius);
  padding: 18px 16px;
  text-align: center;
  border-top: 3px solid transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.ti-festival-card:nth-child(5n+1) { border-color: var(--ti-blue); }
.ti-festival-card:nth-child(5n+2) { border-color: var(--ti-teal); }
.ti-festival-card:nth-child(5n+3) { border-color: var(--ti-pink); }
.ti-festival-card:nth-child(5n+4) { border-color: var(--ti-orange); }
.ti-festival-card:nth-child(5n+5) { border-color: var(--ti-yellow); }

.ti-festival-card__label {
  font-family: var(--ti-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 8px;
}

.ti-festival-card__name {
  font-family: var(--ti-font);
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.4;
}

.ti-festival-card__country {
  font-size: 12px;
  color: #888;
}

.ti-award-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.ti-award-card {
  background: #fff;
  border-radius: var(--ti-radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  border-top: 5px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ti-award-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.ti-award-card:nth-child(2n+1) { border-color: var(--ti-pink); }
.ti-award-card:nth-child(2n+2) { border-color: var(--ti-orange); }

.ti-award-card__img {
  width: 100%;
  max-width: 340px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ti-award-card__award {
  font-family: var(--ti-font);
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.ti-award-card__film {
  font-family: var(--ti-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--ti-pink);
  margin-bottom: 8px;
}

.ti-award-card__festival {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
}

.ti-quote {
  background: var(--ti-teal-50);
  border-left: 4px solid var(--ti-teal);
  border-radius: 0 var(--ti-radius) var(--ti-radius) 0;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.ti-quote__text {
  flex: 1;
  min-width: 200px;
  font-family: var(--ti-font);
  font-size: 16px;
  font-style: italic;
  color: var(--ti-teal-800);
  line-height: 1.6;
}

.ti-quote__text strong { font-style: normal; font-weight: 700; }
.ti-quote__text a { color: var(--ti-teal-600); }

.ti-quote__logo {
  max-width: 120px;
  max-height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.ti-collab {
  background: var(--ti-blue-50);
  border-radius: var(--ti-radius);
  padding: 24px 28px;
}

.ti-collab h3 {
  font-family: var(--ti-font);
  color: var(--ti-blue-800);
  font-size: 16px;
  margin-bottom: 12px;
}

.ti-collab ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ti-collab li {
  font-family: var(--ti-font);
  font-size: 14px;
  color: var(--ti-blue-800);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ti-collab li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ti-blue);
  flex-shrink: 0;
}

.ti-stats-band {
  background: var(--ti-blue-50);
  border-radius: var(--ti-radius-lg);
  padding: 32px 24px;
}

.ti-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.ti-stat {
  background:  var(--ti-blue-50);
  border-radius: var(--ti-radius);
  padding: 20px 16px;
  text-align: center;
  border-top: 3px solid transparent;
}

.ti-stat:nth-child(4n+1) { border-color: var(--ti-blue); border: 2px solid var(--ti-blue);}
.ti-stat:nth-child(4n+2) { border-color: var(--ti-teal); border: 2px solid var(--ti-teal);}
.ti-stat:nth-child(4n+3) { border-color: var(--ti-pink);border: 2px solid var(--ti-pink); }
.ti-stat:nth-child(4n+4) { border-color: var(--ti-orange); border: 2px solid var(--ti-orange);}


.ti-stat__icon   { width: 56px; height: 56px; margin: 0 auto 12px; display: block; object-fit: contain; filter: none; opacity: .85; }
.ti-stat__number { font-family: var(--ti-font); font-size: 28px; font-weight: 700; color: var(--ti-blue); line-height: 1.1; margin-bottom: 6px; }
.ti-stat__label  { font-family: var(--ti-font); font-size: 12px; font-weight: 700; color: var(--ti-blue-800); letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; opacity: .75; }
.ti-stat--hero                    { background: var(--ti-blue-50); border: 2px solid var(--ti-blue); }
.ti-stat--hero .ti-stat__number   { font-size: 36px; color: var(--ti-blue); }
.ti-stat--hero .ti-stat__label    { color: var(--ti-blue-800); opacity: 1; }

.ti-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid #f0f0ee;
}

.ti-split:last-child {
  border-bottom: none;
}

.ti-split--reverse .ti-split__img {
  order: 2;
}

.ti-split--reverse .ti-split__text {
  order: 1;
}

.ti-split__img {
  border-radius: var(--ti-radius-lg);
  overflow: hidden;
}

.ti-split__img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: var(--ti-radius-lg);
}

.ti-split__text h2 {
  font-family: var(--ti-font);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #1a1a1a;
  line-height: 1.3;
}

.ti-split__text .ti-sh {
  margin-bottom: 16px;
}

.ti-split__text p {
  font-family: var(--ti-font);
  font-size: 15px;
  color: #3a3a3a;
  line-height: 1.75;
  margin: 0 0 12px;
}

.ti-split__text p:last-child { margin-bottom: 0; }

.ti-split__text a {
  color: var(--ti-blue);
  text-decoration: underline;
}

.ti-lead {
  font-family: var(--ti-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ti-blue-800);
  border-left: 4px solid var(--ti-blue);
  padding-left: 20px;
  margin-bottom: 32px;
}

@media (max-width: 600px) {
  .ti-dark-band,
  .ti-band { padding: 24px 18px; }

  .ti-cta-band { padding: 14px; }
  .ti-cta-band__inner { flex-direction: column; padding: 18px; }
  .ti-cta-band__buttons { flex-direction: row; flex-wrap: wrap; }

  .ti-accordion__body.open { flex-direction: column; }
  .ti-accordion__photo { width: 80px; height: 80px; }

  .ti-timeline { padding-left: 28px; }
  .ti-timeline__dot { left: -28px; width: 16px; height: 16px; }

  .ti-split {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0;
  }

  .ti-split--reverse .ti-split__img,
  .ti-split--reverse .ti-split__text {
    order: unset;
  }

  .ti-split__img img { height: 220px; }

  .ti-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ti-stat--hero .ti-stat__number { font-size: 28px; }

  .ti-media-grid { grid-template-columns: 1fr; }
  .ti-quote { flex-direction: column; }
  .ti-cover { min-height: 260px; }
  .ti-audience-grid { grid-template-columns: 1fr; }
}

.ti-cover {
  position: relative;
  border-radius: var(--ti-radius-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ti-cover__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ti-cover--parallax .ti-cover__bg {
  background-attachment: fixed;
}

.ti-cover__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 61, 122, 0.55);
}

.ti-cover__overlay--light  { background: rgba(0, 0, 0, 0.35); }
.ti-cover__overlay--orange { background: rgba(120, 46, 8, 0.55); }
.ti-cover__overlay--pink   { background: rgba(100, 20, 60, 0.50); }
.ti-cover__overlay--teal   { background: rgba(6, 79, 88, 0.55); }

.ti-cover__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 32px;
  max-width: 600px;
}

.ti-cover__content h2,
.ti-cover__content h3 {
  color: #fff;
  font-family: var(--ti-font);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.25;
}

.ti-cover__content h2 { font-size: 26px; }
.ti-cover__content h3 { font-size: 20px; }

.ti-cover__content p {
  color: rgba(255,255,255,0.9);
  font-family: var(--ti-font);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.ti-cover__label {
  display: inline-block;
  font-family: var(--ti-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}

.ti-cover-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--ti-radius-lg);
  overflow: hidden;
  min-height: 360px;
}

.ti-cover-split__text {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ti-cover-split__text--blue   { background: var(--ti-blue-50); }
.ti-cover-split__text--teal   { background: var(--ti-teal-50); }
.ti-cover-split__text--pink   { background: var(--ti-pink-50); }
.ti-cover-split__text--orange { background: var(--ti-orange-50); }
.ti-cover-split__text--yellow { background: var(--ti-yellow-50); }

.ti-cover-split__text--dark {
  background: var(--ti-blue-50);
}
.ti-cover-split__text--dark h2,
.ti-cover-split__text--dark h3 { color: var(--ti-blue-800); }
.ti-cover-split__text--dark p  { color: #3a3a3a; }
.ti-cover-split__text--dark li { color: #3a3a3a; }
.ti-cover-split__text--dark a  { color: var(--ti-blue); }
.ti-cover-split__text--dark ul li::before { background: var(--ti-blue); }

.ti-cover-split__text h2 {
  font-family: var(--ti-font);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.ti-cover-split__text p,
.ti-cover-split__text li {
  font-family: var(--ti-font);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 10px;
  color: #3a3a3a;
}

.ti-cover-split__text ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.ti-cover-split__text ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.ti-cover-split__text ul li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ti-orange);
  flex-shrink: 0;
  margin-top: 6px;
}

.ti-cover-split__text--dark ul li::before { background: var(--ti-yellow); }
.ti-cover-split__text--blue   ul li::before { background: var(--ti-blue); }
.ti-cover-split__text--teal   ul li::before { background: var(--ti-teal); }
.ti-cover-split__text--pink   ul li::before { background: var(--ti-pink); }

.ti-cover-split__img {
  position: relative;
  min-height: 280px;
}

.ti-cover-split__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ti-note {
  font-family: var(--ti-font);
  font-size: 12px;
  color: #888;
  line-height: 1.6;
  padding: 10px 14px;
  background: #f7f7f5;
  border-radius: 6px;
  border-left: 3px solid #ddd;
  margin-top: 12px;
}

.ti-note a { color: var(--ti-blue); }

.ti-audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.ti-audience-card {
  border-radius: var(--ti-radius-lg);
  overflow: hidden;
}

.ti-audience-card__cover {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.ti-audience-card__cover-label {
  width: 100%;
  padding: 16px 20px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  font-family: var(--ti-font);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ti-audience-card__body {
  padding: 20px;
}

.ti-audience-card:nth-child(1) .ti-audience-card__body { background: var(--ti-pink-50); }
.ti-audience-card:nth-child(2) .ti-audience-card__body { background: var(--ti-blue-50); }

.ti-audience-card__body h3 {
  font-family: var(--ti-font);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.ti-audience-card__body p,
.ti-audience-card__body li {
  font-family: var(--ti-font);
  font-size: 13px;
  color: #3a3a3a;
  line-height: 1.65;
  margin-bottom: 8px;
}

.ti-audience-card__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.ti-audience-card__body ul li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ti-audience-card:nth-child(1) .ti-audience-card__body ul li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ti-pink);
  flex-shrink: 0;
  margin-top: 5px;
}

.ti-audience-card:nth-child(2) .ti-audience-card__body ul li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ti-blue);
  flex-shrink: 0;
  margin-top: 5px;
}

.ti-cover-split--parallax {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--ti-radius-lg);
  overflow: hidden;
  min-height: 420px;
}

.ti-cover-split--parallax .ti-cover-split__text {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ti-pcover {
  position: relative;
  overflow: hidden;
  min-height: 380px;
}

.ti-pcover__bg {
  position: absolute;
  inset: -60px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (hover: none) {
  .ti-pcover__bg {
    background-attachment: scroll;
    inset: 0;
  }
}

.ti-pcover__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
}

.ti-pcover__overlay--pink   { background: rgba(100, 20, 60, 0.48); }
.ti-pcover__overlay--teal   { background: rgba(4, 90, 100, 0.48); }
.ti-pcover__overlay--orange { background: rgba(100, 40, 8, 0.48); }
.ti-pcover__overlay--blue   { background: rgba(12, 40, 80, 0.48); }

.ti-pcover__content {
  position: relative;
  z-index: 2;
  padding: 40px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ti-pcover__content h2 {
  font-family: var(--ti-font);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.3;
}

.ti-pcover__content p {
  font-family: var(--ti-font);
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.75;
  margin: 0 0 10px;
}

.ti-pcover__content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.ti-pcover__content ul li {
  font-family: var(--ti-font);
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.ti-pcover__content ul li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ti-yellow);
  flex-shrink: 0;
  margin-top: 6px;
}

.ti-pcover__label {
  display: inline-block;
  font-family: var(--ti-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}

.ti-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ti-benefit {
  border-radius: var(--ti-radius);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ti-benefit:nth-child(4n+1) { background: var(--ti-blue-50); }
.ti-benefit:nth-child(4n+2) { background: var(--ti-teal-50); }
.ti-benefit:nth-child(4n+3) { background: var(--ti-pink-50); }
.ti-benefit:nth-child(4n+4) { background: var(--ti-orange-50); }

.ti-benefit__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.ti-benefit:nth-child(4n+1) .ti-benefit__dot { background: var(--ti-blue); }
.ti-benefit:nth-child(4n+2) .ti-benefit__dot { background: var(--ti-teal); }
.ti-benefit:nth-child(4n+3) .ti-benefit__dot { background: var(--ti-pink); }
.ti-benefit:nth-child(4n+4) .ti-benefit__dot { background: var(--ti-orange); }

.ti-benefit:nth-child(4n+1) p { color: var(--ti-blue-800); }
.ti-benefit:nth-child(4n+2) p { color: var(--ti-teal-800); }
.ti-benefit:nth-child(4n+3) p { color: var(--ti-pink-800); }
.ti-benefit:nth-child(4n+4) p { color: var(--ti-orange-800); }

.ti-benefit p {
  font-family: var(--ti-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.ti-req-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ti-req-list li {
  font-family: var(--ti-font);
  font-size: 14px;
  color: #3a3a3a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ti-req-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ti-teal);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .ti-cover-split--parallax { grid-template-columns: 1fr; }
  .ti-pcover { min-height: 280px; }
  .ti-benefits-grid { grid-template-columns: 1fr 1fr; }
}


/* =============================================================
   TARA INDIA — Homepage alignment overrides
   Version 1.0
   
   HOW TO USE:
   Add to the bottom of gb-customs.css (after the ti- classes)
   OR paste into Appearance → Theme File Editor → index.css
   
   These rules override the homepage designer's styles to align
   with the TARA color system. They do NOT change the layout
   or concept — only colors, borders and micro-details.
   ============================================================= */


/* ── 1. CORRECT THE CSS VARIABLES ──────────────────────────────
   The designer used slightly off versions of the logo colors.
   These overrides bring them to the exact graphic charter values.
   ---------------------------------------------------------------- */
:root {
  --primary-color:       #1B6FBF;   /* was #116EB1 */
  --accent-color:        #EC672E;   /* was #D85620 */
  --accent-color-light1: #FEF0E8;   /* was #FBAF8C — now the 50 stop */
  --accent-color-light2: #E3F0FB;   /* was #BDE5EF — now blue 50 */
  --accent-color-dark1:  #0D3D7A;   /* was #0b4670 — now blue 800 */
  --neutral-light-blue:  #E3F0FB;   /* align with ti-blue-50 */
  --neutral-light-pink:  #FDE8F3;   /* align with ti-pink-50 */
}


/* ── 2. HERO SECTION ────────────────────────────────────────────
   Bring hero CTA button colors in line with the palette.
   ---------------------------------------------------------------- */
.hero-title {
  /* keep designer's font and size, just sharpen the color */
  color: #fff;
}

.hero-actions .btn-primary {
  background: #EC672E;
  border-color: #EC672E;
  color: #fff;
}

.hero-actions .btn-primary:hover {
  background: #B84918;
  border-color: #B84918;
}

.hero-actions .btn-outline-light {
  border-color: rgba(255,255,255,0.8);
  color: #fff;
}

.hero-actions .btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
}


/* ── 3. SECTION TITLES ──────────────────────────────────────────
   Align with the ti- h2 color (blue) instead of the theme default.
   ---------------------------------------------------------------- */
.section-title,
.latest-blogs-title {
  color: #1B6FBF;
}


/* ── 4. CARDS — remove dashed border, add colored top accent ────
   The dashed border reads as unfinished. Replace with a clean
   top-border accent cycling through the 5 logo colors.
   ---------------------------------------------------------------- */
.card,
.card-02,
.card-03,
.card-04 {
  border: none;
  border-top: 4px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  border-radius: 10px;
}

/* Cycle the 5 logo colors across cards in the same grid */
.cards-grid-02 .card-02,
.cards-grid-02 article:nth-child(1) {
  border-top-color: #1B6FBF;
}
.cards-grid-02 article:nth-child(2) {
  border-top-color: #04A1B2;
}
.cards-grid-02 article:nth-child(3) {
  border-top-color: #E83A8D;
}
.cards-grid-02 article:nth-child(4) {
  border-top-color: #EC672E;
}

/* Blog cards in the scroll grid — cycle colors */
.cards-grid .card:nth-child(4n+1) { border-top-color: #1B6FBF; }
.cards-grid .card:nth-child(4n+2) { border-top-color: #E83A8D; }
.cards-grid .card:nth-child(4n+3) { border-top-color: #04A1B2; }
.cards-grid .card:nth-child(4n+4) { border-top-color: #EC672E; }

/* Card hover — keep designer's lift, just clean up the shadow */
.card:hover,
.card-02:hover,
.card-03:hover,
.card-04:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}


/* ── 5. CARD TITLES AND LINKS ───────────────────────────────────
   Use the exact blue for titles, exact orange for "Read More".
   ---------------------------------------------------------------- */
.card-title,
.card-title-02,
.card-title-03,
.card-title-04 {
  color: #1a1a1a;
  font-size: 1rem;
  font-weight: 600;
}

.link-accent {
  color: #EC672E;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.link-accent:hover {
  color: #B84918;
}


/* ── 6. WHAT WE DO / MAKE A DIFFERENCE sections ─────────────────
   Keep the designer's layout, just tighten the intro text color.
   ---------------------------------------------------------------- */
.what-we-do__text,
.make-a-difference__text {
  color: #555;
}


/* ── 7. IMPACT STATS SECTION ────────────────────────────────────
   Give each stat a colored top border matching the logo palette.
   ---------------------------------------------------------------- */
.our-impact__stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.our-impact-stat {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  border-top: 4px solid transparent;
}

.our-impact-stat:nth-child(1) { border-top-color: #1B6FBF; }
.our-impact-stat:nth-child(2) { border-top-color: #04A1B2; }
.our-impact-stat:nth-child(3) { border-top-color: #E83A8D; }

.our-impact-stat__number {
  color: #1B6FBF;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.our-impact-stat__label {
  color: #555;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 6px;
}

/* "Know More" button */
.our-impact .btn-outline {
  color: #1B6FBF;
  border-color: #1B6FBF;
}

.our-impact .btn-outline:hover {
  background: #E3F0FB;
}


/* ── 8. BLOG CARDS — wp-block-columns override ──────────────────
   The global style in wp-custom-css adds white bg + shadow to ALL
   column blocks. Scope it more tightly so it doesn't bleed into
   other pages unexpectedly.
   ---------------------------------------------------------------- */
.section.latest-posts .wp-block-columns .wp-block-column {
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  transition: transform .2s ease, box-shadow .2s ease;
}

.section.latest-posts .wp-block-columns .wp-block-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}


/* ── 9. GLOBAL BUTTON ALIGNMENT ────────────────────────────────
   The theme's .btn-primary uses --accent-color (now corrected).
   Ensure the Donate Now and nav buttons also use exact values.
   ---------------------------------------------------------------- */
.btn-primary {
  background: #EC672E;
  border-color: #EC672E;
  color: #fff;
}

.btn-primary:hover {
  background: #B84918;
  border-color: #B84918;
}

.btn-outline {
  color: #EC672E;
  border-color: #EC672E;
}

/* Nav-specific outline — keep white for header context */
.nav-right .btn-outline,
.mobile-actions .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}


/* ── 10. RESPONSIVE TWEAKS ──────────────────────────────────────
   Ensure the stat cards stack cleanly on mobile.
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
  .our-impact__stats {
    flex-direction: column;
  }
  .our-impact-stat {
    min-width: 100%;
  }
}

/* =============================================================
   TARA INDIA — Our Team page CSS overrides
   Version 1.0

   HOW TO USE:
   Paste at the bottom of gb-customs.css (after ti- classes).
   These rules scope tightly to the team page using the
   body class .page-id-38 so they don't affect other pages.
   ============================================================= */


/* ── 1. GRID LAYOUT ─────────────────────────────────────────────
   The designer set 6 columns. Fine on large screens, too tight
   on medium. Drop to 4 → 3 → 2 at sensible breakpoints.
   ---------------------------------------------------------------- */
.page-id-38 .wp-block-post-template.columns-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1200px) {
  .page-id-38 .wp-block-post-template.columns-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 860px) {
  .page-id-38 .wp-block-post-template.columns-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .page-id-38 .wp-block-post-template.columns-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}


/* ── 2. CARD FRONT — subtle border accent ───────────────────────
   The front is a full-bleed photo with no visual framing.
   Add a colored bottom border that peeks out before the flip,
   hinting at the color underneath. Cycles through 5 logo colors.
   ---------------------------------------------------------------- */
.page-id-38 li.wp-block-post:nth-child(5n+1) .team-card-front {
  border-bottom: 4px solid #1B6FBF;
}
.page-id-38 li.wp-block-post:nth-child(5n+2) .team-card-front {
  border-bottom: 4px solid #04A1B2;
}
.page-id-38 li.wp-block-post:nth-child(5n+3) .team-card-front {
  border-bottom: 4px solid #E83A8D;
}
.page-id-38 li.wp-block-post:nth-child(5n+4) .team-card-front {
  border-bottom: 4px solid #EC672E;
}
.page-id-38 li.wp-block-post:nth-child(5n+5) .team-card-front {
  border-bottom: 4px solid #FEDC3A;
}


/* ── 3. CARD BACK — cycle the 5 logo colors ────────────────────
   Replace the flat #FF601E with the proper charter colors,
   rotating through all 5 across the team grid.
   White text works on all of them except yellow — yellow gets
   dark text (#3a2000) for legibility.
   ---------------------------------------------------------------- */
.page-id-38 li.wp-block-post:nth-child(5n+1) .team-card-back {
  background: #1B6FBF;
}
.page-id-38 li.wp-block-post:nth-child(5n+2) .team-card-back {
  background: #04A1B2;
}
.page-id-38 li.wp-block-post:nth-child(5n+3) .team-card-back {
  background: #E83A8D;
}
.page-id-38 li.wp-block-post:nth-child(5n+4) .team-card-back {
  background: #EC672E;
}
.page-id-38 li.wp-block-post:nth-child(5n+5) .team-card-back {
  background: #FEDC3A;
  color: #3a2000;
}


/* ── 4. CARD BACK — typography improvements ────────────────────
   The designer used very small font sizes (11-13px) with inline
   styles. These overrides improve readability without touching
   the block HTML. Also fix the role link and Read More link color.
   ---------------------------------------------------------------- */

/* Name */
.page-id-38 .team-card-back .wp-block-post-title {
  font-size: 14px !important;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}

/* Yellow card — dark name text */
.page-id-38 li.wp-block-post:nth-child(5n+5) .team-card-back .wp-block-post-title {
  color: #3a2000;
}

/* Role / category tag */
.page-id-38 .team-card-back .wp-block-post-terms {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: .85;
}

/* Override the black color the designer set on the category link */
.page-id-38 .team-card-back .wp-block-post-terms a {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
}

.page-id-38 li.wp-block-post:nth-child(5n+5) .team-card-back .wp-block-post-terms a {
  color: rgba(58,32,0,0.75) !important;
}

/* Excerpt text */
.page-id-38 .team-card-back .wp-block-post-excerpt__excerpt {
  font-size: 12px !important;
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.page-id-38 li.wp-block-post:nth-child(5n+5) .team-card-back .wp-block-post-excerpt__excerpt {
  color: rgba(58,32,0,0.85);
}

/* "Read More" link */
.page-id-38 .team-card-back .wp-block-post-excerpt__more-link {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-id-38 li.wp-block-post:nth-child(5n+5) .team-card-back .wp-block-post-excerpt__more-link {
  color: rgba(58,32,0,0.65) !important;
}


/* ── 5. CARD BACK — layout polish ──────────────────────────────
   Better padding and alignment for the back face content.
   ---------------------------------------------------------------- */
.page-id-38 .team-card-back {
  padding: 20px 16px;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

/* Divider between name/role and excerpt */
.page-id-38 .team-card-back .wp-block-post-terms {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 10px;
  width: 100%;
  display: block;
}

.page-id-38 li.wp-block-post:nth-child(5n+5) .team-card-back .wp-block-post-terms {
  border-color: rgba(58,32,0,0.15);
}


/* ── 6. HOVER HINT on front ─────────────────────────────────────
   Add a subtle overlay on hover so users understand the card
   is interactive, before the flip completes.
   ---------------------------------------------------------------- */
.page-id-38 .team-card-front::after {
  content: 'Flip ↻';
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.page-id-38 .team-card:hover .team-card-front::after {
  opacity: 0; /* hidden once flip starts */
}

.page-id-38 .team-card-front:hover::after {
  opacity: 1;
}


/* ── 7. INTRO PARAGRAPHS ────────────────────────────────────────
   Style the three intro paragraphs above the grid to match
   the ti- design system tone.
   ---------------------------------------------------------------- */
.page-id-38 #the-page-content > p {
  font-size: 15px;
  color: #3a3a3a;
  line-height: 1.75;
  max-width: 720px;
}

.page-id-38 #the-page-content > p:first-child {
  font-size: 17px;
  font-weight: 500;
  color: #0D3D7A;
  border-left: 4px solid #1B6FBF;
  padding-left: 18px;
  line-height: 1.7;
}

.page-id-38 .wp-block-query {
  background: #f7f8fa;
  border-radius: 14px;
  padding: 32px 24px;
}

/* =============================================================
   TARA INDIA — Blog Home page CSS
   Version 1.0

   HOW TO USE:
   Paste at the bottom of gb-customs.css (after other overrides).
   Scoped to .page-id-65 so it only affects the blog listing page.
   ============================================================= */


/* ── 1. PAGE HEADER ─────────────────────────────────────────────
   ---------------------------------------------------------------- */
.page-id-65 .archive-header {
  padding: 32px 0 40px;
  border-bottom: 1px solid #f0f0ee;
  margin-bottom: 40px;
}

.page-id-65 .archive-title {
  font-size: 28px;
  font-weight: 700;
  color: #1B6FBF;
  margin-bottom: 12px;
}

.page-id-65 .archive-description p {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
  max-width: 680px;
  margin: 0;
}


/* ── 2. CARD GRID ───────────────────────────────────────────────
   3 columns on desktop, 2 on tablet, 1 on mobile.
   ---------------------------------------------------------------- */
.tara-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .tara-blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .tara-blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ── 3. CARD BASE ───────────────────────────────────────────────
   White card, rounded corners, colored top border, subtle shadow.
   ---------------------------------------------------------------- */
.tara-blog-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border-top: 4px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.tara-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* Color accents — top border cycles through 5 logo colors */
.tara-blog-card--blue   { border-top-color: #1B6FBF; }
.tara-blog-card--teal   { border-top-color: #04A1B2; }
.tara-blog-card--pink   { border-top-color: #E83A8D; }
.tara-blog-card--orange { border-top-color: #EC672E; }
.tara-blog-card--yellow { border-top-color: #FEDC3A; }


/* ── 4. FEATURED IMAGE ──────────────────────────────────────────
   Fixed-height image wrapper so all cards align regardless of
   the original image dimensions.
   ---------------------------------------------------------------- */
.tara-blog-card__img-wrap {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.tara-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.tara-blog-card:hover .tara-blog-card__img {
  transform: scale(1.04);
}

/* Placeholder band when post has no featured image */
.tara-blog-card__img-placeholder {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
}

.tara-blog-card__img-placeholder--blue   { background: #E3F0FB; }
.tara-blog-card__img-placeholder--teal   { background: #E0F5F7; }
.tara-blog-card__img-placeholder--pink   { background: #FDE8F3; }
.tara-blog-card__img-placeholder--orange { background: #FEF0E8; }
.tara-blog-card__img-placeholder--yellow { background: #FFF9D6; }


/* ── 5. CARD BODY ───────────────────────────────────────────────
   ---------------------------------------------------------------- */
.tara-blog-card__body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


/* ── 6. CATEGORY TAG ────────────────────────────────────────────
   Small pill above the title, colored per logo palette.
   ---------------------------------------------------------------- */
.tara-blog-card__cat {
  display: inline-block;
  font-family: 'Futura Std', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 3px 10px;
  margin-bottom: 10px;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
  transition: opacity .2s ease;
}

.tara-blog-card__cat:hover { opacity: .8; }

.tara-blog-card__cat--blue   { background: #E3F0FB; color: #0D3D7A; }
.tara-blog-card__cat--teal   { background: #E0F5F7; color: #075A64; }
.tara-blog-card__cat--pink   { background: #FDE8F3; color: #7A1248; }
.tara-blog-card__cat--orange { background: #FEF0E8; color: #7A2E08; }
.tara-blog-card__cat--yellow { background: #FFF9D6; color: #6B4700; }


/* ── 7. TITLE ───────────────────────────────────────────────────
   ---------------------------------------------------------------- */
.tara-blog-card__title {
  font-family: 'Futura Std', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #1a1a1a;

  /* Clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tara-blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.tara-blog-card__title a:hover { color: #1B6FBF; }


/* ── 8. META (date) ─────────────────────────────────────────────
   ---------------------------------------------------------------- */
.tara-blog-card__meta {
  font-family: 'Futura Std', sans-serif;
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}


/* ── 9. EXCERPT ─────────────────────────────────────────────────
   ---------------------------------------------------------------- */
.tara-blog-card__excerpt {
  flex: 1;
}

.tara-blog-card__excerpt p {
  font-family: 'Futura Std', sans-serif;
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  margin: 0 0 16px;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ── 10. READ MORE LINK ─────────────────────────────────────────
   Pinned to bottom of card body. Colored per logo palette.
   ---------------------------------------------------------------- */
.tara-blog-card__more {
  font-family: 'Futura Std', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  transition: opacity .2s ease;
  align-self: flex-start;
}

.tara-blog-card__more:hover { opacity: .75; }

.tara-blog-card__more--blue   { color: #1B6FBF; }
.tara-blog-card__more--teal   { color: #04A1B2; }
.tara-blog-card__more--pink   { color: #E83A8D; }
.tara-blog-card__more--orange { color: #EC672E; }
.tara-blog-card__more--yellow { color: #B07A00; }


/* ── 11. PAGINATION ─────────────────────────────────────────────
   paginate_links() with type='plain' outputs bare <a> and <span>
   elements. We wrap them in .tara-blog-pagination and style from
   scratch — no dependency on the theme's .archive-pagination.
   ---------------------------------------------------------------- */
.tara-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 56px;
}

/* Every page number link and span shares this base */
.tara-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: 'Futura Std', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border: 2px solid #e8e8e8;
  background: #fff;
  color: #3a3a3a;
  line-height: 1;
}

/* Hover state for clickable links */
.tara-blog-pagination a.page-numbers:hover {
  background: #E3F0FB;
  border-color: #1B6FBF;
  color: #0D3D7A;
}

/* Current active page */
.tara-blog-pagination .page-numbers.current {
  background: #1B6FBF;
  border-color: #1B6FBF;
  color: #fff;
  cursor: default;
}

/* Prev / Next arrows — slightly wider */
.tara-blog-pagination a.prev.page-numbers,
.tara-blog-pagination a.next.page-numbers {
  padding: 0 16px;
  background: #fff;
  border-color: #EC672E;
  color: #EC672E;
  font-weight: 700;
}

.tara-blog-pagination a.prev.page-numbers:hover,
.tara-blog-pagination a.next.page-numbers:hover {
  background: #FEF0E8;
  border-color: #B84918;
  color: #B84918;
}

/* Dots separator */
.tara-blog-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: #aaa;
  cursor: default;
  min-width: 28px;
}


/* ── 12. EMPTY STATE ────────────────────────────────────────────
   ---------------------------------------------------------------- */
.tara-blog-empty {
  font-family: 'Futura Std', sans-serif;
  font-size: 16px;
  color: #888;
  text-align: center;
  padding: 60px 0;
}

/* =============================================================
   TARA INDIA — Our Partners page CSS overrides
   Version 2.0

   HOW TO USE: paste at the bottom of gb-customs.css.

   The upper page content now uses ti- Custom HTML classes so
   no overrides are needed there. This file handles only the
   PHP-generated partner logo grid.
   ============================================================= */

.partner-logos {
  background: #E3F0FB;
  border-radius: 14px;
  padding: 36px 32px;
  margin-top: 32px;
}

.partner-logos__heading {
  font-family: 'Josefin Sans', 'Futura Std', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #145899;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.partner-logos__heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(27, 111, 191, 0.2);
}

.partner-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.partner-logo-item {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-top: 3px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.partner-logo-item:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.partner-logo-item:nth-child(5n+1):hover { border-top-color: #1B6FBF; }
.partner-logo-item:nth-child(5n+2):hover { border-top-color: #04A1B2; }
.partner-logo-item:nth-child(5n+3):hover { border-top-color: #E83A8D; }
.partner-logo-item:nth-child(5n+4):hover { border-top-color: #EC672E; }
.partner-logo-item:nth-child(5n+5):hover { border-top-color: #FEDC3A; }

.partner-logo-img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.partner-logo-item:hover .partner-logo-img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06);
}

@media (max-width: 600px) {
  .partner-logos { padding: 24px 16px; }
  .partner-logos-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }
  .partner-logo-item { height: 90px; padding: 12px; }
}