@charset "UTF-8";

/* Portfolio grid setup */
.brc-Chapters {
    display: block; 
    padding: 20px;
}

.brc-Chapters_List {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: none; /* Removes numbering logic */
}

/* Responsive Columns & Margins */
.brc-Chapter {
    position: relative;
    flex: 0 0 100%;    /* 1 Column on Phones */
    padding: 5px;      /* Consistent small gap */
    box-sizing: border-box; 
    margin-bottom: 0;
}

@media (min-width: 600px) {
    .brc-Chapter {
        flex: 0 0 50%; /* 2 Columns on Tablets */
    }
}

@media (min-width: 1000px) {
    .brc-Chapter {
        flex: 0 0 33.333%; /* 3 Columns on Desktop */
    }
}

.brc-Chapters_Headline {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.brc-Chapters_Headline:before {
    content: "";
    width: 0;
    height: 0;
    margin-right: calc(1.2em / 3);
    border-style: solid;
    border-width: 0 .5em 1em .5em;
    border-color: transparent transparent var(--r8, #000) transparent; /* Uses your variable or black as fallback */
    display: inline-block;
}

/* HOVER REVEAL */
.brc-Chapter_Content {
    margin: 0;
    line-height: 0; /* Eliminates ghost space under images */
}

.brc-Chapter_Content img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.4s ease-in-out;
}


.brc-Chapter:hover img {
    opacity: 0.20;
    /* Add 1px box inside the image edge */
    outline: 1px solid #000; 
    outline-offset: -1px; 
}

/* CENTERED TITLE OVERLAY */
.brc-Chapter_Title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    margin: 0;
    text-align: center;
    opacity: 0; /* Hidden until hover */
    transition: opacity 0.4s ease-in-out;
    pointer-events: none; /* Allows clicking through text to the link */
    z-index: 5;
}

.brc-Chapter:hover .brc-Chapter_Title {
    opacity: 1;
}


/* Main Title Style (Bold/Uppercase) */
.brc-Chapter_Title a {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: #000;
    line-height: 1.4;
    display: block; /* Ensure portfolio drops to next line */
}

/* "Portfolio →" Subtitle Style (Title Case/Normal weight) */
.brc-Chapter_Title a::after {
    content: "Portfolio \2192"; /* \2192 unicode for → */
    display: block;
    text-transform: capitalize;
    font-weight: 400; 
	font-style: italic;
    font-size: 1.0rem;   
    margin-top: 5px;   /* Gap between title/portfolio  */
}

/* Cleanup */
.brc-Chapter:before {
    display: none !important;
}
/* Remove margin between paragraphs if multiple exist */
.brc-Chapter_Content + .brc-Chapter_Content {
    margin-top: 0;
}