/**
 * Post Maker Frontend Styles
 * Dark blue gradient with neon green accents
 * All styles scoped to .post-maker-list and .post-maker-carousel
 */

/* ============================================
   EVENTS LIST VIEW - Scoped to .post-maker-list
   ============================================ */

.post-maker-list,
.pm-events-list {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ===== LIST VIEW (match Achievements style) ===== */
.post-maker-list .pm-list-item,
.pm-events-list .pm-list-item {
	margin-bottom: 18px;
  width: 100%;
  padding: 22px 26px;
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(18, 40, 70, 0.85), rgba(14, 32, 58, 0.85));
  border: 1px solid rgba(255,255,255,0.06);

  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}


.post-maker-list .pm-list-item:last-child,
.pm-events-list .pm-list-item:last-child {
	margin-bottom: 0;
}

.post-maker-list .pm-list-item:hover,
.pm-events-list .pm-list-item:hover {
  transform: none;
  border-color: rgba(183,255,42,0.85);
  box-shadow:
    0 0 0 1px rgba(183,255,42,0.45),
    0 0 28px rgba(183,255,42,0.20),
    0 0 90px rgba(183,255,42,0.10);
}




.post-maker-list .pm-list-item.pm-list-item-clickable,
.pm-events-list .pm-list-item.pm-list-item-clickable {
	text-decoration: none;
	display: block;
	cursor: pointer;
	color: inherit;
}

.post-maker-list .pm-list-item.pm-list-item-clickable:hover,
.pm-events-list .pm-list-item.pm-list-item-clickable:hover {
	text-decoration: none;
	color: inherit;
}

.post-maker-list .pm-list-item-content,
.pm-events-list .pm-list-item-content {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 18px;
  width: 100%;
}


.post-maker-list .pm-list-item-icon,
.pm-events-list .pm-list-item-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);

  padding: 0;
  box-sizing: border-box;

  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* ================================
   Reduce icon ONLY (keep box same)
   ================================ */
.post-maker-list .pm-list-item-icon img,
.pm-events-list .pm-list-item-icon img {
  width: 22px;
  height: 22px;
}

.post-maker-list .pm-list-item-icon svg,
.pm-events-list .pm-list-item-icon svg {
  width: 22px;
  height: 22px;
}


.post-maker-list .pm-list-item-icon.pm-default-icon,
.pm-events-list .pm-list-item-icon.pm-default-icon {
	color: #00ff88;
}



.post-maker-list .pm-list-item-text,
.pm-events-list .pm-list-item-text {
	flex: 1;
	min-width: 0;
	flex-grow: 1;
}

.post-maker-list .pm-list-item-title,
.pm-events-list .pm-list-item-title {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  margin: 0 0 6px 0;
  line-height: 1.3;
}


.post-maker-list .pm-list-item-description,
.pm-events-list .pm-list-item-description {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.6;
  transition: color 0.25s ease;
}
.post-maker-list .pm-list-item:hover .pm-list-item-icon,
.pm-events-list .pm-list-item:hover .pm-list-item-icon {
  background: rgba(183,255,42,0.10);
  border-color: rgba(183,255,42,0.28);
}

.post-maker-list .pm-list-item:hover .pm-list-item-description,
.pm-events-list .pm-list-item:hover .pm-list-item-description {
  color: #b7ff2a;
}


.post-maker-list .pm-list-item-date,
.pm-events-list .pm-list-item-date {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  white-space: nowrap;
  padding-left: 0;
  margin-left: 0;
  text-align: right;
}


.post-maker-list .pm-no-items,
.pm-events-list .pm-no-items {
	color: #b0b8c4;
	text-align: center;
	padding: 40px 20px;
	font-size: 16px;
}

/* ============================================
   EVENTS CAROUSEL VIEW - Scoped to .post-maker-carousel
   ============================================ */

.post-maker-carousel-wrapper,
.pm-events-carousel-wrapper {
	width: 100%;
	position: relative;
	padding: 20px 0 60px;
}

.post-maker-carousel-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.post-maker-carousel,
.pm-events-carousel {
	width: 100%;
	flex: 1;
	padding-bottom: 20px;
	overflow: hidden;
}

.post-maker-carousel .swiper-slide,
.pm-events-carousel .swiper-slide {
	height: auto;
}

.post-maker-carousel .pm-carousel-card,
.pm-events-carousel .pm-carousel-card {
  background: transparent !important;                 /* ✅ transparent */
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(164,200,55,.25);
  box-shadow: none !important;                        /* ✅ no card bg shadow */
  transition: border-color .25s ease;                 /* ✅ no movement */
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ✅ green glow overlay */
.post-maker-carousel .pm-carousel-card::after,
.pm-events-carousel .pm-carousel-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  box-shadow:
    0 0 0 1px rgba(164,200,55,.45),
    0 0 40px rgba(164,200,55,.28),
    0 0 120px rgba(164,200,55,.18);
}

.post-maker-carousel .pm-carousel-card:hover,
.pm-events-carousel .pm-carousel-card:hover {
  transform: none !important;                        /* ✅ no movement */
  box-shadow: none !important;
  border-color: rgba(164,200,55,.6);
}

.post-maker-carousel .pm-carousel-card:hover::after,
.pm-events-carousel .pm-carousel-card:hover::after{
  opacity:1;                                          /* ✅ glow on hover */
}


.post-maker-carousel .pm-carousel-card.pm-carousel-card-clickable,
.pm-events-carousel .pm-carousel-card.pm-carousel-card-clickable {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	display: flex;
}

.post-maker-carousel .pm-carousel-card.pm-carousel-card-clickable:hover,
.pm-events-carousel .pm-carousel-card.pm-carousel-card-clickable:hover {
	text-decoration: none;
	color: inherit;
}

.post-maker-carousel .pm-carousel-card-image,
.pm-events-carousel .pm-carousel-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;                   /* important for zoom */
  position: relative;
  background: transparent !important; /* ✅ no background */
}

.post-maker-carousel .pm-carousel-card-image img,
.pm-events-carousel .pm-carousel-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;    /* ✅ zoom animation */
}

/* ✅ zoom image only */
.post-maker-carousel .pm-carousel-card:hover .pm-carousel-card-image img,
.pm-events-carousel .pm-carousel-card:hover .pm-carousel-card-image img {
  transform: scale(1.08);
}


.post-maker-carousel .pm-carousel-card-badge,
.pm-events-carousel .pm-carousel-card-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	background: #a4c837;
	color: #0a1a2e;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	z-index: 2;
	font-family: 'Orbitron', sans-serif;
}

.post-maker-carousel .pm-carousel-card-content,
.pm-events-carousel .pm-carousel-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent !important;   /* ✅ transparent */
}


/* Date moved above title */
.post-maker-carousel .pm-carousel-card-date-top,
.post-maker-carousel .pm-carousel-card-date,
.pm-events-carousel .pm-carousel-card-date-top,
.pm-events-carousel .pm-carousel-card-date {
	font-size: 13px;
	color: rgba(164, 200, 55, 0.7);
	margin: 0 0 8px 0;
	line-height: 1.4;
	font-weight: 400;
	font-family: 'Orbitron', sans-serif;
}


.post-maker-carousel .pm-carousel-card-title,
.pm-events-carousel .pm-carousel-card-title {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 10px 0;
	line-height: 1.4;
	font-family: 'Orbitron', sans-serif;
}


.post-maker-carousel .pm-carousel-card-description,
.pm-events-carousel .pm-carousel-card-description {
	font-size: 14px;
	color: #b0b8c4;
	margin: 0;
	line-height: 1.6;
	flex: 1;
}

/* Custom Navigation Arrows - Outside Carousel */
/* ===== Arrow like your image ===== */
.post-maker-carousel-arrow{
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 50%;
  background: transparent !important;                     /* ✅ no fill */
  border: 2px solid rgba(164,200,55,.7);                  /* ✅ same green */
  color: #a4c837;                                         /* ✅ icon color */

  box-shadow:
    0 0 0 1px rgba(164,200,55,.25),
    0 0 18px rgba(164,200,55,.22);                        /* ✅ soft glow */

  cursor:pointer;
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
  padding:0;
  margin:0;
  outline:none;
}

/* hover glow only (no movement) */
.post-maker-carousel-arrow:hover{
  background: transparent !important;
  border-color: rgba(164,200,55,.95);
  color: #a4c837;
  transform: none !important;                             /* ✅ no scale */
  box-shadow:
    0 0 0 1px rgba(164,200,55,.45),
    0 0 28px rgba(164,200,55,.32),
    0 0 70px rgba(164,200,55,.18);
}

/* active no movement */
.post-maker-carousel-arrow:active{
  transform: none !important;
}

/* arrow size like screenshot */
.post-maker-carousel-arrow svg{
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}


.post-maker-carousel-arrow.swiper-button-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Swiper Pagination Dots - Scoped */
.post-maker-carousel .swiper-pagination,
.pm-events-carousel .swiper-pagination {
	position: relative;
	bottom: 0;
	margin-top: 30px;
	text-align: center;
	width: 100%;
}

.post-maker-carousel .swiper-pagination-bullet,
.pm-events-carousel .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(0, 255, 136, 0.4);
	opacity: 1;
	margin: 0 6px;
	border-radius: 50%;
	transition: all 0.3s ease;
	cursor: pointer;
}

.post-maker-carousel .swiper-pagination-bullet:hover,
.pm-events-carousel .swiper-pagination-bullet:hover {
	background: rgba(0, 255, 136, 0.7);
	transform: scale(1.2);
}

.post-maker-carousel .swiper-pagination-bullet-active,
.pm-events-carousel .swiper-pagination-bullet-active {
	background: #00ff88;
	width: 24px;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

/* ============================================
   RESPONSIVE DESIGN - Mobile First
   ============================================ */

/* Responsive adjustments for carousel arrows */
@media (max-width: 767px) {
	.post-maker-carousel-container {
		gap: 10px;
	}
	
	.post-maker-carousel-arrow {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
	}
	
	.post-maker-carousel-arrow svg {
		width: 20px;
		height: 20px;
	}
	
	.post-maker-carousel,
	.pm-events-carousel {
		padding-bottom: 15px;
	}
}

/* Mobile: date moves below title */
@media (max-width: 767px) {
	  .post-maker-list .pm-list-item-content,
  .pm-events-list .pm-list-item-content {
    grid-template-columns: 56px 1fr;
    gap: 14px;
  }
	
	.post-maker-list .pm-list-item-icon,
	.pm-events-list .pm-list-item-icon {
		width: 50px;
		height: 50px;
		min-width: 50px;
		min-height: 50px;
	}
	
	.post-maker-list .pm-list-item-title,
	.pm-events-list .pm-list-item-title {
		font-size: 16px;
	}
	
	  .post-maker-list .pm-list-item-date,
  .pm-events-list .pm-list-item-date {
    grid-column: 2 / -1;
    margin-top: 6px;
    justify-self: start;
    width: auto;
    border-top: none;
    padding-top: 0;
  }
}
	.post-maker-carousel .pm-carousel-card-image,
	.pm-events-carousel .pm-carousel-card-image {
		height: 180px;
	}
	
	.post-maker-carousel .pm-carousel-card-content,
	.pm-events-carousel .pm-carousel-card-content {
		padding: 15px;
	}
	
	.post-maker-carousel .swiper-button-next,
	.post-maker-carousel .swiper-button-prev,
	.pm-events-carousel .swiper-button-next,
	.pm-events-carousel .swiper-button-prev {
		width: 40px;
		height: 40px;
	}
	
	.post-maker-carousel .swiper-button-next,
	.pm-events-carousel .swiper-button-next {
		right: 5px;
	}
	
	.post-maker-carousel .swiper-button-prev,
	.pm-events-carousel .swiper-button-prev {
		left: 5px;
	}
}

/* Tablet: date stays right-aligned */
@media (min-width: 768px) and (max-width: 1023px) {
	.post-maker-list .pm-list-item-content,
	.pm-events-list .pm-list-item-content {
		flex-wrap: nowrap;
	}
	
	.post-maker-list .pm-list-item-date,
	.pm-events-list .pm-list-item-date {
		text-align: right;
		margin-left: auto;
		padding-left: 20px;
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}
}

/* Desktop: full layout */
@media (min-width: 1024px) {
	.post-maker-list .pm-list-item-content,
	.pm-events-list .pm-list-item-content {
		flex-wrap: nowrap;
		gap: 24px;
	}
	
	.post-maker-list .pm-list-item-date,
	.pm-events-list .pm-list-item-date {
		text-align: right;
	}
}

/* Extra small mobile */
@media (max-width: 480px) {
	.post-maker-list .pm-list-item,
	.pm-events-list .pm-list-item {
		padding: 16px;
		margin-bottom: 12px;
	}
	
	.post-maker-list .pm-list-item-icon,
	.pm-events-list .pm-list-item-icon {
		width: 45px;
		height: 45px;
		min-width: 45px;
		min-height: 45px;
	}
	
	.post-maker-list .pm-list-item-title,
	.pm-events-list .pm-list-item-title {
		font-size: 15px;
	}
	
	.post-maker-list .pm-list-item-description,
	.pm-events-list .pm-list-item-description {
		font-size: 13px;
	}
	
	.post-maker-carousel .pm-carousel-card-image,
	.pm-events-carousel .pm-carousel-card-image {
		height: 160px;
	}
	
	.post-maker-carousel .pm-carousel-card-content,
	.pm-events-carousel .pm-carousel-card-content {
		padding: 12px;
	}
	
	.post-maker-carousel .pm-carousel-card-title,
	.pm-events-carousel .pm-carousel-card-title {
		font-size: 16px;
	}
	
	.post-maker-carousel .pm-carousel-card-description,
	.pm-events-carousel .pm-carousel-card-description {
		font-size: 13px;
	}
}
/* ==============================
   FIX: Title row1 full width
        Description + Date row2
   (Works even if title+desc are inside .pm-list-item-text)
   ============================== */

/* Outer grid: icon | text | date */
.post-maker-list .pm-list-item-content,
.pm-events-list .pm-list-item-content{
  display:grid !important;
  grid-template-columns:56px 1fr auto !important;
  column-gap:18px !important;
  align-items:start !important;
}

/* Make the middle column a 2-row grid */
.post-maker-list .pm-list-item-text,
.pm-events-list .pm-list-item-text{
  display:grid !important;
  grid-template-rows:auto auto !important;
  row-gap:8px !important;
  min-width:0 !important;
}

/* Title sits in row 1 (inside text column) */
.post-maker-list .pm-list-item-title,
.pm-events-list .pm-list-item-title{
  grid-row:1 !important;
  margin:0 !important;
}

/* Description sits in row 2 (inside text column) */
.post-maker-list .pm-list-item-description,
.pm-events-list .pm-list-item-description{
  grid-row:2 !important;
  margin:0 !important;
}

/* Date should align with Description row */
.post-maker-list .pm-list-item-date,
.pm-events-list .pm-list-item-date{
  align-self:end !important;   /* matches description row */
  margin-top:auto !important;  /* push date to bottom */
}
/* ==============================
   FIX: Long titles wrapping (no cut)
   ============================== */

/* Allow the middle column to actually shrink */
.post-maker-list .pm-list-item-text,
.pm-events-list .pm-list-item-text{
  min-width: 0 !important;
}

/* Force title/desc to wrap instead of overflowing */
.post-maker-list .pm-list-item-title,
.pm-events-list .pm-list-item-title,
.post-maker-list .pm-list-item-description,
.pm-events-list .pm-list-item-description{
  white-space: normal !important;
  overflow-wrap: anywhere !important;   /* key */
  word-break: break-word !important;
}

/* In case any parent is clipping */
.post-maker-list .pm-list-item-content,
.pm-events-list .pm-list-item-content{
  overflow: visible !important;
}

/* Put description + date in the same row */
.post-maker-list .pm-list-item-meta-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
}

/* Clamp description to 3 lines and add ... */
.post-maker-list .pm-list-item-description{
  margin:0;
  flex:1;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

/* Date stays on right, no wrapping */
.post-maker-list .pm-list-item-date{
  white-space:nowrap;
  flex-shrink:0;
  opacity:.85;
}