@import url('../variables.css');

:root {
    --about-accent: #F1C40F;
    --about-primary: var(--text-color-highlighted);
    --about-text: #000;
    --about-muted: rgba(0,0,0,.55);
    --about-sidebar-w: 250px; /* desktop sidebar width */
}

/* module wrapper */
.about-me--module { background:#fff; }

/* layout */
.about__grid{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
        "sidebar"
        "quote"
        "bio";
    gap:24px;
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
}
@media (min-width:992px){
    .about__grid{
        grid-template-columns:var(--about-sidebar-w) minmax(0,1fr);
        grid-template-areas:
            "sidebar quote"
            "bio     bio";
        column-gap:0;
        row-gap:0;
    }
}

/* sidebar */
.about__sidebar{
    grid-area:sidebar;
    position:relative;
    padding-top:8px;
    width:var(--about-sidebar-w);
    max-width:var(--about-sidebar-w);
    justify-self:start;
}
.about__sidebar::before,
.about__sidebar::after{
    position:absolute;
    content:"";
    background-color:var(--about-accent);
}
.about__sidebar::before{ left:0; top:0; width:100px; height:1px; }
.about__sidebar::after { left:0; top:0; width:1px;   height:100px; }
@media (max-width:991px){
    .about__sidebar{ width:100%; max-width:100%; }
    .about__sidebar::before{ width:50px; }
    .about__sidebar::after { height:50px; }
}

/* sidebar content */
.about__avatar{ width:110px; height:110px; margin:30px auto 14px; border-radius:50%; overflow:hidden; }
.about__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.about__meta{ text-align:center; }
.about__name{ font-size:18px; color:var(--about-primary); margin:0 0 4px; }
.about__role{ font-size:11px; color:var(--about-muted); margin:0 0 14px; }

.about__contact{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.about__contact-link{
    position:relative; padding-left:22px; font-size:12px;
    color:var(--about-text); text-decoration:none;
}
.about__contact-link::after{
    content:""; position:absolute; left:22px; bottom:-2px; height:1px; width:0;
    background:var(--about-primary); transition:width .15s ease-in-out;
}
.about__contact-link:hover{ color:var(--about-primary); }
.about__contact-link:hover::after{ width:calc(100% - 22px); }
.about__contact-link::before{
    content:""; position:absolute; left:0; top:2px; width:16px; height:16px;
    background-size:contain; background-repeat:no-repeat;
}
.about__contact-link--phone::before{ background-image:url('../../media/icons/svg/phone.svg'); }
.about__contact-link--mail::before { background-image:url('../../media/icons/svg/email.svg'); }

/* QUOTE — ikona przez maskę + narożnik dolny-prawy jako warstwy tła */
.about__quote{
    grid-area: quote;
    position: relative;
    margin: 0;
    padding: 35px 20px 28px 40px;
    font-size: 15px;
    line-height: 1.7;
    color: #222;

    /* narożnik dolny-prawy: 2 linie jako tła, nie kolidują z pseudo-elementami */
    background:
            linear-gradient(var(--about-accent), var(--about-accent)) bottom right / 100px 1px no-repeat,
            linear-gradient(var(--about-accent), var(--about-accent)) bottom right / 1px 100px no-repeat;
}

/* ikona cytatu z przezroczystością */
.about__quote::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    -webkit-mask: url('../../media/icons/svg/quote.svg') no-repeat center / contain;
    mask: url('../../media/icons/svg/quote.svg') no-repeat center / contain;
    background-color: var(--about-primary);
    opacity: .1;
    pointer-events: none;
}
/* bottom-right corner */
.about__quote::after{
    content:"";
    position:absolute;
    right:0; bottom:0;
    width:100px; height:1px;
    background-color:var(--about-accent);
}
.about__quote-corner{
    content:"";
    position:absolute;
    right:0; bottom:0;
    width:1px; height:100px;
    background-color:var(--about-accent);
}

/* optional bio */
.about__bio{
    grid-area:bio;
    position:relative;
    padding:40px 0 16px;
}
.about__bio::before,
.about__bio::after{
    position:absolute; content:""; background-color:var(--about-accent); left:0; bottom:0;
}
.about__bio::before{ width:100px; height:1px; }
.about__bio::after { width:1px;   height:100px; }
@media (max-width:991px){
    .about__bio::before{ width:50px; }
    .about__bio::after { height:50px; }
}
.about__more{ display:none; }
.about__bio[data-expanded="true"] .about__more{ display:block; }
.about__toggle{
    margin-top:12px; background:none; border:0; color:var(--about-primary);
    padding:0 28px 0 0; position:relative; cursor:pointer; font:inherit;
}
.about__toggle::after{
    content:""; position:absolute; right:0; top:0; bottom:0; margin:auto;
    background:var(--about-accent); width:21px; height:1px;
}
.about__toggle::before{
    content:""; position:absolute; right:10px; top:0; bottom:0; margin:auto;
    background:var(--about-accent); width:1px; height:0;
}
.about__bio[data-expanded="true"] .about__toggle::before{ height:21px; }