/* Responsive design rules */
@media (max-width: 1080px) {
  .masonry-container {
    column-count: 3;
  }
  .three-dots {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .page-title {
    font-size: 16px;
    gap: 13px;
  }
  .track-button {
    width: 53px;
    font-size: 8px;
  }
}

@media (max-width: 600px) {
  .masonry-container {
    column-count: 2 !important;
    column-gap: 12px !important;
    padding: 0 !important;
    margin: 16px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .subglublers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 16px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Make three dots smaller and position to the right */
  .three-dots {
    font-size: 18px !important;
    right: 8px !important;
    top: 50% !important;
    letter-spacing: 1px !important;
    padding: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Dynamic font sizing with word wrapping */
  .site-url {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    hyphens: auto !important;
    line-height: 1.2 !important;
    margin-right: 28px !important;
    font-size: 14px !important;
    min-height: auto !important;
  }

  /* Adjust font size based on length using container query approximation */
  .site-url:is([style*="font-size"]) {
    font-size: inherit !important;
  }

  .glued-url {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    hyphens: auto !important;
    line-height: 1.2 !important;
    font-size: 11px !important;
  }

  .subglubler-glued-url {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    hyphens: auto !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
  }

  .glued-title {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.3 !important;
    font-size: 12px !important;
  }

  h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* Adjust site-header padding for smaller dots */
  .site-header {
    padding-right: 0px !important;
    min-height: 49px !important;
  }

  /* Extend glued-header for subglublers */
  .glued-header {
    min-height: 33px !important;
  }

  /* Add padding to accommodate wrapped text */
  .site-info {
    container-type: inline-size !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* Move Up button (logo) down 33px */
  .logo,
  #glubler-logo-component {
    top: 53px !important;
    margin-top: 0px !important;
  }

  /* Move Up button (navigation) down 23px */
  #backBtn {
    top: -29px !important;
    left: 21px !important;
    font-size: 15px !important;
    height: 20px !important;
    padding: 5px 15px 5px 10px !important;
  }

  /* Use CSS length-based scaling approximation */
  @supports (font-size: clamp(1px, 1cqw, 20px)) {
    .site-url {
      font-size: clamp(10px, 14cqw, 14px) !important;
    }
    
    .glued-url {
      font-size: clamp(8px, 12cqw, 11px) !important;
    }
    
    .subglubler-glued-url {
      font-size: clamp(9px, 13cqw, 12px) !important;
    }
    
    .glued-title {
      font-size: clamp(9px, 13cqw, 12px) !important;
    }
    
    h3 {
      font-size: clamp(11px, 15cqw, 14px) !important;
    }
  }
}

.site-header {
  padding: 6px 12px;
}

.go-to-link,
.glue-button {
  display: none;
}