/*
  Mobil: behåll presentationsbildens huvudinnehåll men dölj de delar
  som redan återkommer i navbaren och i genvägskorten nedanför.
  Dator och surfplatta påverkas inte.
*/
@media (max-width: 680px) {
  #page-main .tk-start-visual {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 10px 8px 10px !important;
    overflow: hidden !important;
    background: #03152b !important;
  }

  /* Visa bilden igen efter tidigare mobilregler och placera den först. */
  #page-main .tk-start-poster {
    position: relative !important;
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.79 / 1 !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(91,151,216,.32) !important;
    border-radius: 17px !important;
    background: #061a31 !important;
    box-shadow: none !important;
    line-height: 0 !important;
  }

  /*
    Bilden är 1536 × 1024. Vi låter nederdelen ligga utanför den
    kortare bildramen, vilket tar bort den inbyggda raden med fyra
    funktioner utan att påverka huvudmotivet.
  */
  #page-main .tk-start-poster img {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    opacity: 1 !important;
    object-fit: initial !important;
    object-position: initial !important;
    transform: none !important;
    filter: brightness(.96) saturate(1.02) !important;
  }

  /* Täck endast den dubblerade TRYCKKOLLEN-logotypen i bildens övre vänstra hörn. */
  #page-main .tk-start-poster::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    top: 0 !important;
    width: 28% !important;
    height: 13% !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 100% 100%, rgba(15,46,76,.34), transparent 58%),
      linear-gradient(100deg, #071b32 0%, #081e37 72%, rgba(8,30,55,0) 100%) !important;
  }

  /* Hero-texten följer direkt efter den rensade bilden. */
  #page-main .tk-start-mobile-copy {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  /* De riktiga klickbara genvägarna behålls under hero-texten. */
  #page-main .tk-start-actions {
    order: 3 !important;
  }
}

@media (max-width: 390px) {
  #page-main .tk-start-visual {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  #page-main .tk-start-poster {
    border-radius: 15px !important;
    margin-bottom: 8px !important;
  }

  #page-main .tk-start-poster::after {
    width: 30% !important;
    height: 14% !important;
  }
}