/* HUELLAS v1.1.1 — Mobile Notices Spacing & Card Integrity
   Scoped to notifications.php so it cannot disturb other HUELLAS screens. */

.notifications-page .notifications-shell{
  width:min(880px,calc(100% - 2rem));
  max-width:880px;
  padding:1.75rem 0 8rem;
  overflow-x:clip;
}

.notifications-page .notifications-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1.25rem;
  padding:1.75rem 1.9rem;
  margin:0 0 1rem;
  overflow:hidden;
}
.notifications-page .notifications-hero>div{min-width:0}
.notifications-page .notifications-hero .eyebrow{margin:0 0 .6rem}
.notifications-page .notifications-hero h1{
  margin:0 0 .8rem;
  font-family:Georgia,serif;
  font-size:clamp(2.25rem,5vw,3.8rem);
  line-height:1.04;
  color:#fff;
}
.notifications-page .notifications-hero p:last-child{
  margin:0;
  max-width:650px;
  color:#c4d2e3;
  line-height:1.58;
}
.notifications-page .notifications-hero>span{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border-radius:22px;
  border:1px solid rgba(244,214,122,.18);
  background:rgba(229,181,74,.08);
  font-size:1.7rem;
}

.notifications-page .notification-list{
  display:grid;
  gap:.85rem;
  margin:0 0 1rem;
}
.notifications-page .notification-card{
  width:100%;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 30px;
  align-items:center;
  gap:1rem;
  padding:1.15rem 1.25rem;
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.notifications-page .notification-card:hover{
  transform:translateY(-1px);
  border-color:rgba(244,214,122,.34);
}
.notifications-page .notification-card>div{
  min-width:0;
  padding-right:.25rem;
}
.notifications-page .notification-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(244,214,122,.16);
  background:linear-gradient(145deg,rgba(34,85,142,.42),rgba(9,34,68,.78));
  font-size:1.35rem;
}
.notifications-page .notification-card strong{
  display:block;
  color:#f6d66e;
  font-size:1rem;
  line-height:1.28;
  overflow-wrap:break-word;
}
.notifications-page .notification-card p{
  margin:.42rem 0 0;
  color:#c2d0e1;
  font-size:.92rem;
  line-height:1.55;
  overflow-wrap:break-word;
  word-break:normal;
}
.notifications-page .notification-card>b{
  align-self:center;
  justify-self:end;
  color:#f4d67a;
  font-size:1.25rem;
  line-height:1;
}

.notifications-page .notification-settings{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1.25rem;
  padding:1.4rem 1.5rem;
  margin:1rem 0 0;
}
.notifications-page .notification-settings>div{min-width:0}
.notifications-page .notification-settings .eyebrow{margin:0 0 .55rem}
.notifications-page .notification-settings h2{
  margin:.05rem 0 .55rem;
  color:#fff;
  font-family:Georgia,serif;
  font-size:1.8rem;
}
.notifications-page .notification-settings p:last-child{
  margin:0;
  color:#c2d0e1;
  line-height:1.58;
}
.notifications-page .notification-settings .btn{
  min-width:150px;
  flex:0 0 auto;
}

.notifications-page .source-note{
  margin:1rem 0 0;
  padding:1rem 1.2rem;
}

@media(max-width:760px){
  .notifications-page .notifications-shell{
    width:min(100% - 1.25rem,760px);
    padding:1.25rem 0 calc(7.8rem + env(safe-area-inset-bottom));
  }

  .notifications-page .notifications-hero{
    display:block;
    padding:1.35rem 1.25rem 1.45rem;
    margin-bottom:1rem;
    border-radius:22px;
  }
  .notifications-page .notifications-hero>span{display:none}
  .notifications-page .notifications-hero .eyebrow{
    margin-bottom:.7rem;
    font-size:.72rem;
    line-height:1.25;
  }
  .notifications-page .notifications-hero h1{
    margin-bottom:.85rem;
    font-size:clamp(2.2rem,11vw,3rem);
    line-height:1.06;
  }
  .notifications-page .notifications-hero p:last-child{
    font-size:1rem;
    line-height:1.55;
  }

  .notifications-page .notification-list{
    gap:.85rem;
    margin-bottom:1rem;
  }
  .notifications-page .notification-card{
    grid-template-columns:46px minmax(0,1fr) 26px;
    gap:.78rem;
    padding:1rem 1rem;
    border-radius:20px;
    align-items:start;
  }
  .notifications-page .notification-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:1.2rem;
  }
  .notifications-page .notification-card>div{
    padding-right:.1rem;
  }
  .notifications-page .notification-card strong{
    font-size:1rem;
    line-height:1.28;
  }
  .notifications-page .notification-card p{
    margin-top:.4rem;
    font-size:.94rem;
    line-height:1.52;
  }
  .notifications-page .notification-card>b{
    margin-top:.55rem;
    font-size:1.15rem;
  }

  .notifications-page .notification-settings{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:1rem;
    padding:1.25rem 1.1rem 1.15rem;
    border-radius:20px;
  }
  .notifications-page .notification-settings .eyebrow{
    margin-bottom:.65rem;
    font-size:.72rem;
    line-height:1.25;
  }
  .notifications-page .notification-settings h2{
    margin-bottom:.65rem;
    font-size:1.65rem;
  }
  .notifications-page .notification-settings p:last-child{
    font-size:.96rem;
    line-height:1.55;
  }
  .notifications-page .notification-settings .btn{
    width:100%;
    min-width:0;
    min-height:52px;
  }

  .notifications-page .source-note{
    padding:1rem 1.05rem;
    margin-top:1rem;
    border-radius:16px;
    line-height:1.55;
  }
}

@media(max-width:420px){
  .notifications-page .notifications-shell{
    width:calc(100% - 1rem);
  }
  .notifications-page .notifications-hero{
    padding:1.2rem 1.05rem 1.3rem;
  }
  .notifications-page .notification-card{
    grid-template-columns:42px minmax(0,1fr) 22px;
    gap:.65rem;
    padding:.95rem .9rem;
  }
  .notifications-page .notification-icon{
    width:40px;
    height:40px;
  }
  .notifications-page .notification-settings{
    padding:1.15rem 1rem;
  }
}