/* =============================================================================
 * GTA TV Wall Mounting — blog article components
 * -----------------------------------------------------------------------------
 * Hand-authored. Lives in assets/css/site/ deliberately: assets/css/generated/
 * is Elementor build output and must not be hand-edited, and assets/css/theme/,
 * /lib/ and /vendor/ are third-party. This is the first file in site/.
 *
 * EVERY value below is taken from DESIGN_LANGUAGE.md — no new colors, fonts or
 * type sizes are introduced. Token -> value mapping used here:
 *   heading text   #171717   (--e-global-color-primary)
 *   body text      #000000   (--e-global-color-text)
 *   brand accent   #FDBF0F   (--e-global-color-secondary)
 *   accent dark    #C48E02   (--e-global-color-accent)
 *   link hover     #0C31AC   (--e-global-color-9047768)
 *   page bg        #FFFFFF   (--e-global-color-3e403d1)
 *   light bg       #F9F9F9   (--e-global-color-1c42373)
 *   light bg alt   #F4F4F4   (de-facto canonical, DESIGN_LANGUAGE.md §1)
 *   divider gray   #DBDBDB   (--e-global-color-40e90f2)
 *   dark bg        #0C1020   (--e-global-color-b4d1b00)
 *   headings       Montserrat 700 / 1.2em     body  Heebo 400 / 2em
 *   h5             Inter 700 1.25rem          h6    Inter 700 1rem upper 3px
 *   button         Inter 500 .813rem upper, ls 1.2px, radius 10px, 20px 35px
 *
 * Everything is scoped under .gta-article so it cannot leak into other pages.
 * ========================================================================== */

.gta-article { --gta-ink:#171717; --gta-body:#000; --gta-accent:#FDBF0F;
  --gta-accent-dk:#C48E02; --gta-hover:#0C31AC; --gta-line:#DBDBDB;
  --gta-bg-1:#F9F9F9; --gta-bg-2:#F4F4F4; --gta-dark:#0C1020; }

/* --- 1. Key takeaways / answer box -------------------------------------- */
/* Sits directly under the H1. Short, factual, extractable. */
.gta-article .gta-takeaways{
  background:var(--gta-bg-1);
  border-left:5px solid var(--gta-accent);
  border-radius:10px;
  padding:24px 28px;
  margin:0 0 32px;
}
.gta-article .gta-takeaways__label{
  font-family:"Inter",sans-serif; font-size:1rem; font-weight:700;
  line-height:1.2em; text-transform:uppercase; letter-spacing:3px;
  color:var(--gta-ink); margin:0 0 12px;
}
.gta-article .gta-takeaways ul{ margin:0; padding-left:20px; }
.gta-article .gta-takeaways li{
  font-family:"Heebo",sans-serif; font-size:1rem; font-weight:400;
  line-height:1.9em; color:var(--gta-body); margin:0 0 6px;
}
.gta-article .gta-takeaways li:last-child{ margin-bottom:0; }

/* --- 2. Spec / comparison table ------------------------------------------ */
.gta-article .gta-table-wrap{ overflow-x:auto; margin:0 0 32px; }
.gta-article table.gta-table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--gta-line); border-radius:10px;
  font-family:"Heebo",sans-serif; font-size:1rem;
}
.gta-article table.gta-table caption{
  font-family:"Inter",sans-serif; font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:3px; color:var(--gta-ink);
  text-align:left; padding:0 0 12px;
}
.gta-article table.gta-table th,
.gta-article table.gta-table td{
  padding:14px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--gta-line); line-height:1.7em;
}
.gta-article table.gta-table thead th{
  background:var(--gta-dark); color:#fff;
  font-family:"Inter",sans-serif; font-weight:700; font-size:1rem;
  line-height:1.2em; border-bottom:none;
}
.gta-article table.gta-table tbody tr:nth-child(even){ background:var(--gta-bg-2); }
.gta-article table.gta-table tbody tr:last-child th,
.gta-article table.gta-table tbody tr:last-child td{ border-bottom:none; }
.gta-article table.gta-table tbody th{
  font-family:"Heebo",sans-serif; font-weight:700; color:var(--gta-ink); width:34%;
}

/* --- 3. Callout (note / warning) ----------------------------------------- */
.gta-article .gta-callout{
  background:var(--gta-bg-2);
  border:1px solid var(--gta-line);
  border-top:4px solid var(--gta-accent);
  border-radius:10px; padding:20px 24px; margin:0 0 32px;
}
.gta-article .gta-callout--warn{ border-top-color:var(--gta-accent-dk); }
.gta-article .gta-callout__label{
  font-family:"Inter",sans-serif; font-size:1rem; font-weight:700;
  line-height:1.2em; text-transform:uppercase; letter-spacing:3px;
  color:var(--gta-ink); margin:0 0 8px;
}
.gta-article .gta-callout p{ margin:0; line-height:1.9em; }
.gta-article .gta-callout p + p{ margin-top:10px; }

/* --- 4. Numbered procedure ----------------------------------------------- */
.gta-article ol.gta-steps{ counter-reset:gta-step; list-style:none;
  margin:0 0 32px; padding:0; }
.gta-article ol.gta-steps > li{
  counter-increment:gta-step; position:relative;
  padding:0 0 20px 56px; margin:0;
  font-family:"Heebo",sans-serif; font-size:1rem; line-height:1.9em;
  color:var(--gta-body);
}
.gta-article ol.gta-steps > li::before{
  content:counter(gta-step); position:absolute; left:0; top:2px;
  width:36px; height:36px; border-radius:10px;
  background:var(--gta-accent); color:var(--gta-ink);
  font-family:"Inter",sans-serif; font-weight:700; font-size:1rem;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.gta-article ol.gta-steps > li:last-child{ padding-bottom:0; }
.gta-article ol.gta-steps > li strong{ color:var(--gta-ink); }

/* --- 5. At-a-glance key/value grid --------------------------------------- */
.gta-article .gta-glance{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px; background:var(--gta-line); border:1px solid var(--gta-line);
  border-radius:10px; overflow:hidden; margin:0 0 32px;
}
.gta-article .gta-glance div{ background:#fff; padding:18px 20px; }
.gta-article .gta-glance dt{
  font-family:"Inter",sans-serif; font-size:1rem; font-weight:700;
  line-height:1.2em; text-transform:uppercase; letter-spacing:3px;
  color:var(--gta-ink); margin:0 0 6px;
}
.gta-article .gta-glance dd{
  margin:0; font-family:"Heebo",sans-serif; font-size:1rem;
  line-height:1.7em; color:var(--gta-body);
}

/* --- 6. FAQ block --------------------------------------------------------- */
/* Plain <details> — no JS, and the answer text stays in the DOM for crawlers
   and AI readers even while collapsed. */
.gta-article .gta-faq{ margin:0 0 32px; border-top:1px solid var(--gta-line); }
.gta-article .gta-faq details{ border-bottom:1px solid var(--gta-line); }
.gta-article .gta-faq summary{
  cursor:pointer; list-style:none; padding:18px 44px 18px 0; position:relative;
  font-family:"Montserrat",sans-serif; font-size:1.25rem; font-weight:700;
  line-height:1.4em; color:var(--gta-ink);
}
.gta-article .gta-faq summary::-webkit-details-marker{ display:none; }
.gta-article .gta-faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:"Inter",sans-serif; font-weight:700; font-size:1.5rem;
  color:var(--gta-accent-dk); line-height:1;
}
.gta-article .gta-faq details[open] summary::after{ content:"\2212"; }
.gta-article .gta-faq summary:hover{ color:var(--gta-hover); }
.gta-article .gta-faq .gta-faq__a{ padding:0 0 20px; }
.gta-article .gta-faq .gta-faq__a p{ margin:0 0 10px; line-height:1.9em; }
.gta-article .gta-faq .gta-faq__a p:last-child{ margin-bottom:0; }

/* --- 7. Small shared bits ------------------------------------------------- */
.gta-article .gta-figure{ margin:0 0 32px; }
.gta-article .gta-figure img{ width:100%; height:auto; border-radius:10px;
  display:block; }
.gta-article .gta-figure figcaption{
  font-family:"Heebo",sans-serif; font-size:1rem; line-height:1.7em;
  color:var(--gta-body); padding-top:10px; border-top:1px solid var(--gta-line);
  margin-top:10px;
}
.gta-article .gta-updated{
  font-family:"Inter",sans-serif; font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:3px; color:var(--gta-ink);
  border-top:1px solid var(--gta-line); padding-top:16px; margin:32px 0 0;
}

/* --- 8. Responsive -------------------------------------------------------- */
@media (max-width:767px){
  .gta-article .gta-takeaways{ padding:20px; }
  .gta-article .gta-callout{ padding:16px 18px; }
  .gta-article ol.gta-steps > li{ padding-left:48px; }
  .gta-article ol.gta-steps > li::before{ width:32px; height:32px; }
  .gta-article table.gta-table th,
  .gta-article table.gta-table td{ padding:12px; }
  .gta-article .gta-faq summary{ font-size:1.125rem; padding-right:36px; }
}