/**
 * Ask SchoolTV: /ask page and result-teaser layout (issue 020).
 *
 * Image-left teaser layout matches this platform's existing feed_teaser
 * topic-widget convention (see issue 020's Further Notes for why this
 * deliberately differs from The Age's image-right reference pattern).
 * Breakpoints match the Bootstrap-style breakpoints already used
 * throughout the nation theme (confirmed live: sm 576px, md 768px, lg
 * 992px).
 */

/**
 * .ask-schooltv-page__inner is the shared alignment container: the prompt,
 * search box, popular-questions list, and results/pager all live inside it
 * with no extra per-element horizontal offset, so their left edges line up
 * with the search box's own left edge and the results share its width
 * (issue 020 follow-up). 992px matches the theme's own Bootstrap-style
 * container width already used elsewhere (the 991.98px breakpoint).
 */
.ask-schooltv-page__inner {
  margin: 0 auto;
  max-width: 992px;
  padding: 0 1em;
}

.ask-schooltv-page__form {
  margin: 0 0 1.5em;
}

.ask-schooltv-page__search-box {
  background: #fff;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.15);
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

/**
 * A fixed 2-row textarea, not auto-growing (no JS beyond the Enter-submits
 * enhancement — see js/ask-schooltv.js) — min-height/line-height
 * approximate 2 lines at the box's own font-size (follow-up feedback:
 * reduced from 3 rows, one more line-height trimmed off the total box
 * height on top of the earlier padding trim below). padding-bottom
 * reserves room for the button row below the text; padding-right leaves
 * the same gap on the right as the button's own left inset, so the box
 * reads as visually balanced even though the button sits at bottom-left
 * rather than bottom-right.
 *
 * Follow-up feedback: the box previously read as taller than its actual
 * text capacity (measured live: ~140px for 3 rows, ~6 line-heights, mostly
 * padding rather than text rows) — top/bottom padding trimmed here, and
 * the button's own bottom offset tightened to match, while still leaving
 * it clear of the last line of typed text. Padding is already close to
 * its floor given the button's own clearance needs (see
 * .ask-schooltv-page__search-submit below) — the row count is what
 * dropped for this further reduction, not the padding again.
 */
.ask-schooltv-page__search-box textarea {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  display: block;
  font: inherit;
  font-size: 1.05em;
  line-height: 1.4;
  min-height: calc(1.4em * 2);
  outline: none;
  padding: 0.5em 1.1em 2.75em;
  resize: none;
  width: 100%;
}

.ask-schooltv-page__search-submit {
  align-items: center;
  /* Fallback only, for no-JS: js/ask-schooltv.js sets this to match
     whatever colour this domain's own links actually render in (its
     per-domain colour system has no reusable CSS custom property this
     could reference directly instead). */
  background-color: #007bff;
  border: 0;
  border-radius: 50%;
  bottom: 0.45em;
  color: #fff;
  cursor: pointer;
  display: flex;
  /* Governs the button's own height/width below (2.25em is relative to
     this), not the icon's size — see .ask-schooltv-page__search-submit i,
     which sizes the icon independently so it can shrink without also
     shrinking the button itself. */
  font-size: 1.05em;
  height: 2.25em;
  justify-content: center;
  position: absolute;
  right: 0.6em;
  width: 2.25em;
}

/**
 * Sized separately from the button's own font-size (above) specifically
 * so the icon can be made smaller/larger without changing the button's
 * own height/width, which are set relative to that same font-size
 * property (follow-up feedback: smaller icon, same button size).
 */
.ask-schooltv-page__search-submit i {
  font-size: 0.75em;
}

/**
 * A colour-agnostic darken, rather than a second hardcoded hex — the
 * button's own background is set at runtime (see above), so a fixed
 * hover colour would only ever match one specific domain's preset.
 */
.ask-schooltv-page__search-submit:hover,
.ask-schooltv-page__search-submit:focus {
  filter: brightness(0.88);
}

@media (max-width: 480px) {
  .ask-schooltv-page__search-box textarea {
    font-size: 1em;
    padding: 0.5em 1em 2.5em;
  }

  .ask-schooltv-page__search-submit {
    height: 2em;
    width: 2em;
  }
}

/**
 * Rounds the pager's page-number/Previous/Next/Last links (follow-up
 * feedback) — the theme's own default pager styling explicitly sets
 * border-radius:0 via ".pager__items li.pager__item a" (confirmed live in
 * the loaded stylesheet), which is more specific than a plain
 * ".pager__item a" override; matching that same structure here, scoped
 * under this page's own container so it doesn't affect any other
 * view/page's pager elsewhere using the same core markup, is enough to
 * win on specificity without an !important.
 */
.ask-schooltv-page__inner .pager__items li.pager__item a {
  border-radius: 20px;
}

/**
 * When the pill row wraps (narrow widths, or simply many pages), classy's
 * own default margin-bottom:10px on .pager__item (confirmed live in the
 * loaded stylesheet) reads as too tight between wrapped rows of these
 * taller, rounded pill buttons — follow-up feedback: add "a little space
 * between lines when paging wraps around." Scoped the same way as the
 * border-radius override above (only this page's own pager, not every
 * other view's).
 */
.ask-schooltv-page__inner .pager__items li.pager__item {
  margin-bottom: 16px;
}

.ask-schooltv-page__popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ask-schooltv-page__popular-list li {
  margin: 0 0 0.5em;
}

.ask-schooltv-page__popular-list li a {
  font-weight: normal;
}

.ask-schooltv-page__page-size-form {
  align-items: center;
  display: flex;
  gap: 0.5em;
  margin: 1em 0;
}

/**
 * The image/text split uses this theme's Bootstrap grid directly
 * (col-lg-3/col-md-4/col-sm-4/col-12 and col-*-9/8/12 in the template),
 * matching TopicLibraryRenderer::renderTile()'s existing convention.
 *
 * display:flex is added here (scoped to .ask-schooltv-card only, not
 * Bootstrap's .row generally) so the image and body columns stretch to
 * equal height — Bootstrap 3's own floated .row/.col-* don't do this,
 * which is why .ask-schooltv-card__topic (the last element in the body
 * column) previously landed at the bottom of the *text*, not the bottom
 * of the row/image, whenever the body's own content was shorter than the
 * image. flex-wrap:wrap is required alongside it: col-12 sets each
 * column to width:100% below Bootstrap's sm breakpoint (576px) for the
 * mobile stacking behaviour, and a flex row defaults to nowrap, which
 * would otherwise squeeze both 100%-width columns onto one line instead
 * of stacking them.
 */
.ask-schooltv-card {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0.75em;
  padding-bottom: 0.75em;
}

/**
 * A divider between cards, not after the last one — padding-bottom above
 * gives it some breathing room from the card's own content, margin-bottom
 * gives the same from the next card, keeping the overall gap similar to
 * before this line was added.
 */
.ask-schooltv-card:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}

/**
 * The image column is flex-stretched to match the (taller, variable-height)
 * text column's own height (see .ask-schooltv-card below) — left at its
 * own natural aspect-ratio height, a landscape thumbnail is routinely
 * shorter than that stretched column, leaving empty space around it
 * (follow-up feedback: "wasted space" a designer wouldn't like).
 *
 * object-fit:cover was tried first to fill that space entirely, but
 * reverted (follow-up feedback: "some images have text") — several
 * thumbnails (Special Report title cards in particular) have their title
 * baked into the image itself, and cover crops in from the sides on a
 * landscape image squeezed into a narrower/taller box, cutting off that
 * text. Centering the untouched image within the stretched column instead
 * — no cropping, so no content is ever lost — turns a top-anchored image
 * with a dead zone hanging below it into evenly-distributed breathing
 * room above and below, which reads as intentional rather than broken.
 * height:auto/max-width:100% on the image itself already come from the
 * theme's own global responsive-image reset (nation theme's assets/
 * lessc/common.less), so only the centering needs adding here.
 */
.ask-schooltv-card__image-link {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.ask-schooltv-card__image {
  display: block;
}

/**
 * flex-direction:column so .ask-schooltv-card__topic's margin-top:auto
 * below can push it to the bottom of this column, once .ask-schooltv-card
 * has equalized this column's height with the image's.
 */
.ask-schooltv-card__body {
  display: flex;
  flex-direction: column;
}

/**
 * Bottom row of the body column: content type on the left, topic link on
 * the right. A flex row with justify-content:space-between rather than
 * each pinned individually, so both land on the same line. Pushed to the
 * bottom of the (now equal-height) body column via margin-top:auto —
 * not absolutely positioned over the image, per follow-up feedback on the
 * topic link's original placement.
 */
.ask-schooltv-card__footer {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.25em;
}

.ask-schooltv-card__content-type {
  color: #999;
  font-size: 0.85em;
}

.ask-schooltv-card__topic {
  display: block;
  font-size: 0.85em;
}

.ask-schooltv-card__title {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0 0 0.25em;
}

.ask-schooltv-card__blurb {
  margin: 0.25em 0 0;
}

/**
 * The trailing "…" is a link (follow-up feedback: tried against a "Read
 * more" text link and an icon, ellipsis was the subtlest option) — no
 * explicit color, same as .ask-schooltv-card__topic below, so it matches
 * whatever the theme's own default link color actually is rather than a
 * guessed/hardcoded one; bold reads as clickable despite being a single
 * glyph, and padding (not font-size) gives it a larger tap target than
 * its own visual size without making the "…" itself look bigger.
 */
.ask-schooltv-card__blurb-more {
  font-weight: bold;
  padding: 0.25em;
  text-decoration: none;
}

.ask-schooltv-card__blurb-more:hover,
.ask-schooltv-card__blurb-more:focus {
  text-decoration: underline;
}

/**
 * blurb_part2 (the continuation past blurb_part1, not a repeat of it — see
 * template docblock) and blurb_part1's own "more to come" ellipsis are
 * mutually exclusive: part2 only appears at lg (992px+, this theme's real
 * Bootstrap 4/5 breakpoint — confirmed live, not Bootstrap 3's 1200px),
 * where there's room for it; below that (md, 768–991.98px — the blurb
 * itself is hidden entirely below 768px, see below), part1 alone is shown
 * with its own ellipsis instead, since part2 isn't rendered visibly there.
 */
.ask-schooltv-card__blurb-part2 {
  display: none;
}

@media (min-width: 992px) {
  .ask-schooltv-card__blurb-part2 {
    display: inline;
  }

  .ask-schooltv-card__blurb-ellipsis-narrow {
    display: none;
  }
}

/**
 * Below 576px (Bootstrap's sm breakpoint, confirmed live in this theme's
 * vendored bootstrap.css — .col-sm-4 etc. only take effect at 576px+) the
 * image/body columns actually stack to full width via col-12 (not
 * col-xs-12, a dead Bootstrap-3-ism this build doesn't define at all —
 * follow-up feedback caught an earlier version of this rule firing at
 * 767.98px, well above where the layout really stacks, hiding the blurb
 * and footer while the columns were still visibly side-by-side). The
 * footer's content-type/topic-link row reads as clutter competing with
 * the title at that narrow width, same reasoning as hiding the blurb here.
 */
@media (max-width: 575.98px) {
  .ask-schooltv-card__blurb {
    display: none;
  }

  .ask-schooltv-card__footer {
    display: none;
  }
}