/** * TravelPro Theme - Blog Styles * * @package TravelPro */ /* ========================================================================== Sticky Tab Navigation — Shared ========================================================================== */ /* Blank Tab Section Wrappers */ .tp-tab-section { scroll-margin-top: calc(var(--tp-header-height, 70px) + var(--tp-tab-nav-height, 52px) + 16px); min-height: 40px; padding: 0; margin: 0; } /* Content sections with anchor IDs */ .tp-content-section { padding: 0; margin: 0; } /* Tab Nav — White Card Bar (below header) */ .travelpro-tab-nav { position: sticky; top: var(--tp-header-height, 70px); z-index: 80; background: #ffffff; border-radius: 14px; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.07); margin: 20px auto; max-width: 1200px; overflow: hidden; } .tab-nav-inner { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 12px; } .tab-nav-inner::-webkit-scrollbar { display: none; } .tab-nav-list { display: flex; list-style: none; margin: 0; padding: 0; white-space: nowrap; gap: 4px; } .tab-nav-link { display: block; padding: 14px 24px; font-size: 14.5px; font-weight: 500; color: #555; text-decoration: none; transition: color 0.2s, background 0.2s; border-radius: 8px; letter-spacing: 0.01em; } .tab-nav-item.active .tab-nav-link { color: #1a4d2e; font-weight: 600; } .tab-nav-link:hover { color: #1a4d2e; background: rgba(26, 77, 46, 0.05); } /* When scrolled past — JS adds .tab-nav-stuck to */ body.tab-nav-stuck .travelpro-tab-nav { border-radius: 0; margin: 0; max-width: 100%; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } /* Tab Nav — Layout B (Frosted Glass Dark Bar) */ body.blog-layout-b .travelpro-tab-nav { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; margin: 0; max-width: 100%; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); } body.blog-layout-b .tab-nav-list { justify-content: center; } body.blog-layout-b .tab-nav-link { color: rgba(255, 255, 255, 0.6); font-size: 13px; letter-spacing: 0.03em; padding: 16px 24px; border-radius: 0; border-bottom: 2px solid transparent; transition: color 0.25s, border-color 0.25s; } body.blog-layout-b .tab-nav-item.active .tab-nav-link, body.blog-layout-b .tab-nav-link:hover { color: #ffffff; background: transparent; border-bottom-color: #f59e0b; } /* ========================================================================== Blog Archive ========================================================================== */ .blog-archive { padding: var(--spacing-xl) 0; } .blog-archive-header { text-align: center; padding: var(--spacing-xl) 0; background-color: var(--color-light); margin-bottom: var(--spacing-xl); } /* Blog Grid Layout */ .blog-grid, .posts-grid.layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } /* Blog List Layout */ .blog-list .post-card, .posts-grid.layout-list .post-card { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .blog-list .post-card-image, .posts-grid.layout-list .post-card-image { width: 350px; flex-shrink: 0; } .blog-list .post-card-content, .posts-grid.layout-list .post-card-content { flex: 1; } /* Blog Masonry Layout */ .blog-masonry, .posts-grid.layout-masonry { column-count: 3; column-gap: var(--spacing-lg); } .blog-masonry .post-card, .posts-grid.layout-masonry .post-card { break-inside: avoid; margin-bottom: var(--spacing-lg); } /* Post Card Link (wraps entire card) */ .post-card-link { display: block; text-decoration: none; color: inherit; } .post-card-link:hover { text-decoration: none; color: inherit; } /* Category pill in loop cards */ .post-category { display: inline-block; padding: 4px 12px; background-color: var(--color-primary, #2563eb); color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: var(--border-radius, 6px); margin-bottom: 8px; } /* Read More CTA */ .post-card-cta { display: inline-block; font-size: 14px; font-weight: 600; color: var(--color-primary, #2563eb); margin-top: 8px; } .post-card:hover .post-card-cta { text-decoration: underline; } /* ========================================================================== Post Card ========================================================================== */ .post-card { background-color: var(--color-white); border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); } .post-card-image { position: relative; overflow: hidden; } .post-card-image img { width: 100%; height: 220px; object-fit: cover; transition: transform var(--transition-slow); } .post-card:hover .post-card-image img { transform: scale(1.05); } .post-card-category { position: absolute; top: var(--spacing-md); left: var(--spacing-md); } .post-card-category a { display: inline-block; padding: 4px 12px; background-color: var(--color-primary); color: var(--color-white); font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: var(--border-radius); } .post-card-content { padding: var(--spacing-md); } .post-card-meta { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); font-size: var(--font-size-small); color: var(--color-gray); } .post-card-meta a { color: var(--color-gray); } .post-card-meta a:hover { color: var(--color-primary); } .post-card-meta i { margin-right: 4px; } .post-card-title { font-size: 20px; margin-bottom: var(--spacing-sm); line-height: 1.4; } .post-card-title a { color: var(--color-dark); } .post-card-title a:hover { color: var(--color-primary); } .post-card-excerpt { color: var(--color-gray-dark); margin-bottom: var(--spacing-md); line-height: 1.7; } .post-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-md); border-top: 1px solid var(--color-light); } .post-card-author { display: flex; align-items: center; gap: var(--spacing-sm); } .post-card-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .post-card-author-name { font-weight: 500; font-size: var(--font-size-small); } .post-card-readmore { font-weight: 600; font-size: var(--font-size-small); color: var(--color-primary); } /* ========================================================================== Blog Single ========================================================================== */ .single-post-header { padding: var(--spacing-xl) 0; background-color: var(--color-light); } .single-post-title { font-size: 38px; margin-bottom: var(--spacing-md); } .single-post-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); color: var(--color-gray); } .single-post-meta span { display: flex; align-items: center; gap: var(--spacing-xs); } .single-post-meta i { color: var(--color-primary); } .single-post-meta a { color: var(--color-gray); } .single-post-meta a:hover { color: var(--color-primary); } /* Post Content */ .single-post-content { padding: var(--spacing-xl) 0; } .post-content { max-width: 800px; margin: 0 auto; } .post-content p { font-size: 18px; line-height: 1.8; margin-bottom: var(--spacing-lg); } .post-content h2 { margin-top: var(--spacing-xl); } .post-content h3 { margin-top: var(--spacing-lg); } .post-content img { border-radius: var(--border-radius); margin: var(--spacing-lg) 0; } .post-content blockquote { border-left: 4px solid var(--color-primary); padding-left: var(--spacing-lg); margin: var(--spacing-lg) 0; font-style: italic; font-size: 20px; color: var(--color-gray-dark); } .post-content ul, .post-content ol { margin-bottom: var(--spacing-lg); padding-left: var(--spacing-lg); } .post-content li { margin-bottom: var(--spacing-sm); line-height: 1.7; } /* Featured Image */ .post-featured-image { margin: var(--spacing-xl) 0; } .post-featured-image img { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--border-radius-lg); } /* ========================================================================== Post Tags & Categories ========================================================================== */ .post-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); padding: var(--spacing-lg) 0; border-top: 1px solid var(--color-light); border-bottom: 1px solid var(--color-light); margin: var(--spacing-lg) 0; } .post-tags span { font-weight: 600; margin-right: var(--spacing-sm); } .post-tags a { display: inline-block; padding: 6px 14px; background-color: var(--color-light); color: var(--color-gray-dark); border-radius: var(--border-radius); font-size: var(--font-size-small); transition: all var(--transition-fast); } .post-tags a:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== Post Author Box ========================================================================== */ .author-box { display: flex; gap: var(--spacing-lg); padding: var(--spacing-lg); background-color: var(--color-light); border-radius: var(--border-radius-lg); margin: var(--spacing-xl) 0; } .author-avatar img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } .author-info { flex: 1; } .author-name { font-size: var(--font-size-h4); margin-bottom: var(--spacing-xs); } .author-bio { color: var(--color-gray-dark); line-height: 1.7; margin-bottom: var(--spacing-sm); } .author-social { display: flex; gap: var(--spacing-sm); } .author-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--color-white); border-radius: 50%; color: var(--color-gray); transition: all var(--transition-fast); } .author-social a:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== Post Navigation ========================================================================== */ .post-navigation { display: flex; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-lg) 0; border-top: 1px solid var(--color-light); } .post-nav-item { flex: 1; max-width: 45%; } .post-nav-item.next { text-align: right; } .post-nav-label { display: block; font-size: var(--font-size-small); color: var(--color-gray); margin-bottom: var(--spacing-xs); } .post-nav-title { font-weight: 600; color: var(--color-dark); transition: color var(--transition-fast); } .post-nav-title:hover { color: var(--color-primary); } /* ========================================================================== Related Posts ========================================================================== */ .related-posts { padding: var(--spacing-xl) 0; background-color: var(--color-light); } .related-posts-title { text-align: center; margin-bottom: var(--spacing-lg); } .related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } /* ========================================================================== Comments ========================================================================== */ .comments-section { padding: var(--spacing-xl) 0; } .comments-title { margin-bottom: var(--spacing-lg); } /* Comment List */ .comment-list { list-style: none; padding: 0; margin: 0; } .comment { padding: var(--spacing-lg) 0; border-bottom: 1px solid var(--color-light); } .comment-body { display: flex; gap: var(--spacing-md); } .comment-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .comment-content { flex: 1; } .comment-meta { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); } .comment-author { font-weight: 600; color: var(--color-dark); } .comment-date { font-size: var(--font-size-small); color: var(--color-gray); } .comment-text { line-height: 1.7; margin-bottom: var(--spacing-sm); } .comment-reply-link { font-size: var(--font-size-small); font-weight: 600; color: var(--color-primary); } /* Replies */ .children { list-style: none; padding-left: var(--spacing-xl); margin: 0; } /* Comment Form */ .comment-respond { padding: var(--spacing-lg); background-color: var(--color-light); border-radius: var(--border-radius-lg); margin-top: var(--spacing-xl); } .comment-reply-title { margin-bottom: var(--spacing-md); } .comment-form { display: grid; gap: var(--spacing-md); } .comment-form-author, .comment-form-email, .comment-form-url { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } .comment-form-comment { grid-column: span 3; } .comment-form .form-submit { grid-column: span 3; } /* ========================================================================== Sidebar Widgets ========================================================================== */ .widget { margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); background-color: var(--color-white); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); } .widget-title { font-size: 18px; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--color-primary); } /* Search Widget */ .widget_search form { display: flex; } .widget_search input[type="search"] { flex: 1; border-right: none; border-radius: var(--border-radius) 0 0 var(--border-radius); } .widget_search button { border-radius: 0 var(--border-radius) var(--border-radius) 0; } /* Recent Posts Widget */ .widget_recent_entries ul { list-style: none; padding: 0; margin: 0; } .widget_recent_entries li { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-light); } .widget_recent_entries li:last-child { border-bottom: none; } .widget_recent_entries a { color: var(--color-dark); font-weight: 500; } .widget_recent_entries a:hover { color: var(--color-primary); } .widget_recent_entries .post-date { display: block; font-size: var(--font-size-small); color: var(--color-gray); } /* Categories Widget */ .widget_categories ul { list-style: none; padding: 0; margin: 0; } .widget_categories li { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-light); display: flex; justify-content: space-between; } .widget_categories a { color: var(--color-dark); } .widget_categories a:hover { color: var(--color-primary); } /* Tag Cloud */ .widget_tag_cloud .tagcloud { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .widget_tag_cloud a { display: inline-block; padding: 6px 12px; background-color: var(--color-light); color: var(--color-gray-dark); border-radius: var(--border-radius); font-size: var(--font-size-small) !important; transition: all var(--transition-fast); } .widget_tag_cloud a:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== Pagination ========================================================================== */ .pagination { display: flex; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-xl) 0; } .pagination a, .pagination span { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; background-color: var(--color-white); border: 1px solid var(--color-light); border-radius: var(--border-radius); color: var(--color-dark); font-weight: 500; transition: all var(--transition-fast); } .pagination a:hover, .pagination .current { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== Layout A — Blog with Sidebar (Reference Style) ========================================================================== */ /* Page background */ .blog-layout-a { background: #f8f9fa; } /* ── Two-Column Grid Layout ── */ .blog-layout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 40px 40px 64px; align-items: start; } /* Main content column */ .blog-main-col { min-width: 0; } /* ── Post Header ── */ .blog-post-header { margin-bottom: 0; } .blog-post-header__accent { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #e53e3e, #ed8936, #ecc94b, #38a169, #3182ce, #805ad5); margin-bottom: 20px; } .blog-post-title { font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; color: #1a202c; line-height: 1.3; margin: 0 0 8px; } .blog-post-title__bar { width: 48px; height: 4px; background: #38a169; border-radius: 2px; margin-bottom: 20px; } /* ── Meta Pills ── */ .blog-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 0; } .blog-meta-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #4a5568; background: #f7fafc; border: 1px solid #e2e8f0; padding: 6px 14px; border-radius: 9999px; white-space: nowrap; } .blog-meta-pill .material-symbols-outlined { font-size: 16px !important; color: #38a169; } .blog-meta-link { color: #38a169; text-decoration: none; font-weight: 600; } .blog-meta-link:hover { text-decoration: underline; } /* ── Header Divider ── */ .blog-header-divider { border: none; border-top: 1px solid #e2e8f0; margin: 24px 0; } /* ── Featured Image (inline) ── */ .blog-featured-image { width: 100%; border-radius: 8px; overflow: hidden; margin-bottom: 32px; background: #e2e8f0; line-height: 0; } .blog-featured-img { width: 100%; height: auto; display: block; border-radius: 8px; } /* ── Entry Content ── */ .blog-entry-content { font-size: 16px; line-height: 1.75; color: #475569; } .blog-entry-content p { margin-bottom: 20px; } .blog-entry-content h2 { font-size: 22px; font-weight: 700; color: #0d1b12; margin: 40px 0 14px; display: flex; align-items: center; gap: 10px; } .blog-entry-content h2::before { content: ''; flex-shrink: 0; width: 4px; height: 24px; background: #11d452; border-radius: 9999px; } .blog-entry-content h3 { font-size: 20px; font-weight: 700; color: #0d1b12; margin: 32px 0 12px; display: flex; align-items: center; gap: 10px; } .blog-entry-content h3::before { content: ''; flex-shrink: 0; width: 4px; height: 20px; background: #11d452; border-radius: 9999px; } .blog-entry-content h4 { font-size: 17px; font-weight: 700; color: #0d1b12; margin: 24px 0 10px; } .blog-entry-content img { border-radius: 12px; max-width: 100%; height: auto; margin: 16px 0; } .blog-entry-content blockquote { border-left: 4px solid #11d452; padding: 16px 24px; margin: 24px 0; background: rgba(17, 212, 82, 0.04); border-radius: 0 12px 12px 0; color: #475569; font-style: italic; font-size: 17px; } .blog-entry-content ul, .blog-entry-content ol { padding-left: 24px; margin-bottom: 20px; } .blog-entry-content li { margin-bottom: 8px; line-height: 1.7; } /* Gutenberg content — info boxes */ .blog-entry-content .wp-block-quote, .blog-entry-content .has-background { border-radius: 12px; padding: 20px 24px; } /* Tables inside content */ .blog-entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin: 24px 0; font-size: 14px; } .blog-entry-content thead { background: #f8fafc; } .blog-entry-content thead th { padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; text-align: left; border-bottom: 1px solid #e2e8f0; } .blog-entry-content tbody td { padding: 14px 16px; color: #334155; border-bottom: 1px solid #f1f5f9; } .blog-entry-content tbody tr:last-child td { border-bottom: none; } .blog-entry-content tbody tr:hover { background: #f8fafc; } /* ── CTA Banner ── */ .blog-cta-banner { background: #fefce8; border: 2px dashed #facc15; border-radius: 12px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 36px 0; } .blog-cta-content { flex: 1; } .blog-cta-title { font-size: 18px; font-weight: 700; color: #854d0e; margin: 0 0 4px; } .blog-cta-sub { font-size: 14px; color: #a16207; margin: 0; } .blog-cta-btn { display: inline-block; background: #11d452; color: #0d1b12; font-size: 14px; font-weight: 700; padding: 12px 24px; border-radius: 10px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(17, 212, 82, 0.25); transition: transform 0.2s, box-shadow 0.2s; } .blog-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(17, 212, 82, 0.35); color: #0d1b12; } /* ── Tags ── */ .blog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 0; border-top: 1px solid #e2e8f0; margin-top: 32px; } .blog-tags-icon { font-size: 18px !important; color: #94a3b8; } .blog-tag-link { display: inline-block; padding: 6px 16px; background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9999px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; } .blog-tag-link:hover { background: #11d452; color: #0d1b12; border-color: #11d452; } /* ── Share ── */ .blog-share { padding: 20px 0; border-top: 1px solid #e2e8f0; } .blog-share-label { display: block; font-size: 14px; font-weight: 600; color: #0d1b12; margin-bottom: 12px; } .blog-share-links { display: flex; flex-wrap: wrap; gap: 10px; } .blog-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; color: #fff; transition: transform 0.2s, box-shadow 0.2s; } .blog-share-btn .material-symbols-outlined { font-size: 18px !important; } .blog-share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); color: #fff; } .blog-share--fb { background: #1877F2; } .blog-share--tw { background: #1DA1F2; } .blog-share--wa { background: #25D366; } /* ── Author Card ── */ .blog-author-card { display: flex; gap: 20px; padding: 28px; background: #fff; border-radius: 12px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; margin: 32px 0; } .blog-author-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } .blog-author-label { font-size: 12px; font-weight: 500; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; display: block; } .blog-author-name { font-size: 18px; font-weight: 700; color: #0d1b12; margin: 0 0 6px; } .blog-author-bio { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0; } /* ── Comments inside Layout A ── */ .blog-main-col .comments-section, .blog-main-col .comment-respond { background: #fff; border-radius: 12px; padding: 28px; border: 1px solid #e2e8f0; margin-top: 24px; } /* Section heading accents — Gutenberg Section blocks */ .blog-main-col .section-heading-a { font-size: 22px; font-weight: 700; color: #0d1b12; margin-bottom: 20px; padding-bottom: 0; border-bottom: none; display: flex; align-items: center; gap: 10px; } .blog-main-col .section-heading-a::before { content: ''; flex-shrink: 0; width: 4px; height: 24px; background: #11d452; border-radius: 9999px; } /* ========================================================================== Sidebar — Blog & Layout B ========================================================================== */ /* Sidebar column */ .blog-sidebar-col { min-width: 0; } .blog-sidebar-sticky { position: sticky; top: calc(var(--tp-header-height, 70px) + var(--tp-tab-nav-height, 52px) + 20px); display: flex; flex-direction: column; gap: 24px; } /* Sidebar Widget Base */ .sidebar-widget { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; } .sidebar-widget__title { font-size: 16px; font-weight: 700; color: #0d1b12; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #11d452; display: flex; align-items: center; gap: 8px; } /* Quick Search Widget — styles moved to quick-search.css (globally loaded) */ /* Recent Posts Widget */ .sidebar-recent-list { list-style: none; margin: 0; padding: 0; } .sidebar-recent-item { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; } .sidebar-recent-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .sidebar-recent-link { display: flex; gap: 12px; text-decoration: none; align-items: center; transition: opacity 0.2s; } .sidebar-recent-link:hover { opacity: 0.85; } .sidebar-recent-thumb { flex-shrink: 0; width: 64px; height: 52px; border-radius: 8px; overflow: hidden; } .sidebar-recent-thumb img { width: 100%; height: 100%; object-fit: cover; } .sidebar-recent-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sidebar-recent-title { font-size: 14px; font-weight: 600; color: #0d1b12; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-recent-date { font-size: 12px; color: #94a3b8; } /* Categories Widget */ .sidebar-cat-list { display: flex; flex-direction: column; gap: 0; } .sidebar-cat-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; text-decoration: none; color: #475569; font-size: 14px; font-weight: 500; border-bottom: 1px solid #f1f5f9; transition: color 0.2s; } .sidebar-cat-item:last-child { border-bottom: none; } .sidebar-cat-item:hover { color: #11d452; } .sidebar-cat-count { background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 9999px; min-width: 28px; text-align: center; } /* ── Responsive — Layout A Grid ── */ @media (max-width: 1024px) { .blog-layout-grid { grid-template-columns: 1fr 300px; gap: 28px; padding: 32px 24px 48px; } } @media (max-width: 768px) { .blog-layout-grid { grid-template-columns: 1fr; gap: 32px; padding: 24px 16px 48px; } .blog-sidebar-sticky { position: static; } .blog-post-title { font-size: 22px; } .blog-cta-banner { flex-direction: column; text-align: center; padding: 24px 20px; } .blog-author-card { flex-direction: column; align-items: center; text-align: center; } .blog-share-links { justify-content: center; } } /* ========================================================================== Layout B — Premium Magazine (Full-Width) ========================================================================== */ /* Hero */ .layout-b-hero { position: relative; height: 560px; overflow: hidden; margin-bottom: 0; } .layout-b-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); transition: transform 8s ease; } .layout-b-hero:hover .layout-b-hero-bg { transform: scale(1); } .layout-b-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.15) 100%); } .layout-b-hero-content { position: absolute; bottom: 48px; left: 0; right: 0; max-width: 900px; margin: 0 auto; padding: 0 40px; z-index: 2; } .hero-category-pill { display: inline-block; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: 9999px; margin-bottom: 16px; } .layout-b-title { font-size: clamp(32px, 5vw, 54px); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; } .layout-b-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.7); } .meta-dot { opacity: 0.4; } /* Wide content wrapper — now handled by blog-layout-grid */ .layout-b-content { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .layout-b-grid { /* Override for layout-b grid */ padding-top: 40px; } .layout-b-article { padding: 0 0 48px; } /* Drop cap */ .layout-b-article .entry-content>p:first-of-type::first-letter { font-size: 4.5em; font-weight: 800; float: left; line-height: 0.75; margin: 0.05em 0.12em 0 0; color: #1a4d2e; } /* Section styling — Layout B */ .layout-b-section { padding: 80px 0; border-top: 1px solid #f0f0f0; } .layout-b-section--dark { background: #0f172a; padding: 80px 40px; margin: 0 -40px; } .section-eyebrow-b { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f59e0b; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .section-eyebrow-b::before { content: ''; width: 24px; height: 1px; background: #f59e0b; } .section-title-b { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin-bottom: 40px; } .layout-b-section--dark .section-title-b { color: #fff; } /* 3-col card grid */ .layout-b-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Season cards */ .season-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .season-card { background: #fff; border-radius: 14px; padding: 28px 24px; border-bottom: 4px solid; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); transition: transform 0.25s; } .season-card:hover { transform: translateY(-4px); } .season-card--peak { border-bottom-color: #2196f3; } .season-card--summer { border-bottom-color: #ff9800; } .season-card--monsoon { border-bottom-color: #4caf50; } .season-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } .season-card-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .season-card-desc { font-size: 13.5px; color: #666; line-height: 1.65; } /* Masonry image grid */ .masonry-grid { columns: 3; column-gap: 12px; } .masonry-item { break-inside: avoid; margin-bottom: 12px; border-radius: 10px; overflow: hidden; } .masonry-item img { width: 100%; display: block; transition: transform 0.4s; } .masonry-item:hover img { transform: scale(1.04); } /* Transport tabs */ .transport-tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; } .transport-tab { padding: 9px 20px; border-radius: 9999px; border: 1.5px solid #e0e0e0; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; transition: all 0.2s; font-family: inherit; } .transport-tab.active { background: #0f172a; color: #fff; border-color: #0f172a; } .transport-content { display: none; } .transport-content.active { display: block; } /* Horizontal scroll collection */ .collection-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px; scrollbar-width: thin; scroll-snap-type: x mandatory; } .collection-card { flex: 0 0 280px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: transform 0.25s; } .collection-card:hover { transform: translateY(-4px); } @media (max-width: 900px) { .layout-b-card-grid { grid-template-columns: 1fr 1fr; } .season-cards-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .masonry-grid { columns: 2; } } @media (max-width: 600px) { .layout-b-card-grid { grid-template-columns: 1fr; } .season-cards-row { grid-template-columns: 1fr; } .layout-b-content { padding: 0 20px; } .layout-b-hero { height: 420px; } } @media (max-width: 480px) { .masonry-grid { columns: 1; } } /* ========================================================================== Gutenberg Block Styles — Places, Tour, Destination, Map, Lead Form ========================================================================== */ /* ── Places Card Grid ── */ .tp-places-grid { display: grid; gap: 24px; } .tp-places-grid--cols-1 { grid-template-columns: 1fr; } .tp-places-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .tp-places-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .tp-places-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } .tp-place-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07); transition: transform 0.25s, box-shadow 0.25s; } .tp-place-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } .tp-place-card__image-wrap { position: relative; height: 220px; } .tp-place-card__image { width: 100%; height: 100%; object-fit: cover; } .tp-place-card__badge { position: absolute; top: 12px; left: 12px; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 9999px; } .tp-place-card__rating { position: absolute; top: 12px; right: 12px; background: #2e7d32; color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 9999px; } .tp-place-card__body { padding: 20px; } .tp-place-card__title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; } .tp-place-card__num { color: #1a1a1a; } .tp-place-card__meta { font-size: 13px; color: #555; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .tp-place-card__desc { font-size: 13.5px; line-height: 1.65; color: #555; margin: 12px 0 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .tp-place-card__btn { display: inline-block; background: #e53935; color: #fff; padding: 10px 24px; border-radius: 9999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s; } .tp-place-card__btn:hover { background: #b71c1c; } @media (max-width: 768px) { .tp-places-grid--cols-2, .tp-places-grid--cols-3, .tp-places-grid--cols-4 { grid-template-columns: 1fr; } } /* ── Places Slider ── */ .tp-places-slider { position: relative; overflow: hidden; touch-action: pan-y; } .tp-places-slider__track { display: flex; gap: 14px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .tp-places-slider .tp-place-card { flex: 0 0 calc(50% - 7px); } .tp-places-slider__prev, .tp-places-slider__next { position: absolute; top: 40%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid #e0e0e0; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 10; transition: all 0.2s; } .tp-places-slider__prev { left: 6px; } .tp-places-slider__next { right: 6px; } .tp-places-slider__prev:hover, .tp-places-slider__next:hover { background: #1565c0; color: #fff; border-color: #1565c0; } @media (max-width: 768px) { .tp-places-slider .tp-place-card { flex: 0 0 calc(100% - 0px); } .tp-places-slider__prev, .tp-places-slider__next { width: 30px; height: 30px; font-size: 14px; } .tp-places-slider__prev { left: 4px; } .tp-places-slider__next { right: 4px; } } /* ── Tour Card Grid ── */ .tp-tour-grid { display: grid; gap: 24px; max-width: 1080px; margin-left: auto; margin-right: auto; } .tp-tour-grid--cols-1 { grid-template-columns: 1fr; max-width: 380px; } .tp-tour-grid--cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; } .tp-tour-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .tp-tour-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07); transition: transform 0.25s, box-shadow 0.25s; max-width: 340px; width: 100%; } .tp-tour-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } .tp-tour-card__image-wrap { position: relative; height: 200px; } .tp-tour-card__image { width: 100%; height: 100%; object-fit: cover; } .tp-tour-card__discount { position: absolute; top: 12px; right: 12px; background: #e53935; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 9999px; } .tp-tour-card__body { padding: 18px 20px; } .tp-tour-card__title { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.35; margin-bottom: 10px; } .tp-tour-card__meta { font-size: 13px; color: #555; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .tp-tour-card__divider { border-top: 1.5px dashed #ececec; margin: 14px 0; } .tp-tour-card__footer { display: flex; justify-content: space-between; align-items: flex-end; } .tp-tour-card__price { font-size: 22px; font-weight: 800; color: #1565c0; display: block; } .tp-tour-card__old-price { font-size: 13px; color: #999; text-decoration: line-through; display: block; } .tp-tour-card__per { font-size: 11px; color: #999; } .tp-tour-card__btn { background: #1565c0; color: #fff; padding: 10px 20px; border-radius: 9999px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.2s; white-space: nowrap; } .tp-tour-card__btn:hover { background: #0d47a1; } /* Slider */ .tp-tour-slider { position: relative; overflow: hidden; touch-action: pan-y; } .tp-slider-track { display: flex; gap: 24px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .tp-tour-slider .tp-tour-card { flex: 0 0 calc(50% - 12px); max-width: none; } .tp-slider-prev, .tp-slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid #e0e0e0; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); transition: all 0.2s; z-index: 10; } .tp-slider-prev { left: 8px; } .tp-slider-next { right: 8px; } .tp-slider-prev:hover, .tp-slider-next:hover { background: #1565c0; color: #fff; border-color: #1565c0; } @media (max-width: 768px) { .tp-tour-grid--cols-2, .tp-tour-grid--cols-3 { grid-template-columns: 1fr; } .tp-tour-card { max-width: 100%; } .tp-tour-slider .tp-tour-card { flex: 0 0 calc(100% - 0px); } .tp-slider-prev, .tp-slider-next { width: 34px; height: 34px; font-size: 16px; } .tp-slider-prev { left: 4px; } .tp-slider-next { right: 4px; } } /* ── Destination Card Grid ── */ .tp-dest-grid { display: grid; gap: 20px; } .tp-dest-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .tp-dest-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .tp-dest-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } .tp-dest-grid--cols-5 { grid-template-columns: repeat(5, 1fr); } .tp-dest-card { overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: transform 0.25s, box-shadow 0.25s; } .tp-dest-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } .tp-dest-card__link { display: block; text-decoration: none; } .tp-dest-card__image { width: 100%; object-fit: cover; display: block; transition: transform 0.4s; } .tp-dest-card:hover .tp-dest-card__image { transform: scale(1.05); } .tp-dest-card__name { font-size: 15px; font-weight: 700; padding: 10px 4px 4px; transition: opacity 0.2s; } .tp-dest-card:hover .tp-dest-card__name { opacity: 0.8; } /* Destination Slider */ .tp-dest-slider { position: relative; overflow: hidden; touch-action: pan-y; } .tp-dest-slider__track { display: flex; gap: 20px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .tp-dest-slider .tp-dest-card { flex: 0 0 calc(33.333% - 14px); } .tp-dest-slider__prev, .tp-dest-slider__next { position: absolute; top: 40%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid #e0e0e0; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 10; transition: all 0.2s; } .tp-dest-slider__prev { left: 6px; } .tp-dest-slider__next { right: 6px; } .tp-dest-slider__prev:hover, .tp-dest-slider__next:hover { background: #1565c0; color: #fff; border-color: #1565c0; } @media (max-width: 768px) { .tp-dest-grid--cols-3, .tp-dest-grid--cols-4, .tp-dest-grid--cols-5 { grid-template-columns: repeat(2, 1fr); } .tp-dest-slider .tp-dest-card { flex: 0 0 calc(50% - 10px); } } @media (max-width: 480px) { .tp-dest-grid { grid-template-columns: 1fr; } .tp-dest-slider .tp-dest-card { flex: 0 0 100%; } .tp-dest-slider__prev, .tp-dest-slider__next { width: 30px; height: 30px; font-size: 14px; } .tp-dest-slider__prev { left: 4px; } .tp-dest-slider__next { right: 4px; } } /* ── Single Map ── */ .tp-map-wrap { width: 100%; } .tp-map-wrap iframe { display: block; width: 100%; } /* Map Listing */ .tp-map-listing { display: flex; flex-direction: column; gap: 20px; } .tp-map-listing__map { position: relative; } .tp-map-location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tp-map-location-slider { position: relative; overflow: hidden; } .tp-map-location-track { display: flex; gap: 12px; transition: transform 0.4s; } .tp-map-location-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; user-select: none; } .tp-map-location-card:hover { border-color: #1565c0; box-shadow: 0 4px 16px rgba(21, 101, 192, 0.12); } .tp-map-location-card.active { border-color: #1565c0; background: #e3f2fd; } .tp-map-location-icon { font-size: 22px; flex-shrink: 0; } .tp-map-location-info strong { display: block; font-size: 14px; font-weight: 700; color: #1a1a1a; } .tp-map-location-info span { display: block; font-size: 12px; color: #666; margin-top: 2px; } .tp-map-prev, .tp-map-next { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid #e0e0e0; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 5; transition: all 0.2s; } .tp-map-prev { left: -16px; } .tp-map-next { right: -16px; } .tp-map-prev:hover, .tp-map-next:hover { background: #1565c0; color: #fff; border-color: #1565c0; } @media (max-width: 768px) { .tp-map-location-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .tp-map-location-grid { grid-template-columns: 1fr; } } /* ── Lead Capture Form ── */ .tp-lead-form { background: #fff; border-radius: 14px; padding: 32px 28px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .tp-lead-form__heading { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; } .tp-lead-form__sub { font-size: 14px; color: #666; margin: 0 0 24px; line-height: 1.5; } .tp-lead-form__group { margin-bottom: 14px; } .tp-lead-form__label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 5px; } .tp-lead-form__input { width: 100%; padding: 11px 14px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #333; outline: none; transition: border-color 0.2s; font-family: inherit; box-sizing: border-box; } .tp-lead-form__input:focus { border-color: #1565c0; } .tp-lead-form__btn { width: 100%; padding: 13px; background: #1565c0; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px; font-family: inherit; transition: background 0.2s; } .tp-lead-form__btn:hover { background: #0d47a1; } .tp-lead-form__btn:disabled { opacity: 0.6; cursor: not-allowed; } .tp-lead-form__msg { margin-top: 12px; font-size: 14px; border-radius: 8px; padding: 0; } .tp-lead-form__msg--success { color: #2e7d32; background: #e8f5e9; padding: 10px 14px; } .tp-lead-form__msg--error { color: #c62828; background: #ffebee; padding: 10px 14px; } /* Inline form variant */ .tp-lead-form--inline .tp-lead-form__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .tp-lead-form--inline .tp-lead-form__group { flex: 1 1 220px; margin-bottom: 0; } .tp-lead-form--inline .tp-lead-form__btn { flex: 0 0 auto; width: auto; padding: 11px 28px; } .tp-no-results { text-align: center; padding: 40px 20px; font-size: 15px; color: #888; } /* ========================================================================== Blog Cards Block (travelpro/blog-cards) ========================================================================== */ .tp-blog-cards--grid { display: grid; gap: 24px; } .tp-blog-cards--cols-1 { grid-template-columns: 1fr; } .tp-blog-cards--cols-2 { grid-template-columns: repeat(2, 1fr); } .tp-blog-cards--cols-3 { grid-template-columns: repeat(3, 1fr); } .tp-blog-cards--cols-4 { grid-template-columns: repeat(4, 1fr); } .tp-blog-card-item { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); transition: transform 0.35s cubic-bezier(.4, 0, .2, 1), box-shadow 0.35s cubic-bezier(.4, 0, .2, 1); position: relative; } .tp-blog-card-item:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13); } .tp-blog-card-item__link { text-decoration: none; color: inherit; display: block; } /* ── Image ── */ .tp-blog-card-item__image-wrap { position: relative; height: 220px; overflow: hidden; } .tp-blog-card-item__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.4, 0, .2, 1); } .tp-blog-card-item:hover .tp-blog-card-item__image { transform: scale(1.08); } /* ── Body ── */ .tp-blog-card-item__body { padding: 18px 22px 20px; } .tp-blog-card-item__title { font-size: 17px; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tp-blog-card-item__excerpt { font-size: 13.5px; color: #555; line-height: 1.55; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tp-blog-card-item__read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #1565c0; text-transform: uppercase; letter-spacing: 0.5px; transition: gap 0.25s ease; } .tp-blog-card-item:hover .tp-blog-card-item__read-more { gap: 8px; } .tp-blog-card-item__read-more .tp-arrow { font-size: 15px; transition: transform 0.25s ease; } .tp-blog-card-item:hover .tp-blog-card-item__read-more .tp-arrow { transform: translateX(3px); } /* ── Overlay Style ── */ .tp-blog-cards--overlay .tp-blog-card-item__image-wrap { height: 280px; } .tp-blog-cards--overlay .tp-blog-card-item__image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%); pointer-events: none; z-index: 1; } .tp-blog-cards--overlay .tp-blog-card-item__body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 20px 22px; } .tp-blog-cards--overlay .tp-blog-card-item__title { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .tp-blog-cards--overlay .tp-blog-card-item__excerpt { color: rgba(255, 255, 255, 0.85); } .tp-blog-cards--overlay .tp-blog-card-item__read-more { color: #90caf9; } .tp-blog-cards--overlay .tp-blog-card-item { border-radius: 14px; } .tp-blog-cards--overlay .tp-blog-card-item__link { position: relative; display: block; } /* ── Classic Style (matches default) ── */ .tp-blog-cards--classic .tp-blog-card-item__image-wrap { height: 200px; } .tp-blog-cards--classic .tp-blog-card-item__body { border-top: 3px solid #1565c0; } /* ── Slider ── */ .tp-blog-cards--slider { position: relative; overflow: hidden; padding: 0 36px; } .tp-blog-cards--slider>.tp-slider-track { display: flex; gap: 24px; transition: transform 0.4s cubic-bezier(.4, 0, .2, 1); } .tp-blog-cards--slider .tp-blog-card-item { flex: 0 0 calc(33.333% - 16px); min-width: 260px; } @media (max-width: 1024px) { .tp-blog-cards--slider .tp-blog-card-item { flex: 0 0 calc(50% - 12px); } } /* ── Responsive ── */ @media (max-width: 768px) { .tp-blog-cards--cols-3, .tp-blog-cards--cols-4 { grid-template-columns: repeat(2, 1fr); } .tp-blog-cards--overlay .tp-blog-card-item__image-wrap { height: 220px; } } @media (max-width: 480px) { .tp-blog-cards--grid { grid-template-columns: 1fr; } .tp-blog-cards--slider .tp-blog-card-item { flex: 0 0 calc(100% - 8px); min-width: 0; } .tp-blog-cards--overlay .tp-blog-card-item__image-wrap { height: 200px; } }