/*
 * Legacy Styles - Minimal utilities
 * Main design system is in materialish.css
 * Only keep necessary legacy utilities for backward compatibility
 */

/* Logo utility */
.logo {
  width: 100px;
  vertical-align: baseline;
}

/* Social links spacing */
.social a {
  margin-right: 0.4rem;
}

/* Work section padding */
#work {
  padding: 6rem 0;
}

/* Card layout utilities - specific for listings */
.listing-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-img-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-title {
  height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Standard property */
  -webkit-box-orient: vertical;
}

/* Detail page image layout */
.img-main-container {
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--md-background);
}

.img-main {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.thumb-container {
  height: 100px;
  overflow: hidden;
}

.thumb-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive utilities */
@media (max-width: 991px) {
  .hide-md-down {
    display: none;
  }
}