/**
 * @version     CVS: 2.0.1
 * @package     com_mieszkania
 * Optimized for Standalone Widget Dual Image
 */

/* --- 1. STYLE BAZOWE KAFELKA --- */

.mm-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  position: relative;
  margin-top: 45px; 
  border: none;
  background: transparent;
  overflow: visible;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

/* Niebieski róg */
.mm-card::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: -35px; 
    left: 0;
    border-top: 3px solid var(--sppb-text-varient-1, #00aeef);
    border-left: 3px solid var(--sppb-text-varient-1, #00aeef);
    transition: top 0.3s ease-in-out;
    pointer-events: none;
    z-index: 10; 
}
.mm-card:hover::before {
    top: -45px;
}

/* Górna sekcja tekstowa */
.mm-info-top {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}

.mm-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #222;
  line-height: 1.2;
}
.mm-title a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.mm-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: #888;
  margin-top: 5px;
}
.mm-meta {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 1rem;
  color: #666;
}

/* --- 2. NOWY UKŁAD ZDJĘĆ (ROW) --- */

.mm-media-row {
    display: flex;
    width: 100%;
    gap: 20px; 
}

.mm-media {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
}

/* --- LOGIKA UKŁADU (Proporcje 12-kolumnowe) --- */

/* 1/12 - 11/12 */
.mm-media-row.grid-1-11 .mm-media:nth-child(1) { flex: 1; }
.mm-media-row.grid-1-11 .mm-media:nth-child(2) { flex: 11; }

/* 2/12 - 10/12 */
.mm-media-row.grid-2-10 .mm-media:nth-child(1) { flex: 2; }
.mm-media-row.grid-2-10 .mm-media:nth-child(2) { flex: 10; }

/* 3/12 - 9/12 */
.mm-media-row.grid-3-9 .mm-media:nth-child(1) { flex: 3; }
.mm-media-row.grid-3-9 .mm-media:nth-child(2) { flex: 9; }

/* 4/12 - 8/12 */
.mm-media-row.grid-4-8 .mm-media:nth-child(1) { flex: 4; }
.mm-media-row.grid-4-8 .mm-media:nth-child(2) { flex: 8; }

/* 5/12 - 7/12 */
.mm-media-row.grid-5-7 .mm-media:nth-child(1) { flex: 5; }
.mm-media-row.grid-5-7 .mm-media:nth-child(2) { flex: 7; }

/* 6/12 - 6/12 (Równe) */
.mm-media-row.grid-6-6 .mm-media { flex: 1; }

/* 7/12 - 5/12 */
.mm-media-row.grid-7-5 .mm-media:nth-child(1) { flex: 7; }
.mm-media-row.grid-7-5 .mm-media:nth-child(2) { flex: 5; }

/* 8/12 - 4/12 */
.mm-media-row.grid-8-4 .mm-media:nth-child(1) { flex: 8; }
.mm-media-row.grid-8-4 .mm-media:nth-child(2) { flex: 4; }

/* 9/12 - 3/12 */
.mm-media-row.grid-9-3 .mm-media:nth-child(1) { flex: 9; }
.mm-media-row.grid-9-3 .mm-media:nth-child(2) { flex: 3; }

/* 10/12 - 2/12 */
.mm-media-row.grid-10-2 .mm-media:nth-child(1) { flex: 10; }
.mm-media-row.grid-10-2 .mm-media:nth-child(2) { flex: 2; }

/* 11/12 - 1/12 */
.mm-media-row.grid-11-1 .mm-media:nth-child(1) { flex: 11; }
.mm-media-row.grid-11-1 .mm-media:nth-child(2) { flex: 1; }


/* Zaciemnienie i efekty */
.mm-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.mm-media:hover::after {
    opacity: 1;
}

.mm-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.mm-media:hover .mm-bottom {
    opacity: 1;
    transform: translateY(0);
}

.mm-content {
	min-height: 46px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.mm-left {
  flex: 1;
}

.mm-tag span {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mm-cta {
    flex-shrink: 0;
}

/* --- STYLIZACJA PRZYCISKU --- */

.mm-card .sppb-btn.btn-glass {
    min-width: 50px; 
    padding: 0 5px; 
    height: 34px;
    border: none;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, background-color 0.3s;
}

.mm-card .sppb-btn.btn-glass::before,
.mm-card .sppb-btn.btn-glass::after {
    display: none; content: none;
}

.mm-card .sppb-btn.btn-glass i {
    color: var(--sppb-text-varient-1, #00aeef);
    font-size: 14px;
    margin: 0;
}

.mm-media:hover .sppb-btn.btn-glass {
    transform: translateX(5px);
}

/* --- RESPONSYWNOŚĆ (MOBILE) --- */

@media (max-width: 991px) {
    /* Ukrywamy drugie zdjęcie */
    .mm-media.mm-secondary-item {
        display: none !important;
    }
    
    /* Pierwsze zdjęcie na pełną szerokość */
    .mm-media-row {
        display: block;
    }
    .mm-media-row .mm-media:nth-child(1) {
        width: 100%;
        flex: none;
    }
}