/* ==========================================================================
   Alternivite - Resources Page Styles
   ========================================================================== */

/* Hero */
.res-hero {
   padding-top: calc(var(--nav-height) + var(--space-16));
   padding-bottom: var(--space-8);
   text-align: center;
}

.res-hero-content {
   max-width: 680px;
   margin: 0 auto;
}

.res-hero-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-4);
   background: var(--color-primary-50);
   color: var(--color-primary-700);
   border: 1px solid var(--color-primary-200);
   border-radius: var(--radius-full);
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   margin-bottom: var(--space-6);
}

[data-theme="dark"] .res-hero-badge {
   background: rgba(99, 102, 241, 0.12);
   border-color: rgba(99, 102, 241, 0.25);
   color: var(--color-primary-400);
}

.res-hero-title {
   font-size: var(--text-4xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   line-height: var(--leading-tight);
   margin-bottom: var(--space-4);
}

.res-hero-text {
   font-size: var(--text-lg);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-8);
}

.res-hero-search {
   max-width: 520px;
   margin: 0 auto;
   position: relative;
}

.res-hero-search-input {
   width: 100%;
   padding: var(--space-3) var(--space-4) var(--space-3) 48px;
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   font-size: var(--text-base);
   color: var(--text-primary);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
}

.res-hero-search-input::placeholder { color: var(--text-tertiary); }
.res-hero-search-input:focus { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }

.res-hero-search-icon {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-tertiary);
   pointer-events: none;
}

@media (min-width: 768px) {
   .res-hero-title { font-size: var(--text-5xl); }
}

/* Filter Nav */
.res-filter {
   padding: var(--space-4) 0 var(--space-12);
   position: sticky;
   top: var(--nav-height);
   z-index: var(--z-sticky);
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border-primary);
}

.res-filter-track {
   display: flex;
   gap: var(--space-2);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   padding-bottom: var(--space-1);
}

.res-filter-track::-webkit-scrollbar { display: none; }

.res-filter-link {
   flex-shrink: 0;
   padding: var(--space-2) var(--space-4);
   border-radius: var(--radius-full);
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--text-secondary);
   background: transparent;
   border: 1px solid transparent;
   text-decoration: none;
   white-space: nowrap;
   transition: all 0.2s;
}

.res-filter-link:hover {
   color: var(--text-primary);
   background: var(--bg-secondary);
}

.res-filter-link--active,
.res-filter-link[aria-current="true"] {
   color: var(--color-primary-700);
   background: var(--color-primary-50);
   border-color: var(--color-primary-200);
}

[data-theme="dark"] .res-filter-link--active,
[data-theme="dark"] .res-filter-link[aria-current="true"] {
   color: var(--color-primary-400);
   background: rgba(99, 102, 241, 0.12);
   border-color: rgba(99, 102, 241, 0.25);
}

/* Section */
.res-section {
   padding: var(--space-16) 0;
   scroll-margin-top: calc(var(--nav-height) + 48px);
}

.res-section + .res-section {
   border-top: 1px solid var(--border-primary);
}

.res-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-8);
   gap: var(--space-4);
   flex-wrap: wrap;
}

.res-section-header-left {
   display: flex;
   align-items: center;
   gap: var(--space-4);
}

.res-section-icon {
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-lg);
   flex-shrink: 0;
}

.res-section-icon--blue { background: var(--color-primary-100); color: var(--color-primary-600); }
.res-section-icon--purple { background: #f3e8ff; color: #7c3aed; }
.res-section-icon--green { background: #dcfce7; color: #16a34a; }
.res-section-icon--amber { background: #fef3c7; color: #d97706; }
.res-section-icon--red { background: #fee2e2; color: #dc2626; }
.res-section-icon--teal { background: #ccfbf1; color: #0d9488; }
.res-section-icon--pink { background: #fce7f3; color: #db2777; }

[data-theme="dark"] .res-section-icon--blue { background: rgba(99, 102, 241, 0.15); color: var(--color-primary-400); }
[data-theme="dark"] .res-section-icon--purple { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }
[data-theme="dark"] .res-section-icon--green { background: rgba(22, 163, 74, 0.15); color: #4ade80; }
[data-theme="dark"] .res-section-icon--amber { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }
[data-theme="dark"] .res-section-icon--red { background: rgba(220, 38, 38, 0.15); color: #f87171; }
[data-theme="dark"] .res-section-icon--teal { background: rgba(13, 148, 136, 0.15); color: #5eead4; }
[data-theme="dark"] .res-section-icon--pink { background: rgba(219, 39, 119, 0.15); color: #f472b6; }

.res-section-title {
   font-size: var(--text-xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
}

.res-section-subtitle {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   margin-top: var(--space-1);
}

.res-section-link {
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--color-primary-600);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
   white-space: nowrap;
}

[data-theme="dark"] .res-section-link { color: var(--color-primary-400); }
.res-section-link:hover { text-decoration: underline; }

/* Card Grid */
.res-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-6);
}

@media (min-width: 640px) {
   .res-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
   .res-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Resource Card */
.res-card {
   display: flex;
   flex-direction: column;
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-xl);
   padding: var(--space-6);
   text-decoration: none;
   transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.res-card:hover {
   border-color: var(--color-primary-300);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}

.res-card:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
}

.res-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-3);
   margin-bottom: var(--space-4);
}

.res-card-icon {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-lg);
   flex-shrink: 0;
}

.res-card-icon--blue { background: var(--color-primary-100); color: var(--color-primary-600); }
.res-card-icon--purple { background: #f3e8ff; color: #7c3aed; }
.res-card-icon--green { background: #dcfce7; color: #16a34a; }
.res-card-icon--amber { background: #fef3c7; color: #d97706; }
.res-card-icon--red { background: #fee2e2; color: #dc2626; }
.res-card-icon--teal { background: #ccfbf1; color: #0d9488; }
.res-card-icon--pink { background: #fce7f3; color: #db2777; }

[data-theme="dark"] .res-card-icon--blue { background: rgba(99, 102, 241, 0.15); color: var(--color-primary-400); }
[data-theme="dark"] .res-card-icon--purple { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }
[data-theme="dark"] .res-card-icon--green { background: rgba(22, 163, 74, 0.15); color: #4ade80; }
[data-theme="dark"] .res-card-icon--amber { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }
[data-theme="dark"] .res-card-icon--red { background: rgba(220, 38, 38, 0.15); color: #f87171; }
[data-theme="dark"] .res-card-icon--teal { background: rgba(13, 148, 136, 0.15); color: #5eead4; }
[data-theme="dark"] .res-card-icon--pink { background: rgba(219, 39, 119, 0.15); color: #f472b6; }

.res-card-badge {
   padding: var(--space-1) var(--space-3);
   border-radius: var(--radius-full);
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   white-space: nowrap;
}

.res-card-badge--guide { background: var(--color-primary-100); color: var(--color-primary-700); }
.res-card-badge--whitepaper { background: #f3e8ff; color: #7c3aed; }
.res-card-badge--case { background: #dcfce7; color: #16a34a; }
.res-card-badge--blog { background: #fef3c7; color: #d97706; }
.res-card-badge--doc { background: #ccfbf1; color: #0d9488; }
.res-card-badge--video { background: #fee2e2; color: #dc2626; }
.res-card-badge--download { background: #fce7f3; color: #db2777; }

[data-theme="dark"] .res-card-badge--guide { background: rgba(99, 102, 241, 0.15); color: var(--color-primary-400); }
[data-theme="dark"] .res-card-badge--whitepaper { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }
[data-theme="dark"] .res-card-badge--case { background: rgba(22, 163, 74, 0.15); color: #4ade80; }
[data-theme="dark"] .res-card-badge--blog { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }
[data-theme="dark"] .res-card-badge--doc { background: rgba(13, 148, 136, 0.15); color: #5eead4; }
[data-theme="dark"] .res-card-badge--video { background: rgba(220, 38, 38, 0.15); color: #f87171; }
[data-theme="dark"] .res-card-badge--download { background: rgba(219, 39, 119, 0.15); color: #f472b6; }

.res-card-title {
   font-size: var(--text-base);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   line-height: var(--leading-snug);
   margin-bottom: var(--space-2);
}

.res-card:hover .res-card-title { color: var(--color-primary-600); }
[data-theme="dark"] .res-card:hover .res-card-title { color: var(--color-primary-400); }

.res-card-desc {
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-4);
   flex: 1;
}

.res-card-meta {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   padding-top: var(--space-4);
   border-top: 1px solid var(--border-primary);
}

.res-card-meta-item {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
}

.res-card-meta-item svg {
   flex-shrink: 0;
}

.res-card-arrow {
   margin-left: auto;
   color: var(--text-tertiary);
   transition: color 0.2s, transform 0.2s;
}

.res-card:hover .res-card-arrow {
   color: var(--color-primary-500);
   transform: translateX(3px);
}

/* Video Card Variant */
.res-card--video .res-card-thumb {
   width: 100%;
   aspect-ratio: 16 / 9;
   background: var(--bg-secondary);
   border-radius: var(--radius-lg);
   margin-bottom: var(--space-4);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

.res-card-thumb-play {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary-600);
   color: white;
   border-radius: 50%;
   transition: transform 0.2s;
}

.res-card--video:hover .res-card-thumb-play { transform: scale(1.1); }

.res-card-thumb-duration {
   position: absolute;
   bottom: var(--space-2);
   right: var(--space-2);
   padding: 2px var(--space-2);
   background: rgba(0, 0, 0, 0.75);
   color: white;
   border-radius: var(--radius-sm);
   font-size: var(--text-xs);
   font-variant-numeric: tabular-nums;
}

/* Download Card Variant */
.res-card--download {
   flex-direction: row;
   align-items: center;
   gap: var(--space-5);
}

@media (max-width: 639px) {
   .res-card--download { flex-direction: column; align-items: flex-start; }
}

.res-card--download .res-card-icon {
   width: 56px;
   height: 56px;
}

.res-card--download .res-card-body { flex: 1; }

.res-card--download .res-card-meta {
   border-top: none;
   padding-top: 0;
   margin-top: auto;
}

/* Newsletter */
.res-newsletter {
   padding: var(--space-16) 0;
}

.res-newsletter-box {
   padding: var(--space-12);
   background: linear-gradient(135deg, var(--color-primary-50), #ede9fe);
   border: 1px solid var(--color-primary-200);
   border-radius: var(--radius-xl);
   text-align: center;
}

[data-theme="dark"] .res-newsletter-box {
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
   border-color: rgba(99, 102, 241, 0.3);
}

.res-newsletter-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   background: var(--color-primary-100);
   color: var(--color-primary-600);
   border-radius: 50%;
   margin-bottom: var(--space-6);
}

[data-theme="dark"] .res-newsletter-icon {
   background: rgba(99, 102, 241, 0.2);
   color: var(--color-primary-400);
}

.res-newsletter-title {
   font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
   .res-newsletter-title { font-size: var(--text-3xl); }
}

.res-newsletter-text {
   font-size: var(--text-base);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   max-width: 480px;
   margin: 0 auto var(--space-8);
}

.res-newsletter-form {
   display: flex;
   gap: var(--space-3);
   max-width: 440px;
   margin: 0 auto;
}

.res-newsletter-input {
   flex: 1;
   padding: var(--space-3) var(--space-4);
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   color: var(--text-primary);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
}

.res-newsletter-input::placeholder { color: var(--text-tertiary); }
.res-newsletter-input:focus { border-color: var(--color-primary-400); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }

.res-newsletter-note {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   margin-top: var(--space-3);
}

@media (max-width: 480px) {
   .res-newsletter-form { flex-direction: column; }
   .res-newsletter-box { padding: var(--space-8) var(--space-5); }
}

/* Responsive */
@media (max-width: 640px) {
   .res-hero { padding-top: calc(var(--nav-height) + var(--space-8)); }
   .res-hero-title { font-size: var(--text-2xl); }
   .res-hero-text { font-size: var(--text-base); }
   .res-section { padding: var(--space-10) 0; }
   .res-section-header { flex-direction: column; align-items: flex-start; }
}