/* ==========================================================================
   NESMO – Leiðbeiningar Plugin
   ========================================================================== */

:root {
	--nesmo-primary:         #3858e9;
	--nesmo-primary-dark:    #2a46d4;
	--nesmo-text:            #1a1a2e;
	--nesmo-text-muted:      #5c6370;
	--nesmo-bg-card:         #ffffff;
	--nesmo-border:          #e8eaed;
	--nesmo-radius:          12px;
	--nesmo-shadow:          0 2px 12px rgba(0, 0, 0, 0.08);
	--nesmo-shadow-hover:    0 8px 32px rgba(0, 0, 0, 0.14);
	--nesmo-banner-height:   420px;
	--nesmo-banner-overlay:  rgba(0, 0, 0, 0.45);
	--nesmo-banner-color:    #ffffff;
	--nesmo-gap:             1.5rem;
	--nesmo-transition:      0.25s ease;
}

/* ==========================================================================
   BANNER
   ========================================================================== */

.nesmo-leidbeining-banner {
	position:      relative;
	width:         100%;
	height:        var(--nesmo-banner-height);
	margin-bottom: 2.5rem;
	overflow:      hidden;
	display:       flex;
	align-items:   flex-end;
}

/* SEO: <img> fyllir banner en er falin fyrir notendum,
   leitarvélar og Yoast sjá hana þó í DOM */
.nesmo-leidbeining-banner__media {
	position: absolute;
	inset:    0;
	overflow: hidden;
}

.nesmo-leidbeining-banner__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	object-position: center;
	display:    block;
	transform:  scale(1);
	transition: transform 6s ease;
}

.nesmo-leidbeining-banner:hover .nesmo-leidbeining-banner__img {
	transform: scale(1.04);
}

.nesmo-leidbeining-banner__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to bottom,
		transparent 30%,
		var(--nesmo-banner-overlay) 100%
	);
}

.nesmo-leidbeining-banner__content {
	position:   relative;
	z-index:    2;
	padding:    2rem 2.5rem;
	color:      var(--nesmo-banner-color);
	max-width:  900px;
}

.nesmo-leidbeining-banner__title {
	margin:      0 0 0.4rem;
	font-size:   clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color:       var(--nesmo-banner-color);
}

.nesmo-leidbeining-banner__category {
	margin:          0;
	font-size:       0.75rem;
	font-weight:     600;
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--nesmo-primary);
}

/* ==========================================================================
   GRID
   ========================================================================== */

.nesmo-leidbeiningar-grid {
	display:               grid;
	gap:                   var(--nesmo-gap);
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 600px) {
	.nesmo-leidbeiningar-grid--cols-2,
	.nesmo-leidbeiningar-grid--cols-3,
	.nesmo-leidbeiningar-grid--cols-4,
	.nesmo-leidbeiningar-grid--cols-5,
	.nesmo-leidbeiningar-grid--cols-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.nesmo-leidbeiningar-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.nesmo-leidbeiningar-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.nesmo-leidbeiningar-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
	.nesmo-leidbeiningar-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ==========================================================================
   CARD
   ========================================================================== */

.nesmo-leidbeiningar-card {
	background:     var(--nesmo-bg-card);
	border-radius:  var(--nesmo-radius);
	box-shadow:     var(--nesmo-shadow);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow var(--nesmo-transition), transform var(--nesmo-transition);
}

.nesmo-leidbeiningar-card:hover {
	box-shadow: var(--nesmo-shadow-hover);
	transform:  translateY(-3px);
}

/* --- Mynd --- */

.nesmo-leidbeiningar-card__image-link {
	display:  block;
	overflow: hidden;
}

.nesmo-leidbeiningar-card__image {
	width:    100%;
	height:   200px;
	overflow: hidden;
}

.nesmo-leidbeiningar-card__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--nesmo-transition);
}

.nesmo-leidbeiningar-card:hover .nesmo-leidbeiningar-card__image img {
	transform: scale(1.05);
}

.nesmo-leidbeiningar-card__img-placeholder {
	width:      100%;
	height:     200px;
	background: linear-gradient(135deg, #edf0fd 0%, #d6dcfb 100%);
}

/* --- Meginmál --- */

.nesmo-leidbeiningar-card__body {
	padding:        1.5rem;
	display:        flex;
	flex-direction: column;
	flex:           1;
	gap:            0.5rem;
}

.nesmo-leidbeiningar-card__category {
	margin:         0;
	font-size:      0.7rem;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--nesmo-primary);
}

.nesmo-leidbeiningar-card__title {
	margin:      0;
	font-size:   1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color:       var(--nesmo-text);
}

.nesmo-leidbeiningar-card__title a {
	color:           inherit;
	text-decoration: none;
}

.nesmo-leidbeiningar-card__title a:hover {
	color: var(--nesmo-primary);
}

.nesmo-leidbeiningar-card__excerpt {
	margin:      0;
	font-size:   0.9rem;
	color:       var(--nesmo-text-muted);
	line-height: 1.6;
	flex:        1;
}

.nesmo-leidbeiningar-card__link {
	display:         inline-flex;
	align-items:     center;
	gap:             0.4em;
	margin-top:      0.5rem;
	color:           var(--nesmo-primary);
	font-size:       0.9rem;
	font-weight:     600;
	text-decoration: none;
	transition:      gap var(--nesmo-transition), color var(--nesmo-transition);
}

.nesmo-leidbeiningar-card__link:hover {
	gap:   0.7em;
	color: var(--nesmo-primary-dark);
}

/* --- Tómt ástand --- */

.nesmo-leidbeiningar-empty {
	color:      var(--nesmo-text-muted);
	font-style: italic;
}