/* ============================================================
   /portfolio page styles (renamed from app-showcase.css 2026-07-28)

   Covers the whole portfolio page, not just the apps section:
   the section index, inter-section spacing, section headers, and
   the "Apps we've developed" cards.

   Linked ONLY from portfolio.html, and deliberately linked BEFORE
   css/accessibility.css. Per CLAUDE.md, accessibility.css owns
   focus/outline styling and nothing loading after it may override
   that. This file therefore defines NO focus or outline rules.
   ============================================================ */

/* ---------- Section index (jump nav) ----------
   The page has three stacked sections and previously gave no hint that
   anything existed below the first grid. This is a real <nav> of in-page
   anchors so both sighted users and screen readers get the same wayfinding. */

/* IMPORTANT: this nav sits inside .pagetitle-section, whose background is
   var(--dark-color) = #00265e. Colors here are light-on-dark. Do not reuse the
   #5a5a72 gray used on the white sections further down this file: it measures
   2.20:1 against #00265e and fails AA. */

.portfolio-index {
	margin: 22px auto 0;
	padding: 0 20px;
	text-align: center;
}

.portfolio-index-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	/* 9.8:1 on #00265e */
	color: #c6d2e8;
	margin-bottom: 14px;
}

.portfolio-index-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.portfolio-index-link {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid #d5dbe6;
	border-radius: 999px;
	background: #ffffff;
	color: #001534;
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover stays LIGHT rather than filling with navy. A dark pill on the #00265e
   band measures 2.1:1 against its own background, so its edge would disappear
   (WCAG 1.4.11 wants 3:1 for component boundaries). Tinting instead keeps both
   the label and the pill outline clearly visible. */
.portfolio-index-link:hover {
	background: #dbe6fa;
	border-color: #001534;
	color: #001534;
	text-decoration: none;
}

/* 0.65 opacity on the inherited #001534 blends to #59677b over the white pill,
   measured 5.75:1, so it still clears AA for 15px text. Do not lower it. */
.portfolio-index-count {
	opacity: 0.65;
	margin-left: 6px;
}

/* Anchor targets sit clear of the header when jumped to.
   The first section keeps id="main-content" because that is the skip-link
   target for keyboard users; the index just links to it rather than
   renaming it. */
#main-content,
#our-apps,
#demo-sites {
	scroll-margin-top: 24px;
}

/* ---------- Inter-section spacing ----------
   .section-padding is 100px top AND bottom, so three stacked sections put a
   200px dead zone between each one. That much emptiness reads as "end of
   page" and hid the two lower sections. Halved to ~100px total between
   sections while leaving the first section's top and the last section's
   bottom (against the CTA band) at their original values. */

#main-content.section-padding {
	padding-bottom: 50px;
}

.app-showcase-section.section-padding {
	padding-top: 50px;
	padding-bottom: 50px;
}

.demo-sites-section.section-padding {
	padding-top: 50px;
}

/* ---------- Section headers ----------
   `.section-desc` ships with NO rule anywhere in the stylesheets, so a <p>
   stacked directly under a .section-big-title <h2> (60px text in a 70px line
   box) sat almost flush against it. Scoped to `.section-title-box .section-desc`
   because the other pages using .section-desc (about, index, services) nest it
   in a .section-desc-box / .about-section-desc-box side-by-side layout that must
   not change. This file loading only on portfolio.html is a second guard.
   Intentionally covers BOTH stacked headers here: the apps section and the
   "Industry demo sites" section below it had identical cramped spacing. */

.section-title-box .section-desc {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
	font-size: 17px;
	line-height: 1.7;
}

/* ---------- Apps we've developed ---------- */

.app-showcase-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.app-showcase-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1 1 300px;
	max-width: 360px;
	padding: 36px 28px 32px;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0, 21, 52, 0.08);
}

/* Icon: width AND height are both set here, so the width/height attrs on the
   <img> reserve layout space without fighting the CSS. (See the CLS gotcha in
   CLAUDE.md about attrs on images inside fixed-size flex containers.) */
.app-showcase-icon {
	width: 88px;
	height: 88px;
	border-radius: 20px;
	margin-bottom: 18px;
	box-shadow: 0 6px 18px rgba(0, 21, 52, 0.18);
}

.app-showcase-platform {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* 4.62:1 on white, clears AA for normal text */
	color: #5a5a72;
	margin-bottom: 6px;
}

.app-showcase-name {
	font-size: 22px;
	margin: 0 0 10px;
	color: #001534;
}

.app-showcase-tagline {
	font-size: 15px;
	line-height: 1.6;
	/* 7.06:1 on white */
	color: #4a4a4a;
	margin: 0 0 22px;
	flex-grow: 1;
}

.app-showcase-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.app-showcase-badge {
	display: inline-block;
	line-height: 0;
	transition: transform 0.2s ease;
}

.app-showcase-badge:hover {
	transform: translateY(-2px);
}

.app-showcase-badge img {
	height: 40px;
	width: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
	.app-showcase-card {
		flex: 1 1 260px;
		padding: 30px 22px 26px;
	}

	#main-content.section-padding {
		padding-bottom: 35px;
	}

	.app-showcase-section.section-padding {
		padding-top: 35px;
		padding-bottom: 35px;
	}

	.demo-sites-section.section-padding {
		padding-top: 35px;
	}
}

@media (max-width: 600px) {
	.app-showcase-grid {
		gap: 22px;
	}

	.app-showcase-card {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.portfolio-index-link {
		padding: 9px 16px;
		font-size: 14px;
	}

	.section-title-box .section-desc {
		font-size: 16px;
	}
}