/* Portfolio Showcase - Frontend Styles v2 */

.pfs-section{
	--pfs-primary:#4f46e5;
	--pfs-text:#0f172a;
	--pfs-muted:#64748b;
	--pfs-bg:#ffffff;
	--pfs-border:#e5e7eb;
	--pfs-radius:14px;
	--pfs-pad:36px 20px;
	--pfs-gap:18px;
	--pfs-card-pad:16px;
	font-family: var(--pfs-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--pfs-pad);
	box-sizing: border-box;
}
.pfs-section *{box-sizing:border-box;}

.pfs-header{text-align:center; margin-bottom:28px;}
.pfs-eyebrow{color:var(--pfs-primary); font-weight:700; font-size:12.5px; letter-spacing:1px; margin-bottom:8px;}
.pfs-header h2{font-size:32px; font-weight:800; color:var(--pfs-text); margin:0 0 8px; line-height:1.2;}
.pfs-header h2 .accent{color:var(--pfs-primary);}
.pfs-subhead{color:var(--pfs-muted); font-size:14px; max-width:540px; margin:0 auto; line-height:1.55;}

/* === Showcase grid === */
.pfs-showcase{
	display:grid;
	grid-template-columns: 260px 1fr 290px;
	gap:var(--pfs-gap);
	align-items:stretch;
}

/* --- Left list --- */
.pfs-list{
	border:1px solid var(--pfs-border);
	border-radius:var(--pfs-radius);
	padding:10px;
	background:var(--pfs-bg);
	max-height:none;
	overflow-y:auto;
}
.pfs-list-title{font-size:12px; font-weight:700; color:var(--pfs-text); padding:6px 8px 10px;}
.pfs-list-item{
	display:flex; align-items:center; gap:9px;
	padding:8px; border-radius:9px;
	cursor:pointer; margin-bottom:4px;
	border:1px solid transparent;
	transition: background .15s ease, border-color .15s ease;
}
.pfs-list-item:hover{background:#f8fafc;}
.pfs-list-item.active{background:color-mix(in srgb, var(--pfs-primary) 8%, white); border-color:var(--pfs-primary);}
.pfs-list-item img{width:38px; height:38px; border-radius:7px; object-fit:cover; background:#eee; flex-shrink:0;}
.pfs-list-name{font-size:15px; font-weight:700; color:var(--pfs-text); line-height:1.25;}
.pfs-list-cat{font-size:14px; color:var(--pfs-muted);}
.pfs-dot{width:7px; height:7px; border-radius:50%; background:var(--pfs-border); margin-left:auto; flex-shrink:0;}
.pfs-list-item.active .pfs-dot{background:var(--pfs-primary);}

/* --- Center browser preview --- */
.pfs-preview{
  display: flex;
  flex-direction: column;
  height: 100%; /* matches the stretched row height from align-items:stretch */
  border:1px solid var(--pfs-border);
  border-radius:var(--pfs-radius);
  overflow:hidden;
  background:var(--pfs-bg);
}
.pfs-browser-bar{
	display:flex; align-items:center; gap:7px;
	padding:10px 14px;
	background:#f1f1f4;
	border-bottom:1px solid var(--pfs-border);
}
.pfs-browser-bar span{width:10px; height:10px; border-radius:50%; display:inline-block;}
.pfs-dot-red{background:#ff5f57;} .pfs-dot-yellow{background:#febc2e;} .pfs-dot-green{background:#28c840;}
.pfs-url-bar{
	flex:1; background:#fff; border-radius:6px; padding:5px 12px;
	font-size:12px; color:var(--pfs-muted); margin-left:8px;
	border:1px solid var(--pfs-border);
}
.pfs-browser-img-wrap{
  flex: 1; /* takes up all remaining space */
  aspect-ratio: unset; /* remove the fixed 16/10 ratio */
  overflow: hidden;
}
.pfs-browser-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* keeps the top of the page visible instead of cropping it */
  display: block;
}

/* --- Redesigned nav row --- */
.pfs-nav-arrows{
  flex-shrink: 0; /* keeps nav pinned at bottom, never compressed */
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:5px;
  
  background: #fff;
}
.pfs-nav-arrows button{
  width: 25px;
  height: 25px;
  border-radius: 50%; /* rounded rectangle instead of full circle */
  border: 1px solid var(--pfs-border);
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: var(--pfs-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background .15s ease, border-color .15s ease;
}
.pfs-nav-arrows button:hover{
  background: #f8fafc;
  border-color: var(--pfs-primary);
}
.pfs-pagination{
	display:flex; align-items:center; gap:5px;
	max-width:160px; overflow-x:auto; scrollbar-width:none;
}
.pfs-pagination::-webkit-scrollbar{display:none;}
.pfs-pagination span{
	width:6px; height:6px; border-radius:50%; background:var(--pfs-border);
	cursor:pointer; display:inline-block; flex-shrink:0;
	transition:all .2s ease;
}
.pfs-pagination span:hover{background:#c7c9d1;}
.pfs-pagination span.active{background:var(--pfs-primary); width:16px; border-radius:3px;}

/* --- Right info panel --- */
.pfs-info{
	border:1px solid var(--pfs-border); border-radius:var(--pfs-radius);
	padding:var(--pfs-card-pad); background:var(--pfs-bg);
	height: 100%;
    overflow-y: auto;
}
.pfs-info-eyebrow{color:var(--pfs-primary); font-size:11px; font-weight:700; letter-spacing:0.5px; margin-bottom:8px;}
.pfs-info h3{font-size:19px; font-weight:800; color:var(--pfs-text); margin:0 0 8px; line-height:1.25;}
.pfs-info-tag{
	display:inline-block; background:color-mix(in srgb, var(--pfs-primary) 10%, white); color:var(--pfs-primary);
	font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px; margin-bottom:12px;
}
.pfs-info-desc{font-size:14px; color:var(--pfs-muted); line-height:1.55; margin-bottom:16px;}
.pfs-info-block{margin-bottom:16px;}
.pfs-info-label{font-size:11px; font-weight:700; color:var(--pfs-text); letter-spacing:0.4px; margin-bottom:8px;}
.pfs-tech-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.pfs-tech-grid span{
	font-size:14px; color:var(--pfs-text); display:flex; align-items:center; gap:6px;
}
.pfs-tech-grid img{width:20px; height:20px; object-fit:contain; flex-shrink:0;}
.pfs-solutions{list-style:none; padding:0; margin:0;}
.pfs-solutions li{
	font-size:14px; color:var(--pfs-text); padding:5px 0 5px 15px; position:relative; line-height:1.4;
}
.pfs-solutions li::before{content:"✓"; position:absolute; left:0; color:var(--pfs-primary); font-weight:700;}
.pfs-results{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pfs-results .pfs-result-item{text-align:center;}
.pfs-results .pfs-result-value{font-size:15px; font-weight:800; color:var(--pfs-text);}
.pfs-results .pfs-result-label{font-size:10px; color:var(--pfs-muted); margin-top:1px;}

/* --- Buttons, same row --- */
.pfs-info-buttons{display:flex; flex-direction:row; gap:8px; margin-top:18px;}
.pfs-btn-primary, .pfs-btn-secondary{
	flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
	padding:11px 10px; border-radius:10px;
	font-weight:700; font-size:12.5px; text-decoration:none;
	white-space:nowrap;
}
.pfs-btn-primary{background:var(--pfs-primary); color:#fff;}
.pfs-btn-primary:hover{filter:brightness(1.08); color:#fff;}
.pfs-btn-secondary{background:#000000; color:#ffffff; border:1px solid var(--pfs-border);}
.pfs-btn-secondary:hover{background:#f8fafc;}
.pfs-btn-primary img, .pfs-btn-secondary img{width:14px; height:14px; object-fit:contain;}

/* --- Bottom stats bar --- */
.pfs-stats-bar{
	display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
	margin-top:18px; padding:20px; border:1px solid var(--pfs-border) ; border-radius: 10px;
}
.pfs-stat{text-align:center;}
.pfs-stat-icon{width:26px; height:26px; object-fit:contain; margin-bottom:6px;}
.pfs-stat-value{font-size:21px; font-weight:800; color:var(--pfs-primary);}
.pfs-stat-label{font-size:15px; font-weight:600; color:var(--pfs-text); margin-top:2px;}
.pfs-stat-sub{font-size:14px; color:var(--pfs-muted); margin-top:1px;}

/* --- Responsive --- */
@media (max-width: 1100px){
	.pfs-showcase{grid-template-columns: 1fr;}
	.pfs-list{max-height:260px; order:2;}
	.pfs-preview{order:1;}
	.pfs-info{order:3;}
	.pfs-stats-bar{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 600px){
	.pfs-header h2{font-size:24px;}
	.pfs-tech-grid{grid-template-columns:1fr;}
	.pfs-stats-bar{grid-template-columns:1fr 1fr;}
	.pfs-results{grid-template-columns:1fr 1fr 1fr;}
	.pfs-info-buttons{flex-direction:column;}
}