/* module - common --------------------------------------------------------*/

/* @group @variables */

[class*="m-chapter-header"] {
--chapter-header-grid-template-rows: 2.25rem auto .5rem auto 1.5rem;
--chapter-header-en-grid-column: 1;
--chapter-header-en-grid-row: 2;
--chapter-header-jp-grid-column: 1;
--chapter-header-jp-grid-row: 4;
--chapter-header-icon-grid-column: 1;
--chapter-header-icon-grid-row: 1 / span 5;
}

/* @end @variables */

/* @group @m-chapter-header */

[class*="m-chapter-header"] {
position: relative;
z-index: 2;
display: grid;
grid-template-rows: var(--chapter-header-grid-template-rows);
}

[class*="m-chapter-header"] p {
grid-column: var(--chapter-header-en-grid-column);
grid-row: var(--chapter-header-en-grid-row);
}

[class*="m-chapter-header"] h3 {
grid-column: var(--chapter-header-jp-grid-column);
grid-row: var(--chapter-header-jp-grid-row);
}

[class*="a-chapter-header-icon"] {
grid-column: var(--chapter-header-icon-grid-column);
grid-row: var(--chapter-header-icon-grid-row);
}

[class*="m-chapter-header"] :where(h3, p) {
margin-bottom: 0;
text-align: center;
}

[class*="a-chapter-header-icon"] {
position: relative;
z-index: -1;
display: grid;
justify-content: center;
align-items: center;
}

[class*="a-chapter-header-icon"] svg {
width: auto;
height: 100%;
fill: hsl(0deg 0% 100% / 30%);
}

[class*="m-chapter-header"] p {
font-family: var(--font-family-heading-primary);
font-size: clamp(2.626rem, 1.661rem + 4.82vw, 6rem); /* 60〜72 / 320〜1440 */
line-height: .8;
font-weight: 900;
font-variation-settings-strong: "wght" 900;
color: hsl(0deg 0% 100%);
/* @todo https://unused-css.com/blog/css-text-strokeoutline/ */
text-shadow: 1.41px 1.41px hsl(0deg 0% 20%), 2px 0 hsl(0deg 0% 20%), 1.41px -1.41px hsl(0deg 0% 20%), 0 -2px hsl(0deg 0% 20%), -1.41px -1.41px hsl(0deg 0% 20%), -2px 0 hsl(0deg 0% 20%), -1.41px 1.41px hsl(0deg 0% 20%), 0 2px hsl(0deg 0% 20%);
}

[class*="m-chapter-header"] h3 {
font-size: clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem); /* 24〜36 / 320〜1440 */
line-height: 1.5;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

/* @end @m-chapter-header */