/**
 * Visual styles for CCNM groups
 *
 * This CSS file covers formatting for:
 * - individual group nodes where specific overrides of the base elements in elements.css are required
 * - fields within the group views ('What's On' pages, including the News page)
 *
 * Note: field labels are formatted in field.css
 *
*/ 


/* Formatting the 'Next meets' field on the individual group nodes */
.node--type-ccnm-group .field--name-field-group-event-date  {
    margin: 0 var(--space-xs);
}

/* News view page */
/* Set the margins to ensure the images line up with the headings and para margins */
.view-ccnm-news .media--type-image {
	margin: 1rem auto 0.5rem auto;
	padding: 0 0.5rem;
}

/* CCNM groups & events on the What's On At CCNM page */
.view-ccnm-news td .media--type-image {
	margin: 0;
}

.view-ccnm-news .views-table td {
	padding: 0.25rem 0;
}

/* Coming soon view section */
.view-ccnm-groups .view-content {
	border-top: 2px solid #585858;
}

.view-ccnm-groups .views-row {
	margin: 0.75rem 0 0.5rem;
	border-bottom: 2px solid #585858;
}

.view-ccnm-groups .views-field-field-group-event-date,
.view-ccnm-groups .views-field-title  {
	font-size: var(--font-size-h4);
	font-weight: bold;
}

.view-ccnm-groups .media--type-image {
	margin-top: 0.5rem;
	margin-bottom: 0.75rem;
}

.view-ccnm-groups .views-field-field-event-details-1 {
	font-weight: normal;
	margin-bottom: 0.5rem;
}

/* Film club view */
#block-views-our-film-clubs .views-field-field-group-event-date  {
	font-style: italic;
}

#block-views-our-film-clubs .views-label-field-group-event-date  {
	padding-left: 0.5rem;
}

#block-views-our-film-clubs .views-field-field-group-event-date .field-content  {
	display: inline;
}

/* Group event details */
.views-field-field-event-details p  {
	padding: 0.25rem 0.5rem;
	margin: 0;
}

/* Formatting specific for mobile and tablet (portrait) */
@media all and (max-width: 959px) { 

.view-ccnm-groups .views-field-field-group-event-date,
.view-ccnm-groups .views-field-title  {
	font-size: var(--font-size-base);
	font-weight: bold;
}

.view-ccnm-groups .views-field-field-group-event-date {
	margin-left: 0.5rem;
}

}

/* Formatting specific for desktops and large tablet */
@media all and (min-width: 960px) {

.view-ccnm-groups .views-field-field-group-event-date {
	margin-left: 0.5rem;
}

.view-ccnm-groups .views-field-title  {
	display: inline-block;
	width: 50%
}

.view-ccnm-groups .views-field-field-event-details-1 {
	width: calc(50% - 0.5rem);
	float: left;
}

.view-ccnm-groups .views-field-field-ccnm-group-poster {
	width: calc(50% - 0.5rem);
	float: right;
	margin-right: 0.5rem;
}

}

/* Formatting for small mobile screens, where the RL paragraph margins are smaller (1rem not 1.5rem) */
@media all and (max-width: 419px) {
	
	.view-ccnm-groups .views-field-field-group-event-date,
	.view-ccnm-groups .views-field-title  {
		letter-spacing: -0.25px;
	}
	
	.view-ccnm-groups .views-field-title  {
		 white-space: nowrap;
		 margin-left: 0.5rem;
	}
}