/*
 * templates/country.css -- page-type-specific rules for the 'country' entity type.
 * Part 4 of the load order in docs/DESIGN_SYSTEM.md ("File architecture /
 * load order"): loads after tokens.css, base.css and components.css. Only
 * ADDS rules; every value references a tokens.css variable (var(--...)).
 * The shared page-module primitives (.page-head, .module-grid/.module,
 * .stat/.stat-grid, .bullet-list, .related-grid, .card-list, .risk-item,
 * .source-list, .not-available) already live in components.css and are
 * reused as-is -- this file only holds the country-specific PESTLE/forecast
 * grid layout (shared with industry.css's approach, since country.php
 * renders the same `pestle`/`forecast_scenarios` industry-shared keys per
 * docs/CONTRACT.md §3's "all industry keys ... plus" country data shape).
 */

.module[data-key="pestle"] .subfield-grid,
.module[data-key="forecast_scenarios"] .subfield-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px 24px;
}

@media(max-width:720px){
  .module[data-key="pestle"] .subfield-grid,
  .module[data-key="forecast_scenarios"] .subfield-grid{grid-template-columns:1fr}
}

/* Country pages carry two distinct "companies" modules side by side
   (leading_companies = sector-specific, major_companies = economy-wide) --
   a visible top rule keeps them from reading as one merged list inside the
   shared module-grid. */
.module[data-key="major_companies"]{border-top:2px solid var(--line-dark)}