/* R8 preview: desktop without header, inline login top-right, balanced card copy.
   Mobile stays on the R6 portrait-card interface. */
.desktop-login { display:none; }
.footer-brand { display:none; }
.card-role-placeholder { display:none; }
@media (min-width:701px) {
  .brand-navigation { display:none!important; }
  .tabs-container {
    grid-template-rows:minmax(0,1fr) clamp(67px,10vh,84px)!important;
    gap:clamp(7px,1.4vh,14px);
    padding:clamp(10px,1.5vh,16px) clamp(18px,2.7vw,44px);
  }
  .desktop-login {
    display:flex; position:absolute; z-index:4; top:clamp(11px,2.1vh,21px); right:clamp(19px,3vw,48px);
    align-items:center; gap:clamp(5px,.62vw,9px); padding:7px 10px; border-radius:10px; width:auto;
    background:rgba(255,255,255,.68); border:1px solid rgba(93,125,155,.20);
    box-shadow:0 3px 16px rgba(32,57,79,.07);
  }
  .desktop-login label { flex:0 0 auto; font:600 clamp(10px,.76vw,12px) Montserrat,Arial,sans-serif; color:#29445d; }
  .desktop-login input { flex:0 0 auto; min-width:0; width:clamp(104px,10.2vw,156px); height:32px; border:1px solid #c4d2df;
    border-radius:6px; background:rgba(255,255,255,.92); color:#153149;
    padding:0 9px; font:500 clamp(10px,.8vw,12px) Montserrat,Arial,sans-serif; }
  .desktop-login button { width:auto; flex:0 0 auto; height:32px; padding:0 12px; border:1px solid #d8c39e;
    border-radius:6px; background:#e8dcc7; color:#857359; cursor:not-allowed;
    font:600 clamp(10px,.8vw,12px) Montserrat,Arial,sans-serif; }
  #about.tab-content.active {
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:clamp(10px,2vh,22px);
  }
  #about .about-introduction { max-width:none; width:100%; padding:clamp(52px,8vh,77px) 16px 0;
    justify-content:center; background:transparent; }
  #about .about-introduction h1 { font-size:clamp(1.55rem,min(3vw,4.2vh),2.65rem); }
  #about #article-about { max-width:min(100%,990px); }
  #about .cards-container { flex:none; justify-content:center; gap:clamp(16px,2vw,32px);
    padding:0 clamp(6px,2vw,30px) clamp(6px,1.1vh,12px); }
  #about .flip-card { width:min(28.2vw,362px,calc((100dvh - 220px)*.44*1.586))!important;
    max-width:calc((100% - 18px)/2); }
  #about .flip-card-front { display:grid!important; grid-template-columns:31% minmax(0,1fr);
    align-items:center; gap:clamp(9px,1vw,16px); padding:clamp(10px,1.05vw,16px); }
  #about .flip-card-front img { width:100%; max-width:100%; height:100%; max-height:100%;
    min-width:0; min-height:0; object-fit:contain; }
  #about .front-copy { width:100%; height:100%; min-width:0; display:grid;
    grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);
    align-content:center; align-items:center; text-align:left; gap:clamp(2px,.5vh,6px); }
  #about .front-copy h4 { width:100%; text-align:center; line-height:1.17;
    font-size:clamp(.8rem,min(1.28vw,2.25vh),1.16rem); margin:0; }
  #about .card-role { text-align:center; margin:0; }
  #about .card-role-placeholder { display:block; visibility:hidden; }
  #about .card-summary { margin:0;
    font-size:clamp(.66rem,min(.89vw,1.65vh),.9rem); line-height:1.38; }
  #about .card-action { justify-self:center; align-self:center; margin:0; width:max-content; max-width:100%; }
  #about .flip-card-back h4 { width:100%; text-align:center; }
  .about-footer { position:relative; display:flex; flex-direction:column; justify-content:center;
    gap:clamp(3px,.5vh,6px); background:rgba(248,251,254,.56); }
  .about-footer .footer-brand { display:block; position:absolute; left:clamp(5px,1vw,13px); top:50%;
    transform:translateY(-50%); width:clamp(64px,7.1vw,105px); height:80%; object-fit:contain; }
  .about-footer .copyright { font-size:clamp(9px,min(.9vw,1.55vh),12px); }
}
@media (min-width:701px) and (max-height:650px) {
  .tabs-container { grid-template-rows:minmax(0,1fr) 59px!important; }
  #about .about-introduction { padding-top:clamp(45px,9vh,55px); }
  #about .flip-card { width:min(28vw,345px,calc((100dvh - 190px)*.46*1.586))!important; }
  .desktop-login { top:8px; padding:5px 8px; }
  .desktop-login input,.desktop-login button {height:27px;}
}