/* =========================================================
   English Tutors Online – Tutor Profiles (75% scale)
   PURPOSE:
   - Same layout
   - Same structure
   - Just smaller (like 75% browser zoom)
   ========================================================= */

/* ---------- GLOBAL SCALE ---------- */
:root{
  --s: 0.75;              /* 25% smaller */
  --page-max: 1600px;
}

/* ---------- BASE ---------- */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  font-family: 'Lora', serif;
  background: #fff;
  color: #000;
  line-height: 1.65;
}

/* ---------- HEADER ---------- */
.header-bar{
  width: 100%;
  background: #000;
  color: #fff;
  padding: calc(22px * var(--s)) calc(60px * var(--s));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(20px * var(--s));
  box-sizing: border-box;
}

.header-title{
  font-size: calc(46px * var(--s));
  font-weight: 700;
  white-space: nowrap;
}

.header-title .small-org{
  font-size: calc(32px * var(--s));
  margin-left: 6px;
  opacity: 0.9;
}

.header-nav{
  white-space: nowrap;
}

.header-nav a{
  color: #fff;
  text-decoration: none;
  font-size: calc(22px * var(--s));
  font-weight: 700;
  margin-left: calc(40px * var(--s));
}

/* ---------- MAIN LAYOUT ---------- */
.main-container{
  display: flex;
  gap: 60px;
  padding: calc(40px * var(--s)) calc(80px * var(--s));
  align-items: flex-start;
  box-sizing: border-box;

  max-width: var(--page-max);
  margin: 0 auto;
}

.left{
  width: 28%;
  text-align: center;
}

.right{
  width: 72%;
  box-sizing: border-box;
}

/* ---------- IMAGE + BUTTONS ---------- */
.left img{
  width: 100%;
  max-width: calc(380px * var(--s));
  border-radius: calc(14px * var(--s));
  display: block;
  margin: 0 auto;
}

.btn{
  display: block;
  margin: calc(18px * var(--s)) auto;
  padding: calc(14px * var(--s)) calc(20px * var(--s));
  font-size: calc(22px * var(--s));
  font-weight: 700;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: calc(10px * var(--s));
  text-decoration: none;
  width: 100%;
  max-width: calc(380px * var(--s));
  box-sizing: border-box;
}

.btn:hover{
  background: #000;
  color: #fff;
}

/* ---------- TOP INFO ---------- */
.top-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(40px * var(--s));
  margin-left: 0;                /* ALIGN NAME WITH DROPDOWNS */
  box-sizing: border-box;
}

.top-left{
  width: 40%;
  min-width: calc(320px * var(--s));
}

.top-right{
  width: 60%;
  padding-left: 24px;            /* MOVE RIGHT INFO BLOCK SLIGHTLY RIGHT */
}

.top-left .name{
  font-size: calc(64px * var(--s));
  font-weight: 700;
  margin: 0 0 calc(18px * var(--s));
  line-height: 1.05;
}

.kv{
  font-size: calc(22px * var(--s));
  margin: 0 0 calc(10px * var(--s));
  line-height: 1.4;
}

.kv .k{ font-weight: 700; }
.kv .v{ font-weight: 400; }

.top-right .kv{
  margin-bottom: calc(12px * var(--s));
}

/* ---------- CENTER TEXT ---------- */
.center-title{
  text-align: center;
  font-weight: 600;
  margin: calc(40px * var(--s)) 0 calc(24px * var(--s));
  font-size: calc(32px * var(--s));
}

.center-packages{
  text-align: center;
  font-size: calc(24px * var(--s));
  font-weight: 600;
  margin: calc(26px * var(--s)) 0;
}

/* ---------- DROPDOWNS ---------- */
details{
  margin: calc(26px * var(--s)) 0;
  font-size: calc(26px * var(--s));
}

details summary{
  cursor: pointer;
  font-weight: 700;
  padding: calc(14px * var(--s)) 0;
  border-bottom: 2px solid #000;
  list-style: none;
}

details summary::marker,
details summary::-webkit-details-marker{
  display: none;
}

details summary::after{
  content: "▼";
  float: right;
  font-size: calc(18px * var(--s));
}

details[open] summary::after{
  content: "▲";
}

details .drop-content{
  margin-top: calc(16px * var(--s));
  font-size: calc(22px * var(--s));
}

/* ---------- EMBED VIDEO IN DROPDOWN ---------- */
details .drop-content .video-wrap{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: calc(10px * var(--s));
}

details .drop-content .video-wrap iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* ---------- CONTACT ROW ---------- */
.contact-row{
  margin-top: calc(30px * var(--s));
  font-size: calc(22px * var(--s));
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: calc(30px * var(--s));
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  white-space: normal;
}

/* ---------- CONTACT LEFT (photo column contacts) ---------- */
.contact-left{
  font-size: calc(22px * var(--s));
  font-weight: 700;
}

/* ---------- MOBILE (unchanged behaviour, smaller text already handled) ---------- */
@media (max-width: 900px){

  .header-bar{
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-title{ font-size: 28px; }
  .header-title .small-org{ font-size: 18px; }

  .header-nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .header-nav a{
    font-size: 16px;
    margin: 0;
    white-space: nowrap;
  }

  .main-container{
    flex-direction: column;
    padding: 30px 24px;
    max-width: 100%;
  }

  .left, .right{ width: 100%; }

  .top-header{
    flex-direction: column;
    gap: 18px;
    margin-left: 0;
  }

  .top-left, .top-right{
    width: 100%;
    min-width: 0;
    padding-left: 0;   /* IMPORTANT: don’t push right info on mobile */
  }

  .top-left .name{ font-size: 54px; }
  .kv{ font-size: 20px; }

  .center-title{ font-size: 26px; }
  .center-packages{ font-size: 22px; }

  details{ font-size: 22px; }
  details .drop-content{ font-size: 20px; }

  .contact-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}