/*
 * Plan Heavy components.
 *
 * Named, reusable components (rule 2.2). Each is defined once and used
 * everywhere; states (hover, focus, disabled) are defined here, not improvised
 * per page (rule 2.3). Touch targets are at least 44px (rule 15.6).
 */

/* --- Button --- */
.ph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--ph-space-5);
	border: 1px solid transparent;
	border-radius: var(--ph-radius-pill);
	font-family: var(--ph-font-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ph-btn:hover,
.ph-btn:focus {
	text-decoration: none;
}

.ph-btn--primary {
	background: var(--ph-color-primary);
	color: #fff;
}

.ph-btn--primary:hover,
.ph-btn--primary:focus {
	filter: brightness(0.93);
	color: #fff;
}

.ph-btn--ghost {
	background: transparent;
	border-color: var(--ph-color-line);
	color: var(--ph-color-ink);
}

.ph-btn--ghost:hover,
.ph-btn--ghost:focus {
	border-color: var(--ph-color-primary);
	color: var(--ph-color-primary);
}

.ph-btn:disabled,
.ph-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.ph-btn:focus-visible {
	outline: 3px solid var(--ph-color-secondary);
	outline-offset: 2px;
}

/* --- Card --- */
.ph-card {
	background: var(--ph-color-surface);
	border-radius: var(--ph-radius-lg);
	box-shadow: var(--ph-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ph-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
}

.ph-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ph-card__img--placeholder {
	display: block;
	background: linear-gradient(135deg, var(--ph-color-line), var(--ph-color-bg));
}

.ph-card__body {
	padding: var(--ph-space-4);
}

.ph-card__title {
	font-size: 1.1rem;
	margin: 0 0 var(--ph-space-2);
}

.ph-card__title a {
	color: var(--ph-color-ink);
}

.ph-card__desc {
	color: var(--ph-color-ink-soft);
	font-size: var(--ph-text-small);
	margin: 0 0 var(--ph-space-3);
}

.ph-card__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--ph-space-3);
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink-soft);
	flex-wrap: wrap;
}
.ph-card__groupfit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: calc(100% + var(--ph-space-4) * 2);
	margin: var(--ph-space-3) calc(-1 * var(--ph-space-4)) calc(-1 * var(--ph-space-4));
	padding: 7px var(--ph-space-4);
	background: color-mix(in srgb, var(--ph-color-primary) 10%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--ph-color-primary) 20%, transparent);
	font-size: 11px;
	font-weight: 600;
	color: var(--ph-color-primary);
	letter-spacing: 0.02em;
}

.ph-card__price {
	font-weight: 600;
	color: var(--ph-color-ink);
}

.ph-card__openstatus {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: var(--ph-radius-pill);
}
.ph-card__openstatus--open {
	background: var(--ph-color-open, #16a34a);
	color: #fff;
}
.ph-card__openstatus--closing {
	background: #ea8c00;
	color: #fff;
}

.ph-card--featured {
	outline: 2px solid var(--ph-color-featured);
}

/* --- Badge --- */
.ph-badge {
	position: absolute;
	top: var(--ph-space-3);
	left: var(--ph-space-3);
	padding: var(--ph-space-1) var(--ph-space-3);
	border-radius: var(--ph-radius-pill);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}

.ph-badge--featured {
	background: var(--ph-color-featured);
}

/* --- Panel (sidebar / content blocks) --- */
.ph-panel {
	background: var(--ph-color-surface);
	border: 0;
	border-radius: var(--ph-radius-md);
	padding: var(--ph-space-5);
	margin-bottom: var(--ph-space-5);
	box-shadow: 0 1px 2px rgba(33, 37, 58, 0.05);
}

.ph-panel__title {
	font-size: var(--ph-text-label);
	font-weight: var(--ph-weight-label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ph-color-ink-soft);
	margin-bottom: var(--ph-space-4);
}

.ph-grid__loading {
	color: var(--ph-color-ink-soft);
}

/*
 * Mode tints (rule 2.6). A single body class re-points the primary token so the
 * accent shifts without redesigning anything. Defined once, here.
 */
.ph-mode-vegan {
	--ph-color-primary: var(--ph-color-vegan);
}

.ph-mode-accessibility {
	--ph-color-primary: var(--ph-color-accessibility);
}

/* ── Listed by card + avatar enlarge lightbox ───────────────────────────
   Shown on listings and plans (who added the content), and the enlarge
   overlay used by these avatars and the account profile picture. */
.ph-listedby__row { display: flex; align-items: center; gap: 12px; }
.ph-listedby__avatar {
	flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: none;
	border-radius: 999px; overflow: hidden; cursor: pointer; background: none;
	line-height: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.ph-listedby__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-listedby__avatar:hover { box-shadow: 0 0 0 2px var(--ph-color-primary, #e8568a); }
.ph-listedby__name { font-weight: 600; color: var(--ph-color-ink, #21253a); font-size: 15px; }
.ph-listedby--plan { margin: 8px 0 24px; }

/* Account avatar as an enlarge button: keep it looking like the avatar. */
.ph-account__avatar--btn { padding: 0; border: none; background: none; cursor: pointer; line-height: 0; }
.ph-account__avatar--btn:hover { filter: brightness(0.96); }
[data-ph-avatar-preview] { cursor: pointer; }

/* Enlarge lightbox overlay. */
.ph-avatar-lightbox {
	position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
	justify-content: center; padding: 24px; background: rgba(15,17,26,.82);
}
.ph-avatar-lightbox__fig { margin: 0; max-width: min(90vw, 520px); text-align: center; }
.ph-avatar-lightbox__img {
	max-width: 100%; max-height: 78vh; border-radius: 16px; display: block;
	margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ph-avatar-lightbox__cap { margin-top: 14px; color: #fff; font-weight: 600; font-size: 16px; }
.ph-avatar-lightbox__close {
	position: absolute; top: 18px; right: 22px; width: 40px; height: 40px;
	border: none; border-radius: 999px; background: rgba(255,255,255,.14);
	color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.ph-avatar-lightbox__close:hover { background: rgba(255,255,255,.26); }

/* ══ Chip ═══════════════════════════════════════════════════
   One chip component, used by the search page's inspiration row and by the
   occasion block on the front door. Promoted here from search.css so the two
   cannot drift apart (rule 2.2). States are defined together rather than
   bolted on per surface (rule 2.3). */
.ph-inspo-chip {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 7px 14px;
	background: var(--ph-color-surface);
	border: 1.5px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	font-size: var(--ph-text-small); font-weight: 600; font-family: inherit;
	color: var(--ph-color-ink); cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	white-space: nowrap; box-shadow: 0 1px 3px rgba(33,37,58,0.06);
}
.ph-inspo-chip:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }
.ph-inspo-chip:focus-visible { outline: 2px solid var(--ph-color-primary); outline-offset: 2px; }
.ph-inspo-chip.is-active { background: var(--ph-color-primary); border-color: var(--ph-color-primary); color: #fff; }

/* Secondary size, for a row that sits beneath another row of chips and must
   read as subordinate to it. */
.ph-inspo-chip--sm { padding: 5px 12px; font-size: var(--ph-text-label); box-shadow: none; }

/* Nothing behind it. Quietened rather than removed or disabled: a row whose
   contents come and go reads as broken, and a disabled chip gives the person
   no way to find out why it is empty. */
.ph-inspo-chip.is-empty { color: var(--ph-color-ink-soft); border-style: dashed; }
.ph-inspo-chip.is-empty.is-active { color: #fff; }