/* proto-pages-aem.css: AEM's look on the landing pages' shared frame (proto-pages.css), loaded by every page of
   templates/search/: the section heads with AEM's red bar on the left as on its home's "AEM Electronics Products",
   the cards on its pale tile grey without a border, the tiles of the gauges page and the home in the grey of AEM's
   own home grid, a card name's tap target, and the small lines of the frame. Colour and type are cl-site.css's tokens only. */
@layer base, kit, site;

@layer site {

.aem-page .pp-h1, .aem-home .pp-h1 { text-transform: uppercase; }
.aem-pages .pp-shead { margin-top: 48px; padding: 2px 0 2px 12px; border-bottom: 0; border-left: 4px solid var(--site-accent); align-items: center; }
.aem-pages .pp-h2 { font-size: 24px; line-height: 1.15; }
.aem-pages .pp-card { border: 0; }
.aem-pages .pp-card__img { background: var(--site-plate); }
.aem-who { margin-top: 12px; max-width: 760px; font: 400 17px/1.35 var(--site-font-body); color: var(--site-fg); }
.aem-who a { color: var(--site-fg); }
.aem-partial { margin-top: 16px; font: 700 16px/1.3 var(--site-font-body); color: var(--site-fg); }
.aem-more { margin-top: 40px; }

/* tiles as AEM's home grid: the photo on white in a pale grey box, no border, the name in capitals under it */
.aem-top { margin-top: 24px; }
.aem-pages .pp-tile { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 12px; border: 0; background: var(--site-card); text-decoration: none; }
.aem-pages .pp-tile__img { margin-bottom: 8px; border-bottom: 0; background: var(--site-plate); }
.aem-pages .pp-tile__name { padding: 0; }
.aem-pages .pp-tile:hover { box-shadow: inset 0 0 0 2px var(--site-accent); }

/* a card's name is a 40px tap target however many lines it takes */
.aem-pages .pp-card__name a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* a phone (MOBILE-BRIEF rule 4): the H1 36px, every other text a step smaller, nothing under 13px, inputs stay 16px */
@media (max-width: 979.98px) {
  .aem-pages .pp-h1 { font-size: 36px; line-height: 1.05; }
  .aem-pages .pp-h2 { font-size: 18px; }
  .aem-pages .pp-shead { margin-top: 32px; }
  .aem-pages .pp-section { margin-top: 32px; }
  .aem-pages .pp-lead, .aem-who { font-size: 15px; }
  .aem-who { margin-top: 8px; }
  .aem-pages .pp-card__name { font-size: 15px; }
  .aem-pages .pp-card__detail, .aem-pages .pp-card__fits, .aem-pages .pp-card__fit { font-size: 14px; }
  .aem-pages .pp-card__part, .aem-pages .pp-stock { font-size: 13px; }
  .aem-pages .pp-card__price { font-size: 17px; }
  .aem-pages .pp-btn { font-size: 14px; }
  .aem-pages .pp-which { font-size: 15px; }
  .aem-pages .pp-tile__name { font-size: 14px; }
  .aem-pages .pp-links { margin-top: 40px; }
  .aem-pages .pp-links a { font-size: 14px; }
  .aem-more { margin-top: 32px; }
}

}