/**
 * @file views-oppeprogrammid.css
 * Drupal core ships the Views "Grid" style with no CSS (same gap we hit
 * with Inimesed) - this gives the Õppeprogrammid view an actual grid
 * layout and constrains the source images, which vary wildly in size
 * (780x956 up to 4244x2827) and would otherwise render at native size.
 */

/*
 * Core's Views "Grid" style renders each row as its own wrapper div (not
 * one flat grid with auto-placement), so `gap` here only spaces the
 * columns *within* a row - it can't create space *between* row-wrapper
 * divs, since those are separate grid containers as far as CSS Grid is
 * concerned. margin-bottom below is what actually creates the vertical
 * gap between rows.
 */
.view-id-oppeprogrammid .views-view-grid > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.view-id-oppeprogrammid .views-view-grid > div:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .view-id-oppeprogrammid .views-view-grid > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .view-id-oppeprogrammid .views-view-grid > div {
    grid-template-columns: 1fr;
  }
}

.view-id-oppeprogrammid .views-view-grid > div > div {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--background);
  border: 1px solid #e6ead6;
  border-radius: var(--radius-lg, var(--radius));
}

.view-id-oppeprogrammid .views-field-field-pohipilt img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md, var(--radius));
  margin-bottom: 0.75rem;
}

.view-id-oppeprogrammid .views-field-title {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.view-id-oppeprogrammid .views-field-field-sihtruhm .field-content:not(:empty) {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #33530a;
  background: #e4ead3;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.view-id-oppeprogrammid .views-field-field-margis img {
  display: block;
  max-width: 3rem;
  height: auto;
  margin-bottom: 0.5rem;
}

.view-id-oppeprogrammid .views-field-field-luhikirjeldus {
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

/*
 * Individual Õppeprogramm page: main content + "other programs" submenu
 * side by side, matching the site-wide two-column pattern.
 */
.oppeprogramm-layout {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.oppeprogramm-main {
  flex: 1 1 0;
  min-width: 0;
}

/*
 * Quality-mark badge (field_kvaliteedimargis, KvaliteedimargisBadgeFormatter
 * in ellamaa_helpers) - ~60px tall, aspect ratio preserved. One shared
 * rule on the formatter's own .kvaliteedimargis-badge class rather than a
 * wrapper-specific selector, since the same formatter output appears both
 * on the full node page (inside .oppeprogramm-badge) and the
 * Õppeprogrammid card listing (inside .views-field-field-kvaliteedimargis)
 * - sizing/spacing should match in both places.
 */
.kvaliteedimargis-badge {
  display: block;
  height: 3.75rem;
  width: auto;
  margin-bottom: 1rem;
}

/*
 * Gallery (field_galerii, PhotoSwipe formatter): responsive grid instead
 * of one-per-row - fits as many thumbnails as the available width allows
 * (up to ~6 at this page's main-content width), fewer on narrower
 * viewports. Square crop for a consistent grid look regardless of each
 * photo's original aspect ratio.
 */
.photoswipe-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.photoswipe-gallery > div {
  margin: 0;
}

.photoswipe-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md, var(--radius));
}

.oppeprogramm-sihtruhm {
  margin-bottom: 0.45rem;
}

.oppeprogramm-sihtruhm > div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.oppeprogramm-sihtruhm > div > div:first-child {
  font-weight: 600;
  color: var(--foreground);
}

.oppeprogramm-sihtruhm > div > div:first-child::after {
  content: ":";
}

.oppeprogramm-juhendajad {
  margin-bottom: 0.45rem;
}

.oppeprogramm-juhendajad > div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.oppeprogramm-juhendajad > div > div:first-child {
  font-weight: 600;
  color: var(--foreground);
}

.oppeprogramm-juhendajad > div > div:first-child::after {
  content: ":";
}

/* Names on one row, comma-separated, instead of stacking one per line. */
.oppeprogramm-juhendajad > div > div:last-child > div {
  display: inline;
}

.oppeprogramm-juhendajad > div > div:last-child > div:not(:last-child)::after {
  content: ", ";
}

/* Toimumise aeg ja koht / Programmi hind - same label+colon pattern as
   Sihtrühm/Juhendajad above, for a consistent info-box look. */
.oppeprogramm-aeg-koht {
  margin-bottom: 0.45rem;
}

.oppeprogramm-hind {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

/*
 * "Jaga Facebookis" link (link styles live in views-sundmused.css, shared
 * with the Sündmus page) sits under the price, above the divider. It must be
 * a <div>, not a <p>: the icon component renders a <div>, and a <div> inside
 * a <p> makes the browser close the <p> early and split the link. As a direct
 * child div it would otherwise pick up the ".oppeprogramm-hind > div" label/
 * value row rules, so those are reset here (the extra class wins).
 */
.oppeprogramm-hind > div.share-facebook {
  display: block;
  margin: 0.9rem 0 0;
  font-size: inherit;
  color: inherit;
}

.oppeprogramm-aeg-koht > div,
.oppeprogramm-hind > div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.oppeprogramm-aeg-koht > div > div:first-child,
.oppeprogramm-hind > div > div:first-child {
  font-weight: 600;
  color: var(--foreground);
}

.oppeprogramm-aeg-koht > div > div:first-child::after,
.oppeprogramm-hind > div > div:first-child::after {
  content: ":";
}

/*
 * Featured image floats right of the body text (magazine-article style):
 * text wraps around it while the image runs, then continues full-width
 * once the image ends. .oppeprogramm-extra clears the float so the
 * remaining fields (sihtrühm, lühikirjeldus, etc.) always sit full-width.
 */
.oppeprogramm-featured-image {
  float: right;
  width: 42%;
  margin: 0 0 1.5rem 2rem;
}

.oppeprogramm-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, var(--radius));
}

.oppeprogramm-body p {
  margin-bottom: 1rem;
}

.oppeprogramm-order {
  clear: both;
  margin-bottom: 1.5rem;
}

.oppeprogramm-order-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--button-primary-color);
  color: #fff;
  border-radius: var(--radius-md, var(--radius));
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.oppeprogramm-order-button:hover {
  opacity: 0.9;
  text-decoration: none;
}

.oppeprogramm-extra {
  clear: both;
}

@media (max-width: 700px) {
  .oppeprogramm-featured-image {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem;
  }

  /*
   * Sihtrühm/Toimumise aeg ja koht/Juhendajad/Programmi hind: label and
   * value share one inline-flex row on desktop (fine - value is short
   * enough to fit next to the label). On mobile the value often wraps,
   * and a wrapped inline-flex line looks like it's hanging off the label
   * rather than starting cleanly below it. Stack label above value instead.
   */
  .oppeprogramm-sihtruhm > div,
  .oppeprogramm-juhendajad > div,
  .oppeprogramm-aeg-koht > div,
  .oppeprogramm-hind > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}

.oppeprogramm-related h3 {
  margin: -1rem -1rem 1rem;
  padding: 1rem;
  font-size: 1.6875rem;
  font-weight: 600;
  background: #4d6b4a;
  color: #fff;
  border-radius: var(--radius-lg, var(--radius)) var(--radius-lg, var(--radius)) 0 0;
}

.oppeprogramm-related {
  flex: 0 0 330px;
  padding: 1rem;
  background: #f1ebdd;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius));
}

.oppeprogramm-related .view-oppeprogrammid > .view-header,
.oppeprogramm-related .view-oppeprogrammid > .view-content {
  margin: 0;
}

/*
 * Plain link, not a button (deliberately NOT reusing .sundmused-view-all's
 * button treatment - this one link felt too heavy in the sidebar). Scoped
 * to this exact class only, so the site's other "view all" buttons are
 * unaffected.
 */
.oppeprogramm-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.oppeprogramm-view-all:hover {
  color: var(--primary);
  text-decoration: underline;
}

.oppeprogramm-view-all__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.oppeprogramm-related .item-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oppeprogramm-related .item-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.oppeprogramm-related .item-list li:first-child {
  padding-top: 0;
}

.oppeprogramm-related .item-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.oppeprogramm-related .item-list a {
  font-size: 1.125rem;
  color: var(--foreground);
  text-decoration: none;
}

.oppeprogramm-related .item-list a:hover {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 800px) {
  .oppeprogramm-layout {
    flex-direction: column;
  }

  .oppeprogramm-related {
    flex-basis: auto;
    width: 100%;
  }
}