/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO BLOCK
=================================================== */
/* Notes...

    - Similar to a Hero Image but the floated section can contain anything e.g. Clients
    - Seen on the homepage

*/

/* HTML Example...

*/

/* Modifiers...

    .c-hero-block--compressed
    .c-hero-block--wide <-- contains wide intro text e.g. projects/etihad
    .c-hero-block--long <-- contains longform text e.g. projects/etihad

*/
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO BLOCK / LAYOUT
=================================================== */
.c-hero-block {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-content: center;
    text-align: center;
}

.c-hero-block > * {
    flex-basis: 100%;
}

.c-hero-block__text {
    max-width: 23rem;
}

.c-hero-block .c-hero-block__text {
    /* e.g. 'Clients' paragraph on homepage of my portfolio */
    max-width: var(--max-width-reading);
}

.c-hero-block--wide .c-hero-block__text {
    /* --max-width-reading-longform: var(--max-width-reading);
    --max-width-hero-text: 49rem;
    --max-width-title: 53rem; */
    max-width: var(--max-width-reading-longform);
}

.c-hero-block--long p:not(.c-hero-block__strapline) {
    text-align: left;
}

body .c-hero-block--long {
    max-width: var(--max-width-1);
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    -webkit-margin-end: auto;
    margin-inline-end: auto;
    text-align: left;
}

.c-hero-block--long .c-hero-block__text {
    max-width: var(--max-width-title);
}

.c-hero-block--long > * {
    -webkit-margin-end: auto;
    margin-inline-end: auto;
}

/* Custom */
@media (min-width: 1024px) {
    .c-hero-block--long .c-hero-block__text {
        -webkit-padding-end: var(--spacing-l-1);
        padding-inline-end: var(--spacing-l-1);
    }
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO BLOCK / RHYTHM / (CROSS POLLINATED)
=================================================== */
.c-hero-block {
    padding-left: var(--spacing-l-3-horizontal);
    padding-right: var(--spacing-l-3-horizontal);
}

.c-hero-block__title {
    padding-top: 0;
}

.c-hero-title--with-strapline {
    /* Decrease */
    /* e.g. >> /projects/optima */
    padding-bottom: var(--spacing-m);
}

body .c-hero-block__strapline {
    padding-bottom: var(--spacing-l-1);
}

.c-hero-block + .c-hero-block {
    /* e.g. client logos AJAX'd in */
    padding-top: var(--spacing-m-2);
}

.c-hero-block + .c-hero-image {
    /* e.g. >> /projects */
    /* Margin in case there is a solid background on the image. We don't want to show the gradient behind it */
    margin-top: var(--spacing-l);
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO BLOCK / DECORATION / (CROSS POLLINATED)
=================================================== */
/* Notes...

    - Cross pollinated with core.css e.g. .c-hero-block__strapline

*/

.c-hero-block__text p {
    font-size: var(--font-size-s);
}

.c-hero-block__title {
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
}

.c-hero-block img {
    -webkit-filter: var(--image-boost);
    filter: var(--image-boost);
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO BLOCK / (MODIFIERS)
=================================================== */
.c-hero-block--compressed .c-hero-block__text {
    /* e.g. >> /projects */
    padding-bottom: var(--spacing-l-1);
    padding-top: 0;
}

/* -- */

/* Text indent instead */
/* .c-hero-block--long p + p:not(:first-child) {
    text-indent: 1.7em;
}

body .c-hero-block--long .c-hero-block__strapline + p {
    text-indent: initial;
}

.c-hero-block--long p:not(.c-hero-block__strapline):not(:last-child) {
    padding-block-end: 0;
} */