/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement } from "@arcgis/lumina";
import "../solution-resource-card/customElement.js";
const styles = css`/** @license
 * Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.resources-section {
  padding: 3rem var(--calcite-spacing-md);
  max-width: 1440px;
  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-sm) 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 SolutionsResourcesSection extends LitElement {
  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 = styles;
  }
  render() {
    return html`<div class="resources-section"><div class="section-header"><h2 class="section-heading">${this.heading}</h2><p class="section-subheading">${this.subheading}</p></div><div class="cards-container">${this.cards.map((card) => html`<solution-resource-card .icon=${card.icon} .meridianIcon=${card.meridianIcon} .heading=${card.heading} .description=${card.description} .url=${card.url} .sectionHeading=${this.heading}></solution-resource-card>`)}</div></div>`;
  }
}
customElement("solutions-resources-section", SolutionsResourcesSection);
export {
  SolutionsResourcesSection
};
