/* Instagram-like feed — deliberately minimal; skin into the synthwave look later. */

/* ---- search bar (zine-skinned) -------------------------------------------- */
.gram-search { position: absolute; width: 40%; margin: 0 auto 2rem; top: 5%; left: 30%}
.gram-search__input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  padding: 0.7rem 2.8rem 0.7rem 2.8rem; color: #1a1a1a;
  background: #f4f0e6; border: 3px solid #000; border-radius: 0;
  box-shadow: 4px 4px 0 #000; outline: none;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.gram-search__input::placeholder { color: #555; }
.gram-search__input:focus { background: #fff; box-shadow: 4px 4px 0 #000, 0 0 12px 2px #00f3ff; }
/* Suppress the browser's native search clear — we ship our own for a consistent look. */
.gram-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gram-search__icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #ff2d95; pointer-events: none;
}
.gram-search__clear {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: none; background: none;
  font-size: 22px; line-height: 1; cursor: pointer; color: #000;
  display: flex; align-items: center; justify-content: center;
}
.gram-search__clear[hidden] { display: none; }
.gram-search__clear:hover { color: #ff2d95; }

.gram-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 960px; margin: 0 auto; }
@media (max-width: 600px) { .gram-feed { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }
.gram-post { width: 100%; break-inside: avoid; cursor: pointer; }
.gram-post__caption { margin: 0.5rem 0 0; }
.gram-media { position: relative; }
.gram-media img, .gram-media video { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; border-radius: 8px; }
.gram-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.5rem; scrollbar-width: none; }
.gram-carousel::-webkit-scrollbar { display: none; }
.gram-carousel > * { flex: 0 0 100%; scroll-snap-align: center; }
.gram-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.gram-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: #bbb; cursor: pointer; }
.gram-dots button[aria-current="true"] { background: #333; }
.gram-feed__status { text-align: center; opacity: 0.7; margin-top: 1rem; }

/* ---- click-to-expand (modal) ---------------------------------------------- */

/* Media item wrapper — anchors the download button and play hint. */
.gram-media__item { position: relative; }
.gram-modal__dialog img, .gram-modal__dialog video{ height: auto; }

/* Download button overlaid on each media item. */
.gram-download {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  cursor: pointer; color: #fff; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85; transition: opacity 0.15s ease;
}
.gram-download:hover { opacity: 1; background: rgba(0, 0, 0, 0.75); }
.gram-download svg { width: 18px; height: 18px; }

/* Carousel prev/next arrows. */
.gram-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  cursor: pointer; color: #fff; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85; transition: opacity 0.15s ease;
}
.gram-arrow:hover { opacity: 1; background: rgba(0, 0, 0, 0.75); }
.gram-arrow svg { width: 20px; height: 20px; }
.gram-arrow--prev { left: 8px; }
.gram-arrow--next { right: 8px; }

/* Play hint on video posters (videos play only inside the modal). */
.gram-media__item--video::after {
  content: "\25B6"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  width: 56px; height: 56px; border-radius: 50%; font-size: 20px;
  color: #fff; background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
}

/* Modal / lightbox — dimmed backdrop with the post centered on top. */
.gram-modal {
  position: fixed; inset: 0; z-index: 1000; box-sizing: border-box;
  padding: 2rem; background: rgba(0, 0, 0, 0.8);
  display: flex; align-items: center; justify-content: center;
}
.gram-modal[hidden] { display: none; }
.gram-modal__dialog {
  position: relative; width: 100%; max-width: 900px; max-height: 90vh;
  overflow: auto; background: #f4f0e6; border-radius: 8px;
  scrollbar-width: none;
}
.gram-modal__dialog::-webkit-scrollbar { display: none; }
.gram-modal__body { padding: 1.25rem 1rem 1rem; }
.gram-modal__body .gram-media img,
.gram-modal__body .gram-media video {
  max-height: 80vh; width: auto; max-width: 100%; aspect-ratio: auto; margin: 0 auto;
}
.gram-modal .gram-media__item--video::after { display: none; }

/* Close button (X) — fixed to the top-right corner of the viewport. */
.gram-close {
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
  font-size: 26px; line-height: 1; cursor: pointer; color: #fff;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.gram-close:hover { background: rgba(0, 0, 0, 0.85); }
.gram-modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 1010; }

.magazine-layout {
    background-image: url(/assets/img/revista-level-up-aberta-pb.png);
    background-size: cover;
	background-repeat: repeat-y;
	background-blend-mode: color-burn;
}

@media (max-width: 808px) {
	/* In-flow at the top of the feed instead of floating at top:13% (which, as a
	   % of the tall feed, landed the bar between the first two photos). Stays
	   position:relative so it remains the anchor for its absolute icon + clear. */
	.gram-search {
		position: relative;
		width: 90%;
		margin: 0 auto 1.5rem;
		top: auto;
		left: auto;
	}
	/* Search now flows in-line, so the header no longer needs to reserve room. */
	.magazine-header {
		margin-bottom: 1.5rem;
	}
}