/* 價格走勢頁（property.hk 嵌入內容） */
.tran-trends-section {
    padding: var(--space-md) 0 1.875rem;
}

.tran-trends {
    min-width: 0;
}

.tran-trends__back {
    margin-bottom: var(--space-md);
    text-align: center;
    font-size: var(--fs-md);
}

.tran-trends__back a {
    color: var(--color-primary);
    text-decoration: none;
}

.tran-trends__back a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.tran-trends__embed {
    margin-bottom: var(--space-lg);
}

.tran-trends__embed form {
    margin-bottom: var(--space-md) !important;
}

.tran-trends__embed select {
    display: block;
    width: min(100%, 28rem);
    margin: var(--space-xs) auto var(--space-sm);
    padding: 0.5rem;
    font-size: var(--fs-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-tran-trends-select-bg);
    color: var(--color-text);
}

.tran-trends__embed .dist_title {
    margin: 0 0 var(--space-sm);
    font-size: var(--fs-md);
    color: var(--color-primary);
    text-align: center;
}

/* property.hk 嵌入：桌面 hidden-xs、手機 visible-xs 各一套，補 Bootstrap 顯示邏輯 */
.tran-trends__embed .visible-xs,
.tran-trends__embed .visible-xs-block {
    display: none !important;
}

.tran-trends__embed .hidden-xs {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 767px) {
    .tran-trends__embed .hidden-xs {
        display: none !important;
    }

    .tran-trends__embed .visible-xs,
    .tran-trends__embed .visible-xs-block {
        display: block !important;
    }
}

/* property.hk 走勢圖：由 PHP 包入 tran-trends__grid */
.tran-trends__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    width: 100%;
    justify-items: center;
}

.tran-trends__grid > .imgdiv,
.tran-trends__grid > [class*="imgdiv"] {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 var(--space-xs);
    text-align: center;
}

.tran-trends__grid .imgdiv a {
    display: block;
}

.tran-trends__grid img {
    display: block;
    width: 100%;
    max-width: 25rem;
    height: auto;
    margin: 0 auto;
}

.tran-trends__empty {
    margin: 0;
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    .tran-trends__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

@media (min-width: 1025px) {
    .tran-trends__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}