/* ============================================ MONLIS Website - Blog Post (Single Article) Individual article page styles ============================================ *//* ========================================== ARTICLE HERO ========================================== */.article-hero {position:relative;width:100%;height:60vh;min-height:500px;max-height:700px;overflow:hidden;background-color:#f5f5f5;}.article-hero__image {width:100%;height:100%;object-fit:cover;filter:none !important;}.article-hero__gradient {position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);}.article-hero__content {position:absolute;bottom:0;left:0;width:100%;padding:40px 20px 60px;}.article-hero__container {max-width:1340px;margin:0 auto;}.article-hero__back {display:inline-flex;align-items:center;gap:8px;font-family:var(--font-secondary);font-size:12px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,0.8);text-decoration:none;margin-bottom:24px;transition:color 0.3s ease;}.article-hero__back:hover {color:var(--color-white);}.article-hero__back svg {width:16px;height:16px;}.article-hero__meta {display:flex;align-items:center;gap:16px;margin-bottom:16px;}.article-hero__category {display:inline-block;padding:6px 12px;background-color:var(--color-white);font-family:var(--font-secondary);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--color-mine-shaft);}.article-hero__info {display:flex;align-items:center;gap:16px;font-family:var(--font-secondary);font-size:12px;color:rgba(255,255,255,0.8);}.article-hero__date,.article-hero__time {display:flex;align-items:center;gap:6px;}.article-hero__date svg,.article-hero__time svg {width:14px;height:14px;}.article-hero__title {font-family:var(--font-secondary);font-weight:700;font-size:48px;line-height:1.1;color:var(--color-white);margin:0;max-width:900px;}/* ========================================== ARTICLE LAYOUT ========================================== */.article-layout {width:100%;background-color:var(--color-white);}.article-layout__container {max-width:1340px;margin:0 auto;padding:64px 20px 80px;display:grid;grid-template-columns:280px 1fr;gap:48px;}/* ========================================== ARTICLE SIDEBAR ========================================== */.article-sidebar {position:sticky;top:100px;height:fit-content;}.article-sidebar__author {padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid #f0f0f0;}.article-sidebar__label {font-family:var(--font-secondary);font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#9ca3af;margin:0 0 16px;}.article-sidebar__author-info {display:flex;align-items:center;gap:12px;}.article-sidebar__avatar {width:40px;height:40px;border-radius:50%;overflow:hidden;background-color:#f5f5f5;}.article-sidebar__avatar img {width:100%;height:100%;object-fit:cover;filter:grayscale(100%);}.article-sidebar__name {font-family:var(--font-secondary);font-weight:700;font-size:14px;color:var(--color-mine-shaft);margin:0;}.article-sidebar__role {font-family:var(--font-secondary);font-size:11px;color:#666666;margin:0;}.article-sidebar__share-buttons {display:flex;gap:8px;}.article-sidebar__share-btn {width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid #e5e5e5;color:#666666;cursor:pointer;transition:all 0.3s ease;}.article-sidebar__share-btn:hover {background-color:var(--color-mine-shaft);border-color:var(--color-mine-shaft);color:var(--color-white);}/* ========================================== ARTICLE CONTENT ========================================== */.article-content {max-width:720px;}.article-content__lead {font-family:var(--font-secondary);font-weight:500;font-size:24px;line-height:1.5;color:var(--color-mine-shaft);margin:0 0 48px;}.article-content__body {margin-bottom:48px;}.article-content__body p {font-family:var(--font-secondary);font-size:17px;line-height:1.8;color:#666666;margin:0 0 24px;}.article-content__body h2 {font-family:var(--font-secondary);font-weight:700;font-size:28px;color:var(--color-mine-shaft);margin:48px 0 24px;}.article-content__quote {border-left:4px solid var(--color-mine-shaft);padding-left:24px;margin:40px 0;}.article-content__quote p {font-family:var(--font-secondary);font-style:italic;font-size:20px;line-height:1.6;color:#444444;margin:0 0 8px;}.article-content__quote cite {font-family:var(--font-secondary);font-style:normal;font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#9ca3af;}.article-content__figure {margin:40px 0;}.article-content__figure img {width:100%;height:auto;filter:grayscale(100%);transition:filter 0.7s ease;}.article-content__figure:hover img {filter:grayscale(0%);}.article-content__figure figcaption {font-family:var(--font-secondary);font-style:italic;font-size:12px;color:#9ca3af;text-align:center;margin-top:12px;}/* ========================================== ARTICLE TAGS ========================================== */.article-content__tags {display:flex;flex-wrap:wrap;gap:12px;padding-top:32px;border-top:1px solid #f0f0f0;margin-bottom:64px;}.article-content__tag {padding:8px 16px;background-color:#fafafa;font-family:var(--font-secondary);font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--color-mine-shaft);cursor:pointer;transition:all 0.3s ease;}.article-content__tag:hover {background-color:var(--color-mine-shaft);color:var(--color-white);}/* ========================================== ARTICLE FAQ ========================================== */.article-faq {margin-top:64px;}.article-faq__title {font-family:var(--font-secondary);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:2px;color:var(--color-mine-shaft);margin:0 0 32px;}.article-faq__list {border-top:1px solid #f0f0f0;}.article-faq__item {border-bottom:1px solid #f0f0f0;}.article-faq__question {width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;background:none;border:none;font-family:var(--font-secondary);font-weight:500;font-size:16px;text-align:left;color:var(--color-mine-shaft);cursor:pointer;transition:color 0.3s ease;}.article-faq__question:hover {color:#666666;}.article-faq__icon {flex-shrink:0;transition:transform 0.3s ease;}.article-faq__item.is-open .article-faq__icon {transform:rotate(45deg);}.article-faq__answer {max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;}.article-faq__item.is-open .article-faq__answer {max-height:300px;padding-bottom:20px;}.article-faq__answer p {font-family:var(--font-secondary);font-size:15px;line-height:1.7;color:#666666;margin:0;}/* ========================================== RELATED POSTS ========================================== */.article-related {width:100%;padding:80px 0;background-color:#fafafa;}.article-related__container {max-width:1340px;margin:0 auto;padding:0 20px;}.article-related__title {font-family:var(--font-secondary);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:2px;color:var(--color-mine-shaft);text-align:center;margin:0 0 48px;}.article-related__grid {display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}.article-related__card {display:block;background-color:var(--color-white);padding:16px;text-decoration:none;transition:box-shadow 0.3s ease;}.article-related__card:hover {box-shadow:0 10px 40px rgba(0,0,0,0.1);}.article-related__image-wrapper {aspect-ratio:2 / 1;overflow:hidden;margin-bottom:24px;}.article-related__image {width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:all 0.7s ease;}.article-related__card:hover .article-related__image {filter:grayscale(0%);}.article-related__content {padding:0 8px 8px;}.article-related__category {display:block;font-family:var(--font-secondary);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#9ca3af;margin-bottom:8px;}.article-related__card-title {font-family:var(--font-secondary);font-weight:700;font-size:18px;color:var(--color-mine-shaft);margin:0;transition:color 0.3s ease;}.article-related__card:hover .article-related__card-title {color:#666666;}/* ========================================== RESPONSIVE ========================================== */@media (max-width:1024px) {.article-layout__container {grid-template-columns:1fr;gap:0;}.article-sidebar {position:relative;top:0;display:flex;gap:48px;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid #f0f0f0;}.article-sidebar__author {padding-bottom:0;margin-bottom:0;border-bottom:none;}.article-hero__title {font-size:36px;}}@media (max-width:768px) {.article-hero {height:50vh;min-height:400px;}.article-hero__title {font-size:28px;}.article-hero__content {padding:24px 16px 40px;}.article-layout__container {padding:40px 16px 60px;}.article-sidebar {flex-direction:column;gap:24px;}.article-content__lead {font-size:20px;margin-bottom:32px;}.article-content__body p {font-size:15px;}.article-content__body h2 {font-size:22px;margin:32px 0 16px;}.article-content__quote p {font-size:17px;}.article-related__grid {grid-template-columns:1fr;}.article-related {padding:60px 0;}}@media (max-width:480px) {.article-hero__title {font-size:24px;}.article-hero__meta {flex-direction:column;align-items:flex-start;gap:12px;}.article-faq__question {font-size:14px;}.article-related__title {font-size:18px;}}