/**
 * This defines the style settings for the content on the Front Page of the website
 *
 * It comprises the following:
 * 1. The "Welcome!" block
 * 2. A teaser view of content promoted to the front page.
 *
 * Promoted content includes the current sermon series, and info on services for the coming Sunday as well as SSGU, film clubs and
 * Children's groups
 */

/* Front Page view (teaser content) */
.view-frontpage .node--type-page .node__content  {
	margin-bottom: 0.25rem;			/* To make space between the FIND OUT MORE button and the article bottom border */ 
}

.view-frontpage .node--type-ccnm-sermon-series .node__content  {
	margin-bottom: 1.25rem;			/* To make space between the FIND OUT MORE button and the article bottom border */ 
}

.view-frontpage .node__content h2  {
	display: block;
}

/* The heading for the Welcome! block at the top is coloured red */
.view-frontpage .node--type-page .node__content h2  {
	color: var(--colour-venetian-red);
	margin-top: 2rem;
	padding: 0 1em;
}

.view-frontpage .node--type-article .field--name-field-teaser-summary p,
.view-frontpage .node--type-ccnm-sermon-series .field--name-field-teaser-summary p  {
	margin: 0.5rem;
}

.view-frontpage .node--type-ccnm-sermon-series .field--name-field-teaser-image  {
	margin-bottom: 1rem;				/* Needed if the teaser summary is shorter than the image height */
}

/* Override the border applied to separate the articles displayed on the front page as article is also used to contain the image */
.view-frontpage .media--type-image  {
	margin: 0.75rem 0.5rem 0.5rem 0.5rem;
	border: none;
}

/**
/* Teaser formatting for front page 
 * This applies to three types of content which are displayed: (below the "Welcome" section which :
 * .node--type-ccnm-sermon-series.node--view-mode-teaser
 * .node--type-story.node--view-mode-teaser
 * .node--type-article.node--view-mode-teaser
 * (The "Welcome!" section is .node--type-page)
 * 
 * This content has a h2 heading followed by (in some cases) a h3 subheading that should be closer to it 
 */
.node--type-article.node--view-mode-teaser h2,
.node--type-ccnm-sermon-series.node--view-mode-teaser h2 {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

/* The "Story" type is used for Film Clubs and What's On For Kids - will have h2 only */
.node--type-story.node--view-mode-teaser h2 {
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
}

.node--view-mode-teaser h3  {
	margin-top: 0!important;					/* These will follow the h2 heading so should be closer */
	margin-bottom: 0.5rem!important;			/* Reduced as teaser content adds in a margin of 0.5rem */
}

/* Ensure display of "FIND OUT MORE" links (as an exception to the general rules) */
.view-frontpage .field--name-field-sermon-series-link,
.view-frontpage .node__links  {
	display: block;
	clear: both;
}
.view-frontpage .field--name-field-sermon-series-link  {
	margin: 0.75rem 0.5rem;
}
.view-frontpage li  {
	margin-bottom: 0;					/* Override default of 0.25rem as impacts space between this and article border */
}

/* Except for the WELCOME! section - also do not display comment button */
.view-frontpage .node--type-page .node__links,
.view-frontpage .comment-add  {
	display: none;
}

/* For the 'FIND OUT MORE' links */
.view-frontpage ul.inline li  {
	display: block;						/* Needed to override default display:inline directive */
	text-align: right;
}

.view-frontpage ul.inline li a  {
	font-size: 0;						/* Drupal hard codes these links as 'Read more' so make this text invisible */
}

.view-frontpage ul.inline li a  {
	color: white;
	background-color: #606060;
	padding: 1.5rem 1rem 0.75rem 1rem;  /* Padding adjusted to allow for the font size being 0 */
}

.view-frontpage ul.inline li a:after  {
	font-size: initial;
	content: 'FIND OUT MORE';			/* Use this text for the links instead of the Drupal default */
	letter-spacing: 0.5px;
}

.view-frontpage ul.inline li a:hover,
.view-frontpage ul.inline li a:focus {
	text-decoration: none;
}

/* The following is used primarily for ad-hoc (as opposed to generated) "Find Out More" links */
.field--name-field-sermon-series-link a,
a.findoutmore  {
	color: white;
	background-color: #606060;
	padding: 0.5rem 1rem;  
}

.field--name-field-sermon-series-link a:hover,
.field--name-field-sermon-series-link a:focus,
a.findoutmore:hover,
a.findoutmore:focus {
	text-decoration: none;
}

.feed-icons, ul.inline li.comment-forbidden {
  display: none;
}

#block-event-calendar-slideshow .view {
	padding: 0.5rem;
}

#block-event-calendar-slideshow .view-header {
  font-size: var(--font-size-h2);  				/* ~24px */
  font-weight: bold;
  margin: var(--space-l) 0 0;					/*	1.5rem = 24px */
}

#block-event-calendar-slideshow .views_slideshow_slide {
   width: 100%;
}

#block-event-calendar-slideshow .views-field  {
  line-height: 3rem;							/* 48px - create space following image */
  font-size: var(--font-size-base);				/* 1rem = 16px */
}

#block-event-calendar-slideshow .view-footer  {
  padding: 0;
}

#block-event-calendar-slideshow .view-footer p  {
  margin: var(--space-m) 0;
}

/* For smaller screens (smartphone and tablets in portrait mode) */
@media all and (max-width: 959px) { 

#block-event-calendar-slideshow .view {
	padding: 0.5rem;
}
}
/* End of smaller-screen formatting */

/* For larger displays (desktop and tablets in landscape) we want a 2x2 block display */
@media all and (min-width: 960px) { 

/* Formatting of the articles that feature on the front page - specifically to separate them by border */
.view-frontpage article.node--promoted  {
  margin-bottom: 0.5rem;					/* Margin to give a little white space between this and the Front Page News block below it */
  border-bottom: 2px solid #585858;			/* This is to separate the teaser sections on the front page with a dark grey border */
}

/* Teaser summary and image formatted for those content types that use the heading, summary and image as separate entities */
.view-frontpage .node--type-article .field--name-field-teaser-summary,
.view-frontpage .node--type-ccnm-sermon-series .field--name-field-teaser-summary  {
	width: 50%;
	float: left;
}

.view-frontpage .node--type-article .field--name-field-teaser-image,
.view-frontpage .node--type-ccnm-sermon-series .field--name-field-teaser-image  {
	width: 50%;
	float: right;
}

}
/* End of large-screen formatting */
@media all and (max-width: 799px) { 

/* All headings and sub-headings should be centred on smaller screens */
#block-event-calendar-slideshow .view-header,
.node--view-mode-teaser h3  {
	text-align: center!important;
}

#block-event-calendar-slideshow .views-row {
	text-align: center;
}

#block-event-calendar-slideshow .views-field-field-group-event-date  {
/*	margin-left: 1rem!important; */
}

}

@media all and (min-width: 640px) { 

#block-event-calendar-slideshow .views_slideshow_slide {
   min-height: 351px;			/* To reserve the space for the image to load in */
}

}

@media all and (max-width: 384px) { 

#block-event-calendar-slideshow .views_slideshow_slide {
   min-height: 216px;			/* To reserve the space for the image to load in */
}

}

@media all and (min-width: 385px) and (max-width: 420px) { 

#block-event-calendar-slideshow .views_slideshow_slide {
   min-height: 236px;			/* To reserve the space for the image to load in */
}

}

@media all and (min-width: 421px) and (max-width: 480px) { 

#block-event-calendar-slideshow .views_slideshow_slide {
   min-height: 270px;			/* To reserve the space for the image to load in */
}

}

@media all and (min-width: 481px) and (max-width: 540px) { 

#block-event-calendar-slideshow .views_slideshow_slide {
   min-height: 304px;			/* To reserve the space for the image to load in */
}

}

@media all and (min-width: 541px) and (max-width: 639px) { 

#block-event-calendar-slideshow .views_slideshow_slide {
   min-height: 324px;			/* To reserve the space for the image to load in */
}

}