/* ═══════════════════════════════════════════════════════════════
   OUTR — responsive.css
   Supplemental @media overrides only.
   Do NOT add non-@media rules here.
   Do NOT modify style.css — all fixes go in this file.
   Breakpoints: 1099, 992, 991, 900, 768, 767, 575, 479
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   SIDEBAR-3 (Archive Year filter) — base + responsive toggle
   ─────────────────────────────────────────────────────────────── */

/* Desktop: h2 is plain heading, no toggle affordance */
.sidebar-3 .sb3-toggle { cursor: default; user-select: none; }
.sidebar-3 .sb3-chev   { display: none; }
.sidebar-3 .sb3-list   { display: block; }

/* Remove sticky on inner pages — sticky:140px breaks on mobile */
.sidebar-3 { position: relative !important; top: auto !important; }
@media (min-width: 1367px){
	#leftSidecssmenu ul.items > li > a {
		padding: 11px 15px;
		font-size: 16px;
	}
	.slide-h1{
  		font-size: clamp(22px, 6vw, 26px);
	}
	.fac-hero__title {
  		font-size: clamp(22px, 6vw, 40px);
	}
	.slide-p{font-size:14px;}
}

@media only screen and (max-width: 1024px) {
  .notice-list ul li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

/* ───────────────────────────────────────────────────────────────
   992 – 1099 px │ Large tablet — hamburger visible, 4-col dept
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1099px) {

  /* 4-column dept grid is too cramped here — drop to 3 */
  .dept-grid { grid-template-columns: repeat(3, 1fr); }
   .bom-list .bom-row {
    grid-template-columns: repeat(3, 1fr);
   }

}


/* ───────────────────────────────────────────────────────────────
   768 – 1099 px │ Tablet zone — hamburger active, sticky bars
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1099px) {

  /* style.css sets #mmenu{top:116px} for ≤1099px, but topBar (36px)
     + .nw (90px) = 126px total sticky height. Correct the offset so
     the mobile menu does not overlap or leave a gap below the nav. */
  #mmenu { top: 126px; }

  /* Brand text: keep both lines visible at tablet widths */
  .brand-txt strong { font-size: 13px; }
  .brand-txt small  { font-size: 21px; }
  
  .two-column {
	-webkit-box-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	}
	.two-column .sidebar-3{width:auto;}
	
	/*.page-wrap {
	  width: 100%;
	}*/
}


/* ───────────────────────────────────────────────────────────────
   ≤ 991 px │ Portrait tablet
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Info tab buttons: 5 items + play btn — slim down so they don't overflow */
  .tab-btn { font-size: 12px; padding: 10px 8px; }

  /* World news: single column */
  .wn-panels { grid-template-columns: 1fr; }

  /* Research grid: stack */
  .res-grid { grid-template-columns: 1fr; }
  
   .two-column {
	-webkit-box-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	}
	.page-wrap {
	  width: 100%;
	}
}


/* ───────────────────────────────────────────────────────────────
   ≤ 900 px
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Achievements ticker: already 1-col at 899px in style.css — no change needed */

  /* Life/events grid: collapse early */
  .life-grid { grid-template-columns: 1fr; }
  .bom-list .bom-row {
    grid-template-columns: repeat(2, 1fr);
  }
  #coe .card, .ic, .ic-card {
	  min-height:100%;
  }
  .ach-img-ph {
	  height:210px;
	  width: 180px;
  }
  
/*  .page-wrap {
	  width: 100%;
	}*/

}


/* ───────────────────────────────────────────────────────────────
   ≤ 767 px │ Mobile — main breakpoint
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Top bar ──────────────────────────────────────────────── */
  /* Ticker already gets margin-left:0 in style.css at ≤767px.
     Accessibility font buttons: tighten so they don't bump ticker */
  .tb-acc-btn      { font-size: 11px; padding: 0 5px; }

  /* ── Quick access ─────────────────────────────────────────── */
  /* auto-fill avoids the forced 3-col from style.css at ≤479px
     overflowing on very narrow screens */
  .qa-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }

  /* ── Info tabs ────────────────────────────────────────────── */
  /* 5 tabs + play-btn in one scrollable row: shrink text */
  .tab-btn { font-size: 11px; padding: 10px 6px; letter-spacing: 0; }

  /* ── Faculty / publication filter bar ─────────────────────── */
  /* style.css gives input[type=text] a 220px min-width which causes
     horizontal overflow on phones. Reset it. */
  input[type=text]           { min-width: 0; }
  .filter-bar                { padding: 10px 12px; gap: 8px; }
  .filter-group              { flex-wrap: wrap; width: 100%; }
  .filter-bar input[type=text],
  .filter-bar select         { width: 100%; box-sizing: border-box; }
  .result-pill               { margin-left: 0; width: 100%; text-align: center; }

  /* ── Press & media ────────────────────────────────────────── */
  /* 2-col already set in style.css at 767px. Tighten the gap and
     image height on small phones. */
  .pm-grid     { gap: 10px; }
  .pm-img-wrap { height: 100px; }

  /* ── Footer ───────────────────────────────────────────────── */
  /* Map iframe: fixed 140px is hard to interact with on phones */
  .f-map { height: 160px; }

  /* Bottom-nav safe-area: ensure wa button is above the nav bar */
  .wa { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

  .bom-list .bom-row {
    grid-template-columns: repeat(1, 1fr);
  }


	.tile-popup {
		display:none;
	}
	.notice-list ul li .date {
		display:none;	
	}
	
	.notice-list ul li .notice-content .notice-box h4 small {
		background-color: var(--navy-dark);
		padding:5px;
		color:#fff;
	}
}
@media (max-width: 600px) {
.events-list ul li .img-box {
  width: 100%;
  height:auto;
}

table {
	font-size:14px;
}

}

/* ───────────────────────────────────────────────────────────────
   ≤ 575 px │ Small phones
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {

  /* Press & media: single column avoids cramped 2-col below ~400px */
  .pm-grid     { grid-template-columns: 1fr; }
  .pm-img-wrap { height: 180px; }

  /* Filter bar: hide the decorative vertical divider */
  .filter-divider { display: none; }

  /* Info tab buttons: tightest comfortable size */
  .tab-btn { font-size: 10.5px; padding: 9px 4px; }

  /* Footer map: a bit taller for usability */
  .f-map { height: 180px; }

  /* Stats strip (inner pages): wrap on small phones */
  .stats-strip { flex-wrap: wrap; }
  .stat-item   { flex: 1 1 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .stat-item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.08); }
  .stat-item:last-child      { border-bottom: none; }

  /* Rank cards: allow 2 per row on small phones */
  .rank-cards { grid-template-columns: repeat(2, 1fr); }
  
  .faculty-accordion .accordion-button {
    padding: 11px 15px;
	font-size: 15px;
  }
	.category-title {
	  font-size: 15px;
	}
	
	.sb-label {
		font-size: 1rem;
	}
	.sb-mobile-chev {
	 	font-size: 14px; 
	}
	
	table {
		font-size:14px;
	}
	.form-notice-filter .btn-primary{
		width:100%;
	}
	.pop-dots {
		margin-left:60px;	
	}
	.font-btn {
	  padding: 1px 4px;
	  font-size: 9px;
	}
	.font-btn.active {
		padding: 1px 5px;
	}
	.ach-card {
  		display: block;
	}
	.ach-img-ph {
	  height:210px;
	  width: 180px;
	  margin:10px auto 0px;
  }
    .ach-body {
    min-height: 200px;
  }
  
  .vcd-sig-name {
	  font-size: 17px;
  }
}


/* ───────────────────────────────────────────────────────────────
   ≤ 479 px │ Very small phones (≤ 480px)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 479px) {

	/* Ticker: slightly smaller text to fit more characters */
	.tk-item { font-size: 11px; }
	
	/* Hero: pull back slightly on the smallest screens */
	/*#hero { height: 40vh; min-height: 200px; }*/
	
	/* Info tabs: minimum readable size */
	.tab-btn { font-size: 10px; padding: 8px 4px; }
	
	/* subhero heading (inner pages) */
	.subhero h1 { font-size: 26px; }
	
	/* Footer map: taller for easy interaction */
	.f-map { height: 200px; }
	
	.res-stat-grid {
		grid-template-columns: 1fr;
	}
	.block-num {
		top: 2px;
		right: 8px;
		font-size: 42px;
	}
	.block {
		padding: 12px 20px;
	}
	
	.btn-ou, .btn-ou-ghost, .btn-ou-dk {
	  font-size: 13px;
	  padding: 4px 10px;
	}

	.qa-grid {
		grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
	  }
	.btn-ou, .btn-ou-ghost, .btn-ou-dk {
	  font-size: 12px;
	  padding: 4px 10px;
	}
	.nw {
	  padding: 0 5px;
	}
	.pub-filter-btn {
		padding: 5px 18px;
		font-size: 12px;
	}
	
	table {
		font-size:11px;
	}
}
@media (max-width: 410px) {
  .rank-cards {
    grid-template-columns: repeat(1, 1fr);
  }
	table {
		font-size:11px;
	}
}
/* ─── sidebar-3 responsive (≤ 991px) ──────────────────────────
   Below tablet the two-column stacks; turn the Archive heading
   into an accordion toggle so the year list stays compact.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Sidebar sits above content on mobile (order trick on flex row) */
  .sidebar-3 { order: -1; margin-bottom: 16px; }

  /* Toggle heading: chevron visible, pointer cursor, flex row */
  .sidebar-3 .sb3-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 0;
    user-select: none;
  }

  /* Chevron via pseudo — rotates when open */
  .sidebar-3 .sb3-chev {
    display: inline-block;
    font-family: "bootstrap-icons";
    font-style: normal;
    font-size: 16px;
    color: #d4af37;
    transition: transform 0.25s ease;
  }
  .sidebar-3 .sb3-chev::before { content: "\f282"; } /* bi-chevron-down */

  /* List collapsed by default */
  .sidebar-3 .sb3-list { display: none; }

  /* Open state: rotate chevron + show list */
  .sidebar-3 .recent-news.sb3-open .sb3-list { display: block; }
  .sidebar-3 .recent-news.sb3-open .sb3-chev { transform: rotate(180deg); }

  /* Smaller font in the list items on mobile */
  .sidebar-3 .recent-news ul li a { font-size: 15px; }

  /* Horizontal scrollable year pills (visible when open) */
  .sidebar-3 .sb3-list {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 4px;
  }
 /* .sidebar-3 .recent-news.sb3-open .sb3-list { display: flex; }*/
  .sidebar-3 .sb3-list li {
    border-bottom: none;
    padding: 0;
  }
 /* .sidebar-3 .sb3-list li a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #f4f6f8;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s;
  }
  .sidebar-3 .sb3-list li a::before { display: none; }
  .sidebar-3 .sb3-list li.active a,
  .sidebar-3 .sb3-list li a:hover {
    background: #1a2b4c;
    border-color: #1a2b4c;
    color: #fff;
    padding-left: 14px;
  }*/

}