/* ─── Ecto Post Grid Widget ─── */

.ecto-pg-wrap {
	/* grid */
	--ecto-pg-cols:    2;
	--ecto-pg-col-gap: 32px;
	--ecto-pg-row-gap: 32px;

	/* card */
	--ecto-pg-card-bg:                #ffffff;
	--ecto-pg-card-border-color:      #f4f4f5;
	--ecto-pg-card-border-width:      1px;
	--ecto-pg-card-radius:            8px;
	--ecto-pg-card-padding:           8px;
	--ecto-pg-card-gap:               16px;

	/* card — hover */
	--ecto-pg-card-border-hover-color: #d4d4d8;
	--ecto-pg-transition:              200ms;

	/* imagem */
	--ecto-pg-image-height:       256px;
	--ecto-pg-image-radius:       4px;
	--ecto-pg-image-bg:           #f4f4f5;
	--ecto-pg-image-border-color: #f4f4f5;

	/* corpo */
	--ecto-pg-body-padding: 16px;
	--ecto-pg-body-gap:     32px;
	--ecto-pg-header-gap:   24px;

	/* tags */
	--ecto-pg-tag-bg:           #fafafa;
	--ecto-pg-tag-border:       transparent;
	--ecto-pg-tag-color:        #52525a;
	--ecto-pg-tag-hover-bg:     #fafafa;
	--ecto-pg-tag-hover-border: #d4d4d8;
	--ecto-pg-tag-hover-color:  #18181b;
	--ecto-pg-tag-radius:       999px;
	--ecto-pg-tag-gap:          8px;

	/* título */
	--ecto-pg-title-color:            #52525a;
	--ecto-pg-title-hover-color:      #18181b;
	--ecto-pg-title-hover-decoration: underline;

	/* autor / meta */
	--ecto-pg-avatar-size:   48px;
	--ecto-pg-avatar-radius: 50%;
	--ecto-pg-author-color:  #18181b;
	--ecto-pg-meta-color:    #717179;

	/* paginação */
	--ecto-pg-nav-gap:            8px;
	--ecto-pg-nav-height:         56px;
	--ecto-pg-nav-min-width:      56px;
	--ecto-pg-nav-px:             24px;
	--ecto-pg-nav-radius:         999px;
	--ecto-pg-nav-page-color:     #52525a;
	--ecto-pg-nav-page-border:    #d4d4d8;
	--ecto-pg-nav-current-color:  #18181b;
	--ecto-pg-nav-current-border: #717179;
	--ecto-pg-nav-current-bg:     transparent;
	--ecto-pg-nav-active-bg:      #2f6af7;
	--ecto-pg-nav-active-color:   #ffffff;
	--ecto-pg-nav-disabled-bg:    #fafafa;
	--ecto-pg-nav-disabled-color: #d4d4d8;

	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ────────────────────────────────────────
   Grid
   ──────────────────────────────────────── */

.ecto-pg-grid {
	display: grid;
	grid-template-columns: repeat(var(--ecto-pg-cols), 1fr);
	column-gap: var(--ecto-pg-col-gap);
	row-gap:    var(--ecto-pg-row-gap);
}

/* ────────────────────────────────────────
   Card
   ──────────────────────────────────────── */

.ecto-pg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ecto-pg-card-gap);
	background-color: var(--ecto-pg-card-bg);
	border: var(--ecto-pg-card-border-width) solid var(--ecto-pg-card-border-color);
	border-radius: var(--ecto-pg-card-radius);
	padding: var(--ecto-pg-card-padding);
	overflow: hidden;
	cursor: pointer;
	transition:
		border-color     var(--ecto-pg-transition) ease,
		box-shadow       var(--ecto-pg-transition) ease,
		background-color var(--ecto-pg-transition) ease;
}

.ecto-pg-card:hover {
	border-color: var(--ecto-pg-card-border-hover-color);
}

/* Overlay transparente — cobre o card inteiro (z-index 1).
   Tags, título e autor ficam z-index 2 e capturam o clique. */
.ecto-pg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* ────────────────────────────────────────
   Imagem
   ──────────────────────────────────────── */

.ecto-pg-image {
	position: relative;
	width: 100%;
	height: var(--ecto-pg-image-height);
	border-radius: var(--ecto-pg-image-radius);
	overflow: hidden;
	background-color: var(--ecto-pg-image-bg);
	border: 1px solid var(--ecto-pg-image-border-color);
	flex-shrink: 0;
	box-sizing: border-box;
}

.ecto-pg-wrap .ecto-pg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease-in-out;
}

.ecto-pg-card:hover .ecto-pg-img {
	transform: scale(1.05);
}

/* ────────────────────────────────────────
   Tags sobre a imagem
   ──────────────────────────────────────── */

.ecto-pg-image > .ecto-pg-tags {
	--ecto-pg-tags-offset: 12px;
	position: absolute;
	z-index: 3;
	max-width: calc(100% - var(--ecto-pg-tags-offset) * 2);
	flex-wrap: wrap;
}

.ecto-pg-tags--tl { top:    var(--ecto-pg-tags-offset); left:  var(--ecto-pg-tags-offset); }
.ecto-pg-tags--tr { top:    var(--ecto-pg-tags-offset); right: var(--ecto-pg-tags-offset); }
.ecto-pg-tags--bl { bottom: var(--ecto-pg-tags-offset); left:  var(--ecto-pg-tags-offset); }
.ecto-pg-tags--br { bottom: var(--ecto-pg-tags-offset); right: var(--ecto-pg-tags-offset); }

/* ────────────────────────────────────────
   Body
   ──────────────────────────────────────── */

.ecto-pg-body {
	display: flex;
	flex-direction: column;
	gap: var(--ecto-pg-body-gap);
	padding: var(--ecto-pg-body-padding);
}

.ecto-pg-header {
	display: flex;
	flex-direction: column;
	gap: var(--ecto-pg-header-gap);
}

/* ────────────────────────────────────────
   Tags / Categorias
   ──────────────────────────────────────── */

.ecto-pg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ecto-pg-tag-gap);
	position: relative;
	z-index: 2;
}

.ecto-pg-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 16px;
	background-color: var(--ecto-pg-tag-bg);
	border: 1px solid var(--ecto-pg-tag-border);
	border-radius: var(--ecto-pg-tag-radius);
	color: var(--ecto-pg-tag-color);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ecto-pg-tag:hover {
	background-color: var(--ecto-pg-tag-hover-bg);
	color: var(--ecto-pg-tag-hover-color);
	outline: 1px solid var(--ecto-pg-tag-hover-border);
	outline-offset: -1px;
}

/* ────────────────────────────────────────
   Título
   ──────────────────────────────────────── */

.ecto-pg-title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.625;
	color: var(--ecto-pg-title-color);
	position: relative;
	z-index: 2;
}

.ecto-pg-title-link {
	color: inherit;
	text-decoration: none;
	display: block;
	transition:
		color            var(--ecto-pg-transition) ease,
		text-decoration  var(--ecto-pg-transition) ease;
}

/* hover direto no link */
.ecto-pg-title-link:hover {
	color: var(--ecto-pg-title-hover-color);
	text-decoration: var(--ecto-pg-title-hover-decoration);
}

/* quando o card inteiro é hovado, o título também reage */
.ecto-pg-card:hover .ecto-pg-title-link {
	color: var(--ecto-pg-title-hover-color);
	text-decoration: var(--ecto-pg-title-hover-decoration);
}

/* ────────────────────────────────────────
   Meta (autor + data)
   ──────────────────────────────────────── */

.ecto-pg-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 2;
	text-decoration: none;
	color: inherit;
}

a.ecto-pg-meta:hover .ecto-pg-author-name {
	text-decoration: underline;
}

.ecto-pg-avatar {
	width: var(--ecto-pg-avatar-size);
	height: var(--ecto-pg-avatar-size);
	border-radius: var(--ecto-pg-avatar-radius);
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.ecto-pg-meta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ecto-pg-author-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	color: var(--ecto-pg-author-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ecto-pg-meta-info {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--ecto-pg-meta-color);
	white-space: nowrap;
}

/* ────────────────────────────────────────
   Paginação
   ──────────────────────────────────────── */

.ecto-pg-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ecto-pg-nav-gap);
	justify-content: center;
}

.ecto-pg-page-btn,
.ecto-pg-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ecto-pg-nav-height);
	border-radius: var(--ecto-pg-nav-radius);
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
	box-sizing: border-box;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	cursor: pointer;
}

/* Botões numéricos */
.ecto-pg-page-btn {
	min-width: var(--ecto-pg-nav-min-width);
	padding: 0 8px;
	border: 1px solid var(--ecto-pg-nav-page-border);
	color: var(--ecto-pg-nav-page-color);
	background-color: transparent;
}

.ecto-pg-page-btn:hover {
	border-color: var(--ecto-pg-nav-current-border);
	color: var(--ecto-pg-nav-current-color);
}

.ecto-pg-page-btn.is-current {
	border-color: var(--ecto-pg-nav-current-border);
	color: var(--ecto-pg-nav-current-color);
	background-color: var(--ecto-pg-nav-current-bg);
	pointer-events: none;
}

/* Botões Anterior / Próxima */
.ecto-pg-nav-btn {
	gap: 8px;
	padding: 0 var(--ecto-pg-nav-px);
	border: none;
}

.ecto-pg-nav-btn:not(.is-disabled) {
	background-color: var(--ecto-pg-nav-active-bg);
	color: var(--ecto-pg-nav-active-color);
}

.ecto-pg-nav-btn:not(.is-disabled):hover {
	opacity: 0.85;
}

.ecto-pg-nav-btn.is-disabled {
	background-color: var(--ecto-pg-nav-disabled-bg);
	color: var(--ecto-pg-nav-disabled-color);
	cursor: default;
	pointer-events: none;
}

/* ────────────────────────────────────────
   Estado vazio
   ──────────────────────────────────────── */

.ecto-pg-empty {
	font-size: 14px;
	color: #717179;
	padding: 24px 0;
	text-align: center;
}

/* ────────────────────────────────────────
   Responsivo
   ──────────────────────────────────────── */

@media (max-width: 1024px) {
	.ecto-pg-wrap {
		--ecto-pg-cols: 2;
	}
}

@media (max-width: 767px) {
	.ecto-pg-wrap {
		--ecto-pg-cols: 1;
	}

	/* mobile: esconde texto dos botões nav, mantém só o ícone */
	.ecto-pg-nav-btn > span:not(svg):not([aria-hidden]) {
		display: none;
	}

	.ecto-pg-nav-btn {
		padding: 0;
		min-width: var(--ecto-pg-nav-height);
	}
}