/* CSS Reset */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container);
  min-height: 100%;
  font-family: Arial, sans-serif;
  font-size: var(--md-sys-typescale-body-medium, 14px);
  line-height: 1.43;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
  border: 0;
}

a {
  background-color: transparent;
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

/* CSS Variables */
/* Design system color tokens are loaded from design-system/preview/colors-config.js */
/* Palette tokens are loaded from design-system/tokens/material3.web.css */
/* Spacing and typography tokens defined here */
:root {
  /* Spacing tokens */
  --md-sys-spacing-xs: 4px;
  --md-sys-spacing-sm: 8px;
  --md-sys-spacing-md: 16px;
  --md-sys-spacing-lg: 24px;
  --md-sys-spacing-xl: 32px;
  --md-sys-spacing-xxl: 48px;

  /* Typography tokens */
  --md-sys-typescale-body-medium: 14px;
  --md-sys-typescale-body-large: 16px;
  --md-sys-typescale-title-medium: 20px;
  --md-sys-typescale-title-large: 24px;
}

/* Page Container */
.page-container {
  display: flex;
  min-height: 100svh;
  padding-top: 32px;
  padding-right: 24px;
  padding-bottom: 32px;
  padding-left: 24px;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  background-image: linear-gradient(303deg, hsla(0, 0.00%, 0.00%, 0.00) 52%, hsla(49.999999999999915, 19.59%, 92.54%, 1.00)),
    linear-gradient(180deg, #e4e2d8, hsla(49.999999999999915, 9.27%, 74.28%, 1.00));
  font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}

/* Site Header */
.site-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-grow: 0;
}

/* Site Logo */
.site-logo {
  height: 40px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

/* Site Title */
.site-title {
  font-family: Bodoni Moda, serif;
  color: hsla(0, 1.35%, 15.13%, 1.00);
  font-size: 0.85rem;
  line-height: 1.4em;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Cards Container */
.cards-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
}

/* Profile Grid - Container for dynamically rendered cards */
.profile-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
}

/* Responsive Breakpoints */

/* Medium breakpoint (Tablet, max-width: 991px) */
@media screen and (max-width: 991px) {
  .site-header {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
  }

  .cards-container {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    grid-column-gap: 0.75em;
    grid-row-gap: 0.75em;
  }
}

/* Small breakpoint (Mobile Landscape, max-width: 767px) */
@media screen and (max-width: 767px) {
  .site-logo {
    height: 28px;
  }

  .page-container {
    justify-content: flex-start;
  }

  .site-header {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-grow: 0;
    align-self: stretch;
  }

  .profile-grid {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .cards-container {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* Tiny breakpoint (Mobile Portrait, max-width: 478px) */
@media screen and (max-width: 478px) {
  .site-header {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    line-height: 1.3em;
    text-align: center;
    flex-grow: 0;
    justify-content: start;
  }

  .page-container {
    padding: 16px;
    justify-content: flex-start;
  }

  .profile-grid {
    row-gap: 8px;
  }

  .cards-container {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}