/* =============================================
   UMAMI™ — Home Page CSS
   Sections: Hero, Radar, POV, Discover, Origins, Newsletter
   ============================================= */


/* =============================================
   SECTION SHARED COMPONENTS
   ============================================= */

.umami-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(196, 168, 130, 0.25);
}

.umami-section__header--light {
    border-bottom-color: rgba(13, 13, 13, 0.12);
}

.umami-section__label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ur-ea, #C4A882);
}

.umami-section__label--dark {
    color: var(--ur-bk, #0D0D0D);
    opacity: 0.4;
}

.umami-section__link {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ur-wh, #F5F2EE);
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.umami-section__link--dark {
    color: var(--ur-bk, #0D0D0D);
}

.umami-section__link:hover {
    opacity: 1;
}


/* =============================================
   1. HERO
   ============================================= */

.umami-hero {
    position: relative;
    min-height: 92vh;
    min-height: 92svh;
    background-size: cover;
    background-position: center top;
    display: flex;
    align-items: flex-end;
}

.umami-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(13, 13, 13, 0.97) 0%,
        rgba(13, 13, 13, 0.55) 45%,
        rgba(13, 13, 13, 0.08) 100%
    );
}

.umami-hero__content {
    position: relative;
    z-index: 1;
    padding: 80px 60px;
    max-width: 820px;
}

.umami-hero__cat {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--ur-ea, #C4A882);
    margin-bottom: 20px;
}

.umami-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.08;
    color: var(--ur-wh, #F5F2EE);
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

.umami-hero__excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(245, 242, 238, 0.6);
    margin: 0 0 36px;
    max-width: 520px;
}

.umami-hero__cta {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ur-bk, #0D0D0D);
    background: var(--ur-ea, #C4A882);
    padding: 14px 32px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.umami-hero__cta:hover {
    background: var(--ur-ea2, #E8D9C4);
}


/* =============================================
   1b. HERO GRID — Right column 3-post grid
   ============================================= */

.umami-hero-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 92vh;
    min-height: 92svh;
    gap: 2px;
}

.umami-hero-grid__large,
.umami-hero-grid__small {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
}

.umami-hero-grid__large {
    flex: 1 1 60%;
    min-height: 400px;
}

.umami-hero-grid__row {
    display: flex;
    flex: 1 1 40%;
    gap: 2px;
}

.umami-hero-grid__small {
    flex: 1;
    min-height: 220px;
}

.umami-hero-grid__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    transition: transform 0.5s ease;
}

.umami-hero-grid__large:hover .umami-hero-grid__bg,
.umami-hero-grid__small:hover .umami-hero-grid__bg {
    transform: scale(1.04);
}

.umami-hero-grid__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(13, 13, 13, 0.85) 0%,
        rgba(13, 13, 13, 0.1) 60%
    );
    z-index: 1;
}

.umami-hero-grid__label {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 2;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 242, 238, 0.75);
    line-height: 1.5;
}


/* =============================================
   2. RADAR SECTION — 3 cards (1 large + 2 normal)
   ============================================= */

.umami-rs {
    padding: 60px;
    width: 100%;
    box-sizing: border-box;
}

.umami-rs__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(196, 168, 130, 0.2);
}

.umami-rs__label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ur-ea, #C4A882);
}

.umami-rs__link {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ur-wh, #F5F2EE);
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.umami-rs__link:hover { opacity: 1; }

/* Grid: large (left) + 2 normal (right) */
.umami-rs__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2px;
    min-height: 480px;
    width: 100%;
}

/* Card base */
.umami-rs-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #111;
    overflow: hidden;
    transition: opacity 0.2s;
}

.umami-rs-card:hover { opacity: 0.88; }

/* Image area */
.umami-rs-card__img {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    min-height: 200px;
    max-height: 200px;
}

.umami-rs-card--large .umami-rs-card__img {
    min-height: 280px;
    max-height: 280px;
}

.umami-rs-card__img-label {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 242, 238, 0.6);
}

/* Body area — fixed height ไม่ให้ยืด */
.umami-rs-card__body {
    padding: 16px;
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Meta row — badges wrap ได้ */
.umami-rs-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* City label — 1 บรรทัด ตัด ... */
.umami-rs-card__city {
    font-family: 'DM Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 242, 238, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.umami-rs-card__city em {
    font-style: normal;
    color: #C4A882;
    margin-right: 4px;
}

/* Badge */
.umami-rs-card__badge {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.12em;
    padding: 8px 16px;
    flex-shrink: 0;
    white-space: nowrap;
}

.umami-rs-card__badge--pass    { background: #2C4A3E; color: #F5F2EE; }
.umami-rs-card__badge--no-pass { background: #D4381E; color: #F5F2EE; }

/* Title — จำกัด 2 บรรทัด ตัด ... */
.umami-rs-card__title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1.35;
    color: #F5F2EE !important;
    margin: 0;
    font-size: 24px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Large card title — 3 บรรทัด */
.umami-rs-card--large .umami-rs-card__title {
    font-size: 28px;
    color: #F5F2EE !important;
    -webkit-line-clamp: 3;
}

/* Week — 1 บรรทัด */
.umami-rs-card__week {
    font-family: 'DM Mono', monospace;
    font-size: 18px;
    letter-spacing: 0.12em;
    color: #C4A882 !important;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 1024px) {
    .umami-rs { padding: 40px; }
    .umami-rs__grid { grid-template-columns: 1fr 1fr; }
    .umami-rs-card--large { grid-column: span 2; }
    .umami-rs-card--large .umami-rs-card__img { min-height: 240px; max-height: 240px; }

    /* Tablet font sizes */
    .umami-rs-card__title { font-size: 18px; }
    .umami-rs-card--large .umami-rs-card__title { font-size: 22px; }
    .umami-rs-card__city { font-size: 11px; }
    .umami-rs-card__week { font-size: 12px; }
    .umami-rs-card__badge { font-size: 10px; padding: 5px 12px; }
}

@media (max-width: 640px) {
    .umami-rs { padding: 24px; }
    .umami-rs__grid { grid-template-columns: 1fr; }
    .umami-rs-card--large { grid-column: span 1; }

    /* Mobile font sizes */
    .umami-rs-card__title { font-size: 13px; }
    .umami-rs-card--large .umami-rs-card__title { font-size: 13px; }
    .umami-rs-card__city { font-size: 8px; }
    .umami-rs-card__week { font-size: 8px; }
    .umami-rs-card__badge { font-size: 8px; padding: 4px 10px; }
}


/* =============================================
   3. POV STRIP
   ============================================= */

.umami-pov {
    padding: 88px 60px;
    text-align: center;
}

.umami-pov__inner {
    max-width: 880px;
    margin: 0 auto;
}

.umami-pov__label {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--ur-bk, #0D0D0D);
    opacity: 0.45;
    margin-bottom: 36px;
}

.umami-pov__quote {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1.3;
    color: var(--ur-bk, #0D0D0D);
    margin: 0 0 28px;
}

.umami-pov__author {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ur-bk, #0D0D0D);
    opacity: 0.55;
    font-style: normal;
}


/* =============================================
   4. DISCOVER SECTION — 2 large city cards
   ============================================= */

.umami-disc {
    padding: 60px;
    width: 100%;
    box-sizing: border-box;
}

.umami-disc__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
}

.umami-disc__header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.umami-disc__eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ur-ea, #C4A882);
}

.umami-disc__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--ur-bk, #0D0D0D);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1;
}

.umami-disc__browse {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ur-bk, #0D0D0D);
    text-decoration: none;
    opacity: 0.45;
    transition: opacity 0.2s;
    padding-bottom: 4px;
}

.umami-disc__browse:hover { opacity: 1; }

.umami-disc__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
}

.umami-disc-card {
    position: relative;
    display: block;
    text-decoration: none;
    min-height: 340px;
    overflow: hidden;
}

.umami-disc-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    transition: transform 0.5s ease;
}

.umami-disc-card:hover .umami-disc-card__bg {
    transform: scale(1.04);
}

.umami-disc-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(13, 13, 13, 0.92) 0%,
        rgba(13, 13, 13, 0.4) 50%,
        rgba(13, 13, 13, 0.15) 100%
    );
}

.umami-disc-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    z-index: 1;
}

.umami-disc-card__count {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #E8D9C4 !important;
    margin-bottom: 12px;
}

.umami-disc-card__city {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: #F5F2EE !important;
    margin: 0 0 8px;
    line-height: 1.1;
}

.umami-disc-card__cats {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: rgba(245, 242, 238, 0.55);
    margin: 0 0 20px;
    line-height: 1.5;
}

.umami-disc-card__link {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ur-wh, #F5F2EE);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.umami-disc-card:hover .umami-disc-card__link { opacity: 1; }

@media (max-width: 768px) {
    .umami-disc { padding: 40px 24px; }
    .umami-disc__grid { grid-template-columns: 1fr; }
    .umami-disc-card { min-height: 280px; }
}


/* =============================================
   5. ORIGINS SECTION
   ============================================= */

.umami-origins-section {
    padding: 80px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.umami-origins-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.umami-origins-card {
    display: block;
    text-decoration: none;
}

.umami-origins-card__img-wrap {
    overflow: hidden;
    margin-bottom: 18px;
}

.umami-origins-card__img {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.umami-origins-card:hover .umami-origins-card__img {
    transform: scale(1.04);
}

.umami-origins-card__body {
    padding: 0;
}

.umami-origins-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ur-wh, #F5F2EE);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.umami-origins-card__excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(245, 242, 238, 0.45);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =============================================
   6. NEWSLETTER
   ============================================= */

.umami-newsletter {
    padding: 100px 60px;
    text-align: center;
}

.umami-newsletter__inner {
    max-width: 520px;
    margin: 0 auto;
}

.umami-newsletter__eyebrow {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ur-ea, #C4A882);
    margin-bottom: 24px;
}

.umami-newsletter__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ur-wh, #F5F2EE);
    margin: 0 0 16px;
}

.umami-newsletter__sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(245, 242, 238, 0.45);
    margin: 0 0 40px;
}

.umami-newsletter__form {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
}

.umami-newsletter__input {
    flex: 1;
    background: #181818;
    border: 1px solid rgba(196, 168, 130, 0.25);
    border-right: none;
    color: var(--ur-wh, #F5F2EE);
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    padding: 14px 18px;
    outline: none;
    transition: border-color 0.2s ease;
}

.umami-newsletter__input:focus {
    border-color: rgba(196, 168, 130, 0.6);
}

.umami-newsletter__input::placeholder {
    color: rgba(245, 242, 238, 0.25);
}

.umami-newsletter__btn {
    background: var(--ur-ea, #C4A882);
    border: none;
    color: var(--ur-bk, #0D0D0D);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 24px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.umami-newsletter__btn:hover {
    background: var(--ur-ea2, #E8D9C4);
}


/* =============================================
   RESPONSIVE — Tablet (≤1024px)
   ============================================= */

@media (max-width: 1024px) {
    .umami-radar-section,
    .umami-discover-section,
    .umami-origins-section,
    .umami-newsletter {
        padding-left: 40px;
        padding-right: 40px;
    }

    .umami-radar-section__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .umami-origins-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =============================================
   RESPONSIVE — Mobile (≤768px)
   ============================================= */

@media (max-width: 768px) {
    .umami-hero__content {
        padding: 48px 24px;
    }

    .umami-radar-section,
    .umami-discover-section,
    .umami-origins-section {
        padding: 60px 24px;
    }

    .umami-discover-section__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .umami-newsletter {
        padding: 60px 24px;
    }

    .umami-newsletter__form {
        flex-direction: column;
    }

    .umami-newsletter__input {
        border-right: 1px solid rgba(196, 168, 130, 0.25);
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    .umami-radar-section__grid {
        grid-template-columns: 1fr;
    }

    .umami-origins-section__grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   TYPE GRID [umami_type_accordion]
   สร้างใหม่: static card grid ไม่มี JS / ไม่มี
   hover-expand — ป้องกันปัญหาสั่น/เด้งกลับบนมือถือ
   ============================================= */
.utg {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 360px;
    gap: 6px;
}
.utg__card {
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
    background-color: #1C2128;
    background-size: cover;
    background-position: center;
    transition: opacity .2s ease;
}
/* fallback สีต่อ type เมื่อไม่มีรูป */
.utg__card--sleeper     { background-color: #22302A; }
.utg__card--underground { background-color: #1C2128; }
.utg__card--emerging    { background-color: #35291C; }
.utg__card--local_use   { background-color: #3A2A22; }
.utg__card--global      { background-color: #202834; }

@media (hover: hover) {
    .utg__card:hover {
        opacity: .82;
    }
}

.utg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(13,13,13,.92) 0%,
        rgba(13,13,13,.35) 55%,
        rgba(13,13,13,.1) 100%);
    pointer-events: none;
}
.utg__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}
.utg__num {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: .2em;
    color: #C4A882;
    margin-bottom: 6px;
}
.utg__title {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    color: #F5F2EE;
    line-height: 1.1;
    margin-bottom: 6px;
}
.utg__tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: .02em;
    color: rgba(245,242,238,.55);
    line-height: 1.4;
    margin-bottom: 10px;
}
.utg__cta {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #C4A882;
}

/* ---------- Mobile: 2 คอลัมน์ ---------- */
@media (max-width: 640px) {
    .utg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 210px;
    }
    .utg__title { font-size: 22px; }
    .utg__tag   { font-size: 11px; }
}

/* ═══ ANGLE SECTION (.uas) ═══════════════════════════════════ */
.uas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 60px;
  box-sizing: border-box;
  width: 100%;
}
.uas__intro { align-self: start; }
.uas__eyebrow {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .25em;
  color: #C4A882; margin-bottom: 14px;
}
.uas__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 4rem; font-weight: 700; line-height: 1;
  color: #0D0D0D; margin: 0 0 18px; text-transform: uppercase;
}
.uas__quote {
  font-family: Georgia, serif; font-style: italic;
  font-size: 17px; color: #0D0D0D; margin: 0 0 14px;
}
.uas__desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; line-height: 1.7;
  color: rgba(13,13,13,.7); margin: 0 0 24px;
}
.uas__all {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .2em;
  color: #0D0D0D; text-decoration: none;
  border-bottom: 1px solid #C4A882; padding-bottom: 4px;
}
.uas__all:hover { color: #C4A882; }
.uas__all--mob { display: none; }

.uas__grid { display: flex; flex-direction: column; gap: 4px; }

.uas-card {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; min-height: 200px; background: #1a1a1a;
}
.uas-card__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #1a1a1a; transition: transform .5s ease;
}
.uas-card:hover .uas-card__bg { transform: scale(1.04); }
.uas-card__ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,.92) 0%, rgba(13,13,13,.15) 100%);
}
.uas-card__surveyed {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .16em;
  background: #C4A882; color: #0D0D0D; padding: 5px 9px;
}
.uas-card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 1; }
.uas-card__city {
  display: block; font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .22em; color: #C4A882; margin-bottom: 10px;
}
.uas-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem; font-weight: 700; line-height: 1.25;
  color: #F5F2EE; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.uas-card__tags {
  font-family: 'DM Sans', sans-serif; font-size: 13px;
  color: rgba(245,242,238,.55);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 1024px) {
  .uas { grid-template-columns: 1fr; gap: 28px; padding: 40px; }
  .uas__title { font-size: 3rem; }
  .uas__all--desk { display: none; }
  .uas__all--mob  { display: inline-block; margin-top: 4px; }
}
@media (max-width: 480px) {
  .uas { padding: 24px; }
  .uas__title { font-size: 2.4rem; }
  .uas-card { min-height: 260px; }
  .uas-card__body { padding: 18px; }
}

/* fix: Astra/Elementor ทับสีตัวอักษรในการ์ด .uas */
.uas-card__title,
.uas .uas-card__title,
.uas-card h3.uas-card__title {
  color: #F5F2EE !important;
}
.uas-card,
.uas-card:hover,
.uas-card:focus,
.uas-card:visited { color: #F5F2EE !important; text-decoration: none !important; }
.uas-card__city     { color: #C4A882 !important; }
.uas-card__tags     { color: rgba(245,242,238,.55) !important; }
.uas-card__surveyed { color: #0D0D0D !important; }