/* =========================================================
   ส่วนเสริมหน้าโปรไฟล์
   โครงหลัก (header / nav / main / footer / .idntt-info) มาจาก stylesheet หลัก
   ที่ตั้งไว้ในหลังบ้าน (ค่าเริ่มต้น: /objekt/assets/style.css)
   ========================================================= */

/* ค่าสำรอง เผื่อ stylesheet หลักโหลดไม่ได้ */
:root { --gap: 25px; --sec: 30px; --max: 520px; --unit: 25px; --head: calc(var(--unit) * 3); --mark: calc(var(--unit) * .75);
        --soft: #f8f8f8; --strong: #444444; --rule: #eeeeee; --rule-dot: #dedede; }

.idntt-logo-text { font-size: 20px; color: #222; line-height: 1; }

/* ---------- Hero video ---------- */
.idntt-hero { margin: 0 calc(var(--gap) * -1) var(--sec); position: relative; background: var(--line); overflow: hidden; aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .idntt-hero-d4-5 { aspect-ratio: 4 / 5; }
  .idntt-hero-d1-1 { aspect-ratio: 1 / 1; }
  .idntt-hero-d9-16 { aspect-ratio: 9 / 16; max-height: calc(100svh - var(--head)); }
}
@media (max-width: 767px) {
  .idntt-hero-m4-5 { aspect-ratio: 4 / 5; }
  .idntt-hero-m1-1 { aspect-ratio: 1 / 1; }
  .idntt-hero-m9-16 { aspect-ratio: 9 / 16; max-height: calc(100svh - var(--head)); }
}
.idntt-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; pointer-events: none; }
.idntt-hero-video::-webkit-media-controls,
.idntt-hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.idntt-hero + .idntt-intro { padding-top: 0; }

/* ---------- Profile ---------- */
.idntt-profile-info dl { display: block; padding: 6px 20px; }
.idntt-profile-info dt { padding: 16px 0 4px; border-bottom: 0; font-size: 12px; }
.idntt-profile-info dd { padding: 0 0 16px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.idntt-profile-info dd:last-of-type { border-bottom: 0; }

/* ---------- Gallery: ปัดซ้าย/ขวา แถวเดียว ---------- */
.idntt-gallery {
  --gw: min(calc(100vw - 2 * var(--gap)), calc(var(--max) - 2 * var(--gap)));
  display: flex; gap: 10px; align-items: stretch;
  margin: 0 calc(var(--gap) * -1); padding: 0 var(--gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--gap);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: none; cursor: grab;
}
.idntt-gallery::-webkit-scrollbar { display: none; }
.idntt-gallery.idntt-dragging { cursor: grabbing; scroll-snap-type: none; }
.idntt-gallery-item { flex: none; height: calc(var(--gw) * .975); width: auto; margin: 0; position: relative; overflow: hidden; border-radius: 12px; background: var(--line); scroll-snap-align: start; }
.idntt-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.idntt-gallery-item::after, .idntt-video-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0, 0, 0, .04); border-radius: inherit; pointer-events: none; }

/* ---------- Video ---------- */
.idntt-videos { display: flex; flex-direction: column; gap: 16px; }
.idntt-videos .idntt-label { margin: 0 0 -8px; }
.idntt-video { margin: 0; }
.idntt-video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--line); cursor: pointer; }
.idntt-video-frame img, .idntt-video-frame video, iframe.idntt-video-frame { width: 100%; height: 100%; object-fit: cover; border: 0; }
.idntt-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #222; font-size: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.idntt-play i { margin-left: 3px; }
.idntt-video figcaption { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--strong); }

/* ---------- Message ---------- */
.idntt-messages { display: flex; flex-direction: column; gap: 12px; }
.idntt-messages .idntt-label { margin: 0 0 -4px; }
.idntt-message { background: var(--soft); border-radius: 16px; padding: 20px; }
.idntt-message img { border-radius: 10px; margin-bottom: 14px; }
.idntt-message p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--strong); }
.idntt-message footer { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; align-items: baseline; font-size: 13px; }
.idntt-message footer strong { color: var(--strong); }

/* ---------- Social ---------- */
.idntt-social { display: flex; flex-wrap: wrap; gap: 10px; }
.idntt-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; font-size: 18px; color: var(--strong); transition: border-color .15s, color .15s; }
.idntt-social a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Free text ---------- */
.idntt-text article + article { margin-top: 20px; }
.idntt-text img { border-radius: 12px; margin-bottom: 12px; }
.idntt-text h3 { margin: 0 0 6px; font-size: 15px; color: var(--strong); }
.idntt-text p { margin: 0; line-height: 1.75; }

/* ---------- Footer ---------- */
.idntt-foot-links { display: flex; gap: 14px; margin-top: 4px !important; }
.idntt-foot-links a, .idntt-foot-links button { font: inherit; color: var(--line); background: none; border: 0; padding: 0; cursor: pointer; filter: brightness(.8); }
.idntt-foot-links a:hover, .idntt-foot-links button:hover { color: var(--accent); filter: none; }

/* ---------- Cookie consent ---------- */
.idntt-cookie {
  position: fixed; z-index: 60; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: calc(100% - 24px); max-width: calc(var(--max) - 24px);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .1); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px; font-size: 13px;
}
.idntt-cookie p { margin: 0; line-height: 1.6; }
.idntt-cookie div { display: flex; gap: 8px; justify-content: flex-end; }
.idntt-cookie button { height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-dot); background: var(--bg); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.idntt-cookie button.idntt-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- COSMO posts ---------- */
.idntt-posts { display: flex; flex-direction: column; gap: 12px; }
.idntt-posts .idntt-label { margin: 0 0 -4px; }
.idntt-post { background: var(--soft); border-radius: 16px; padding: 18px 20px 20px; }
.idntt-post > header { display: flex; align-items: center; gap: 12px; }
.idntt-post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); background: var(--bg); flex: none; }
.idntt-post-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.idntt-post-who b { color: var(--strong); font-size: 15px; }
.idntt-post-who b i { color: var(--accent); font-size: 13px; margin-left: 2px; }
.idntt-post-who time { font-size: 12px; color: var(--line); filter: brightness(.8); }
.idntt-post-link { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; color: var(--line); filter: brightness(.8); }
.idntt-post-link:hover { filter: none; }
.idntt-post-text { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--strong); white-space: normal; overflow-wrap: anywhere; }
.idntt-post-trbtn { margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--line); filter: brightness(.75); cursor: pointer; }
.idntt-post-trbtn:hover { color: var(--accent); filter: none; }
.idntt-post-tr { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--rule-dot); font-size: 14px; line-height: 1.7; }
.idntt-post-media { margin-top: 14px; }
.idntt-post-fig { margin: 0; position: relative; overflow: hidden; border-radius: 12px; background: var(--line); }
.idntt-post-fig img, .idntt-post-fig video { width: 100%; height: 100%; object-fit: cover; }
.idntt-post-fig::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0, 0, 0, .04); border-radius: inherit; pointer-events: none; }
/* หลายรูป: ปัดซ้าย/ขวา แบบเดียวกับแกลเลอรี (ภายในการ์ด) */
.idntt-post-media.idntt-multi { --gw: min(calc(100vw - 2 * var(--gap) - 40px), calc(var(--max) - 2 * var(--gap) - 40px)); margin: 14px -20px 0; padding: 0 20px; scroll-padding: 0 20px; }
.idntt-post-media.idntt-multi .idntt-post-fig { flex: none; height: calc(var(--gw) * 1.1); width: auto; scroll-snap-align: start; }
.idntt-more { height: 40px; border: 1px solid var(--rule-dot); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.idntt-more:hover { border-color: var(--accent); color: var(--accent); }