/*
 * page-title.css — the `page-title` element type (the hero).
 *
 * MOVED VERBATIM out of the <style> block that sat inside
 * X:\v72.future-magic\themes\fuma19\partial.page-title.phtml, under plan 04
 * decision 6. Not one rule was changed while moving it: changing and moving in
 * one step means a visual difference with two possible causes.
 *
 * Linked by the glob in themes/default/sections/section.styles.phtml, which
 * runs AFTER css/custom.min.css so a type can override the theme. Nothing
 * links it from the partial.
 *
 * THE TWO #AB0035 LITERALS STAY. css/styles-5.css has no custom property to
 * read the accent from, and inventing one here would be a retune rather than a
 * migration — a separate decision, for whoever takes it.
 */

/* slim */
.page-title-section-type1 {
    position: relative;
    padding-top: 20%;
}

/* tall, from center */
.page-title-section2a {
    /* padding: 250px 0 150px; */
    /* text-align: center; */
    min-height: 60vh;
    padding: 0 0 0 0;
}

/* proportional */
.page-title-section-type3 {
    position: relative;
    /* padding-top: */ /* see inline */
}

h1.positioned {
    position: absolute;
    bottom: 0.5rem;
    font-size: 30px;
    max-width: 75%;
    opacity: 0.85;
}

h1.xpos-right {
    text-align: right;
    right: 0;
    margin-right: 1rem;
}

h1.xpos-left {
    text-align: left;
    left: 0;
    margin-left: 1rem;

}

h1.xposbelow-right {
    margin-top: 0;
    font-size: 1.3rem;
    text-align: right;
    right: 0;
}

h1.xposbelow-left {
    margin-top: 0;
    font-size: 1.3rem;
    text-align: left;
    left: 0;
}

.padded-multiline {
  padding: 0 0;
  /*width: 400px;*/
  margin: 20px auto;
}

.padded-multiline span {
  background-color: #AB0035;
  color: #fff;
  font-weight: bold;
  display: inline;
  padding: 0.45rem;

  /* Needs prefixing */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ob-title-inside span {
  line-height: 1.4;
}

.ob-title-below span {
  line-height: 1.5;
}

@media (min-width: 800px) {
  .ob-title-inside {
    display:block;
  }

  .ob-title-below {
    display:none;
  }
}

@media (max-width: 800px) {
  .ob-title-inside {
    display:none;
  }

  .ob-title-below {
    display:block;
    border-top: 4px solid #AB0035;
  }
}