/**
 * Public-facing styles.
 *
 * @package Nice_Team
 * @since   1.0
 */

/* ============================================================================
   Table of Contents.
   ----------------------------------------------------------------------------
   1. Widgets.
   2. Grid Styles.
   3. Common Styles.
   ========================================================================= */

// Including mixins and variables.
@import "sass/mixins/_mixins-master";
@import "sass/variables/_variables";

/* ============================================================================
   1. Widgets.
   ========================================================================= */
.nice-team.widget-team-members.default-styles {
	list-style: none;

	li {
		overflow: hidden;
		margin-bottom: 1.5em;
	}

	.nice-team-member-featured-image {
		float: left;
		margin-right: 1em;
		max-width: 100%;

		html[dir="rtl"] & {
			float: right;
			margin-right: 0;
			margin-left: 1em;
		}
	}

	.nice-team-member-content {
		margin-bottom: 1em;
	}

	.nice-team-member {
		.nice-team-member-author {
			clear: both;
		}
	}

	.nice-team-member-meta {
		margin-bottom: 1em;
	}
}

/* ============================================================================
   2. Grid Styles.
   ========================================================================= */
.nice-team.default-styles {
	&.grid {
		overflow: hidden;
		margin-left: -3%; /* same as your gutter */
		margin-right: -0.23px;

		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}

	&.grid-pad {
		padding: 20px 0 20px 20px;

		html[dir="rtl"] & {
			padding: 20px 20px 20px 0;
		}

		& > [class*='col-']:last-of-type {
			padding-right: 20px;

			html[dir="rtl"] & {
				padding-right: 0;
			}
		}
	}

	.nice-team-member-featured-image {
		overflow: hidden;
		position: relative;
		max-width: 100%;

		img {
			max-width: 100%;
			height: auto;
		}
	}

	.row:after {
		content: "";
		display: table;
		clear: both;
	}

	.row {
		padding-bottom: 3%;
	}

	[class*='columns-'] {
		box-sizing: border-box;
		float: left;
		overflow: hidden;
		position: relative;
		padding-left: 3%;

		html[dir="rtl"] & {
			float: right;
		}

		&:last-of-type {
			padding-right: 0;

			html[dir="rtl"] & {
				padding-right: inherit;
				padding-left: 0;
			}
		}
	}

	.col-2-3 {
		width: 66.66%;
	}

	.columns-1 {
		width: 100%;
	}

	.columns-2 {
		width: 50%;
	}

	.columns-3 {
		width: 33.33%;
	}

	.columns-4 {
		width: 25%;
	}

	.columns-5 {
		width: 20%;
	}

	.columns-6 {
		width: 16.66%;
	}

	.columns-7 {
		width: 14.28%;
	}

	.columns-8 {
		width: 12.5%;
	}

	.columns-9 {
		width: 11.11%;
	}

	.columns-10 {
		width: 10%;
	}

	.columns-11 {
		width: 9.09%;
	}

	.columns-12 {
		width: 8.33%;
	}

	@for $i from 2 through 12 {
		@media all and (max-width: 320px) {
			.columns-#{$i} {
				width: 100%;
			}
		}

		.columns-#{$i}:nth-child(#{$i}n+1) {
			clear: both;
		}
	}
}

/* ============================================================================
   3. Common Styles.
   ========================================================================= */
.nice-team.default-styles .nice-team-member {
	margin-bottom: 1em;

	&.first {
		clear: both;
	}

	.nice-team-member-content,
	.nice-team-member-excerpt {
		padding: 0;
		margin-bottom: 1em;
		clear: both;
	}

	.nice-team-member-featured-image {
		float: left;
		margin-bottom: 1em;
		margin-right: 1em;

		html[dir="rtl"] & {
			float: right;
			margin-right: 0;
			margin-left: 1em;
		}
	}
}

@mixin team-member-data {
	.nice-team-member-data {
		margin-bottom: 1em;

		span {
			display: block;
			font-style: normal;

			&.member-name {
				font-weight: bold;
			}

			&.member-position {
				font-style: italic;
			}
		}
	}
	.nice-team-member-meta {
		margin-bottom: 1em;
		clear: both;

		span {
			display: block;
		}
	}
}

.nice-team.default-styles {
	.nice-team-member {
		@include team-member-data;
	}
}

.nice-team-member.default-styles {
	@include team-member-data;
}