/**
 * TEN homepage HERO — mobile/tablet lock (max-width: 1160px)
 *
 * Restored from TEN-Y_Backup_21.08.26 (last known-good mobile hero).
 * Loaded LAST on UID 1, not concatenated, not compressed.
 *
 * Desktop (≥1161px) stays in main.css. Do not copy this layout back there.
 *
 * Stack (same as 21.08 backup):
 *   in-flow .image spacer = --hero-photo-h
 *   .bannerslider__media paints the photo on that spacer
 *   logos strip on the photo
 *   Next Up full width under the photo
 */

@media screen and (max-width: 1160px) {
  #uid1 #subhead,
  #uid1 #subhead #subhead2 {
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #uid1 .bannerslider,
  #uid1 .bannerslider__stage {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  #uid1 .bannerslider__stage {
    --hero-photo-h: clamp(240px, 52vw, 420px);
  }

  /* Photo / claim stay on the photo band. inset:0 from main.css would cover Next Up. */
  #uid1 .bannerslider__media,
  #uid1 .bannerslider__motion,
  #uid1 .bannerslider__overlay,
  #uid1 .bannerslider__content {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: var(--hero-photo-h) !important;
    max-height: var(--hero-photo-h) !important;
  }

  #uid1 .bannerslider::before,
  #uid1 .bannerslider__stage::after {
    content: none !important;
    display: none !important;
  }

  #uid1 .bannerslider__logos {
    --logo-h: 18px;
    --logo-gap: 10px;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--hero-photo-h) - 52px) !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 3% 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.42) 38%,
      rgba(0, 0, 0, 0.72) 100%
    ) !important;
    z-index: 45 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #uid1 .bannerslider__logos-viewport,
  #uid1 .bannerslider__logos-track,
  #uid1 .bannerslider__logos-set {
    max-width: 100%;
    overflow: visible !important;
    justify-content: flex-end;
  }

  #uid1 .bannerslider__logo img {
    opacity: 0.98;
  }

  #uid1 .bannerslider__container .slick-arrow,
  #uid1 .bannerslider__container .slick-dots {
    display: none !important;
  }

  /* In-flow spacer = photo height (theme-base 420px/250px). Do not collapse to 0. */
  #uid1 .bannerslider__container {
    position: relative !important;
    z-index: 30 !important;
    margin-top: 0 !important;
    max-height: none !important;
  }

  #uid1 .bannerslider__container .slick-list,
  #uid1 .bannerslider__container .slick-track {
    overflow: visible !important;
    max-height: none !important;
  }

  #uid1 .bannerslider__container .bannerslides {
    max-height: none !important;
    height: auto !important;
  }

  #uid1 .bannerslider__container .bannerslides .image {
    position: relative !important;
    height: var(--hero-photo-h) !important;
    max-height: var(--hero-photo-h) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #uid1 .bannerslider__container .bannerslides .image::before,
  #uid1 .bannerslider__container .bannerslides .image::after {
    content: none !important;
    display: none !important;
  }

  #uid1 .bannerslider__container .bannerslides .image img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Next Up: in-flow under the photo, not absolutely over it. */
  #uid1 .bannerslider__container .bannerslides .text {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 30 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding-bottom: max(4%, 72px) !important;
  }

  #uid1 .bannerslider__catches {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    width: auto !important;
    margin: 16px 4% 8px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 20px !important;
    pointer-events: auto !important;
    padding: 0 !important;
  }

  #uid1 .bannerslider__catches::before {
    display: none !important;
  }

  #uid1 .bannerslider__catch {
    font-size: 14px !important;
    color: #404040 !important;
    text-shadow: none !important;
    padding: 8px 0 !important;
    white-space: normal !important;
    opacity: 0.88 !important;
  }

  #uid1 .bannerslider__catch:hover,
  #uid1 .bannerslider__catch:focus {
    color: #cc0607 !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  #uid1 .bannerslider__catch:focus-visible {
    outline-color: #cc0607 !important;
  }

  #uid1 .bannerslider__typewriter {
    left: 4% !important;
    right: auto !important;
    top: 11% !important;
    max-width: min(560px, 90vw) !important;
    padding: 10px 12px 12px !important;
    display: block !important;
    overflow-x: hidden;
  }

  #uid1 .bannerslider__typewriter-headline {
    font-size: clamp(1.2rem, 4.2vw, 1.5rem);
    font-style: normal !important;
  }

  #uid1 .bannerslider__typewriter-skill {
    padding-left: 32px;
    font-size: clamp(1rem, 3.6vw, 1.25rem);
    white-space: normal;
  }

  #uid1 .hero-typewriter {
    flex-wrap: wrap;
    max-width: 100%;
    white-space: normal;
  }

  #uid1 .hero-typewriter__text {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  #uid1 .bannerslider__typewriter-cap {
    width: 22px;
    height: 17px;
  }

  #uid1 .bannerslider__typewriter-visual {
    gap: 12px;
  }

  #uid1 .tx-courses .next_appointments .appointment {
    min-width: 0 !important;
  }

  #uid1 .tx-courses .next_appointments .appointment .appointment-title,
  #uid1 .tx-courses .next_appointments .appointment .appointment-title strong,
  #uid1 .tx-courses .next_appointments .appointment .appointment-title a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #uid1 .tx-courses .next_appointments .appointment .appointment-title {
    margin: 3px 0 1px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  #uid1 .tx-courses .next_appointments .appointment .date {
    margin: 1px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  #uid1 .tx-courses .next_appointments .appointment + .appointment {
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  #uid1 .tx-courses .next_appointments .all_appointments_link {
    margin-top: 5px !important;
    padding-top: 5px !important;
  }
}

@media screen and (max-width: 900px) {
  #uid1 .bannerslider__catches {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  #uid1 .bannerslider__typewriter {
    top: 9% !important;
    max-width: 92vw !important;
    padding: 8px 10px 10px !important;
  }

  #uid1 .bannerslider__typewriter-headline {
    font-size: clamp(1.05rem, 4.5vw, 1.3rem);
  }

  #uid1 .bannerslider__typewriter-skill {
    padding-left: 0;
    font-size: clamp(0.92rem, 3.8vw, 1.1rem);
  }

  #uid1 .bannerslider__typewriter-cap {
    width: 20px;
    height: 15px;
  }
}

@media screen and (max-width: 480px) {
  #uid1 .bannerslider__stage {
    --hero-photo-h: clamp(210px, 58vw, 250px);
  }

  #uid1 .bannerslider__logos {
    --logo-h: 15px;
    --logo-gap: 8px;
    top: calc(var(--hero-photo-h) - 46px) !important;
    height: 46px !important;
    padding: 0 2.5% 8px !important;
  }

  #uid1 .bannerslider__typewriter {
    top: 8% !important;
    max-width: 94vw !important;
    padding: 8px 10px 10px !important;
    background: transparent !important;
  }

  #uid1 .bannerslider__typewriter-skill {
    padding-left: 0;
  }
}