/**
 * Blog listing page styles.
 */

 .dit-blog-page,
 .dit-blog-page > .wp-block-group,
 .dit-blog-hero,
 .dit-blog-listing {
	 box-sizing: border-box;
	 width: 100%;
	 max-width: none;
 }
 
 /* -------------------------------------------------------------------------- */
 /* Hero (unchanged)                                                           */
 /* -------------------------------------------------------------------------- */
 
 .dit-blog-hero {
	 position: relative;
	 isolation: isolate;
	 overflow: hidden;
	 min-height: clamp(420px, 58vh, 560px);
	 padding-block: clamp(3.25rem, 7vw, 5.5rem);
	 background-color: #eef5f6;
	 background-image: url("../assets/img/about-hero.png");
	 background-repeat: no-repeat;
	 background-position: center right;
	 background-size: cover;
 }
 
 .dit-blog-hero::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: 0;
	 pointer-events: none;
	 background: linear-gradient(
		 90deg,
		 rgba(247, 251, 251, 0.97) 0%,
		 rgba(247, 251, 251, 0.92) 34%,
		 rgba(247, 251, 251, 0.55) 52%,
		 rgba(247, 251, 251, 0.12) 70%,
		 transparent 84%
	 );
 }
 
 .dit-blog-hero::after {
	 content: "";
	 position: absolute;
	 right: -8%;
	 bottom: -22%;
	 width: min(50vw, 520px);
	 height: min(32vw, 260px);
	 background: var(--dit-teal);
	 border-radius: 55% 45% 0 70% / 70% 40% 0 60%;
	 opacity: 0.95;
	 z-index: 0;
	 pointer-events: none;
 }
 
 .dit-blog-hero__inner {
	 position: relative;
	 z-index: 1;
	 display: flex;
	 align-items: center;
	 width: 100%;
	 min-height: inherit;
	 max-width: min(100%, var(--wp--style--global--wide-size, 1240px));
	 margin-inline: auto;
	 padding-inline: var(--dit-container-pad);
	 box-sizing: border-box;
 }
 
 .dit-blog-hero__inner > .wp-block-group,
 .dit-blog-hero__content {
	 max-width: 38rem;
 }
 
 .dit-blog-hero__eyebrow {
	 display: flex;
	 align-items: center;
	 gap: 0.85rem;
	 margin: 0 0 1.25rem;
	 color: var(--dit-teal);
	 font-size: 0.8rem;
	 font-weight: 700;
	 letter-spacing: 0.12em;
	 text-transform: uppercase;
 }
 
 .dit-blog-hero__eyebrow::before {
	 content: "";
	 display: inline-block;
	 width: 1.75rem;
	 height: 2px;
	 background: var(--dit-teal);
 }
 
 .dit-blog-hero__title {
	 margin: 0 0 1rem;
	 max-width: 18ch;
	 color: var(--dit-navy);
	 font-family: var(--wp--preset--font-family--heading);
	 font-size: clamp(2.15rem, 4.6vw, 3.5rem);
	 font-weight: 700;
	 line-height: 1.15;
 }
 
 .dit-blog-hero__lead {
	 margin: 0;
	 max-width: 42rem;
	 color: var(--dit-muted);
	 font-size: clamp(1.05rem, 1.7vw, 1.2rem);
	 line-height: 1.65;
	 font-weight: 500;
 }
 
 /* -------------------------------------------------------------------------- */
 /* Listing                                                                    */
 /* -------------------------------------------------------------------------- */
 
 .dit-blog-listing {
	 padding-block: clamp(2.5rem, 5vw, 4rem);
	 background:
		 radial-gradient(circle at 8% 0%, rgba(13, 115, 119, 0.07) 0%, transparent 40%),
		 radial-gradient(circle at 100% 100%, rgba(11, 42, 74, 0.05) 0%, transparent 45%),
		 #f6fafa;
 }
 
 /* Side spacing so cards never touch the screen edges */
 .dit-blog-listing__inner {
	 box-sizing: border-box;
	 width: 100%;
	 max-width: 1240px;
	 margin-inline: auto;
	 padding-inline: clamp(1.25rem, 4vw, 2.5rem);
 }
 
 .dit-blog-listing__intro {
	 max-width: 42rem;
	 margin: 0 auto 2.25rem;
	 text-align: center;
 }
 
 .dit-blog-listing__intro .dit-section__title {
	 margin-bottom: 0.85rem;
	 font-size: clamp(1.85rem, 3.2vw, 2.45rem);
	 font-weight: 700;
 }
 
 .dit-blog-listing__intro .dit-section__text {
	 margin: 0 auto;
	 color: var(--dit-muted);
	 font-size: 1.05rem;
	 font-weight: 500;
 }
 
 .dit-blog-grid {
	 display: grid;
	 grid-template-columns: repeat(3, minmax(0, 1fr));
	 gap: 2.25rem;
	 align-items: stretch;
	 width: 100%;
	 box-sizing: border-box;
 }
 
 /* -------------------------------------------------------------------------- */
 /* Card                                                                       */
 /* -------------------------------------------------------------------------- */
 
 .dit-blog-card {
	 --dit-card-ease: cubic-bezier(0.22, 1, 0.36, 1);
	 position: relative;
	 isolation: isolate;
	 display: flex;
	 flex-direction: column;
	 min-width: 0;
	 height: 100%;
	 margin: 0;
	 overflow: hidden;
	 background:
		 linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
	 border: 1px solid rgba(13, 115, 119, 0.1);
	 border-radius: 20px;
	 box-shadow:
		 0 1px 0 rgba(255, 255, 255, 0.9) inset,
		 0 10px 28px rgba(11, 42, 74, 0.07);
	 transition:
		 transform 0.45s var(--dit-card-ease),
		 box-shadow 0.45s ease,
		 border-color 0.35s ease;
 }
 
 .dit-blog-card::before {
	 content: "";
	 position: absolute;
	 inset: auto -20% -35% auto;
	 z-index: 0;
	 width: 11rem;
	 height: 11rem;
	 border-radius: 50%;
	 background: radial-gradient(circle, rgba(13, 115, 119, 0.12) 0%, transparent 70%);
	 opacity: 0.55;
	 transform: scale(0.85);
	 transition: opacity 0.45s ease, transform 0.55s var(--dit-card-ease);
	 pointer-events: none;
 }
 
 /* Accent bar that grows on hover */
 .dit-blog-card::after {
	 content: "";
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 z-index: 3;
	 width: 0;
	 height: 4px;
	 background: linear-gradient(
		 90deg,
		 var(--dit-teal) 0%,
		 var(--dit-teal-mid) 55%,
		 rgba(20, 145, 155, 0) 100%
	 );
	 transition: width 0.55s var(--dit-card-ease);
 }
 
 .dit-blog-card:hover,
 .dit-blog-card:focus-within {
	 transform: translateY(-8px);
	 border-color: rgba(13, 115, 119, 0.28);
	 box-shadow:
		 0 1px 0 rgba(255, 255, 255, 0.95) inset,
		 0 26px 52px rgba(11, 42, 74, 0.14),
		 0 8px 18px rgba(13, 115, 119, 0.1);
 }
 
 .dit-blog-card:hover::before,
 .dit-blog-card:focus-within::before {
	 opacity: 1;
	 transform: scale(1.2);
 }
 
 .dit-blog-card:hover::after,
 .dit-blog-card:focus-within::after {
	 width: 100%;
 }
 
 /* Thumbnail */
 .dit-blog-card__thumb {
	 position: relative;
	 display: block;
	 flex-shrink: 0;
	 aspect-ratio: 16 / 10;
	 min-height: 0;
	 height: auto;
	 margin: 0;
	 overflow: hidden;
	 line-height: 0; /* no extra height below the image */
	 background: linear-gradient(135deg, var(--dit-mist) 0%, #d7ecec 100%);
 }
 
 .dit-blog-card__thumb img {
	 position: absolute;
	 inset: 0;
	 display: block;
	 width: 100%;
	 max-width: none;
	 height: 100%;
	 object-fit: cover;
	 object-position: center;
	 transition: transform 0.85s var(--dit-card-ease), filter 0.45s ease;
 }
 
 .dit-blog-card__thumb::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: 1;
	 background:
		 linear-gradient(180deg, rgba(11, 42, 74, 0.08) 0%, transparent 38%, rgba(11, 42, 74, 0.45) 100%);
	 opacity: 0.85;
	 transition: opacity 0.4s ease;
	 pointer-events: none;
 }
 
 .dit-blog-card__thumb::after {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: -85%;
	 z-index: 2;
	 width: 48%;
	 height: 100%;
	 background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
	 transform: skewX(-18deg);
	 pointer-events: none;
 }
 
 .dit-blog-card__badge {
	 position: absolute;
	 top: 0.9rem;
	 left: 0.9rem;
	 z-index: 3;
	 display: inline-flex;
	 align-items: center;
	 max-width: calc(100% - 1.8rem);
	 padding: 0.38rem 0.75rem;
	 border-radius: 999px;
	 background: rgba(255, 255, 255, 0.94);
	 color: var(--dit-teal);
	 font-family: var(--wp--preset--font-family--body);
	 font-size: 0.68rem;
	 font-weight: 800;
	 letter-spacing: 0.08em;
	 line-height: 1.2;
	 text-transform: uppercase;
	 box-shadow: 0 8px 18px rgba(11, 42, 74, 0.14);
	 backdrop-filter: blur(6px);
 }
 
 .dit-blog-card:hover .dit-blog-card__thumb img,
 .dit-blog-card:focus-within .dit-blog-card__thumb img {
	 transform: scale(1.08);
	 filter: saturate(1.05);
 }
 
 .dit-blog-card:hover .dit-blog-card__thumb::before,
 .dit-blog-card:focus-within .dit-blog-card__thumb::before {
	 opacity: 1;
 }
 
 .dit-blog-card:hover .dit-blog-card__thumb::after {
	 left: 130%;
	 transition: left 0.9s ease;
 }
 
 /* Body: date → title → Read More */
 .dit-blog-card__body {
	 position: relative;
	 z-index: 1;
	 display: flex;
	 flex: 1 1 auto;
	 flex-direction: column;
	 justify-content: flex-start;
	 align-items: flex-start;
	 gap: 0.55rem;
	 padding: 0.9rem 1.25rem 1.25rem;
	 text-align: left;
 }
 
 .dit-blog-card__body > * {
	 margin-block: 0;
 }
 
 /* Remove extra space between card image and date:
	hide empty elements / auto-inserted line breaks that create the gap */
 .dit-blog-card__body > :empty,
 .dit-blog-card__body > br,
 .dit-blog-card__body > p:empty,
 .dit-blog-card__thumb + br,
 .dit-blog-card > br,
 .dit-blog-card > p:empty {
	 display: none;
 }
 
 .dit-blog-card__date {
	 margin: 0;
	 color: var(--dit-muted);
	 font-family: var(--wp--preset--font-family--body);
	 font-size: 0.82rem;
	 font-weight: 600;
	 letter-spacing: 0.02em;
	 line-height: 1.3;
 }
 
 .dit-blog-card__title {
	 margin: 0;
	 font-family: var(--wp--preset--font-family--heading);
	 font-size: clamp(1.12rem, 1.55vw, 1.28rem);
	 font-weight: 700;
	 line-height: 1.35;
	 display: -webkit-box;
	 -webkit-line-clamp: 3;
	 line-clamp: 3;
	 -webkit-box-orient: vertical;
	 overflow: hidden;
 }
 
 .dit-blog-card__title a {
	 color: var(--dit-navy);
	 text-decoration: none;
	 transition: color 0.25s ease;
 }
 
 .dit-blog-card__title a:hover,
 .dit-blog-card__title a:focus-visible {
	 color: var(--dit-teal);
	 text-decoration: none;
 }
 
 .dit-blog-card__more {
	 display: inline-flex;
	 align-items: center;
	 gap: 0.4rem;
	 margin-top: auto;
	 padding: 0.55rem 0.95rem;
	 border-radius: 999px;
	 background: rgba(13, 115, 119, 0.08);
	 color: var(--dit-teal);
	 font-family: var(--wp--preset--font-family--body);
	 font-size: 0.88rem;
	 font-weight: 800;
	 line-height: 1.2;
	 text-decoration: none;
	 white-space: nowrap;
	 transition:
		 color 0.25s ease,
		 background 0.3s ease,
		 box-shadow 0.3s ease,
		 transform 0.3s var(--dit-card-ease);
 }
 
 .dit-blog-card__more-label,
 .dit-blog-card__more-arrow {
	 display: inline-flex;
	 align-items: center;
	 line-height: 1;
 }
 
 .dit-blog-card__more-arrow {
	 font-size: 1.05em;
	 transition: transform 0.3s var(--dit-card-ease);
 }
 
 .dit-blog-card:hover .dit-blog-card__more,
 .dit-blog-card:focus-within .dit-blog-card__more,
 .dit-blog-card__more:hover,
 .dit-blog-card__more:focus-visible {
	 background: linear-gradient(135deg, var(--dit-teal) 0%, #0a5f63 100%);
	 color: #fff;
	 box-shadow: 0 10px 22px rgba(13, 115, 119, 0.28);
	 text-decoration: none;
	 transform: translateY(-1px);
 }
 
 .dit-blog-card:hover .dit-blog-card__more-arrow,
 .dit-blog-card:focus-within .dit-blog-card__more-arrow,
 .dit-blog-card__more:hover .dit-blog-card__more-arrow,
 .dit-blog-card__more:focus-visible .dit-blog-card__more-arrow {
	 transform: translateX(4px);
 }
 
 .dit-blog-empty {
	 margin: 0;
	 padding: 2rem 0;
	 text-align: center;
	 color: var(--dit-muted);
	 font-size: 1.05rem;
	 font-weight: 500;
 }
 
 /* Entrance animation */
 @keyframes dit-blog-card-in {
	 from {
		 opacity: 0;
		 transform: translateY(24px);
	 }
	 to {
		 opacity: 1;
		 transform: translateY(0);
	 }
 }
 
 .dit-blog-grid > .dit-blog-card {
	 animation: dit-blog-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 .dit-blog-grid > .dit-blog-card:nth-child(3n + 2) {
	 animation-delay: 0.1s;
 }
 
 .dit-blog-grid > .dit-blog-card:nth-child(3n + 3) {
	 animation-delay: 0.2s;
 }
 
 /* -------------------------------------------------------------------------- */
 /* Pagination                                                                 */
 /* -------------------------------------------------------------------------- */
 
 .dit-blog-pagination {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 gap: 0.35rem;
	 margin-top: 2.5rem;
 }
 
 .dit-blog-pagination .page-numbers {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 min-width: 2.75rem;
	 height: 2.75rem;
	 padding: 0 0.75rem;
	 border: 1px solid rgba(13, 115, 119, 0.22);
	 border-radius: 999px;
	 color: var(--dit-navy);
	 font-size: 0.95rem;
	 font-weight: 700;
	 text-decoration: none;
	 transition: background 0.25s var(--dit-ease), color 0.25s var(--dit-ease), border-color 0.25s var(--dit-ease);
 }
 
 .dit-blog-pagination a.page-numbers:hover,
 .dit-blog-pagination a.page-numbers:focus-visible {
	 background: var(--dit-teal);
	 border-color: var(--dit-teal);
	 color: var(--dit-white);
 }
 
 .dit-blog-pagination .page-numbers.current {
	 background: var(--dit-navy);
	 border-color: var(--dit-navy);
	 color: var(--dit-white);
 }
 
 .dit-blog-pagination .page-numbers.dots {
	 border: 0;
	 min-width: auto;
 }
 
 /* -------------------------------------------------------------------------- */
 /* Responsive                                                                 */
 /* -------------------------------------------------------------------------- */
 
 @media (max-width: 991px) {
	 .dit-blog-hero {
		 min-height: clamp(360px, 48vh, 480px);
		 background-position: 70% center;
	 }
 
	 .dit-blog-hero::before {
		 background: linear-gradient(
			 90deg,
			 rgba(247, 251, 251, 0.97) 0%,
			 rgba(247, 251, 251, 0.9) 48%,
			 rgba(247, 251, 251, 0.55) 72%,
			 transparent 100%
		 );
	 }
 
	 .dit-blog-grid {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
		 gap: 1.75rem;
	 }
 }
 
 @media (max-width: 600px) {
	 .dit-blog-hero {
		 min-height: 0;
		 background-position: center;
	 }
 
	 .dit-blog-hero::after {
		 display: none;
	 }
 
	 .dit-blog-grid {
		 grid-template-columns: 1fr;
		 gap: 1.5rem;
	 }
 
	 .dit-blog-card__body {
		 padding: 0.8rem 1.1rem 1.1rem;
	 }
 
	 .dit-blog-listing__intro {
		 margin-bottom: 1.75rem;
	 }
 }
 
 @media (prefers-reduced-motion: reduce) {
	 .dit-blog-grid > .dit-blog-card {
		 animation: none;
	 }
 
	 .dit-blog-card,
	 .dit-blog-card::before,
	 .dit-blog-card::after,
	 .dit-blog-card__thumb img,
	 .dit-blog-card__thumb::before,
	 .dit-blog-card__more,
	 .dit-blog-card__more-arrow {
		 transition: none;
	 }
 
	 .dit-blog-card:hover,
	 .dit-blog-card:focus-within,
	 .dit-blog-card:hover .dit-blog-card__more,
	 .dit-blog-card:focus-within .dit-blog-card__more {
		 transform: none;
	 }
 
	 .dit-blog-card:hover .dit-blog-card__more-arrow,
	 .dit-blog-card:focus-within .dit-blog-card__more-arrow {
		 transform: none;
	 }
 }
 
 /* Hidden category badge / label */
 .dit-blog-card__badge,
 .dit-insights__category {
	 display: none;
 }