//
// @file
//
// Used for single and multiple event pages (not calendar views).
//
// We do not import variable.less as it's handled server side';
@import "bootstrap/mixins.less";
@import "bootstrap/mixins-custom.less";

// ================
// = Events pages =
// ================

@eventFontSize: @baseFontSize * 1.1;
@eventLineHeight: @baseLineHeight * 1.25;

.ai1ec-single-event,
.ai1ec-multi-event {
	.ai1ec-event-details {
		margin-bottom: @eventLineHeight * 0.6;
		> * {
			clear: left;
			margin-bottom: @eventLineHeight * 0.4;
			position: relative;
		}
		.pull-right {
			clear: right !important;
			margin-left: 10px;
			// Make sure right-floated elements get cursor sensitivity priority.
			z-index: 1;
		}
	}
	.ai1ec-label {
		font-size: @eventFontSize * 0.85;
		left: 0;
		line-height: @eventLineHeight * 0.85;
		margin-top: @eventFontSize * 0.15;
		position: absolute;
		height: 100%;
		text-align: right;
		top: 0;
		width: 80px;
	}
	.ai1ec-field-value {
		margin-left: 90px;
		min-height: @eventLineHeight;
	}

	// Date/time & recurrence.
	.ai1ec-time .ai1ec-field-value {
		font-size: 1.2em;
		.ai1ec-allday-badge {
			font-size: 0.75em;
			line-height: 1.4em;
		}
	}
	.ai1ec-exclude {
		color: @muted;
		font-size: 0.9em;
	}
	.ai1ec-edit-instance-link {
		font-size: 0.9em;
	}

	// Categories & tags.
	.ai1ec-categories,
	.ai1ec-tags {
		.ai1ec-label.ai1ec-hidden-narrow-phone {
			cursor: help;
			margin-top: 4px;
		}
	}
	.ai1ec-categories + .ai1ec-tags {
		margin-top: -@eventLineHeight * 0.4;
	}
	.ai1ec-category {
		font-size: 0.8em;
	}
	.ai1ec-tag {
		font-size: 0.85em;
	}

	// Location & Google map.
	.ai1ec-map {
		width: 45%;
	}
	.ai1ec-gmap-container {
		border: 1px solid @tableBorder;
		.border-radius( 4px );
		position: relative;
	}
	#ai1ec-gmap-canvas {
		width: 100%;
		height: 140px;
	}
	.ai1ec-gmap-link {
		position: absolute;
		margin: 0;
		bottom: -1px;
		right: -1px;
	}
	#ai1ec-gmap-canvas input {
		margin: 0 !important;
	}
	.ai1ec-gmap-placeholder {
		.border-radius(4px);
		color: @linkColor;
		cursor: pointer;
		height: 12em;
		border: 1px dashed @tableBorder;
		min-width: 18em;
		margin-bottom: 0.3em;
		text-align: center;
		width: 100%;
		&:hover {
			border-color: darken(@tableBorder, 15%);
			color: @linkColorHover;
		}
		strong {
			position: relative;
			top: 45%;
		}
	}
	.ai1ec-gmap-container-hidden {
		position: absolute !important;
		visibility: hidden;
	}
	.ai1ec-contact span {
		display: inline-block;
		white-space: nowrap;
		i:first-child:before {
			text-align: center;
			width: 1.7em;
		}
	}
}

// Single event page.
.ai1ec-single-event {
	font-size: @eventFontSize;
	line-height: @eventLineHeight;
	// Event avatar/featured image.
	.ai1ec-event-avatar {
		max-width: 40%;
		img {
			max-width: 300px;
			max-height: 300px;
			min-height: 0;
			width: 100%;
		}
	}
}

// Multi-event loop and event excerpts.
.ai1ec-multi-event,
.ai1ec-excerpt {
	font-size: @eventFontSize * 0.9;
	line-height: @eventLineHeight * 0.9;
	.ai1ec-label {
		margin-top: @eventFontSize * 0.1;
	}
}

.ai1ec-excerpt {
	margin-bottom: @eventLineHeight * 0.5;
}

// Footer.
.ai1ec-event-footer {
	clear: both;
	color: @muted;
	font-size: 0.9em;
}
.ai1ec-ics-icon {
	background: url('@{imgdir_default}/ics-icon.png') no-repeat right;
	padding-right: 15px;
}

// ===========================
// = Responsive declarations =
// ===========================

// Portrait phone
@media (max-width: 480px) {
	.ai1ec-single-event,
	.ai1ec-multi-event,
	.ai1ec-excerpt {
		.ai1ec-label {
			line-height: @eventLineHeight;
			margin: 0;
			position: static;
			height: auto;
			text-align: left;
			width: auto;
		}
		.ai1ec-field-value {
			margin-left: 10px;
		}
	}
}

// Portrait/landscape phone/narrow desktop
@media (max-width: 767px) {
	.ai1ec-single-event,
	.ai1ec-multi-event,
	.ai1ec-excerpt {
		.btn-group > .btn {
			display: block;
			float: none;
			margin-left: 0;
			margin-top: -1px;
			&:first-child {
				margin-top: 0;
				.border-radius( 4px 4px 0 0 );
			}
			&:last-child {
				.border-radius( 0 0 4px 4px );
			}
		}
	}
}