:root { --text-primary: #11151c; --text-secondary: #505050; --text-light: #999999; --text-inverse: #ffffff; --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-tertiary: #fafafa; --border-color: #dddddd; --border-light: #f0f0f0; --accent-color: #2d5c86; --accent-dark: #2a3f5a; --accent-light: rgba(45, 92, 134, 0.08); --error-color: #dc2626; --success-color: #059669; --warning-color: #f59e0b; --link-color: var(--accent-color); --link-hover: var(--accent-dark); --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --hh-container-padding: var(--spacing-sm); --hh-grid-gap: var(--spacing-md); --hh-default-bg-color: var(--bg-primary); --hh-default-font-color: var(--text-primary); --hh-primary: var(--accent-color); --hh-secondary: var(--accent-dark); --hh-accent: var(--bg-secondary); --hh-accent-dark: var(--border-color); --hh-accent-darker: var(--text-secondary); --primary-font: "Montserrat", sans-serif; --secondary-font: "Montserrat", sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --hh-font-size: var(--font-size-base); --hh-h1-size: var(--font-size-2xl); --hh-h2-size: var(--font-size-xl); --hh-h3-size: 1.17em; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 700; --line-height-base: 1.5; --line-height-heading: 1; --hh-primarybutton-padding: 11px; --hh-primarybutton-text-color: var(--text-inverse); --hh-primarybutton-icon-color: var(--text-inverse); --hh-primarybuttonhover-icon-color: var(--accent-color); --hh-primarybuttonhover-text-color: var(--accent-color); --hh-secondarybutton-text-color: var(--text-inverse); --hh-secondarybutton-icon-color: var(--text-inverse); --hh-secondarybuttonhover-icon-color: var(--accent-dark); --hh-secondarybuttonhover-text-color: var(--accent-dark); --site-width: 1290px; --sidebar-width: 280px; --max-read-width: 65ch; --thumbnail-size: 250px; --radius-sm: 3px; --radius-base: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 50%; --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15); --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.25); --transition: all 0.3s ease; --transition-fast: all 0.15s ease; --transition-slow: all 0.5s ease; --duration-base: 0.3s; --duration-fast: 0.15s; --duration-slow: 0.5s; --easing-ease: ease; --easing-cubic: cubic-bezier(0.34, 1.56, 0.64, 1); --z-dropdown: 100; --z-sticky: 500; --z-fixed: 1000; --z-modal-backdrop: 1040; --z-modal: 1050; --z-tooltip: 1070; --z-notification: 1080; --sidebar-bg: var(--accent-dark); --sidebar-text: white; --transition-speed: 0.3s; --header-height: auto} *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box} html { scroll-behavior: smooth; color-scheme: light; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-size-adjust: none; hanging-punctuation: first allow-end last} body { font-family: var(--primary-font); line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); font-size: var(--font-size-base)} img { max-width: 100%; height: auto; display: block} a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast)} a:hover { color: var(--link-hover)} h1, h2, h3, h4, h5, h6 { font-family: var(--secondary-font); color: var(--text-primary); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); margin-bottom: var(--spacing-sm); text-wrap: balance} p { text-wrap: pretty; line-height: var(--line-height-base)} .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-fast); z-index: var(--z-tooltip)} @keyframes fadeIn { from { opacity: 0} to { opacity: 1} } @keyframes fadeOut { from { opacity: 1} to { opacity: 0} } @keyframes slideUp { from { opacity: 0; transform: translateY(20px)} to { opacity: 1; transform: translateY(0)} } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px)} to { opacity: 1; transform: translateY(0)} } @keyframes slideInRight { from { transform: translateX(40px); opacity: 0} to { transform: translateX(0); opacity: 1} } @keyframes slideLeft { from { transform: translateX(-20px); opacity: 0} to { transform: translateX(0); opacity: 1} } @keyframes pulse { 0, 100% { opacity: 1} 50% { opacity: 0.5} } @keyframes scaleUp { from { opacity: 0; transform: scale(0.95)} to { opacity: 1; transform: scale(1)} } button { font-family: inherit; cursor: pointer; border: none; transition: var(--transition-fast)} .btn, .cta-button, .search-widget button, .filter-toggle-btn, .load-btn, .share-btn, .view-btn, .slider-btn, .gallery-btn, .tab-btn, .layout-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); font-weight: var(--font-weight-bold); border-radius: var(--radius-base); transition: var(--transition-fast); white-space: nowrap} .btn-primary, .cta-button, .search-widget button, .load-btn:not(.secondary) { padding: var(--spacing-sm) var(--spacing-lg); background: var(--accent-color); color: var(--text-inverse); border: none} .btn-primary:hover, .cta-button:hover, .search-widget button:hover, .load-btn:not(.secondary):hover { background: var(--accent-dark); color: var(--text-inverse)} .btn-secondary, .load-btn.secondary { padding: var(--spacing-sm) var(--spacing-lg); background: transparent; color: var(--accent-color); border: 1px solid var(--accent-color)} .btn-secondary:hover, .load-btn.secondary:hover { background: var(--accent-light)} .btn-sm, .filter-actions button, .tab-layout-btn { padding: 0.5rem 1rem; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.4px; background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border-color)} .btn-sm:hover, .filter-actions button:hover, .tab-layout-btn:hover { border-color: var(--accent-color); color: var(--accent-color); background: var(--accent-light)} .btn-sm.active, .filter-actions button.active, .tab-layout-btn.active { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color)} .btn-icon { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--text-secondary); border-radius: var(--radius-full)} .btn-icon:hover { background: var(--accent-color); color: var(--text-inverse); transform: translateY(-2px)} .post-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 3px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px} .post-badge.category { border: 1.5px solid var(--accent-color); color: black; background: transparent} .post-badge.date, .post-badge.read-time { background: var(--bg-secondary); color: var(--text-secondary)} .post-badge svg { width: 12px; height: 12px; flex-shrink: 0} .tag { display: inline-block; padding: 4px 10px; border: 1px solid var(--border-color); color: var(--text-primary); font-size: var(--font-size-xs); background: var(--bg-secondary); cursor: pointer} .tag-preview { display: flex; align-items: center; flex-wrap: wrap} .tag-preview > * + *:not(.overflow-tag) { margin-left: var(--spacing-xs)} .tag-more-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1.5px dashed var(--border-color); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-secondary); background: var(--bg-secondary); cursor: pointer; transition: var(--transition-fast)} .tag-more-trigger svg { width: 12px; height: 12px; flex-shrink: 0} .tag-more-trigger:hover { border-color: var(--accent-color); color: var(--accent-color); background: var(--accent-light)} .tag-preview .tag.overflow-tag { max-width: 0; opacity: 0; padding: 0; border-width: 0; margin: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, border-width 0.25s ease, margin 0.25s ease; transition-delay: var(--stagger, 0s)} .tag-preview.expanded .tag.overflow-tag { max-width: 200px; opacity: 1; padding: 4px 10px; border-width: 1px; margin-left: var(--spacing-xs)} .post-tags-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 20px; font-size: var(--font-size-xs); color: var(--text-secondary); cursor: help; position: relative; transition: var(--transition-fast); font-weight: var(--font-weight-bold); margin-left: auto} .post-tags-trigger:hover { border-color: var(--accent-color); color: var(--accent-color)} .post-tags-trigger svg { width: 14px; height: 14px; flex-shrink: 0} .post-tags-tooltip { display: none; position: absolute; bottom: calc(100% + 10px); right: 0; background: var(--text-primary); color: var(--text-inverse); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-base); font-size: var(--font-size-xs); white-space: normal; max-width: 200px; z-index: var(--z-tooltip); box-shadow: var(--shadow-lg); pointer-events: none; line-height: 1.4} .post-tags-tooltip::after { content: ""; position: absolute; bottom: -6px; right: 10px; border: 6px solid transparent; border-top-color: var(--text-primary)} .post-tags-trigger:hover .post-tags-tooltip { display: block; animation: slideUp var(--duration-fast) var(--easing-ease)} .tag-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-modal)} .tag-modal-overlay.active { display: flex; align-items: center; justify-content: center; animation: fadeIn var(--duration-base) var(--easing-ease)} .tag-modal { background: var(--bg-primary); border-radius: var(--radius-lg); padding: var(--spacing-lg); max-width: 400px; width: 90%; box-shadow: var(--shadow-lg); animation: slideUp var(--duration-base) var(--easing-ease)} .tag-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md)} .tag-modal-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary)} .tag-modal-close { background: none; border: none; font-size: var(--font-size-lg); cursor: pointer; color: var(--text-secondary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-base); transition: var(--transition-fast)} .tag-modal-close:hover { background: var(--bg-secondary); color: var(--text-primary)} .tag-modal-content { display: flex; flex-direction: column; gap: var(--spacing-md); max-height: 60vh; overflow-y: auto} .tag-modal-item { display: flex; align-items: center; justify-content: center; padding: var(--spacing-md); border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: var(--transition-fast); text-align: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--text-secondary)} .tag-modal-item:hover { border-color: var(--accent-color); background: var(--accent-light); color: var(--accent-color); transform: translateY(-2px)} .tag-modal-content .tag-group .tag-group-grid { display: flex; flex-wrap: wrap; width: max-content; gap: var(--spacing-xs)} .sidebar-widget, .widget { } .sidebar-widget h2, .widget h2 { font-size: var(--hh-h3-size); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xs); color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; position: relative} .sidebar-widget h2 span { background-color: var(--hh-default-bg-color); position: relative; z-index: 2; padding: 3px 8px 3px 0} .sidebar-widget h2::before, .widget h2::before { content: ""; display: inline-block; height: 2px; background-color: var(--hh-accent-dark); position: absolute; left: 0; right: 0; top: 50%; z-index: 1} .sidebar-widget p, .widget p { margin: 0 0 var(--spacing-xs) 0; font-size: var(--font-size-sm)} .sidebar-widget a, .widget a { color: var(--link-color); transition: color var(--transition-fast)} .sidebar-widget a:hover, .widget a:hover { color: var(--link-hover)} .search-widget form { display: flex; gap: var(--spacing-xs)} .search-widget input { flex: 1; padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--border-color); border-radius: var(--radius-base); font-size: var(--font-size-sm); font-family: inherit; background: var(--bg-primary); transition: var(--transition-fast)} .search-widget input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-light)} .search-widget input::placeholder { color: var(--text-light)} .search-widget button { padding: var(--spacing-xs) var(--spacing-sm)} .search-widget svg { width: 16px; height: 16px} .categories-list { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-xs)} .categories-list li { margin: 0} .categories-list a { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-base); transition: var(--transition-fast); font-size: var(--font-size-sm)} .categories-list a:hover { background: var(--bg-secondary); color: var(--link-hover)} .category-count { background: var(--accent-color); color: var(--text-inverse); padding: 2px 8px; border-radius: 12px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); flex-shrink: 0} .contact-widget strong { display: block; color: var(--text-primary); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xs)} .contact-widget a { word-break: break-all} .author-card { border: 1px solid var(--border-color); border-radius: var(--radius-base); padding: var(--spacing-md); background: var(--bg-primary); box-shadow: var(--shadow-xs); text-align: center; transition: var(--transition-fast)} .author-card:hover { box-shadow: var(--shadow-md)} .author-avatar { width: 80px; height: 80px; border-radius: var(--radius-full); background: var(--bg-secondary); margin: 0 auto var(--spacing-sm); display: flex; align-items: center; justify-content: center; font-size: 2rem} .author-name { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--spacing-xs)} .author-title { font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--spacing-sm)} .author-bio { font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--spacing-md)} .author-published { font-size: var(--font-size-xs); color: var(--text-secondary); padding-top: var(--spacing-sm); border-top: 1px solid var(--border-color)} .author-contact { display: flex; justify-content: center; gap: var(--spacing-xs); flex-wrap: wrap; margin: 0 0 var(--spacing-md)} .author-contact__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-xs); color: var(--text-primary); text-decoration: none; border: 1px solid var(--border-color); background: var(--bg-secondary); padding: 6px 10px; border-radius: 999px; transition: var(--transition-fast); line-height: 1.2} .author-contact__icon { display: inline-flex} .author-contact__item:hover, .author-contact__item:focus-visible { box-shadow: var(--shadow-xs); transform: translateY(-1px); outline: none} .author-contact__text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .social-list { list-style: none; display: flex; gap: var(--spacing-md); flex-wrap: wrap} .social-list li { margin: 0} .social-list a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--bg-secondary); border-radius: var(--radius-full); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); transition: var(--transition-fast); color: var(--text-primary)} .social-list a:hover { background: var(--accent-color); color: var(--text-inverse); transform: translateY(-3px)} .related-articles, .related-stories { display: flex; flex-direction: column; gap: var(--spacing-md)} .related-article, .related-story { padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); transition: var(--transition-fast)} .related-article:last-child, .related-story:last-child { padding-bottom: 0; border-bottom: none} .related-article:hover, .related-story:hover { transform: translateX(4px)} .related-article-title, .related-story-title { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--spacing-xs); line-height: 1.3; text-wrap: pretty} .related-article-meta, .related-story-meta { display: flex; gap: var(--spacing-xs); font-size: var(--font-size-xs); color: var(--text-light)} .related-story { display: grid; grid-template-columns: 80px 1fr; gap: var(--spacing-sm); border-radius: var(--radius-md); padding: var(--spacing-sm); border: 1px solid var(--border-color); background: var(--bg-primary); text-decoration: none; color: inherit} .related-story:last-child { border-bottom: 1px solid var(--border-color); padding-bottom: var(--spacing-sm)} .related-story-image { width: 80px; height: 80px; border-radius: var(--radius-base); background: var(--bg-secondary); overflow: hidden; flex-shrink: 0} .related-story-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base)} .related-story:hover .related-story-image img { transform: scale(1.05)} .related-story-content { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-xs)} .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--border-color); flex-wrap: wrap; gap: var(--spacing-md)} .section-header h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); text-wrap: balance} @media (max-width: 768px) { :root { --font-size-2xl: 1.75rem; --font-size-xl: 1.25rem} .tag-modal-content { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--spacing-sm)} .tag-modal-item { padding: var(--spacing-sm); font-size: var(--font-size-xs)} .section-header { flex-direction: column; align-items: flex-start} } .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background: var(--accent-color); color: var(--text-inverse); border: none; border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: var(--z-dropdown); opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in, visibility 0.4s ease-in, transform 0.4s ease-in; transform: translateY(20px)} .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0)} .back-to-top:hover { background: var(--accent-dark); transform: translateY(-4px); box-shadow: var(--shadow-lg)} .back-to-top svg { width: 20px; height: 20px} .tag-checkbox-group { display: flex; flex-direction: column; gap: var(--spacing-xs)} .tag-checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm); cursor: pointer; border-radius: var(--radius-base); transition: var(--transition-fast); user-select: none} .tag-checkbox-wrapper:hover { background: var(--bg-secondary)} .tag-checkbox-wrapper input[type="checkbox"] { cursor: pointer; accent-color: var(--accent-color)} .tag-checkbox-wrapper span { font-size: var(--font-size-sm); color: var(--text-secondary)} .tag-checkbox-wrapper input[type="checkbox"]:checked + span { color: var(--text-primary); font-weight: var(--font-weight-bold)} .grid { display: grid} .gap-xs { gap: var(--spacing-xs)} .gap-sm { gap: var(--spacing-sm)} .gap-md { gap: var(--spacing-md)} :root { --hh-container-padding: 15px} *, *::before, *::after { box-sizing: border-box} html { scroll-behavior: smooth; scroll-padding-top: 1em} body { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; color: var(--hh-default-font-color); font-size: var(--hh-font-size); line-height: 1.5} button { font-family: inherit; font-size: var(--hh-font-size)} h1 { font-size: var(--hh-h1-size)} h2 { font-size: var(--hh-h2-size)} h3 { font-size: var(--hh-h3-size)} header .logo-row .container { display: grid; width: 100%; grid-template-columns: 1fr; padding-top: var(--hh-container-padding)} @media (min-width: 768px) { header .logo-row .container { grid-template-columns: 1fr 4fr 1fr} } header .nav-row { border-top: 1px solid var(--hh-accent-dark); border-bottom: 1px solid var(--hh-accent-dark)} header .nav-row .container { text-align: center; padding: 0} header .nav-row .container a { display: none; color: var(--hh-default-font-color); text-decoration: none; text-transform: uppercase; font-weight: bold; padding: calc(var(--hh-grid-gap) * 0.7) calc(var(--hh-grid-gap) * 0.5)} @media (min-width: 1024px) { header .nav-row .container a { padding: calc(var(--hh-grid-gap) * 1.5) var(--hh-grid-gap)} } header .nav-row .container a:hover, header .nav-row .container a:focus { color: var(--hh-primary)} @media (min-width: 768px) { header .nav-row .container a { display: inline-block} } header .logo-row .container .social-column { justify-content: start; display: none; grid-auto-flow: column} @media (min-width: 768px) { header .logo-row .container .social-column { display: inline-grid} } header .logo-column { text-align: center} header .logo-column img, footer a img { margin-inline: auto} header .logo-row .container .search-column { display: none} @media (min-width: 768px) { header .logo-row .container .search-column { display: grid; justify-content: end} } header a.hh-icon { padding: var(--hh-container-padding)} header a.hh-icon svg { fill: var(--hh-primary); height: 20px} .container { max-width: 1320px; padding: 0 var(--hh-container-padding); margin: 0 auto} .container { padding-top: calc(var(--hh-grid-gap) * 2); padding-bottom: calc(var(--hh-grid-gap) * 2)} footer.hh-footer { background-color: var(--hh-secondary); padding: calc(var(--hh-grid-gap) * 4) var(--hh-grid-gap); color: white; line-height: 1.5} footer .container { text-align: center} footer .container .social-column { display: grid; justify-self: center; grid-auto-flow: column} footer img { width: 200px; margin-bottom: var(--hh-grid-gap)} footer a.hh-icon { padding: var(--hh-container-padding)} footer a.hh-icon svg { fill: white; height: 20px} :root { --sidebar-bg: var(--hh-secondary); --sidebar-text: white; --sidebar-width: 280px; --transition-speed: 0.3s} header { position: relative; width: 100%; z-index: 100; background-color: var(---sidebar-text); transition: transform var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out; margin-block-end: var(--spacing-lg)} header.fixed { position: fixed; top: 0; width: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); z-index: 1100; transform: translateY(0); animation: fadeInHeader var(--transition-speed) ease-in-out; background: #fff} body.has-fixed-header { padding-top: var(--header-height)} @keyframes fadeInHeader { from { opacity: 0; transform: translateY(-10px)} to { opacity: 1; transform: translateY(0)} } #mobile-menu-toggle { display: none; background: none; border: none; padding: 0.8rem; cursor: pointer; position: absolute; top: 1rem; right: 1rem; z-index: 1002; border-radius: 4px; transition: opacity var(--transition-speed) ease-in-out} header.fixed #mobile-menu-toggle { position: absolute; top: 1rem; right: 1rem} #mobile-menu-toggle svg, #close-menu svg { width: 28px; height: 28px; fill: var(--hh-primary)} @media (max-width: 767px) { #mobile-menu-toggle { display: block} .nav-row { position: fixed; top: 0; right: 0; width: var(--sidebar-width); height: 100vh; background: var(--sidebar-bg); color: var(--sidebar-text); padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2); z-index: 1001; transform: translateX(100%); transition: transform var(--transition-speed) ease-in-out, opacity var(--transition-speed) ease-in-out; opacity: 0; visibility: hidden} .nav-row.open { transform: translateX(0); opacity: 1; visibility: visible; z-index: 1000; width: var(--sidebar-width); height: 100vh} .nav-row.open + #mobile-menu-toggle { display: none} #close-menu { display: block; background: none; border: none; cursor: pointer; position: absolute; top: 1rem; right: 1rem; z-index: 1003; background: rgba(0, 0, 0, 0.2); padding: 0.8rem; border-radius: 4px} #close-menu svg { width: 24px; height: 24px; fill: var(--hh-default-bg-color)} .nav-row.open::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: var(--header-height); background: var(--sidebar-bg); z-index: -1} .nav-links { display: grid; gap: var(--hh-grid-gap); margin-block-start: 1em} .nav-links a { text-decoration: none; color: var(---sidebar-text); font-size: var(--hh-h3-size)} .nav-row.open div { display: grid; gap: var(--hh-grid-gap); margin-block-start: 5em} .nav-row.open a { text-decoration: none; color: var(--hh-default-bg-color)} .nav-row.closing { transform: translateX(100%); opacity: 0} } .hh-back-to-top { --bottom-right-placement: 1rem; --size: 1.5rem; --animation-speed: 0.3s; all: unset; cursor: pointer; position: fixed; z-index: 10; inset: auto; bottom: var(--bottom-right-placement); right: var(--bottom-right-placement); block-size: var(--size); inline-size: var(--size); background: var(--hh-primary); fill: var(--hh-primarybutton-text-color); padding: 0.5rem; opacity: 0.4; max-block-size: 100vh; transition: opacity var(--animation-speed) ease-in-out, max-block-size var(--animation-speed) ease-in-out; box-sizing: content-box} .hh-back-to-top svg { inline-size: 100%; block-size: 100%} .hh-back-to-top:hover { opacity: 1} .hh-back-to-top.hh-hide-back-to-top { opacity: 0; max-block-size: 0; z-index: -1} .hh-back-to-top:focus-visible { outline: -webkit-focus-ring-color auto 1px} @media (min-width: 600px) { .hh-back-to-top { --bottom-right-placement: 2rem} } .skip-link { position: absolute; top: -44px; left: 0; background: #000; color: #fff; padding: 10px 8px; z-index: 100; transition: top 0.2s ease-in-out; text-decoration: none} .skip-link:focus { top: 0} .hh-btn-primary { display: inline-block; cursor: pointer; padding: var(--hh-primarybutton-paddding) calc(var(--hh-primarybutton-paddding) * 4); text-align: center; font-weight: bold; background-color: var(--hh-primary); color: var(--hh-primarybutton-text-color) !important; text-transform: uppercase; text-decoration: none; border: solid 2px var(--hh-primary)} .hh-btn-primary:hover, .hh-btn-primary:focus { background-color: var(--hh-primarybutton-text-color); color: var(--hh-primary) !important; border: solid 2px var(--hh-primary)} .hh-btn-primary-inverted { display: inline-block; cursor: pointer; padding: var(--hh-primarybutton-paddding) calc(var(--hh-primarybutton-paddding) * 4); text-align: center; font-weight: bold; background-color: var(--hh-primarybutton-text-color); color: var(--hh-primary) !important; text-transform: uppercase; text-decoration: none; border: solid 2px var(--hh-primary)} .hh-btn-primary-inverted:hover, .hh-btn-primary-inverted:focus { background-color: var(--hh-primary); color: var(--hh-primarybutton-text-color) !important; border: solid 2px var(--hh-primary)} .hh-btn-secondary { display: inline-block; cursor: pointer; padding: var(--hh-primarybutton-paddding) calc(var(--hh-primarybutton-paddding) * 4); text-align: center; font-weight: bold; background-color: var(--hh-secondary); color: var(--hh-secondarybutton-text-color) !important; text-transform: uppercase; text-decoration: none; border: solid 2px var(--hh-secondary)} .hh-btn-secondary:hover, .hh-btn-secondary:focus { background-color: var(--hh-secondarybutton-text-color); color: var(--hh-secondary) !important; border: solid 2px var(--hh-secondary)} .post-sidebar, .sidebar { display: flex; flex-direction: column; gap: var(--spacing-lg); position: sticky; top: var(--spacing-sm); height: fit-content; max-height: calc(100vh - var(--spacing-lg) * 2); overflow-y: auto} @media (max-width: 1024px) { .post-sidebar, .sidebar { position: fixed !important; top: 0 !important; right: -320px !important; width: 320px !important; height: 100vh !important; display: flex !important; flex-direction: column !important; gap: var(--spacing-md) !important; background: var(--bg-primary) !important; z-index: 998 !important; border-left: 1px solid var(--border-color) !important; overflow-y: auto !important; transition: right 0.3s ease !important; box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1) !important; max-height: 100vh !important; padding: var(--spacing-md) !important} .post-sidebar.active, .sidebar.active { right: 0 !important} } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 996; transition: background var(--duration-base) var(--easing-ease); pointer-events: none; opacity: 0; visibility: hidden} @media (max-width: 1024px) { .sidebar-overlay.active { background: rgba(0, 0, 0, 0.5); pointer-events: auto; opacity: 1; visibility: visible} } .sidebar-menu-trigger { position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 50px; height: 60px; background: var(--accent-color); color: var(--text-inverse); border: none; cursor: pointer; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); z-index: var(--z-dropdown); transition: var(--transition-fast); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg) 0 0 var(--radius-lg); padding: 0 var(--spacing-sm)} .sidebar-menu-trigger:hover { background: var(--accent-dark); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15); transform: translateY(-50%) translateX(-2px)} .sidebar-menu-trigger svg { width: 24px; height: 24px; flex-shrink: 0} @media (min-width: 1024px) { .sidebar-menu-trigger { display: none !important} } .post-sidebar::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 6px} .post-sidebar::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent} .post-sidebar::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px} .post-sidebar::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-light)} .sidebar-search-form { width: 100%} .sidebar-search-box { position: relative; display: flex; align-items: center} .sidebar-search-input { width: 100%; padding: var(--spacing-xs) var(--spacing-sm); padding-right: 2.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-base); font-size: var(--font-size-sm); background: var(--bg-primary); font-family: inherit; transition: var(--transition-fast)} .sidebar-search-input:hover { border-color: #d0d0d0} .sidebar-search-input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1)} .sidebar-search-input::placeholder { color: var(--text-light)} .sidebar-search-btn { position: absolute; right: var(--spacing-xs); background: none; border: none; cursor: pointer; padding: 0.25rem; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition-fast)} .sidebar-search-btn:hover { color: var(--accent-color)} .sidebar-search-btn svg { width: 18px; height: 18px} .newsroom { max-width: var(--site-width); margin: 0 auto; padding: var(--spacing-lg)} .newsroom-header { margin-bottom: var(--spacing-xl); border-bottom: 2px solid var(--border-color); padding-bottom: var(--spacing-lg)} .newsroom-header h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); text-wrap: balance} .newsroom-header p { color: var(--text-secondary); margin-top: var(--spacing-sm); text-wrap: pretty} .featured-section { margin-bottom: var(--spacing-xl); position: relative; border-radius: var(--radius-base); overflow: hidden; box-shadow: var(--shadow-md)} .featured-slider { position: relative; width: 100%} .featured-slide { position: relative; width: 100%; aspect-ratio: 16 / 9; display: none} .featured-slide.active { display: block; animation: slideInRight var(--duration-slow) var(--easing-cubic)} .featured-slide img { width: 100%; height: 100%; object-fit: cover} .featured-content { position: absolute; bottom: var(--spacing-lg); left: var(--spacing-lg); right: var(--spacing-lg); background: rgba(0, 0, 0, 0.7); color: var(--text-inverse); padding: var(--spacing-lg); border-radius: var(--radius-base); max-width: 500px; backdrop-filter: blur(4px); animation: slideLeft var(--duration-base) var(--easing-ease) 0.1s both} .featured-content h2 { color: var(--text-inverse); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-sm); line-height: 1.3; text-wrap: balance} .featured-content p { font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); opacity: 0.95; text-wrap: pretty} .featured-content a { display: inline-block; background: var(--accent-color); color: var(--text-inverse); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); transition: var(--transition-fast)} .featured-content a:hover { background: var(--accent-dark)} .slider-controls { position: absolute; bottom: var(--spacing-md); right: var(--spacing-md); display: flex; gap: var(--spacing-sm); z-index: 10} .slider-btn { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.3); color: var(--text-inverse); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); font-size: var(--font-size-lg)} .slider-btn:hover { background: rgba(0, 0, 0, 0.6); border-color: var(--text-inverse)} .slider-dots { position: absolute; bottom: var(--spacing-md); left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-xs); z-index: 10} .dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: var(--transition-fast)} .dot.active { background: var(--text-inverse); width: 24px; border-radius: var(--radius-base)} .media-section { margin-bottom: var(--spacing-xl)} .media-section-header { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--border-color)} .media-section-header h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); text-wrap: balance} .media-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 40vw, 350px); gap: var(--spacing-sm); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: var(--spacing-md) 0; margin-bottom: var(--spacing-xl); width: 100%; min-width: 0} @media (max-width: 768px) { .media-scroller { grid-auto-columns: clamp(200px, 85vw, 300px)} } .media-scroller::-webkit-scrollbar { height: 8px} .media-scroller::-webkit-scrollbar-track { background: transparent} .media-scroller::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-base)} .media-scroller::-webkit-scrollbar-thumb:hover { background: var(--text-light)} .media-item { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-base); overflow: hidden; background: var(--bg-primary); transition: var(--transition-fast); box-shadow: var(--shadow-xs); position: relative; scroll-snap-align: start; scroll-snap-stop: always} .media-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-color), transparent); opacity: 0; transition: opacity var(--duration-base) var(--easing-ease); pointer-events: none} .media-item:hover { box-shadow: var(--shadow-md); transform: translateY(-4px)} .media-item:hover::before { opacity: 0.05} .media-item-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-secondary); position: relative} .media-item-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-fast)} .media-item:hover .media-item-image img { transform: scale(1.05)} .media-item-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); transition: background var(--duration-base) var(--easing-ease)} .media-item:hover .media-item-play { background: rgba(0, 0, 0, 0.3)} .play-button { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--accent-color); display: flex; align-items: center; justify-content: center; transform: scale(0.8); transition: var(--transition-fast); box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3)} .media-item:hover .play-button { transform: scale(1); box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4)} .media-item-content { padding: var(--spacing-md); flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1} .media-item-title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-sm); line-height: 1.3; color: var(--text-primary); transition: color var(--duration-base) var(--easing-ease); text-wrap: balance} .media-item:hover .media-item-title { color: var(--accent-color)} .media-item-meta { display: flex; gap: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--text-light); margin-top: auto; align-items: center} .newsroom-content { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-xl)} @media (min-width: 768px) { .newsroom-content { grid-template-columns: 1fr 300px} .newsroom-content main { order: 1} .newsroom-content aside { order: 2} .newsroom-content[data-layout="sidebar-left"] { grid-template-columns: 300px 1fr} .newsroom-content[data-layout="sidebar-left"] main { order: 2} .newsroom-content[data-layout="sidebar-left"] aside { order: 1} } .content-section { margin-bottom: var(--spacing-xl)} .layout-switcher { display: flex; gap: var(--spacing-xs); background: var(--bg-secondary); border-radius: var(--radius-base); padding: var(--spacing-xs)} .layout-btn { background: transparent; border: 1px solid transparent; padding: var(--spacing-xs) var(--spacing-sm); cursor: pointer; border-radius: var(--radius-sm); font-size: var(--font-size-sm); transition: var(--transition-fast); color: var(--text-secondary); font-weight: var(--font-weight-bold)} .layout-btn.active { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color)} .posts-grid { display: grid; gap: var(--spacing-sm)} .posts-grid[data-layout="card-3"] { grid-template-columns: repeat(3, 1fr)} .posts-grid[data-layout="card-2"] { grid-template-columns: repeat(2, 1fr)} .posts-grid[data-layout="list"] { grid-template-columns: 1fr} .posts-grid[data-layout="featured"] { grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: dense} .posts-grid[data-layout="featured"] .post-card:first-child { grid-column: 1; grid-row: 1 / 3} .posts-grid[data-layout="featured"] .post-card:nth-child(2) { grid-column: 2 / 4; grid-row: 1} .posts-grid[data-layout="featured"] .post-card:nth-child(3) { grid-column: 2; grid-row: 2} .posts-grid[data-layout="featured"] .post-card:nth-child(4) { grid-column: 3; grid-row: 2} @media (max-width: 1024px) { .posts-grid[data-layout="card-3"] { grid-template-columns: repeat(2, 1fr)} .posts-grid[data-layout="card-2"] { grid-template-columns: repeat(2, 1fr)} .posts-grid[data-layout="featured"] { grid-template-columns: 1fr 1fr} .posts-grid[data-layout="featured"] .post-card:first-child { grid-column: 1; grid-row: 1 / 3} .posts-grid[data-layout="featured"] .post-card:nth-child(2) { grid-column: 2; grid-row: 1} .posts-grid[data-layout="featured"] .post-card:nth-child(3) { grid-column: 2; grid-row: 2} .posts-grid[data-layout="featured"] .post-card:nth-child(4) { grid-column: 1; grid-row: 3} } @media (max-width: 768px) { .posts-grid[data-layout="card-3"], .posts-grid[data-layout="card-2"] { grid-template-columns: 1fr} } .post-card { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; border: 1px solid var(--border-color); overflow: hidden; background: var(--bg-primary); box-shadow: var(--shadow-xs)} .post-card:hover, .post-card:focus-within { box-shadow: var(--shadow-md)} .post-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-secondary); position: relative} .post-image img { width: 100%; height: 100%; object-fit: cover} .post-body { padding: var(--spacing-md); display: flex; flex-direction: column; position: relative} .post-body .post-eyebrow-date, .post-body .post-read-time { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: var(--spacing-xs); text-transform: uppercase; letter-spacing: 0.5px} .posts-grid[data-layout="list"] .post-body { flex: initial} .post-meta { display: flex; gap: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--text-light); margin-bottom: var(--spacing-sm); align-items: center; flex-wrap: wrap; min-height: 24px} .post-category { display: inline-block; background: transparent; color: var(--accent-color); padding: 4px 10px; border: 1.5px solid var(--accent-color); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px; transition: var(--transition-fast)} .post-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: var(--spacing-xs) 0; line-height: 1.3; color: var(--text-primary); transition: color var(--duration-base) var(--easing-ease); text-wrap: balance} .post-card:hover .post-title, .post-card:focus-within .post-title { color: var(--accent-color)} .post-excerpt { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-md); flex: 1; line-height: 1.5; text-wrap: pretty} .post-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-md); border-top: 1px solid var(--border-color); margin-top: auto; gap: var(--spacing-md); flex-wrap: wrap} .post-link { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--accent-color); transition: var(--transition-fast)} .post-link:hover { color: var(--accent-dark)} .posts-grid[data-layout="list"] .post-card { display: grid; grid-template-columns: 1fr 1.5fr} .posts-grid[data-layout="list"] .post-image { aspect-ratio: 1} @media (max-width: 768px) { .newsroom { padding: var(--spacing-md)} .featured-content { bottom: var(--spacing-md); left: var(--spacing-md); right: var(--spacing-md); padding: var(--spacing-md); max-width: 100%} .posts-grid[data-layout="list"] .post-image { width: 150px; min-width: 150px} .posts-grid[data-layout="featured"] .post-card:first-child { grid-column: span 1; grid-row: span 1} } @media (max-width: 480px) { .featured-slider { aspect-ratio: 16 / 12} } .gallery-wrapper { position: relative} .gallery-controls { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); flex-wrap: wrap; align-items: center; padding: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--radius-md)} .gallery-view-group { display: flex; flex-direction: column; gap: var(--spacing-xs)} .view-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--text-light); letter-spacing: 0.5px} .gallery-view-switcher { display: flex; gap: var(--spacing-xs); flex-wrap: wrap} .gallery-btn { padding: 6px 12px; border: 1px solid var(--border-color); background: var(--bg-primary); cursor: pointer; border-radius: var(--radius-base); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); transition: var(--transition-fast); color: var(--text-secondary); white-space: nowrap} .gallery-btn.active { background: var(--accent-color); color: var(--text-inverse); border-color: var(--accent-color)} .gallery-btn:hover:not(.active) { border-color: var(--accent-color); color: var(--accent-color)} .image-count { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: var(--font-weight-bold)} .gallery { display: grid; gap: 2px; margin-bottom: var(--spacing-lg); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))} .gallery.layout-compact { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))} .gallery.layout-masonry { display: block; column-count: 2; column-gap: 2px} .gallery.layout-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px} .gallery.layout-mosaic .gallery-thumbnail:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16 / 9} .gallery.layout-mosaic .gallery-thumbnail:nth-child(n + 5) { display: none} .gallery.layout-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px} .gallery.layout-featured .gallery-thumbnail:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9} .gallery-thumbnail { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 1; cursor: pointer; transition: var(--transition-fast); background: var(--bg-secondary)} .gallery.layout-masonry .gallery-thumbnail { break-inside: avoid; margin-bottom: 2px; aspect-ratio: auto} .gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--easing-cubic)} .gallery-thumbnail:hover img { transform: scale(1.12)} .gallery-thumbnail::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background var(--duration-base) var(--easing-ease)} .gallery-thumbnail:hover::after { background: rgba(0, 0, 0, 0.15)} .slideshow-container { position: relative; background: var(--bg-secondary); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; display: none} .slideshow-container.active { display: block} .slideshow-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow) var(--easing-ease); cursor: pointer; z-index: 1; pointer-events: none} .slideshow-slide.active { opacity: 1; pointer-events: auto; z-index: 10} .slideshow-slide img { width: 100%; height: 100%; object-fit: cover} .slideshow-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: var(--text-inverse); padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md); pointer-events: none} .slideshow-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-inverse); cursor: pointer; border-radius: var(--radius-base); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); font-size: 1.5rem; z-index: 10} .slideshow-nav:hover { background: rgba(255, 255, 255, 0.3)} .slideshow-prev { left: var(--spacing-md)} .slideshow-next { right: var(--spacing-md)} .slideshow-counter { position: absolute; bottom: var(--spacing-md); right: var(--spacing-md); background: rgba(0, 0, 0, 0.5); color: var(--text-inverse); padding: 6px 12px; border-radius: 20px; font-size: var(--font-size-xs); z-index: 10} .slideshow-dots { position: absolute; bottom: var(--spacing-md); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10} .slideshow-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: var(--transition-fast); border: none} .slideshow-dot.active { background: var(--text-inverse); width: 24px; border-radius: var(--radius-base)} .timeline-gallery { position: relative; padding: var(--spacing-lg) 0} .timeline-track { position: relative; display: flex; flex-direction: column; gap: var(--spacing-lg)} .timeline-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--accent-color); transform: translateX(-50%); z-index: 0} .timeline-point { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: flex-start} .timeline-point:nth-child(even) { direction: rtl} .timeline-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: var(--transition-fast)} .timeline-card:hover { border-color: var(--accent-color); box-shadow: 0 4px 12px var(--accent-light)} .timeline-card-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-secondary)} .timeline-card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-fast)} .timeline-card:hover .timeline-card-image img { transform: scale(1.05)} .timeline-card-header { padding: var(--spacing-md); display: flex; justify-content: space-between; align-items: center} .timeline-card-title { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm)} .timeline-card-year { font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text} .timeline-card-content { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--easing-ease)} .timeline-card.expanded .timeline-card-content { max-height: 200px} .timeline-card-description { padding: 0 var(--spacing-md) var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6} .timeline-dot { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; background: var(--bg-primary); border: 3px solid var(--accent-color); border-radius: var(--radius-full); transform: translateX(-50%); z-index: 2} .lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: var(--z-modal); flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(4px)} .lightbox.active { display: flex; animation: fadeIn var(--duration-base) var(--easing-ease)} .lightbox-container { position: relative; width: 90%; max-width: 1000px; height: 80vh; display: flex; align-items: center; justify-content: center; animation: scaleUp var(--duration-slow) var(--easing-cubic)} .lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; animation: slideUp var(--duration-slow) var(--easing-cubic) 0.1s both} .lightbox-image.exit { animation: fadeOut var(--duration-fast) var(--easing-ease)} .lightbox-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: var(--text-inverse); padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md); text-align: center; animation: slideUp var(--duration-slow) var(--easing-cubic) 0.2s both} .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-inverse); cursor: pointer; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); font-size: 1.5rem; animation: fadeIn var(--duration-base) var(--easing-ease) 0.3s both; z-index: 10} .lightbox-nav:hover { background: rgba(255, 255, 255, 0.2)} .lightbox-prev { left: var(--spacing-md)} .lightbox-next { right: var(--spacing-md)} .lightbox-close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-inverse); cursor: pointer; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); animation: fadeIn var(--duration-base) var(--easing-ease) 0.3s both; z-index: 10; padding: 0} .lightbox-close:hover { background: rgba(255, 255, 255, 0.2)} .lightbox-counter { position: absolute; bottom: var(--spacing-md); right: var(--spacing-md); color: rgba(255, 255, 255, 0.8); font-size: var(--font-size-sm); animation: fadeIn var(--duration-base) var(--easing-ease) 0.3s both; z-index: 10} .hero-section { position: relative; border-radius: var(--radius-base); overflow: hidden; margin-bottom: var(--spacing-xl); box-shadow: var(--shadow-md)} .slider { position: relative; width: 100%; aspect-ratio: 16 / 9} .slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow) var(--easing-ease)} .slide.active { opacity: 1} .slide img { width: 100%; height: 100%; object-fit: cover} .slide-content { position: absolute; bottom: var(--spacing-md); left: var(--spacing-md); right: var(--spacing-md); background: rgba(0, 0, 0, 0.75); color: var(--text-inverse); padding: var(--spacing-md); border-radius: var(--radius-base); max-width: 500px; backdrop-filter: blur(4px); animation: slideUp var(--duration-base) var(--easing-ease) 0.2s both} .slide-content h3 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-xs); line-height: 1.2} .slide-content p { font-size: var(--font-size-sm); margin: 0; opacity: 0.95; line-height: 1.5} .breaking-section { margin-bottom: var(--spacing-xl)} .breaking-alert { background: var(--error-color); color: var(--text-inverse); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-base); margin-bottom: var(--spacing-lg); font-weight: var(--font-weight-bold); display: flex; align-items: center; gap: var(--spacing-md); animation: slideDown var(--duration-base) var(--easing-ease)} .breaking-alert::before { content: "]]>🚨<![CDATA["; font-size: 1.5rem; animation: pulse var(--duration-slow) infinite; flex-shrink: 0} .breaking-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: center} .breaking-feature img { border-radius: var(--radius-base); aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-md); display: block} .tabbed-hero { margin-bottom: var(--spacing-xl)} .tabs-wrapper { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-lg)} .tabs-wrapper.vertical-tabs .tabs { flex-direction: column; border-bottom: none; border-right: 2px solid var(--border-color); padding-right: var(--spacing-md)} .tabs-wrapper.vertical-tabs .tab-btn { border-bottom: none; border-right: 3px solid transparent; margin-bottom: 0; margin-right: -2px; padding: var(--spacing-sm) var(--spacing-md); text-align: left} .tabs-wrapper.vertical-tabs .tab-btn.active { border-right-color: var(--accent-color); border-bottom-color: transparent} .tabs-wrapper.horizontal-tabs { grid-template-columns: 1fr} .tabs { display: flex; gap: var(--spacing-xs); border-bottom: 2px solid var(--border-color); overflow-x: auto} .tab-btn { padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: none; cursor: pointer; font-weight: var(--font-weight-bold); color: var(--text-secondary); border-bottom: 3px solid transparent; transition: var(--transition-fast); margin-bottom: -2px; white-space: nowrap; font-size: var(--font-size-sm); position: relative} .tab-btn:hover { color: var(--accent-color)} .tab-btn.active { color: var(--accent-color); border-bottom-color: var(--accent-color)} .tab-content { display: none} .tab-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: center; animation: fadeIn var(--duration-base) var(--easing-ease)} .tab-content img { border-radius: var(--radius-base); aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-md); display: block} .tab-content-text h3 { margin-top: 0; margin-bottom: var(--spacing-sm); line-height: 1.2; font-size: var(--font-size-lg)} .tab-content-text p { color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--spacing-md); font-size: var(--font-size-sm)} .tab-content-text a { font-weight: var(--font-weight-bold); display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-base); background: var(--bg-secondary); transition: var(--transition-fast)} .tab-content-text a:hover { background: var(--accent-color); color: var(--text-inverse)} .tab-layout-toggle { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--radius-base); padding: var(--spacing-xs); width: fit-content} .tab-layout-btn { padding: var(--spacing-xs) var(--spacing-sm); border: none; background: transparent; cursor: pointer; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--text-secondary); border-radius: var(--radius-sm); transition: var(--transition-fast)} .tab-layout-btn.active { background: var(--bg-primary); color: var(--text-primary)} @media (max-width: 1024px) { .timeline-point { grid-template-columns: 1fr; gap: var(--spacing-md)} .timeline-point:nth-child(even) { direction: ltr} .timeline-track::before { left: 12px} .timeline-dot { left: 0} .tabs-wrapper { grid-template-columns: 1fr} .tabs-wrapper.vertical-tabs .tabs { flex-direction: row; border-bottom: 2px solid var(--border-color); border-right: none; padding-right: 0} .tabs-wrapper.vertical-tabs .tab-btn { border-right: none; border-bottom: 3px solid transparent; margin-right: 0; margin-bottom: -2px} .tabs-wrapper.vertical-tabs .tab-btn.active { border-right-color: transparent; border-bottom-color: var(--accent-color)} } @media (max-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr)} .breaking-feature, .tab-content.active { grid-template-columns: 1fr} .lightbox-nav, .lightbox-close { width: 40px; height: 40px; font-size: 1.25rem} .lightbox-container { width: 95%; height: 70vh} .gallery-controls { flex-direction: column; align-items: flex-start} .gallery-view-group { width: 100%} .gallery-view-switcher { width: 100%} } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-inverse); cursor: pointer; border-radius: var(--radius-base); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); z-index: 10} .slider-nav:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5)} .slider-nav svg { width: 24px; height: 24px} .slider-nav-prev { left: var(--spacing-md)} .slider-nav-next { right: var(--spacing-md)} .slider-pause-container { position: absolute; top: var(--spacing-md); right: var(--spacing-md); z-index: 10} .slider-pause-btn { width: 44px; height: 44px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-inverse); cursor: pointer; border-radius: var(--radius-base); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); padding: 0} .slider-pause-btn:hover { background: rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.5)} .slider-pause-btn svg { width: 20px; height: 20px} .banner { margin-bottom: var(--spacing-xl); position: relative; border-radius: var(--radius-base); overflow: hidden} .banner.banner-slider.show-side-nav { overflow: visible} .banner.banner-slider.show-side-nav .banner-container { border-radius: var(--radius-base); overflow: hidden} .banner.banner-split { overflow: visible} .banner.banner-split .banner-container { border-radius: var(--radius-base); overflow: hidden} .banner-container { position: relative; width: 100%} .banner-item { position: relative; width: 100%} .banner-item img { width: 100%; height: 100%; object-fit: cover; display: block} .banner-content { position: absolute; bottom: var(--spacing-lg); left: var(--spacing-lg); right: var(--spacing-lg); background: rgba(0, 0, 0, 0.7); color: var(--text-inverse); padding: var(--spacing-lg); border-radius: var(--radius-base); max-width: 500px; backdrop-filter: blur(4px)} .banner-content h2 { color: var(--text-inverse); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-sm); line-height: 1.3} .banner-content p { font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); opacity: 0.95} .banner-content a { display: inline-block; background: var(--accent-color); color: var(--text-inverse); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); transition: var(--transition-fast); text-decoration: none} .banner-content a:hover { background: var(--accent-dark)} .banner-badge { color: var(--accent-dark); font-weight: 600; font-size: var(--font-size-xs); margin-bottom: var(--spacing-sm); display: inline-block; background: var(--bg-secondary); width: fit-content; padding: var(--spacing-xs)} .banner-meta { display: flex; gap: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--text-light); margin-bottom: var(--spacing-md); align-items: center; flex-wrap: wrap} .banner-meta span { display: flex; align-items: center; gap: 0.375rem} .banner-meta svg { width: 14px; height: 14px; flex-shrink: 0} .banner-tags { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; margin-bottom: var(--spacing-md)} .banner-tags .tag { display: inline-block; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; font-size: var(--font-size-xs); color: var(--text-inverse); background: rgba(255, 255, 255, 0.15); transition: var(--transition-fast); font-weight: var(--font-weight-medium); backdrop-filter: blur(4px)} .banner-tags .tag:hover { border-color: var(--text-inverse); background: var(--bg-secondary)} .slider-dots, .slider-controls, .slider-side-nav, .banner-tabs, .slider-pause-container { display: none} @keyframes slideInTab { from { opacity: 0; transform: translateX(20px)} to { opacity: 1; transform: translateX(0)} } .banner-slider .banner-container { aspect-ratio: 16 / 9} .banner-slider .banner-item { position: absolute; inset: 0; opacity: 0; display: none; transition: opacity 0.5s ease} .banner-slider .banner-item.active { opacity: 1; display: block; animation: slideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)} .banner-slider .slider-dots, .banner-slider .slider-controls { display: flex} .banner-slider.show-side-nav .slider-side-nav { display: block} .banner-slider.show-side-nav .slider-controls { display: none} .banner-slider.show-side-nav .slider-pause-container { display: block} .banner-slider .slider-dots { position: absolute; bottom: calc(var(--spacing-md) * -1); left: 50%; transform: translateX(-50%); gap: var(--spacing-xs); z-index: 10} .banner-slider .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; border: none; transition: var(--transition-fast)} .banner-slider .dot:hover { background: rgba(255, 255, 255, 0.6)} .banner-slider .dot.active { background: var(--text-inverse); width: 24px; border-radius: var(--radius-base)} .banner-slider .slider-controls { position: absolute; bottom: var(--spacing-xl); right: var(--spacing-md); gap: var(--spacing-sm); z-index: 10; align-items: center} .banner-slider .slider-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.3); color: var(--text-inverse); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); font-size: var(--font-size-lg)} .banner-slider .slider-btn:hover { background: rgba(0, 0, 0, 0.6); border-color: var(--text-inverse)} .slider-side-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10} .slider-side-nav.prev { left: -12px} .slider-side-nav.next { right: -12px} .slider-side-nav .slider-btn { width: 48px; height: 48px; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)} .slider-pause-container { position: absolute; top: var(--spacing-md); right: var(--spacing-md); z-index: 10} .banner-magazine .banner-container { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 0} .banner-magazine .banner-item { position: relative; overflow: hidden} .banner-magazine .banner-item:nth-child(1) { grid-column: 1; grid-row: 1 / 3} .banner-magazine .banner-item:nth-child(2) { grid-column: 2; grid-row: 1} .banner-magazine .banner-item:nth-child(3) { grid-column: 2; grid-row: 2} .banner-magazine .banner-item:nth-child(n + 4) { display: none} .banner-magazine .banner-item img { transition: transform 0.3s ease} .banner-magazine .banner-item:hover img { transform: scale(1.05)} .banner-magazine .banner-content { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%, transparent ); display: flex; flex-direction: column; justify-content: flex-end; max-width: none; backdrop-filter: none} .banner-magazine .banner-item:nth-child(1) .banner-content h2 { font-size: var(--font-size-lg)} .banner-magazine .banner-item:nth-child(n + 2) .banner-content h2 { font-size: var(--font-size-sm)} .banner-magazine .banner-item:nth-child(n + 2) .banner-content p { display: none} .banner-magazine .banner-content a { display: none} .banner-split .banner-container { aspect-ratio: 16 / 9} .banner-split .banner-item { position: absolute; inset: 0; opacity: 0; display: none; transition: opacity 0.5s ease; grid-template-columns: 1fr 1fr; grid-template-areas: "image content"; gap: var(--spacing-md); align-items: center; padding: 0; border: 1px solid var(--border-color)} .banner-split .banner-item.active { opacity: 1; display: grid; animation: slideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)} .banner-split .banner-item img { grid-area: image; aspect-ratio: 16 / 9; border-radius: var(--radius-base); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)} .banner-split .banner-item .banner-content { grid-area: content; position: static; background: transparent; color: var(--text-primary); padding: var(--spacing-md); max-width: none; backdrop-filter: none} .banner-split .banner-content h2 { color: var(--text-primary)} .banner-split .banner-content p { color: var(--text-secondary)} .banner-split .tag { border-color: var(--border-color); color: var(--text-secondary); background: var(--bg-secondary)} .banner-split.split-right .banner-item { grid-template-areas: "content image"} .banner-split .slider-dots, .banner-split .slider-side-nav { display: block} .banner-split .dot { background: rgba(0, 0, 0, 0.3)} .banner-split .dot:hover { background: rgba(0, 0, 0, 0.5)} .banner-split .dot.active { background: var(--accent-color)} .banner-multicolumn .banner-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm)} .banner-multicolumn .banner-item { border-radius: var(--radius-base); overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); transition: var(--transition); border: 1px solid var(--border-color); display: grid; grid-template-rows: auto 1fr} .banner-multicolumn .banner-item:nth-child(n + 4) { display: none} .banner-multicolumn .banner-item:hover { box-shadow: 0 12px 32px rgba(0, 102, 204, 0.2); border-color: var(--accent-color)} .banner-multicolumn .banner-item img { aspect-ratio: 16 / 9} .banner-multicolumn .banner-content { position: static; background: transparent; color: var(--text-primary); padding: var(--spacing-md); max-width: none; backdrop-filter: none} .banner-multicolumn .banner-content h2 { color: var(--text-primary); font-size: var(--font-size-base)} .banner-multicolumn .banner-content p { color: var(--text-secondary); font-size: var(--font-size-sm)} .banner-multicolumn .tag { border-color: var(--border-color); color: var(--text-secondary); background: var(--bg-secondary)} .banner-multicolumn .banner-content a { display: none} .banner-stack .banner-container { display: grid; gap: var(--spacing-xs)} .banner-stack .banner-item { border-radius: var(--radius-base); overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border: 1px solid var(--border-color); display: grid; grid-template-rows: auto 1fr; transition: var(--transition)} .banner-stack .banner-item:hover { border-color: var(--accent-color); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); transform: translateY(-4px)} .banner-stack .banner-item:nth-child(1) { grid-column: 1 / -1} .banner-stack .banner-item:nth-child(n + 2) { grid-column: auto} .banner-stack .banner-container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-flow: dense} .banner-stack .banner-item img { aspect-ratio: 16 / 9} .banner-stack .banner-content { position: static; background: transparent; color: var(--text-primary); padding: var(--spacing-md); max-width: none; backdrop-filter: none} .banner-stack .banner-content h2 { color: var(--text-primary); font-size: var(--font-size-lg)} .banner-stack .banner-item:nth-child(n + 2) .banner-content h2 { font-size: var(--font-size-base)} .banner-stack .banner-content p { color: var(--text-secondary); font-size: var(--font-size-sm)} .banner-stack .tag { border-color: var(--border-color); color: var(--text-secondary); background: var(--bg-secondary)} .banner-stack .banner-content a { display: none} .banner-tabbed .banner-tabs { display: flex; gap: var(--spacing-xs); border-bottom: 2px solid var(--border-color); overflow-x: auto; margin-bottom: var(--spacing-lg); order: -1} .banner-tab-btn { padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: none; cursor: pointer; font-weight: 600; color: var(--text-secondary); border-bottom: 3px solid transparent; transition: var(--transition); margin-bottom: -2px; white-space: nowrap; font-size: var(--font-size-sm); font-family: var(--primary-font)} .banner-tab-btn:hover { color: var(--accent-color)} .banner-tab-btn.active { color: var(--accent-color); border-bottom-color: var(--accent-color)} .banner-tabbed { display: flex; flex-direction: column} .banner-tabbed .banner-container { position: relative} .banner-tabbed .banner-item { display: none; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center} .banner-tabbed .banner-item.active { display: grid; animation: slideInTab 0.3s ease} .banner-tabbed .banner-item img { border-radius: var(--radius-base); aspect-ratio: 16 / 9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)} .banner-tabbed .banner-content { position: static; background: transparent; color: var(--text-primary); padding: 0; max-width: none; backdrop-filter: none} .banner-tabbed .banner-content h2 { color: var(--text-primary)} .banner-tabbed .banner-content p { color: var(--text-secondary)} .banner-tabbed .tag { border-color: var(--border-color); color: var(--text-secondary); background: var(--bg-secondary)} .banner-tabbed.tabs-vertical { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-xl)} .banner-tabbed.tabs-vertical .banner-tabs { flex-direction: column; border-bottom: none; border-right: 2px solid var(--border-color); margin-bottom: 0; padding-right: var(--spacing-md); width: 200px; order: 0} .banner-tabbed.tabs-vertical .banner-tab-btn { border-bottom: none; border-right: 3px solid transparent; margin-bottom: 0; margin-right: calc(var(--spacing-md) * -1 - 2px); text-align: left; padding-right: var(--spacing-md)} .banner-tabbed.tabs-vertical .banner-tab-btn.active { border-right-color: var(--accent-color); border-bottom-color: transparent} @media (max-width: 768px) { .banner-split .banner-container { aspect-ratio: auto; min-height: auto} .banner-split .banner-item { position: relative; inset: auto; grid-template-columns: 1fr; grid-template-areas: "image" "content"; grid-template-rows: auto auto; border: 1px solid var(--border-color); border-radius: var(--radius-base); overflow: hidden; gap: 0; padding: 0; min-height: auto} .banner-split.split-right .banner-item { grid-template-columns: 1fr; grid-template-areas: "image" "content"} .banner-split .banner-item.active { display: grid} .banner-split .banner-item img { grid-area: image; border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9} .banner-split .banner-item .banner-content { grid-area: content; position: static; background: var(--bg-primary); color: var(--text-primary); padding: var(--spacing-md); border-top: 1px solid var(--border-color); backdrop-filter: none} .banner-split .banner-content h2 { color: var(--text-primary)} .banner-split .banner-content p { color: var(--text-secondary)} .banner-split .tag { border-color: var(--border-color); color: var(--text-secondary); background: var(--bg-secondary)} .banner-split .slider-dots { position: relative; bottom: auto; left: auto; transform: none; justify-content: center; padding: var(--spacing-sm) 0; background: transparent; display: flex} .banner-tabbed, .banner-tabbed.tabs-vertical { display: flex; flex-direction: column; grid-template-columns: 1fr} .banner-tabbed .banner-tabs, .banner-tabbed.tabs-vertical .banner-tabs { flex-direction: row; border-right: none; border-bottom: 2px solid var(--border-color); margin-bottom: var(--spacing-lg); padding-right: 0; width: 100%; overflow-x: auto; order: -1} .banner-tabbed .banner-tab-btn, .banner-tabbed.tabs-vertical .banner-tab-btn { border-right: none; border-bottom: 3px solid transparent; margin-right: 0; margin-bottom: -2px; text-align: center; padding-right: var(--spacing-md)} .banner-tabbed .banner-tab-btn.active, .banner-tabbed.tabs-vertical .banner-tab-btn.active { border-right-color: transparent; border-bottom-color: var(--accent-color)} .banner-tabbed .banner-item, .banner-tabbed.tabs-vertical .banner-item { grid-template-columns: 1fr; grid-template-areas: "image" "content"} .banner-multicolumn .banner-container, .banner-stack .banner-container { grid-template-columns: 1fr} .banner-magazine .banner-container { grid-template-columns: 1fr; grid-template-rows: auto auto auto} .banner-magazine .banner-item:nth-child(1) { grid-column: 1; grid-row: 1} .banner-magazine .banner-item:nth-child(2) { grid-column: 1; grid-row: 2} .banner-magazine .banner-item:nth-child(3) { grid-column: 1; grid-row: 3} .banner-slider .banner-container { aspect-ratio: unset} .banner-slider .banner-item { position: relative; inset: unset; grid-template-areas: "image" "content"; grid-template-rows: auto auto; border: 1px solid var(--border-color); border-radius: var(--radius-base); overflow: hidden} .banner-slider .banner-item img { grid-area: image; aspect-ratio: 16 / 9} .banner-slider .banner-content { position: static; grid-area: content; background: var(--bg-primary); color: var(--text-primary); backdrop-filter: none; padding: var(--spacing-md); max-width: none; border-top: 1px solid var(--border-color); bottom: unset; left: unset; right: unset} .banner-slider .banner-content h2 { color: var(--text-primary)} .banner-slider .banner-content p { color: var(--text-secondary)} .banner-slider .tag { border-color: var(--border-color); color: var(--text-secondary); background: var(--bg-secondary)} .banner-slider .slider-dots { position: relative; bottom: auto; left: auto; transform: none; justify-content: center; padding: var(--spacing-sm) 0; background: transparent} .banner-slider .dot { background: rgba(0, 0, 0, 0.3)} .banner-slider .dot:hover { background: rgba(0, 0, 0, 0.5)} .banner-slider .dot.active { background: var(--accent-color)} }