/* =============================================
   ARTICLE PAGE — COMPONENT STYLES
   Save Ideas Digital
============================================= */

/* ---- GLOBAL OVERFLOW FIX ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
.article-layout { overflow-x: hidden; max-width: 100%; }
.article-content > * { max-width: 100%; min-width: 0; }
.article-content { min-width: 0; }
.article-sidebar { min-width: 0; }
/* All grid/flex children must have min-width:0 to prevent overflow */
.stat-grid > *, .eeat-grid > *, .cwv-grid > *, .tool-grid > *,
.benefit-grid > *, .ad-formats-grid > *, .infographic-grid > *,
.stats-grid > *, .compare-grid > *, .bp-grid > *, .trend-card { min-width: 0; }

/* ---- REVEAL / ANIMATE ---- */
.reveal, .animate-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible, .animate-reveal.visible { opacity: 1; transform: none; }

/* ---- INTRO BOX ---- */
.intro-box { background: #f0fff4; border-left: 5px solid #00c853; border-radius: 0 8px 8px 0; padding: 1.5rem 2rem; margin-bottom: 2rem; }
.intro-box p { margin: 0; font-size: 1.05rem; color: #1a1a1a; }

/* ---- STAT GRID ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.stat-card { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; padding: 1.5rem 1rem; text-align: center; }
.stat-card.green { border-color: #00c853; box-shadow: 5px 5px 0 #00c853; }
.stat-card.blue { border-color: #2979ff; box-shadow: 5px 5px 0 #2979ff; }
.stat-card.coral { border-color: #ff5252; box-shadow: 5px 5px 0 #ff5252; }
.stat-card.purple { border-color: #7c4dff; box-shadow: 5px 5px 0 #7c4dff; }
.stat-number { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 2rem; color: #00c853; line-height: 1; margin-bottom: 0.4rem; }
.stat-card.blue .stat-number { color: #2979ff; }
.stat-card.coral .stat-number { color: #ff5252; }
.stat-card.purple .stat-number { color: #7c4dff; }
.stat-label { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: #374151; }

/* ---- STATS INFOGRAPHIC (Google Ads post) ---- */
.stats-infographic { background: #0d0d0d; border-radius: 12px; padding: 2rem; margin: 2rem 0; }
.stats-infographic-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: #00c853; margin-bottom: 1.5rem; text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.stat-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1.25rem; text-align: center; }
.stat-box .stat-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.stat-box .stat-number { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.75rem; color: #00c853; line-height: 1; margin-bottom: 0.3rem; }
.stat-box .stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.4; }

/* ---- CALLOUT BOXES ---- */
.callout { border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-left: 5px solid; }
.callout.info, .callout-info { background: #eff6ff; border-color: #2979ff; }
.callout.tip, .callout-tip { background: #f0fff4; border-color: #00c853; }
.callout.warning, .callout-warning { background: #fffbeb; border-color: #f59e0b; }
.callout.green { background: #f0fff4; border-color: #00c853; }
.callout.blue, .callout.callout-blue { background: #eff6ff; border-color: #2979ff; }
.callout.orange, .callout.callout-orange { background: #fff7ed; border-color: #f97316; }
.callout.coral { background: #fff5f5; border-color: #ff5252; }
.callout.purple { background: #f5f3ff; border-color: #7c4dff; }
.callout-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.callout.info .callout-title, .callout.blue .callout-title, .callout.callout-blue .callout-title { color: #2979ff; }
.callout.tip .callout-title, .callout.green .callout-title { color: #00c853; }
.callout.warning .callout-title { color: #f59e0b; }
.callout.orange .callout-title, .callout.callout-orange .callout-title { color: #f97316; }
.callout.coral .callout-title { color: #ff5252; }
.callout.purple .callout-title { color: #7c4dff; }
.callout p { margin: 0; color: #374151; }
.callout-icon { font-size: 1.25rem; margin-right: 0.5rem; vertical-align: middle; }

/* ---- INFOGRAPHIC ---- */
.infographic { background: #0d0d0d; border-radius: 12px; padding: 2rem; margin: 2rem 0; }
.infographic-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; color: #fff; text-align: center; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
.infographic-subtitle { font-size: 0.875rem; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 1.5rem; }
.infographic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.infographic-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; text-align: center; }
.item-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.item-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; color: #fff; margin-bottom: 0.25rem; }
.item-desc { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.4; }
.item-score { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.25rem; color: #00c853; margin-top: 0.4rem; }
.infographic-metric { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 1rem; text-align: center; }
.metric-val { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.75rem; color: #00c853; line-height: 1; }
.metric-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 0.25rem; }
.metric-source { font-size: 0.7rem; color: rgba(255,255,255,0.3); margin-top: 0.2rem; }
.infographic-bar-section { margin-top: 1.5rem; }
.infographic-bar-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-bottom: 0.75rem; }
.bar-item { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.bar-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); width: 130px; flex-shrink: 0; }
.bar-track { flex: 1; height: 10px; background: rgba(255,255,255,0.1); border-radius: 50px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 50px; transition: width 1s ease; }
.bar-fill.green { background: #00c853; }
.bar-fill.blue { background: #2979ff; }
.bar-fill.coral { background: #ff5252; }
.bar-fill.purple { background: #7c4dff; }
.bar-fill.teal { background: #00bcd4; }
.infographic-footer { font-size: 0.75rem; color: rgba(255,255,255,0.3); text-align: center; margin-top: 1rem; }

/* ---- PILLAR TABS ---- */
.pillar-tabs { margin: 2rem 0; }
.pillar-tab-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pillar-tab-btn { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.875rem; padding: 0.6rem 1.25rem; border: 2px solid #0d0d0d; border-radius: 6px; background: #fff; cursor: pointer; transition: all 0.2s; }
.pillar-tab-btn.active, .pillar-tab-btn:hover { background: #0d0d0d; color: #fff; }
.pillar-tab-panel { display: none; }
.pillar-tab-panel.active { display: block; }

/* ---- COMPARE GRID ---- */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.compare-item { background: #fff; border: 2px solid #e5e7eb; border-radius: 8px; padding: 1rem 1.25rem; font-size: 0.9rem; color: #374151; }
.compare-item.good { border-color: #00c853; background: #f0fff4; }
.compare-item.bad { border-color: #ff5252; background: #fff5f5; }
.compare-toggle { margin: 1.5rem 0; }
.compare-toggle-btns, .toggle-header { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.compare-btn, .toggle-btn { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.875rem; padding: 0.6rem 1.25rem; border: 2px solid #0d0d0d; border-radius: 6px; background: #fff; cursor: pointer; transition: all 0.2s; }
.compare-btn.active, .toggle-btn.active, .compare-btn:hover, .toggle-btn:hover { background: #0d0d0d; color: #fff; }
.compare-panel, .toggle-panel { display: none; }
.compare-panel.active, .toggle-panel.active { display: block; }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th { background: #0d0d0d; color: #fff; padding: 0.75rem 1rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.875rem; text-align: left; }
.comparison-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; font-size: 0.9rem; }
.comparison-table tr:hover td { background: #f9fafb; }

/* ---- FAQ ---- */
.faq-section { margin: 2rem 0; }
.faq-item { border: 2px solid #e5e7eb; border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; }
.faq-question { width: 100%; text-align: left; background: #fff; padding: 1rem 1.25rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: #0d0d0d; cursor: pointer; border: none; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
.faq-question:hover, .faq-question.active { background: #f0fff4; color: #00c853; }
.faq-answer { display: none; padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb; color: #374151; font-size: 0.95rem; line-height: 1.7; }
.faq-answer.active { display: block; }
.faq-icon { font-size: 0.75rem; transition: transform 0.2s; }
.faq-question.active .faq-icon { transform: rotate(180deg); }

/* ---- CHECKLIST ---- */
.checklist-section { margin: 2rem 0; }
.checklist-header { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; color: #0d0d0d; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.checklist-body { display: flex; flex-direction: column; gap: 0.75rem; }
.checklist-box { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 4px 4px 0 #0d0d0d; padding: 1.25rem; }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: #374151; }
.checklist li::before { content: '✓'; color: #00c853; font-weight: 800; flex-shrink: 0; margin-top: 0.1rem; }
.checklist-items { list-style: none; padding: 0; margin: 1rem 0; }
.check-item, .checklist-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #f3f4f6; font-size: 0.95rem; color: #374151; }
.check-item:last-child, .checklist-item:last-child { border-bottom: none; }
.check-box { width: 20px; height: 20px; background: #00c853; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; }
.checklist-progress-text { font-size: 0.85rem; color: #6b7280; margin-bottom: 0.5rem; }
.progress-bar-wrap { background: #e5e7eb; border-radius: 50px; height: 8px; overflow: hidden; margin-bottom: 1.5rem; }
.progress-bar-fill { height: 100%; background: #00c853; border-radius: 50px; transition: width 0.8s ease; }

/* ---- CWV GRID ---- */
.cwv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.cwv-card { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; padding: 1.25rem; }
.cwv-card.cwv-lcp { border-color: #00c853; box-shadow: 5px 5px 0 #00c853; }
.cwv-card.cwv-inp { border-color: #2979ff; box-shadow: 5px 5px 0 #2979ff; }
.cwv-card.cwv-cls { border-color: #7c4dff; box-shadow: 5px 5px 0 #7c4dff; }
.cwv-metric { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; color: #00c853; }
.cwv-card.cwv-inp .cwv-metric { color: #2979ff; }
.cwv-card.cwv-cls .cwv-metric { color: #7c4dff; }
.cwv-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; margin: 0.3rem 0; }
.cwv-desc { font-size: 0.8rem; color: #6b7280; line-height: 1.4; }

/* ---- E-E-A-T GRID ---- */
.eeat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.eeat-card, .eeat-box { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; padding: 1.25rem; word-wrap: break-word; overflow-wrap: break-word; min-width: 0; }
.eeat-card p { font-size: 0.875rem; color: #374151; line-height: 1.6; margin: 0; word-wrap: break-word; overflow-wrap: break-word; }
.eeat-card h4 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: #0d0d0d; margin-bottom: 0.5rem; }
.eeat-letter { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #0d0d0d; color: #00c853; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.25rem; border-radius: 6px; margin-bottom: 0.75rem; }
.eeat-card.eeat-e1 { border-color: #00c853; box-shadow: 5px 5px 0 #00c853; }
.eeat-card.eeat-e1 .eeat-letter { background: #00c853; color: #0d0d0d; }
.eeat-card.eeat-e2 { border-color: #2979ff; box-shadow: 5px 5px 0 #2979ff; }
.eeat-card.eeat-e2 .eeat-letter { background: #2979ff; color: #fff; }
.eeat-card.eeat-a { border-color: #7c4dff; box-shadow: 5px 5px 0 #7c4dff; }
.eeat-card.eeat-a .eeat-letter { background: #7c4dff; color: #fff; }
.eeat-card.eeat-t { border-color: #ff5252; box-shadow: 5px 5px 0 #ff5252; }
.eeat-card.eeat-t .eeat-letter { background: #ff5252; color: #fff; }
.eeat-item { margin-bottom: 0.5rem; }
.eeat-item-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.875rem; color: #0d0d0d; margin-bottom: 0.2rem; }

/* ---- TOOL GRID ---- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.tool-card { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 4px 4px 0 #0d0d0d; padding: 1rem; text-align: center; }

/* ---- TREND CARDS ---- */
.trend-card { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; margin-bottom: 1.5rem; overflow: hidden; }
.trend-card-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: #f9fafb; border-bottom: 2px solid #0d0d0d; }
.trend-number { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 2rem; color: #00c853; line-height: 1; }
.trend-icon { font-size: 1.5rem; }
.trend-impact { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.trend-card > p, .trend-card > div:not(.trend-card-header) { padding: 1rem 1.25rem; }
.h2-icon { margin-right: 0.5rem; }

/* ---- BENEFIT GRID ---- */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.benefit-card { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; padding: 1.5rem; }
.benefit-icon { font-size: 1.75rem; margin-bottom: 0.75rem; }

/* ---- AD FORMAT CARDS ---- */
.ad-formats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.ad-format-card { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; padding: 1.25rem; }
.ad-format-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }

/* ---- BP GRID ---- */
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.bp-card { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; padding: 1.25rem; }

/* ---- QUIZ ---- */
.quiz-box { background: #fff; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 6px 6px 0 #0d0d0d; padding: 2rem; margin: 2rem 0; }
.quiz-question { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1rem; color: #0d0d0d; margin-bottom: 1.25rem; }
.quiz-options { display: flex; flex-direction: column; gap: 0.75rem; }
.quiz-option { width: 100%; text-align: left; padding: 0.85rem 1.25rem; border: 2px solid #e5e7eb; border-radius: 8px; background: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; }
.quiz-option:hover { border-color: #00c853; background: #f0fff4; }
.quiz-option.correct { border-color: #00c853; background: #f0fff4; color: #00a040; }
.quiz-option.incorrect { border-color: #ff5252; background: #fff5f5; color: #cc0000; }
.quiz-feedback { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; display: none; }
.quiz-feedback.show { display: block; }
.quiz-nav { display: flex; justify-content: flex-end; margin-top: 1.25rem; }

/* ---- AUTHOR BOX ---- */
.author-box { display: flex; align-items: center; gap: 1.25rem; background: #f9fafb; border: 2px solid #0d0d0d; border-radius: 8px; box-shadow: 5px 5px 0 #0d0d0d; padding: 1.5rem; margin: 2.5rem 0; }
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #0d0d0d; }
.author-box h4 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1rem; margin-bottom: 0.25rem; }
.author-box p { font-size: 0.875rem; color: #6b7280; margin: 0; }

/* ---- CTA SECTION (within article) ---- */
.cta-section { background: #0d0d0d; border-radius: 12px; padding: 2.5rem; text-align: center; margin: 2.5rem 0; }
.cta-section h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; color: #fff; margin-bottom: 0.75rem; }
.cta-section p { color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; }

/* ---- INFO TABLE ---- */
.info-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.info-table th { background: #0d0d0d; color: #fff; padding: 0.75rem 1rem; text-align: left; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.875rem; }
.info-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; }
.info-table tr:hover td { background: #f9fafb; }

/* ---- READING PROGRESS BAR ---- */
#reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: #00c853; z-index: 9999; transition: width 0.1s; width: 0%; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .infographic-grid { grid-template-columns: repeat(2, 1fr); }
    .eeat-grid { grid-template-columns: 1fr; }
    .cwv-grid { grid-template-columns: 1fr; }
    .benefit-grid { grid-template-columns: 1fr; }
    .ad-formats-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
    .bp-grid { grid-template-columns: 1fr; }
    .compare-grid { grid-template-columns: 1fr; }
    .trend-card-header { flex-wrap: wrap; }
    .author-box { flex-direction: column; text-align: center; }
    .pillar-tab-btns { gap: 0.35rem; }
    .pillar-tab-btn { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
    .compare-toggle-btns, .toggle-header { flex-direction: column; }
    /* Tables scroll horizontally on mobile */
    .article-content table, .info-table, .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Infographic bar labels */
    .bar-label { width: 90px; font-size: 0.75rem; }
    /* Quiz */
    .quiz-box { padding: 1.25rem; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .stat-number { font-size: 1.6rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .infographic-grid { grid-template-columns: 1fr 1fr; }
    .ad-formats-grid { grid-template-columns: 1fr; }
    .tool-grid { grid-template-columns: 1fr 1fr; }
    .article-content h2 { font-size: 1.4rem; }
    .article-content h3 { font-size: 1.15rem; }
    .infographic { padding: 1.25rem; }
    .stats-infographic { padding: 1.25rem; }
}