/*
 RUYA GUIDANCE TEACHER HOME V1
 Yalnız REHBERLİK branch öğretmeni ana ekranı.
 Header ve bottom navigation'a dokunmaz.
*/

.ruyaGuidanceHome{
  --rg-gap:clamp(6px,1.05dvh,9px);

  width:min(100%,760px)!important;

  height:
    calc(
      100dvh -
      76px -
      env(safe-area-inset-top)
    )!important;

  min-height:0!important;

  margin:0 auto!important;

  padding:
    0
    clamp(10px,3vw,15px)
    calc(
      80px +
      env(safe-area-inset-bottom)
    )!important;

  display:grid!important;

  grid-template-rows:
    clamp(105px,17dvh,145px)
    minmax(0,1fr)!important;

  gap:var(--rg-gap)!important;

  overflow:hidden!important;

  background:#fff!important;

  box-sizing:border-box!important;
}


/* HERO */

.ruyaGuidanceHero{
  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    clamp(72px,22vw,108px);

  align-items:center;

  gap:8px;

  overflow:hidden;
}


.ruyaGuidanceHeroCopy{
  min-width:0;

  padding-left:
    clamp(7px,2.5vw,12px);
}


.ruyaGuidanceHeroCopy h1{
  margin:
    0
    0
    clamp(4px,.7dvh,8px);

  color:#000;

  font-size:
    clamp(14px,3.8vw,19px);

  line-height:1.08;

  font-weight:800;

  letter-spacing:-.025em;

  white-space:nowrap;
}


.ruyaGuidanceHeroCopy img{
  display:block;

  width:min(100%,245px);

  max-height:56px;

  object-fit:contain;

  object-position:left center;
}


.ruyaGuidanceHeroSmile{
  display:block;

  width:80%;

  max-width:106px;

  max-height:100%;

  justify-self:end;

  margin-right:
    clamp(6px,2.5vw,12px);

  object-fit:contain;
}


/* CONTENT */

.ruyaGuidanceContent{
  min-height:0;

  display:grid;

  grid-template-rows:
    minmax(70px,1fr)
    minmax(70px,1fr)
    minmax(0,1.48fr);

  gap:var(--rg-gap);

  overflow:hidden;
}


/* LARGE CARDS */

.ruyaGuidanceWide{
  appearance:none;

  position:relative;

  min-width:0;
  min-height:0;

  width:100%;

  margin:0;

  display:grid;

  grid-template-columns:
    clamp(62px,21%,94px)
    minmax(0,1fr)
    20px;

  align-items:center;

  gap:8px;

  padding:
    6px
    12px
    6px
    7px;

  border-radius:18px;

  overflow:hidden;

  text-align:left;

  font:inherit;

  box-shadow:
    0 4px 13px
    rgba(23,48,122,.055);

  -webkit-tap-highlight-color:
    transparent;
}


.ruyaGuidanceWide.blue{
  border:
    1.2px solid
    rgba(70,160,240,.27);

  background:
    linear-gradient(
      110deg,
      #f3fbff,
      #e8f6ff
    );
}


.ruyaGuidanceWide.purple{
  border:
    1.2px solid
    rgba(115,91,234,.17);

  background:
    linear-gradient(
      110deg,
      #f8f7ff,
      #efedff
    );
}


.ruyaGuidanceWideIcon{
  width:100%;
  height:100%;

  max-height:78px;

  aspect-ratio:1;

  border-radius:13px;

  display:grid;

  place-items:center;

  color:#405bc7;

  background:
    rgba(255,255,255,.54);
}


.ruyaGuidanceWide.purple
.ruyaGuidanceWideIcon{
  color:#6d55de;
}


.ruyaGuidanceWideCopy{
  min-width:0;

  display:flex;

  flex-direction:column;

  justify-content:center;
}


.ruyaGuidanceWideCopy b{
  color:#17307a;

  font-size:
    clamp(16px,4.3vw,20px);

  line-height:1.04;

  font-weight:820;

  letter-spacing:-.025em;
}


.ruyaGuidanceWideCopy small,
.ruyaGuidanceWideCopy em{
  color:#7180a5;

  font-size:
    clamp(10px,2.7vw,12.5px);

  line-height:1.16;

  font-style:normal;

  font-weight:500;
}


.ruyaGuidanceWideCopy small{
  margin-top:3px;
}


.ruyaGuidanceWide>i{
  justify-self:end;

  color:#17307a;

  font-size:31px;

  font-weight:300;

  font-style:normal;

  line-height:1;
}


/* MINI GRID */

.ruyaGuidanceMiniGrid{
  min-height:0;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  grid-template-rows:
    repeat(2,minmax(0,1fr));

  gap:var(--rg-gap);

  overflow:hidden;
}


.ruyaGuidanceMini{
  appearance:none;

  min-width:0;
  min-height:0;

  margin:0;

  display:grid;

  grid-template-columns:
    clamp(48px,35%,70px)
    minmax(0,1fr);

  align-items:center;

  gap:5px;

  padding:5px 8px;

  border-radius:16px;

  text-align:left;

  font:inherit;

  overflow:hidden;

  box-shadow:
    0 4px 12px
    rgba(23,48,122,.04);

  -webkit-tap-highlight-color:
    transparent;
}


.ruyaGuidanceMini>span{
  width:100%;

  max-width:64px;

  aspect-ratio:1;

  border-radius:12px;

  display:grid;

  place-items:center;
}


.ruyaGuidanceMini.appointment{
  border:
    1px solid
    rgba(70,160,240,.18);

  background:#f0f9ff;
}


.ruyaGuidanceMini.appointment>span{
  color:#4267d7;
  background:#e2f1ff;
}


.ruyaGuidanceMini.messages{
  border:
    1px solid
    rgba(210,103,174,.15);

  background:#fff5fb;
}


.ruyaGuidanceMini.messages>span{
  color:#7655db;
  background:#f1e8ff;
}


.ruyaGuidanceMini.announcements,
.ruyaGuidanceMini.documents{
  border:
    1px solid
    rgba(232,173,48,.17);

  background:#fff9ed;
}


.ruyaGuidanceMini.announcements>span,
.ruyaGuidanceMini.documents>span{
  color:#e19b22;
  background:#fff0cc;
}


.ruyaGuidanceMini>div{
  min-width:0;
}


.ruyaGuidanceMini b{
  display:block;

  color:#17307a;

  font-size:
    clamp(11px,3.1vw,14px);

  line-height:1.06;

  font-weight:800;

  letter-spacing:-.018em;
}


.ruyaGuidanceMini small{
  display:block;

  margin-top:3px;

  color:#7180a5;

  font-size:
    clamp(8px,2.2vw,10.5px);

  line-height:1.12;

  font-weight:500;
}


.ruyaGuidanceWide:active,
.ruyaGuidanceMini:active{
  transform:scale(.985);
}


/* SHORT PHONE */

@media(max-height:740px){

  .ruyaGuidanceHome{
    --rg-gap:6px;

    height:
      calc(
        100dvh -
        66px -
        env(safe-area-inset-top)
      )!important;

    grid-template-rows:
      100px
      minmax(0,1fr)!important;

    padding-left:10px!important;
    padding-right:10px!important;

    padding-bottom:
      calc(
        72px +
        env(safe-area-inset-bottom)
      )!important;
  }

  .ruyaGuidanceHero{
    grid-template-columns:
      minmax(0,1fr)
      72px;
  }

  .ruyaGuidanceHeroCopy h1{
    font-size:14px;
  }

  .ruyaGuidanceHeroSmile{
    max-width:70px;
  }

  .ruyaGuidanceWide{
    grid-template-columns:
      58px
      minmax(0,1fr)
      16px;

    border-radius:15px;

    padding:4px 8px 4px 5px;
  }

  .ruyaGuidanceWideIcon{
    max-height:57px;
  }

  .ruyaGuidanceWideCopy b{
    font-size:14px;
  }

  .ruyaGuidanceWideCopy small,
  .ruyaGuidanceWideCopy em{
    font-size:8.8px;
  }

  .ruyaGuidanceMini{
    grid-template-columns:
      43px
      minmax(0,1fr);

    padding:3px 5px;

    border-radius:14px;
  }

  .ruyaGuidanceMini>span{
    max-width:43px;
  }

  .ruyaGuidanceMini b{
    font-size:10px;
  }

  .ruyaGuidanceMini small{
    font-size:7px;
  }
}


/* NARROW PHONE */

@media(max-width:370px){

  .ruyaGuidanceHome{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .ruyaGuidanceWide{
    grid-template-columns:
      55px
      minmax(0,1fr)
      15px;
  }

  .ruyaGuidanceMini{
    grid-template-columns:
      41px
      minmax(0,1fr);
  }
}


/* TABLET */

@media(min-width:700px){

  .ruyaGuidanceHome{
    width:min(92vw,720px)!important;

    height:
      calc(
        100dvh -
        92px -
        env(safe-area-inset-top)
      )!important;

    padding-left:18px!important;
    padding-right:18px!important;

    padding-bottom:
      calc(
        88px +
        env(safe-area-inset-bottom)
      )!important;

    grid-template-rows:
      clamp(130px,17dvh,170px)
      minmax(0,1fr)!important;

    --rg-gap:12px;
  }

  .ruyaGuidanceHero{
    grid-template-columns:
      minmax(0,1fr)
      116px;
  }

  .ruyaGuidanceHeroCopy h1{
    font-size:18px;
  }

  .ruyaGuidanceHeroSmile{
    max-width:116px;
  }

  .ruyaGuidanceWide{
    grid-template-columns:
      106px
      minmax(0,1fr)
      26px;

    border-radius:22px;

    padding:9px 17px 9px 9px;
  }

  .ruyaGuidanceWideIcon{
    max-height:96px;

    border-radius:16px;
  }

  .ruyaGuidanceWideCopy b{
    font-size:21px;
  }

  .ruyaGuidanceWideCopy small,
  .ruyaGuidanceWideCopy em{
    font-size:13px;
  }

  .ruyaGuidanceMini{
    grid-template-columns:
      76px
      minmax(0,1fr);

    border-radius:20px;

    padding:8px 11px;
  }

  .ruyaGuidanceMini>span{
    max-width:70px;
  }

  .ruyaGuidanceMini b{
    font-size:15px;
  }

  .ruyaGuidanceMini small{
    font-size:10.5px;
  }
}