/* content */

/* __________ Timeline __________ */
.posts {display: flex;flex-direction: column;gap: 1.5rem;max-width: 100vw;}
.post {display: flex;flex-direction: column;align-items: center;border-top: .5px solid var(--border-medium);border-bottom: .5px solid var(--border-medium);}
.post + .post {}
.post-header {width: 100%; display: flex; flex: auto; height: 30px; border-bottom: dotted .5px var(--border-medium); flex-direction: row; align-items: center; justify-content: space-between;}
.post-header span {font-size: 0.9rem;color: var(--text-medium);}
.post-media {position: relative;margin:4px 0;}
.post-actions {width: 100%; display: flex; flex: auto; height: 30px; border-top: dotted .5px var(--border-medium); flex-direction: row; align-items: center; justify-content: space-between;}
.post-media img,
.post-media video,
.post-media iframe,
.post-media canvas {}
/* AD */
.post.ad {background-color: var(--bg-0)}
.post.ad .post-header {padding: 0 8px;}
.post.ad .post-media {width: 100%;}
.post.ad .post-media img {}
.post.ad footer a {width: 100%; display: block; text-align: center;}
/* AUDIO */
.post.audio {padding: 0 8px;text-align: center;}
.post.audio .post-media {margin: 10px 0;}
.post.audio .post-media audio {padding-bottom: 8px;}
/* GAME */
.post.game .post-media iframe {}
/* GIF */
.post.gif {padding:8px;}
.post.gif .post-media {margin: 4px 0;border-radius: 5px; box-shadow: 0 0 5px var(--shadow); overflow: hidden;}
.post.gif .post-media img {max-width: 100%;}
.post.gif .post-media figcaption {position: absolute;bottom:0;text-align: center;background: rgba(0, 0, 0, .5);font-size: 0.9rem;padding: 2px 0.5rem; border-radius: 0 5px 0 0;}
/* MAP */
.post.map {border-radius: 7px;padding: 0 10px;}
.post.map .post-media {width: 100%;} 
.post.map .post-media iframe {width: 100%;aspect-ratio: 16 / 9;border-radius: 7px;overflow: hidden;}
.post.map .post-media figcaption {margin: 6px 0;}
.post.map .post-media img {}
/* PANORAMA */
.post.panorama {}
.post.panorama .post-header {padding: 0 8px;}
.post.panorama .post-media {
width:100vw;height: 55vw;overflow-x: auto;overflow-y: hidden;margin:0;border-top: solid;border-bottom: solid;user-select: none;}
.post.panorama .post-media div {width: fit-content;height: 100%;background-size:cover;user-select: none;box-shadow: inset 0 0 8px 3px var(--shadow);}
.post.panorama .post-media img {display: block;opacity: 0;height: 100%;max-width: unset;object-fit: cover;user-select: none;cursor: grab;}
.post.panorama p {padding: 8px 0;}
.post.panorama .post-media::-webkit-scrollbar {
  display: none;}
/* PHOTO */
.post.photo {padding:8px;}
.post.photo .post-media {}
.post.photo .post-media img {max-width: 100%; border-radius: 5px; box-shadow: 0 0 5px var(--shadow);}
.post.photo .post-media figcaption {position: absolute;bottom:0;text-align: center;background: rgba(0, 0, 0, .5);font-size: 0.9rem;padding: 2px 0.5rem; border-radius: 0 5px 0 0;
}
/* QUOTE */
.post.quote {margin: 20px;padding: 0 8px;border-radius: 7px;}
.post.quote .post-media {padding: 26px 6px !important;}
.post.quote .post-media figcaption {} /* optional styling */
/* RENDER (3D / artwork) */
.post.render {padding:8px;}
.post.render .post-media {}
.post.render .post-media img {max-width: 100%; border-radius: 5px; box-shadow: 0 0 5px var(--shadow);}
.post.render .post-media canvas {} /* if embedding a viewer */
/* TEXT */
.post.text {margin: 20px;padding: 0 8px;border-radius: 7px;}
.post.text .post-media {padding: 16px 6px !important;}
.post.text .post-media p {}
.post.text .post-media figcaption {} /* optional */
/* VIDEO */
.post.video {}
.post.video .post-header {padding: 0 8px;}
.post.video .post-media {width: 100%;margin:0;background-color: var(--bg-0)}
.post.video .post-media video {width: 100%;}
.post.video p {padding: 8px 0;}

/* __________ Checklist __________ */

.checklist {padding: 20px 0;}










@media(min-width:600px){
	/* __________ Timeline | Tablet+ __________ */
	.posts{margin:0 50px;}
	.post{border-radius: 5px;}
	.post.gif .post-media img {max-height: 55vw;}
	.post.panorama .post-media {width:100%;height: 35vw;}
	
}











/* -------- Forms (if you still use them) -------- */

form {
    margin: 20px 30px;
    padding: 30px;
    text-align: center;
    font-size: 16px;
    background-color: #fff;
    border-radius: 11px;
    border: 1px solid #c7c7c7;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input,
select,
textarea {
    font-size: 16px !important;
    width: 80%;
    height: 36px;
    border-radius: 5px;
    background-color: #f1f1f1;
    border: 1px solid #c7c7c7;
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: #b1b1b1 !important;
    color: #ccc !important;
}

textarea {
    height: 86px;
}

button {
    display: inline-block;
    width: 100%;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}

button:disabled {
    background-color: #b1b1b1 !important;
    color: #ccc !important;
}

.button-active {
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(86,255,174,1);
}

label {
    margin-top: 10px;
}

select {
    margin-left: 6px;
}