/*
 * Titles on the front-page cover slider.
 *
 * An ADDITION, on the owner's request — live does not show them. The theme was
 * built to: the markup already carries `.gridlove-cover-content` with a centred
 * 500px `.entry-header`, and `.gridlove-hidden-overlay` already sits at opacity
 * 1 over every slide in black at 60%, which is the scrim the text needs. The
 * site's own CSS then turns the headline off with a flat
 * `.entry-title.h1 { display: none }`. Undoing that one rule is the whole
 * change; nothing here invents a layout.
 *
 * Size scales with the viewport rather than stepping at breakpoints, so the
 * headline stays in proportion on a phone and on a wide desktop without a
 * separate rule per device. The floor and ceiling are set so the longest title
 * on the site still fits two lines at 390px.
 */
.gridlove-cover-content .entry-title.h1 {
  display: block;
  margin: 0;
  font-family: Prata, Georgia, serif;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  /* Legible over a photograph even where the scrim is thin. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  font-size: clamp(20px, 2.9vw, 42px);
}

.gridlove-cover-content .entry-title.h1 a {
  color: inherit;
}

.gridlove-cover-content .entry-title.h1 a:hover {
  color: #fff;
  opacity: 0.85;
}

/*
 * The theme pins the header to 500px, which overflows a phone. Keeping the
 * fixed width as the CAP preserves the desktop line breaks exactly.
 */
@media (max-width: 560px) {
  .gridlove-cover-content.gridlove-cover-reset .entry-header {
    width: auto;
    max-width: 500px;
    padding: 0 24px;
  }
}