/* Indie Press Fair - front-end styling
   Sits inline within the normal Calico Projects site (theme header and
   footer stay in place). Full width, with the deep teal background
   pulled directly from the live Ticket Tailor box office page, plus
   gold and orange from the Canva templates. */

.ipf-wrap {
	--ipf-dark: #012d2d;
	--ipf-gold: #fec708;
	--ipf-orange: #ec6639;
	--ipf-cream: #eeefe1;
	--ipf-brand: #49b7a3;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 3em clamp(1.5em, 5vw, 4em) 5em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ipf-cream);
	line-height: 1.6;
	background: var(--ipf-dark);
}

.ipf-wrap h1, .ipf-wrap h2, .ipf-wrap h3 {
	font-weight: 700;
	color: #fff;
}

.ipf-wrap h2 {
	font-size: 1.3em;
	margin: 2.4em 0 0.9em;
	padding-bottom: 0.5em;
	border-bottom: 3px solid var(--ipf-gold);
}

/* Hero: fills most of the viewport on load, vertically centred but
   nudged slightly above dead-centre so it settles fully in view
   without the visitor needing to scroll. */
.ipf-hero {
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 6vh;
}

/* Header: image left, intro right */
.ipf-header-section {
	display: flex;
	gap: 2.5em;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 0.6em;
}
.ipf-header-image {
	flex: 1 1 380px;
	min-width: 260px;
	max-width: 440px;
}
.ipf-header-image img {
	width: 100%;
	height: auto;
	max-height: 52vh;
	object-fit: contain;
	border-radius: 12px;
	display: block;
}
.ipf-header-placeholder {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
}
.ipf-header-placeholder span {
	font-size: 1.3em;
}
.ipf-header-info {
	flex: 1 1 420px;
	min-width: 280px;
}

.ipf-intro {
	color: var(--ipf-cream);
	font-size: 1.05em;
}
.ipf-intro p {
	margin: 0 0 0.9em;
}

.ipf-cta-btn {
	display: inline-block;
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(238, 239, 225, 0.7);
	border-radius: 999px;
	padding: 0.7em 1.8em;
	font-weight: 600;
	text-decoration: none;
	margin-top: 0.4em;
}
.ipf-cta-btn:hover {
	background: rgba(238, 239, 225, 0.12);
	border-color: #fff;
}

.ipf-event-meta {
	text-transform: none;
	letter-spacing: normal;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--ipf-gold);
	margin: 1em 0 0;
	white-space: nowrap;
}

.ipf-cta-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.9em;
	background: rgba(238, 239, 225, 0.06);
	border: 1px solid rgba(238, 239, 225, 0.18);
	border-radius: 10px;
	padding: 2em 1.8em;
	margin: 2.4em 0;
}
.ipf-cta-block-hero {
	padding: 1.3em 1.6em;
	margin: 0;
}
.ipf-cta-block span {
	font-size: 1.15em;
	font-weight: 700;
	color: #fff;
}
.ipf-cta-block .ipf-cta-btn {
	margin-top: 0;
}

/* Access-code explainer sitting above the running order */
.ipf-access-note {
	background: rgba(254, 199, 8, 0.1);
	border: 1px solid rgba(254, 199, 8, 0.4);
	border-radius: 8px;
	padding: 1em 1.2em;
	margin-bottom: 1.5em;
	font-size: 0.95em;
	color: var(--ipf-cream);
}

/* Short explainer paragraph under a section heading (e.g. the publishers intro) */
.ipf-section-intro {
	color: rgba(238, 239, 225, 0.85);
	font-size: 0.98em;
	margin: -0.4em 0 1.4em;
}

/* Prominent highlighted callout, e.g. the "we don't take a cut" note */
.ipf-callout {
	padding: 0;
	margin: 0 0 1.8em;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--ipf-gold);
	line-height: 1.5;
}

/* Running order as a timeline: time column + connecting rail + content */
.ipf-timeline {
	position: relative;
}
.ipf-timeline-row {
	display: grid;
	grid-template-columns: 100px 24px 1fr;
	gap: 0 1em;
}
.ipf-timeline-time {
	text-align: right;
	padding-top: 1.3em;
	font-weight: 700;
	color: var(--ipf-gold);
	font-size: 0.95em;
}
.ipf-timeline-marker {
	position: relative;
	display: flex;
	justify-content: center;
}
.ipf-timeline-marker::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgba(238, 239, 225, 0.2);
}
.ipf-timeline-row:first-child .ipf-timeline-marker::before {
	top: 1.6em;
}
.ipf-timeline-row:last-child .ipf-timeline-marker::before {
	bottom: calc(100% - 2.4em);
}
.ipf-timeline-dot {
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ipf-gold);
	margin-top: 1.4em;
}
.ipf-tt-row {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1.2em 0;
	border-bottom: 1px solid rgba(238, 239, 225, 0.18);
}
.ipf-tt-row-thumb img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.ipf-tt-row-thumb .ipf-placeholder {
	width: 88px;
	height: 88px;
	border-radius: 8px;
	margin-bottom: 0;
}
.ipf-tt-row-main {
	flex: 1 1 auto;
	min-width: 0;
}
.ipf-tt-row-main h3 {
	margin: 0 0 0.2em;
	font-size: 1.1em;
	color: #fff;
}
.ipf-tt-row-meta {
	margin: 0;
	color: rgba(238, 239, 225, 0.7);
	font-size: 0.92em;
}
.ipf-tt-row-desc {
	margin: 0.3em 0 0;
	color: rgba(238, 239, 225, 0.7);
	font-size: 0.92em;
}
.ipf-tt-row-action {
	flex-shrink: 0;
}
.ipf-tt-select-btn {
	display: inline-block;
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(238, 239, 225, 0.7);
	border-radius: 999px;
	padding: 0.55em 1.3em;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ipf-tt-select-btn:hover {
	background: rgba(238, 239, 225, 0.12);
	border-color: #fff;
}

/* Bio cards - light cards on the dark background, stretched to fill each row */
.ipf-bio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.4em;
}
.ipf-bio-card {
	text-align: left;
	background: rgba(238, 239, 225, 0.06);
	border: 1px solid rgba(238, 239, 225, 0.15);
	border-radius: 10px;
	padding: 1.1em;
	display: flex;
	flex-direction: column;
}
.ipf-bio-photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 0.7em;
}
.ipf-bio-card h3 {
	margin: 0 0 0.3em;
	font-size: 1em;
	color: #fff;
}
.ipf-bio-text {
	font-size: 0.9em;
	color: rgba(238, 239, 225, 0.8);
	flex-grow: 1;
}
.ipf-bio-link {
	display: inline-block;
	margin-top: 0.5em;
	font-size: 0.88em;
	color: var(--ipf-brand);
	font-weight: 700;
	text-decoration: none;
}
.ipf-bio-link:hover {
	color: var(--ipf-gold);
	text-decoration: underline;
}

.ipf-bio-photo-logo img {
	object-fit: contain;
	background: #fff;
	padding: 0.8em;
}

/* Placeholder used wherever a photo/logo hasn't been added yet */
.ipf-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	margin-bottom: 0.7em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(238, 239, 225, 0.08);
	border: 1px dashed rgba(238, 239, 225, 0.3);
}
.ipf-placeholder span {
	color: rgba(238, 239, 225, 0.5);
	font-weight: 700;
	font-size: 1.6em;
	letter-spacing: 0.04em;
}

/* Small photo credit overlaid in the corner of an image, wherever one is set */
.ipf-media {
	display: block;
}
.ipf-media-inner {
	position: relative;
	display: block;
}
.ipf-media-inner img {
	display: block;
}
.ipf-photo-credit {
	position: absolute;
	right: 6px;
	bottom: 6px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.68em;
	line-height: 1.3;
	padding: 0.15em 0.5em;
	border-radius: 3px;
	max-width: calc(100% - 12px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ipf-tt-footer {
	margin-top: 3em;
	padding-top: 1.2em;
	border-top: 1px solid rgba(238, 239, 225, 0.18);
	color: rgba(238, 239, 225, 0.6);
	font-size: 0.82em;
}

/* Location section */
.ipf-location-grid {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
	margin-bottom: 1.5em;
}
.ipf-location-image {
	flex: 1 1 320px;
	min-width: 260px;
}
.ipf-location-image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
.ipf-location-placeholder {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	margin-bottom: 0;
}
.ipf-location-info {
	flex: 1 1 380px;
	min-width: 260px;
}
.ipf-location-info h3 {
	margin: 0 0 0.3em;
	font-size: 1.15em;
}
.ipf-location-info p {
	color: rgba(238, 239, 225, 0.85);
	font-size: 0.95em;
	margin: 0 0 0.9em;
}
.ipf-location-info a {
	color: var(--ipf-brand);
}
.ipf-location-map iframe {
	width: 100%;
	border-radius: 10px;
	display: block;
}

.ipf-notice {
	color: rgba(238, 239, 225, 0.7);
	font-style: italic;
}
.ipf-success {
	background: #eaf7ec;
	border: 1px solid #b7e0bd;
	color: #1e6a2b;
	padding: 0.6em 1em;
	border-radius: 6px;
}
.ipf-error {
	background: #fbeaea;
	border: 1px solid #e0b7b7;
	color: #a12626;
	padding: 0.6em 1em;
	border-radius: 6px;
}

.ipf-button {
	background: var(--ipf-gold);
	color: var(--ipf-dark);
	border: none;
	border-radius: 6px;
	padding: 0.7em 1.4em;
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
}
.ipf-button:hover {
	background: var(--ipf-orange);
	color: #fff;
}

.ipf-coordinator-header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em 1em;
	justify-content: space-between;
	align-items: center;
	border-bottom: 3px solid var(--ipf-gold);
	padding-bottom: 0.6em;
}
.ipf-logout {
	color: var(--ipf-cream);
	font-weight: 600;
	text-decoration: none;
}
.ipf-form {
	background: rgba(238, 239, 225, 0.06);
	border: 1px solid rgba(238, 239, 225, 0.18);
	border-radius: 10px;
	padding: 1.2em 1.4em;
	margin-bottom: 1.4em;
	max-width: 600px;
}
.ipf-form label {
	font-weight: 600;
	color: var(--ipf-cream);
}
.ipf-form input[type="text"],
.ipf-form input[type="url"],
.ipf-form input[type="number"],
.ipf-form input[type="password"],
.ipf-form select,
.ipf-form textarea {
	width: 100%;
	max-width: 400px;
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-family: inherit;
}
.ipf-admin-table {
	width: 100%;
	max-width: 900px;
	border-collapse: collapse;
	margin-bottom: 2em;
	color: var(--ipf-cream);
}
.ipf-admin-table th,
.ipf-admin-table td {
	text-align: left;
	padding: 0.6em 0.8em;
	border-bottom: 1px solid rgba(238, 239, 225, 0.18);
}
.ipf-admin-table a {
	color: var(--ipf-brand);
}
/* Login screen: a standalone light card, independent of the dark
   .ipf-wrap theme, so it can sit on the same page as other Calico
   front-end admin logins (e.g. the Impact Grid admin) and look like a
   matching set rather than a different plugin. */
.ipf-admin-wrap {
	--ipf-brand: #49b7a3;
	display: flex;
	justify-content: center;
	padding: 3em 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ipf-login-box {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
	padding: 2em 2.2em;
	text-align: left;
}
.ipf-login-box h2 {
	margin: 0 0 0.4em;
	font-size: 1.3em;
	color: #1a1a1a;
}
.ipf-login-box p {
	margin: 0 0 1.2em;
	color: #555;
	font-size: 0.95em;
}
.ipf-login-error {
	background: #fbeaea;
	border: 1px solid #e0b7b7;
	color: #a12626;
	padding: 0.6em 0.9em;
	border-radius: 6px;
	font-size: 0.9em;
}
.ipf-login-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9em;
	color: #333;
	margin-bottom: 0.4em;
}
.ipf-login-form input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65em 0.8em;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1em;
	margin-bottom: 1.2em;
}
.ipf-btn {
	display: inline-block;
	border: none;
	border-radius: 6px;
	padding: 0.7em 1.4em;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	text-align: center;
}
.ipf-btn-primary {
	background: var(--ipf-brand);
	color: #fff;
}
.ipf-btn-primary:hover {
	opacity: 0.9;
}

@media (max-width: 640px) {
	.ipf-wrap {
		padding-left: 1.1em;
		padding-right: 1.1em;
	}
	.ipf-header-image {
		max-width: 100%;
	}
	.ipf-header-image img {
		max-height: 40vh;
	}
	.ipf-event-meta {
		white-space: normal;
		font-size: 0.95em;
	}

	/* Collapse the timeline to a single column: time sits as a small
	   label above each row instead of its own grid column, and the
	   connecting line/dot are dropped since they can't line up
	   sensibly once everything stacks. */
	.ipf-timeline-row {
		display: block;
		margin-bottom: 1.1em;
	}
	.ipf-timeline-marker {
		display: none;
	}
	.ipf-timeline-time {
		text-align: left;
		padding-top: 0;
		margin-bottom: 0.3em;
	}
	.ipf-timeline-time span {
		display: inline-block;
		background: rgba(254, 199, 8, 0.12);
		border-radius: 4px;
		padding: 0.15em 0.5em;
	}

	/* Running order rows: stack instead of squeezing thumb + text +
	   button into one line. */
	.ipf-tt-row {
		flex-wrap: wrap;
	}
	.ipf-tt-row-thumb img,
	.ipf-tt-row-thumb .ipf-placeholder {
		width: 56px;
		height: 56px;
	}
	.ipf-tt-row-main {
		flex-basis: calc(100% - 72px);
	}
	.ipf-tt-row-action {
		flex-basis: 100%;
		margin-top: 0.8em;
	}
	.ipf-tt-select-btn {
		display: block;
		text-align: center;
	}

	.ipf-cta-block {
		padding: 1.5em 1.2em;
	}

	/* Admin tables in the coordinator area scroll sideways rather than
	   overflowing the page. */
	.ipf-admin-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}