:root { --bio-bg: #f9fafb; --bio-white: #ffffff; --bio-teal: #4bc1a7; --bio-teal-hover: #3ea890; --bio-text-dark: #1f2937; --bio-text-gray: #6b7280; --bio-border: #e5e7eb; --bio-radius: 12px; }

.bio-blog-grid-wrapper * { box-sizing: border-box; }

.bio-blog-grid-wrapper { max-width: 100% !important; width: 100% !important; padding: 0 !important; font-family: var(--bio-font-sans); color: var(--bio-text-dark); }

.bio-search-box { width: 100% !important; max-width: 680px !important; margin: 0 auto 30px !important; position: relative !important; display: block !important; }

.bio-search-input { height: 39px !important; line-height: normal !important; border-radius: 8px !important; padding: 0 15px 0 40px !important; font-size: 14px !important; border: 1px solid #e5e7eb !important; background: #ffffff !important; width: 100% !important; box-shadow: none !important; outline: none !important; color: #333 !important; }
.bio-search-input:focus { border-color: #4bc1a7 !important; box-shadow: 0 0 0 3px rgba(75, 193, 167, 0.1) !important; }

.bio-search-icon { position: absolute !important; top: 39% !important; left: 14px !important; transform: translateY(-50%) !important; font-size: 14px !important; color: #9ca3af !important; margin: 0 !important; pointer-events: none !important; line-height: 1 !important; }

.bio-filter-row { display: flex; justify-content: flex-start; gap: 12px !important; flex-wrap: wrap; margin-bottom: 40px !important; border-top: 1px solid #e5e7eb !important; border-bottom: 1px solid #e5e7eb !important; padding: 15px 0 !important; width: 100% !important; position: relative !important; z-index: 10 !important; }

.bio-filter-btn { border-radius: 9px !important; margin-bottom: 0px !important; height: 37px; padding: 0 16px !important; margin-right: 0 !important; background-color: #ffffff !important; border: 1px solid #58c0a8 !important; color: #374151 !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.bio-filter-btn:hover { border-color: var(--bio-teal) !important; color: var(--bio-teal) !important; background-color: #f0fdfa !important; }
.bio-filter-btn.is-active { background-color: var(--bio-teal) !important; border-color: var(--bio-teal) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(75, 193, 167, 0.25) !important; }

.bio-layout-container { display: flex; gap: 30px; align-items: flex-start; padding: 0; }
.bio-main-column { flex: 1; width: 100%; }
.bio-sidebar-column { width: 460px; flex-shrink: 0; }
.no-sidebar .bio-sidebar-column { display: none; }

.bio-featured-wrapper { margin-bottom: 40px; transition: opacity 0.3s; }
.bio-featured-inner { background: var(--bio-white); border-radius: var(--bio-radius); box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; overflow: hidden; min-height: auto !important; align-items: stretch; }
.bio-featured-media { flex: 1.5; position: relative; overflow: hidden; aspect-ratio: 16 / 9 !important; height: auto !important; }
.bio-featured-media img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.6s ease; position: absolute !important; top: 0; left: 0; }
.bio-featured-badge { position: absolute; top: 20px; left: 20px; background: #fcd34d; color: #78350f; padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 500; z-index: 2; }
.bio-featured-inner:hover .bio-featured-media img { transform: scale(1.05); }

.bio-featured-content { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.bio-meta-cat { font-size: 11px; font-weight: 500; color: #6b7280; margin-bottom: 15px; letter-spacing: 0.5px; }
.bio-featured-title { font-size: 24px; line-height: 1.4; margin: 0 0 15px; color: var(--bio-text-dark); }
.bio-featured-title a { text-decoration: none; color: inherit; }
.bio-featured-excerpt { font-size: 15px; color: #4b5563; line-height: 1.6; margin-bottom: 10px; }
.bio-featured-meta { font-size: 13px; color: #9ca3af; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.bio-btn-readmore { display: inline-block; background: var(--bio-teal); color: #fff; padding: 4px 24px; border-radius: 8px; text-decoration: none; font-weight: 500; width: fit-content; transition: 0.2s; }
.bio-btn-readmore:hover { background: var(--bio-teal-hover); }

@media (max-width: 991px) {
    .bio-featured-inner { flex-direction: column; height: auto; }
    .bio-featured-media { width: 100%; aspect-ratio: 16 / 9 !important; }
}

.bio-featured-inner:hover .bio-featured-media img { transform: scale(1.05); }

.bio-featured-content { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.bio-meta-cat { text-transform: uppercase; font-size: 11px; font-weight: 500; color: #6b7280; margin-bottom: 15px; letter-spacing: 0.5px; }
.bio-featured-title { font-size: 24px; line-height: 1.4; margin: 0 0 15px; color: var(--bio-text-dark); }
.bio-featured-title a { text-decoration: none; color: inherit; }
.bio-featured-excerpt { font-size: 15px; color: #4b5563; line-height: 1.6; margin-bottom: 10px; }
.bio-featured-meta { font-size: 13px; color: #9ca3af; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.bio-btn-readmore { display: inline-block; background: var(--bio-teal); color: #fff; padding: 4px 24px; border-radius: 8px; text-decoration: none; font-weight: 300; width: fit-content; transition: 0.2s; font-size: 15px; }
.bio-btn-readmore:hover { background: var(--bio-teal-hover); }

.bio-blog-grid-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.bio-post-card { background: var(--bio-white); border-radius: 12px; border: 1px solid #d3d3d3; display: flex; flex-direction: column; }
.bio-card-media { position: relative; border-radius: 12px 12px 0 0; overflow: hidden; padding-top: 62%; }
.bio-card-media img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.6s ease; }
.bio-post-card:hover .bio-card-media img { transform: scale(1.08); }

.bio-card-cat-badge { position: absolute; top: 15px; left: 15px; background: rgba(255, 255, 255, 0.95); color: #374151; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 500; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.bio-card-body { padding: 20px 20px 10px 20px; }
.bio-card-title { font-size: 18px; margin: 0 0 10px; line-height: 1.4; color: var(--bio-text-dark); }
.bio-card-title a { text-decoration: none; color: inherit; transition: color 0.2s; }
.bio-card-title a:hover { color: var(--bio-teal); }

.bio-card-excerpt { font-size: 14px; color: #6b7280; line-height: 1.6; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bio-card-meta { font-size: 12px; color: #9ca3af; display: flex; align-items: center; gap: 8px; border-top: 1px solid #dbdbdb; padding-top: 10px; }

.bio-loadmore-wrap { text-align: center; margin-top: 22px; }
.bio-btn-loadmore { background: #fff; border: 1px solid #58c0a8; padding: 3px 18px; border-radius: 8px; color: #6b7280; cursor: pointer; font-size: 14px; transition: 0.2s; }
.bio-btn-loadmore:hover { border-color: var(--bio-teal); color: var(--bio-teal); }

.bio-widget { background: var(--bio-white); border: 1px solid var(--bio-border); border-radius: 16px; padding: 25px; margin-bottom: 25px; }
.bio-widget-header { font-size: 16px; font-weight: 500; margin: 0 0 15px; display: flex; align-items: center; gap: 8px; color: var(--bio-text-dark); }
.bio-widget-header i { color: var(--bio-teal); }

.bio-cf7-wrapper .wpcf7, .bio-cf7-wrapper form, .bio-cf7-wrapper .form-flat, .bio-cf7-wrapper p { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; }
.bio-cf7-wrapper .wpcf7-form-control-wrap { display: block !important; width: 100% !important; margin-bottom: 12px !important; }
.bio-cf7-wrapper input[type="text"], .bio-cf7-wrapper input[type="email"], .bio-input-email { width: 100% !important; padding: 12px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; margin-bottom: 10px !important; outline: none !important; font-family: var(--bio-font-sans) !important; height: 42px !important; display: block !important; box-sizing: border-box !important; background: #ffffff !important; box-shadow: none !important; color: #1f2937 !important; }
.bio-cf7-wrapper input[type="email"]:focus { border-color: #4bc1a7 !important; box-shadow: 0 0 0 3px rgba(75, 193, 167, 0.1) !important; }
.bio-cf7-wrapper input[type="submit"], .bio-btn-subscribe { width: 100% !important; padding: 12px !important; background: var(--bio-teal) !important; color: #fff !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; font-weight: 500 !important; font-family: var(--bio-font-sans) !important; transition: 0.2s !important; height: 42px !important; text-transform: none !important; margin-top: 0 !important; }
.bio-btn-subscribe:hover, .bio-cf7-wrapper input[type="submit"]:hover { background: var(--bio-teal-hover) !important; }
.bio-cf7-wrapper br { display: none !important; }
.bio-cf7-wrapper .wpcf7-spinner { position: absolute !important; visibility: hidden; }
.bio-cf7-wrapper form.submitting .wpcf7-spinner { visibility: visible; }

.bio-tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.bio-tag-item { display: inline-block; padding: 5px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 50px; font-size: 12px; color: #4b5563; text-decoration: none; transition: 0.2s; }
.bio-tag-item:hover { border-color: var(--bio-teal); color: var(--bio-teal); }

.bio-resource-list { list-style: none; padding: 0; margin: 0; }
.bio-resource-list li { margin-bottom: 10px; margin-left: 0px !important; }
.bio-resource-link { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; transition: transform 0.2s; line-height: 1.2; }
.bio-resource-link:hover { transform: translateX(5px); }
.bio-resource-link i { margin-top: 3px; color: #9ca3af; font-size: 16px; }
.bio-resource-link:hover i { color: var(--bio-teal); }
.bio-resource-link div strong { display: block; font-size: 14px; color: #1f2937; margin-bottom: 2px; }
.bio-resource-link:hover div strong { color: var(--bio-teal); }
.bio-resource-link div span { font-size: 12px; color: #9ca3af; }

@media (max-width: 991px) {
    .bio-layout-container { flex-direction: column; }
    .bio-sidebar-column { width: 100%; margin-top: 30px; }
    .bio-featured-inner { flex-direction: column; height: auto; }
}
@media (max-width: 600px) {
    .bio-blog-grid-list { grid-template-columns: 1fr; }
}

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

.bio-blog-grid-wrapper.bio-loading .bio-filter-row::after { content: ''; display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #f3f4f6; border-top-color: var(--bio-teal); animation: bio-spin 0.6s linear infinite; z-index: 999; }
.bio-blog-grid-wrapper.bio-loading .bio-layout-container { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; }
.bio-blog-grid-loadmore.is-loading { opacity: 0.5; pointer-events: none; }