/* ARK College of Pharmacy — fixes for phones, tablets and computers (v40, from the check of every page).
   Loaded after all other stylesheets. Nothing here changes texts, phone numbers or colours. */

/* ---------------------------------------------------------------- paragraphs: straight left and right edges on every screen (v41)
   Phones, tablets and computers all show the paragraphs justified (site.css). On the home page the
   descriptive paragraphs are justified too. Hyphens (only where a word does not fit) keep the gaps
   between words small on narrow screens. */
body[data-page="home"] .kg-col-p, body[data-page="home"] .kg-tour > p, body[data-page="home"] .kg-apply-box p:not(.kg-apply-s),
body[data-page="home"] .kg-don p, body[data-page="home"] .kg-quick .kg-cap {
  text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto;
}
@media (max-width: 760px) {
  main p, main blockquote, main dd, .steps li span, .facility-list li span { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; }
}
/* the opening paragraphs under the page titles and the slide text on the home page too */
body[class] main .ab-intro, body[class] main .ad-lead, body[class] main .cs-lead, body[class] main .cd-sub, body[class] main .fc-sub,
body[class] main .ev-sub, body[class] main .gl-lead, body[data-page="home"] .hero .slide-card .lead {
  text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto;
}

/* ---------------------------------------------------------------- phones: the bars at the top use less of the screen
   The notice strip and the header stay on screen (as chosen), but are lower: 46 + 76 px became 38 + 60 px.
   The section tabs of the About and course pages are lower too. */
@media (max-width: 760px) {
  body[class] .nb-list a { padding: 6px 0; font-size: 13px; }
  body[class] .nb-label svg { width: 19px; height: 19px; }
  body[class] .site-head .wrap { min-height: 60px; gap: 10px; }
  body[class] .brand img, body[class] .site-head .brand img { width: 46px; height: 46px; }
  /* the college name on one line; site.js makes the letters a little smaller on narrow phones so it fits */
  body[class] .site-head .brand span { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  body[class] .site-head .brand b { white-space: nowrap; overflow: hidden; font-size: 17px; line-height: 1.2; }
  body[class] .site-head .brand small { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[class] .menu-btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
  .cd-nav a { padding: 11px 12px; font-size: 14.5px; }
  .ab-index a { padding-top: 7px; padding-bottom: 7px; }
}

/* ---------------------------------------------------------------- tabs and card rows that scroll sideways: show that there is more
   A soft fade at the edge where more tabs / cards are hidden (set by site.js). */
.x-more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); }
.x-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px); mask-image: linear-gradient(90deg, transparent, #000 46px); }
.x-more-l.x-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); }

/* ---------------------------------------------------------------- photo gallery: album names in full */
.gl-tile b { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .gl-tile b, .gl-tile:nth-child(7n+1) b { font-size: 15px; line-height: 1.25; }
  .gl-tile:nth-child(5n+1) b { font-size: 19px; }
  .gl-tile.gl-wide { grid-column: span 2; }   /* an album that would stand alone in its row fills the row (site.js) */
}

/* ---------------------------------------------------------------- home page */
/* "Search For Courses": the course name fits in the box */
@media (max-width: 760px) {
  .kg-find-f { margin: 0; padding: 24px 16px 26px; }
  .kg-find select { font-size: 14px; padding: 0 28px 0 10px; text-overflow: ellipsis; }
}
/* phones: a shorter page — smaller photos in the three blocks, and no "Quick Links" block
   (the same links are in the footer) */
@media (max-width: 760px) {
  .kg-photo { aspect-ratio: 16 / 9; }
  .kg-col-p { margin-top: 16px; }
  .kg-ql { display: none; }
}
/* phones: the slide words sit on a darker band, below the busy part of the photo */
@media (max-width: 700px) {
  body[data-page="home"] .slide::after { top: calc(100vw * 2 / 3 - 96px) !important;
    background: linear-gradient(180deg, rgba(10, 10, 25, 0) 0%, rgba(10, 10, 25, .82) 32%, rgba(10, 10, 25, .96) 52%, var(--kg-navy) 100%) !important; }
  body[data-page="home"] .slide-copy { margin-top: calc(100vw * 2 / 3 - 30px); }
  body[data-page="home"] .kg-hero-k { text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
  body[data-page="home"] .slide-card h1, body[data-page="home"] .slide-card .h1 { text-shadow: 0 2px 12px rgba(0, 0, 0, .85); }
  /* slide dots: same look, bigger area to tap */
  body[data-page="home"] .hero .sl-dots { gap: 10px; }
  body[data-page="home"] .hero .sl-dots button::before { content: ""; position: absolute; inset: -12px -6px; }
  body[data-page="home"] .hero .sl-pause { width: 34px; height: 34px; }
}
/* tablets: the three blocks (Admissions, Courses, Campus life) side by side instead of one under another */
@media (min-width: 761px) and (max-width: 1100px) {
  .kg-feat { padding: 0 20px; }
  .kg-feat-in { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 18px; }
  .kg-box { flex-direction: column; gap: 10px; padding: 20px 18px 22px; }
  .kg-box p { font-size: 14.5px; }
  .kg-photo { aspect-ratio: 4 / 3; }
  .kg-col-p { margin: 14px 0 4px; font-size: 14.5px; line-height: 1.7; }
  .kg-col-p, .kg-more { margin-left: 0; margin-right: 0; }
}
/* "Recent Events" heading: bold like every other heading */
body[data-page="home"] .kg-events .kg-h { font-weight: 700 !important; }

/* ---------------------------------------------------------------- small things that were hard to tap or read (phones) */
@media (max-width: 760px) {
  .crumbs a, .pg-crumbs a { display: inline-block; padding: 9px 0; }
  body[class] .foot-reach a { display: inline-flex; align-items: center; min-height: 40px; }
  .kg-tag, body[class] .nb-new { font-size: 11.5px; }
  .kg-pt small, .kg-th small { font-size: 12px; }
}

/* ---------------------------------------------------------------- events page: a small note when nothing is coming up */
@media (max-width: 760px) {
  .ev-none { padding: 16px 18px; text-align: left; border-width: 1px; }
  .ev-none h2 { font-size: 19px; margin: 0 0 4px; }
  .ev-none p { margin: 0; }
}

/* ---------------------------------------------------------------- phone menu: ✕ to close, and the page behind is dimmed */
@media (max-width: 1080px) {
  body[class] .menu-btn[aria-expanded="true"] svg { display: none; }
  body[class] .menu-btn[aria-expanded="true"]::before { content: "\2715"; font: 400 20px/1 Arial, sans-serif; color: #fff; }
  html.nav-open body::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .55); }
}

/* ---------------------------------------------------------------- tablets: course pages show the title and the picture side by side */
@media (min-width: 601px) and (max-width: 900px) {
  .cd-hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 28px; }
  .cd-photo img { aspect-ratio: auto; max-height: 420px; width: 100%; object-fit: contain; }
}

/* ---------------------------------------------------------------- computers: the footer shows "Quick links" too */
@media (min-width: 901px) {
  body[class] .foot-quick { display: block; }
  body[class] .foot-min { grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(110px, 1fr)); gap: 24px 34px; }
}

/* v43: words of justified paragraphs (site.js) */
ark-w { display: inline; font: inherit; color: inherit; }
/* v43: phones — the opening paragraph of the About page a little smaller and wider, so fewer gaps */
@media (max-width: 760px) {
  body[class] main .ab-intro { font-size: 16.5px; line-height: 1.7; padding-left: 14px; max-width: none; }
  body[class] main .ad-lead, body[class] main .cs-lead, body[class] main .fc-sub, body[class] main .ev-sub, body[class] main .gl-lead { font-size: 16.5px; }
  body[class] main .ab-ch p, body[class] main .cd-lead { font-size: 16.5px; line-height: 1.75; }
}