/*
  Zweck: Tablet- und Mobile-Footer bis 1180px.
  Zielpfad: /home/mckiede/public_html/design/layout-tablet-footer.css
  Verantwortlich: mckie-Portal
*/

@media (max-width: 1180px) {
  /*
    Tablet/mobile footer: Zeile 1 – Site | Uhr | Impressum; Zeile 2 – Statusband.
    flex-shrink: 0, damit page-shell (overflow:hidden) die zweite Zeile nicht abschneidet.
  */
  .command-footer {
    flex: 0 0 auto;
    flex-shrink: 0;
    --footer-chip-height: 1.85rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 0.28rem 0.4rem;
    align-items: stretch;
    min-height: calc(var(--footer-chip-height) * 2 + 0.28rem);
    margin-top: var(--gap);
    padding: 0.4rem 0.65rem 0.5rem;
    font-size: 0.82rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--violet) 16%, transparent), transparent 68%), var(--surface-deep);
  }

  .command-footer .footer-chip--site,
  .command-footer .footer-chip--clock,
  .command-footer .footer-button {
    min-width: 0;
    min-height: var(--footer-chip-height);
  }

  .footer-chip--site {
    order: 1;
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    justify-self: start;
    width: auto;
    height: var(--footer-chip-height);
    padding-inline: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--violet);
    color: var(--black);
  }

  .footer-chip--clock {
    order: 2;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: var(--footer-chip-height);
    padding: 0.22rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--black);
    color: var(--peach);
    letter-spacing: 0.03em;
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--violet) 62%, transparent);
  }

  .footer-chip--clock .clock-date,
  .footer-chip--clock .clock-time {
    display: block;
    white-space: nowrap;
    line-height: 1.05;
    font-size: clamp(0.58rem, 2.35vw, 0.72rem);
    font-weight: 900;
  }

  .command-footer .footer-button {
    order: 3;
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    display: grid;
    place-items: center;
    width: auto;
    height: var(--footer-chip-height);
    padding-inline: 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--violet);
    color: var(--black);
  }

  .command-footer #console-status-feed.footer-status-band {
    order: 4;
    grid-column: 1 / -1;
    grid-row: 2;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 1.55rem;
    height: var(--footer-chip-height);
    max-height: var(--footer-chip-height);
    padding-inline: 0.75rem;
    background: var(--console-frame);
  }
}