.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    column-gap: var(--umb-block-grid--column-gap, 0);
    row-gap: var(--umb-block-grid--row-gap, 0);
}
.umb-block-grid__layout-item {
    position: relative;
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}
.umb-block-grid__layout-item[data-force-left] {
    grid-column-start: 1;
}
.umb-block-grid__layout-item[data-force-right] {
    grid-column-start: calc(1 + var(--umb-block-grid--grid-columns) - var(--umb-block-grid--item-column-span));
}
/* Override: ทำให้ Area stack เต็มความกว้างบนจอเล็ก และแบ่งคอลัมน์ถูกต้องบนจอใหญ่ */
.umb-block-grid__area-container {
    display: flex;
    flex-wrap: wrap;
}

.umb-block-grid__area {
    flex: 1 1 100%;
    max-width: 100%;
}

/* @media (min-width: 768px) {
    .umb-block-grid__area {
        flex: 0 0 calc(var(--umb-block-grid--area-column-span, 1) / var(--umb-block-grid--area-grid-columns, 1) * 100%);
        max-width: calc(var(--umb-block-grid--area-column-span, 1) / var(--umb-block-grid--area-grid-columns, 1) * 100%);
    }
} */

/* Block Grid - Component Width */
.component-width--center {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.component-width--wide {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

/* Full-bleed: หลุดออกจาก .container เต็มความกว้างจอจริง */
.component-width--full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Vertical Position ควบคุมตำแหน่งของแต่ละ Area เทียบกับ Area อื่นในแถวเดียวกัน */
.umb-block-grid__area-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* ค่า default: ชิดบน */
}

.vertical-position--top .umb-block-grid__area-container {
    align-items: flex-start;
}

.vertical-position--center .umb-block-grid__area-container {
    align-items: center;
}

.vertical-position--bottom .umb-block-grid__area-container {
    align-items: flex-end;
}

.text-align--left {
    text-align: left;
}
.text-align--center {
    text-align: center;
}
.text-align--right {
    text-align: right;
}

.social-links {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 10px;
}

.social-links {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 10px;
}

.social-links__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 25px;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.social-links__item svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.social-links__item:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.social-links--align-left {
    justify-content: flex-start;
}
.social-links--align-center {
    justify-content: center;
}
.social-links--align-right {
    justify-content: flex-end;
}

.social-links__item--facebook { background: #4267a8; }
.social-links__item--x-twitter { background: #000000; }
.social-links__item--instagram { background: #3f5c6c; }
.social-links__item--linkedin { background: #0084bf; }
.social-links__item--mastodon { background: #6364ff; }
.social-links__item--youtube { background: #e6301e; }
.social-links__item--github { background: #171515; }
.social-links__item--discord { background: #5865f2; }


/* ===== Flexible style ===== */
.image-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.image-card--position-above { flex-direction: column; }
.image-card--position-below { flex-direction: column-reverse; }
.image-card--position-left { flex-direction: row; }
.image-card--position-right { flex-direction: row-reverse; }
.image-card--position-overlay { position: relative; }
.image-card--position-overlay .image-card__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.55));
}

.image-card--align-left .image-card__body { text-align: left; align-items: flex-start; }
.image-card--align-center .image-card__body { text-align: center; align-items: center; }
.image-card--align-right .image-card__body { text-align: right; align-items: flex-end; }

.image-card__media {
    position: relative;
    overflow: hidden;
    opacity: var(--card-image-opacity, 1);
    max-width: var(--card-image-max-width, 100%);
    transition: opacity 0.2s;
}
.image-card__media:hover {
    opacity: var(--card-image-opacity-hover, 1);
}
.image-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== Profile style ===== */
.doctor-card {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}
.doctor-image {
    position: relative;
    overflow: hidden;
    opacity: var(--card-image-opacity, 1);
    max-width: var(--card-image-max-width, 100%);
    margin: 0 auto;
    transition: opacity 0.2s;
}
.doctor-image:hover {
    opacity: var(--card-image-opacity-hover, 1);
}
.doctor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.doctor-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.6));
    opacity: 0;
    transition: opacity 0.2s;
}
.doctor-image:hover .doctor-overlay {
    opacity: 1;
}
.doctor-content { padding-top: 12px; }
.doctor-content .specialty {
    display: block;
    color: #777;
    font-size: 14px;
    margin-bottom: 8px;
}

/* ===== Image crop styles (ใช้ร่วมกันทั้ง profile/flexible) ===== */
.card-image--square img, .card-image--square .image-card__image { aspect-ratio: 1 / 1; }
.card-image--circle img, .card-image--circle .image-card__image { aspect-ratio: 1 / 1; border-radius: 50%; }
.card-image--landscape img, .card-image--landscape .image-card__image { aspect-ratio: 4 / 3; }
.card-image--portrait img, .card-image--portrait .image-card__image { aspect-ratio: 3 / 4; }
.card-image--wide img, .card-image--wide .image-card__image { aspect-ratio: 16 / 9; }
.card-image--tall img, .card-image--tall .image-card__image { aspect-ratio: 9 / 16; }
.card-image--16x9 img, .card-image--16x9 .image-card__image { aspect-ratio: 16 / 9; }
.card-image--4x3 img, .card-image--4x3 .image-card__image { aspect-ratio: 4 / 3; }
.card-image--3x4 img, .card-image--3x4 .image-card__image { aspect-ratio: 3 / 4; }
.card-image--original img, .card-image--original .image-card__image { aspect-ratio: auto; }

.card-image--pad {
    padding: 16px;
    background: #f4f4f0;
}