/*
 * WEB-55: tenant-theme baseline for Material Design Components classes
 * that adsentient agents emit (mdc-card, mdc-button, mdc-layout-grid,
 * mdc-elevation--zN, mdc-typography--*). Loaded after style.css so it
 * overrides where the older theme rules are too narrow.
 *
 * Tenants override individual values via customizer/v1/css; the
 * --mdc-* CSS vars on :root give brand-specific palette without
 * touching this file.
 *
 * Goal: agent HTML renders correctly out of the box without each
 * page-edit having to POST backing CSS.
 */

/* === Layout grid (12-column responsive) ================================= */

.mdc-layout-grid {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 24px 16px;
    max-width: 1280px;
    width: 100%;
}

.mdc-layout-grid__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mdc-grid-gap, 16px);
    align-items: stretch;
}

.mdc-layout-grid__cell {
    grid-column: span 4;
    min-width: 0;
}

.mdc-layout-grid__cell--span-1  { grid-column: span 1; }
.mdc-layout-grid__cell--span-2  { grid-column: span 2; }
.mdc-layout-grid__cell--span-3  { grid-column: span 3; }
.mdc-layout-grid__cell--span-4  { grid-column: span 4; }
.mdc-layout-grid__cell--span-5  { grid-column: span 5; }
.mdc-layout-grid__cell--span-6  { grid-column: span 6; }
.mdc-layout-grid__cell--span-7  { grid-column: span 7; }
.mdc-layout-grid__cell--span-8  { grid-column: span 8; }
.mdc-layout-grid__cell--span-9  { grid-column: span 9; }
.mdc-layout-grid__cell--span-10 { grid-column: span 10; }
.mdc-layout-grid__cell--span-11 { grid-column: span 11; }
.mdc-layout-grid__cell--span-12 { grid-column: span 12; }

@media (max-width: 839px) {
    .mdc-layout-grid__inner { grid-template-columns: repeat(8, 1fr); }
    .mdc-layout-grid__cell,
    .mdc-layout-grid__cell--span-4,
    .mdc-layout-grid__cell--span-5,
    .mdc-layout-grid__cell--span-6 { grid-column: span 4; }
    .mdc-layout-grid__cell--span-7,
    .mdc-layout-grid__cell--span-8 { grid-column: span 8; }
}

@media (max-width: 599px) {
    .mdc-layout-grid { padding: 16px 12px; }
    .mdc-layout-grid__inner { grid-template-columns: repeat(4, 1fr); }
    .mdc-layout-grid__cell,
    .mdc-layout-grid__cell--span-1,
    .mdc-layout-grid__cell--span-2,
    .mdc-layout-grid__cell--span-3,
    .mdc-layout-grid__cell--span-4,
    .mdc-layout-grid__cell--span-5,
    .mdc-layout-grid__cell--span-6,
    .mdc-layout-grid__cell--span-7,
    .mdc-layout-grid__cell--span-8 { grid-column: span 4; }
}

/* === Elevation scale (box-shadow) ======================================== */

.mdc-elevation--z0  { box-shadow: none; }
.mdc-elevation--z1  { box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.06); }
.mdc-elevation--z2  { box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); }
.mdc-elevation--z3  { box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08); }
.mdc-elevation--z4  { box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); }
.mdc-elevation--z6  { box-shadow: 0 6px 12px rgba(0,0,0,0.14), 0 3px 6px rgba(0,0,0,0.10); }
.mdc-elevation--z8  { box-shadow: 0 8px 16px rgba(0,0,0,0.16), 0 4px 8px rgba(0,0,0,0.10); }
.mdc-elevation--z12 { box-shadow: 0 12px 24px rgba(0,0,0,0.18), 0 5px 10px rgba(0,0,0,0.12); }
.mdc-elevation--z16 { box-shadow: 0 16px 32px rgba(0,0,0,0.20), 0 6px 12px rgba(0,0,0,0.14); }
.mdc-elevation--z24 { box-shadow: 0 24px 48px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.16); }

.mdc-elevation-transition { transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); }

/* === Typography scale ==================================================== */

.mdc-typography--headline1 { font-size: 6rem;    line-height: 1.16; font-weight: 300; letter-spacing: -0.015625em; margin: 0 0 0.5em; }
.mdc-typography--headline2 { font-size: 3.75rem; line-height: 1.20; font-weight: 300; letter-spacing: -0.0083em;   margin: 0 0 0.5em; }
.mdc-typography--headline3 { font-size: 3rem;    line-height: 1.25; font-weight: 400; letter-spacing: normal;       margin: 0 0 0.5em; }
.mdc-typography--headline4 { font-size: 2.125rem;line-height: 1.235;font-weight: 400; letter-spacing: 0.0073em;     margin: 0 0 0.5em; }
.mdc-typography--headline5 { font-size: 1.5rem;  line-height: 1.33; font-weight: 400; letter-spacing: normal;       margin: 0 0 0.5em; }
.mdc-typography--headline6 { font-size: 1.25rem; line-height: 1.6;  font-weight: 500; letter-spacing: 0.0125em;     margin: 0 0 0.5em; }
.mdc-typography--subtitle1 { font-size: 1rem;    line-height: 1.75; font-weight: 400; letter-spacing: 0.009em;      margin: 0 0 0.5em; }
.mdc-typography--subtitle2 { font-size: 0.875rem;line-height: 1.57; font-weight: 500; letter-spacing: 0.007em;      margin: 0 0 0.5em; }
.mdc-typography--body1     { font-size: 1rem;    line-height: 1.5;  font-weight: 400; letter-spacing: 0.03125em; }
.mdc-typography--body2     { font-size: 0.875rem;line-height: 1.43; font-weight: 400; letter-spacing: 0.0179em; }
.mdc-typography--button    { font-size: 0.875rem;line-height: 2.25; font-weight: 500; letter-spacing: 0.0892em; text-transform: uppercase; }
.mdc-typography--caption   { font-size: 0.75rem; line-height: 1.66; font-weight: 400; letter-spacing: 0.0333em; }
.mdc-typography--overline  { font-size: 0.75rem; line-height: 2;    font-weight: 500; letter-spacing: 0.166em; text-transform: uppercase; }

/* === Button sub-elements (parent .mdc-button styled in style.css) ======= */

.mdc-button { position: relative; overflow: hidden; }
.mdc-button__ripple { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.mdc-button__label { position: relative; display: inline-flex; align-items: center; z-index: 1; }
.mdc-button__icon  { margin-right: 8px; font-size: 1.125em; vertical-align: middle; }

/* === Card sub-elements ================================================== */

.mdc-card__primary-action {
    display: flex; flex-direction: column; align-items: stretch;
    cursor: pointer; outline: none; border: none; background: transparent;
    padding: 0; text-align: inherit; color: inherit; font: inherit;
    border-radius: inherit; position: relative; overflow: hidden;
}
.mdc-card__content { padding: 16px; }
.mdc-card__media   { position: relative; box-sizing: border-box; background-repeat: no-repeat; background-position: center; background-size: cover; }
.mdc-card__media--16-9 { padding-bottom: 56.25%; }
.mdc-card__media--square { padding-bottom: 100%; }
.mdc-card__actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; box-sizing: border-box; min-height: 52px; padding: 8px; }
.mdc-card__action-buttons,
.mdc-card__action-icons { display: flex; flex-direction: row; align-items: center; gap: 8px; }