/* Compact, readable first screen for the four computer-model landing pages. */
body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
.artrel-hero-intro--mobile {
  display: none;
}

@media (max-width: 575.98px) {
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .artrel-hero-intro--desktop {
    display: none;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .artrel-hero-intro--mobile {
    display: inline;
  }
}

@media (max-width: 767.98px) {
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18) main.wrapper {
    padding-top: 1rem;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18) .breadcrumb__wrapper {
    margin-bottom: .625rem;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child {
    padding-top: .75rem !important;
    padding-bottom: 1.25rem !important;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child > .container > .row {
    --bs-gutter-y: .75rem;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child > .container > .row > .text-end img {
    display: block;
    width: min(100%, 240px) !important;
    height: 240px;
    margin-inline: auto;
    object-fit: contain;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child h1 {
    margin-bottom: .65rem !important;
    font-size: clamp(1.75rem, 7.7vw, 2rem);
    line-height: 1.13;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child .badge {
    margin-bottom: .65rem !important;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child p.lead {
    margin-bottom: .85rem !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 1rem;
    line-height: 1.45;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child h1 + p + .d-flex {
    gap: .5rem !important;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child h1 + p + .d-flex .btn {
    width: 100% !important;
    padding: .6rem .85rem !important;
    font-size: .88rem;
    white-space: normal;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child h1 + p + .d-flex .btn-primary {
    order: -1;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child h1 + p + .d-flex + .row {
    margin-top: .65rem !important;
  }
}

/* The theme's .text-white-50 utility uses !important in a later cascade layer. */
@layer bs-base {
  @media (max-width: 767.98px) {
    body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
    .landing-page-headerless > .bg-dark:first-child p.lead {
      color: rgba(255,255,255,.82) !important;
    }
  }
}

@media (max-width: 375px) {
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless > .bg-dark:first-child > .container > .row > .text-end img {
    width: min(100%, 220px) !important;
    height: 220px;
  }
}

/* Keep the three hero facts readable as short rows on phones. */
@media (max-width: 575.98px) {
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-hero-facts > .col-4 {
    flex: 0 0 100%;
    width: 100%;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-hero-facts > .col-4 > .border {
    padding: .5rem .75rem !important;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-hero-facts .h4 {
    margin-bottom: .1rem !important;
    font-size: .94rem;
    line-height: 1.25;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-hero-facts .small {
    font-size: .76rem;
    line-height: 1.3;
  }
}

/* Four technology cards need one column at the narrowest viewport widths. */
@media (max-width: 379.98px) {
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-tech-grid > .col-6 {
    flex: 0 0 100%;
    width: 100%;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-tech-grid .card-body {
    padding: .75rem 1rem !important;
    text-align: left !important;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-tech-grid .h3 {
    margin-bottom: .25rem !important;
    font-size: 1.1rem;
    line-height: 1.25;
  }

  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
  .landing-page-headerless .artrel-tech-grid .small {
    font-size: .82rem;
    line-height: 1.4;
  }
}

/* Bootstrap utilities are important within this layer, so match that layer. */
@layer bs-base {
  @media (max-width: 575.98px) {
    body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
    .landing-page-headerless .artrel-hero-facts > .col-4 > .border {
      padding: .5rem .75rem !important;
    }

    body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
    .landing-page-headerless .artrel-hero-facts .h4 {
      margin-bottom: .1rem !important;
    }
  }

  @media (max-width: 379.98px) {
    body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
    .landing-page-headerless .artrel-tech-grid .card-body {
      padding: .75rem 1rem !important;
      text-align: left !important;
    }

    body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18)
    .landing-page-headerless .artrel-tech-grid .h3 {
      margin-bottom: .25rem !important;
    }
  }
}

body.page-cms .artrel-breadcrumb-short,
body.page-cms .artrel-landing-nav,
body.page-cms .artrel-model-card__facts--mobile,
body.page-cms .artrel-model-card__more {
  display: none;
}

@media (max-width: 767.98px) {
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18) .artrel-breadcrumb-full {
    display: none;
  }
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18) .artrel-breadcrumb-short {
    display: inline;
  }
  body.page-cms:is(.cms-id-10, .cms-id-11, .cms-id-13, .cms-id-18) .artrel-landing-nav {
    position: sticky;
    top: 48px;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
    padding: .45rem .75rem;
    border-block: 1px solid rgba(255,255,255,.1);
    background: #1a1d22;
    box-shadow: 0 .3rem .8rem rgba(0,0,0,.18);
  }
  body.page-cms .artrel-landing-nav a {
    display: flex;
    min-width: 0;
    min-height: 2.2rem;
    align-items: center;
    justify-content: center;
    padding: .25rem .2rem;
    border-radius: .45rem;
    color: #c7d7e4;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }
  body.page-cms .artrel-landing-nav a:hover,
  body.page-cms .artrel-landing-nav a:focus-visible {
    background: rgba(3,169,244,.16);
    color: #91d8ff;
  }
  body.page-cms #artrel-landing-variants,
  body.page-cms #artrel-landing-fps,
  body.page-cms #specyfikacja,
  body.page-cms #artrel-landing-models {
    scroll-margin-top: 6.5rem;
  }
}

@media (max-width: 575.98px) {
  body.page-cms .artrel-model-guide .artrel-model-card {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .2rem;
    padding: .8rem;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__image,
  body.page-cms .artrel-model-guide a.artrel-model-card__image {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0;
    border-radius: .55rem;
    background: #24282b;
  }
  body.page-cms .artrel-model-guide .artrel-model-card.is-current .artrel-model-card__image {
    grid-row: 1 / span 3;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__image img {
    padding: 0;
    object-fit: cover;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__badge {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: max-content;
    margin: 0 0 .15rem;
    padding: .2rem .4rem;
  }
  body.page-cms .artrel-model-guide .artrel-model-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: 1rem;
  }
  body.page-cms .artrel-model-guide .artrel-model-card.is-current h3 {
    grid-row: 2;
  }
  body.page-cms .artrel-model-guide .artrel-model-card p.artrel-model-card__intro {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: .78rem;
    line-height: 1.35;
  }
  body.page-cms .artrel-model-guide .artrel-model-card.is-current p.artrel-model-card__intro {
    grid-row: 3;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__facts--desktop {
    display: none;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__facts--mobile {
    display: block;
    grid-column: 1 / -1;
    margin: .6rem 0 0;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__facts--mobile > div {
    padding: .45rem 0;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__more {
    display: block;
    grid-column: 1 / -1;
    margin: .25rem 0 0;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__more summary {
    color: #91d8ff;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 750;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__more .artrel-model-card__facts {
    margin: .35rem 0 0;
  }
  body.page-cms .artrel-model-guide .artrel-model-card__link,
  body.page-cms .artrel-model-guide .artrel-model-card__current {
    grid-column: 1 / -1;
    margin: .65rem 0 0;
  }
}