/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as n } from "../../chunks/runtime.js";
import { css as a, html as s } from "lit";
import { LitElement as o, nothing as t } from "@arcgis/lumina";
import "../solution-resource-card/customElement.js";
const r = a`*[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.resources-section{padding:3rem var(--calcite-spacing-md);margin:0 auto;box-sizing:border-box}.section-header{margin-bottom:3rem;text-align:center}.section-heading{font-size:var(--calcite-font-size-3);font-weight:var(--calcite-font-weight-small);margin:0 0 var(--calcite-spacing-lg) 0;color:var(--calcite-color-text-1)}.section-subheading{font-size:var(--calcite-font-size-0);color:var(--calcite-color-text-2);margin:0}.cards-container{display:flex;gap:var(--calcite-spacing-md);flex-wrap:wrap}.cards-container solution-resource-card{flex:1 1 200px}`;
class c extends o {
  constructor() {
    super(...arguments), this.heading = "", this.subheading = "", this.cards = [];
  }
  static {
    this.properties = { heading: [1, { type: String }], subheading: [1, { type: String }], cards: [1, { type: Array }] };
  }
  static {
    this.styles = r;
  }
  render() {
    const i = `section-heading-${this.heading.replace(/\s+/g, "-").toLowerCase()}`;
    return s`<div class="resources-section" aria-labelledby=${i ?? t}><div class="section-header"><h2 class="section-heading" id=${i ?? t} tabindex=0>${this.heading}</h2><p class="section-subheading" tabindex=0>${this.subheading}</p></div><div class="cards-container">${this.cards.map((e) => s`<solution-resource-card .icon=${e.icon} .meridianIcon=${e.meridianIcon} .heading=${e.heading} .description=${e.description} .url=${e.url} .headingEn=${e.headingEn} .sectionHeadingEn=${e.sectionHeadingEn}></solution-resource-card>`)}</div></div>`;
  }
}
n("solutions-resources-section", c);
export {
  c as SolutionsResourcesSection
};
