/**
 * Rules that must outrank Elementor's frontend stylesheet.
 *
 * Elementor enqueues `elementor-frontend` after every theme stylesheet, and it
 * carries `.elementor img { border-radius: 0 }`. That is one class plus one
 * type — the same weight as our own `.ojas-x img` rules, and heavier than a
 * bare `.ojas-thumb` — so on any page built with Elementor (which is every
 * page here) our rounded images came out square. We chased that three times
 * with `.elementor`-prefixed twins and still missed three rules, because the
 * twin has to be written by hand for each one and only the symptom shows.
 *
 * This file is enqueued *after* elementor-frontend instead. Source order only
 * decides a tie, though, so a bare `.ojas-thumb` still loses to their class +
 * type: the selectors here are written `img.ojas-thumb` to match that weight
 * exactly and take the tie. Put anything Elementor stamps on here, and keep
 * the canonical rule in components.css so the theme still reads on its own.
 */

/* Images the theme shapes. Elementor squares all of these off. */
.ojas-dish__media--photo img { border-radius: 50%; }
img.ojas-pin__thumb { border-radius: 0 40px 0 40px; }      /* leaf-cornered */
.ojas-pin.is-pinned .ojas-pin__thumb { border-radius: var(--ojas-radius-circle); }
img.ojas-order__logo { border-radius: 9px; }
img.ojas-clients__logo { border-radius: 0; }
.ojas-entry-content img,
.ojas-prose img { border-radius: var(--ojas-radius); }
.ojas-comments .comment-author img { border-radius: var(--ojas-radius-circle); }
.ojas-lightbox__figure img { border-radius: var(--ojas-radius-lg) var(--ojas-radius-lg) 0 0; }

/*
 * The pinned stack, unpinned — which is what a phone always gets, because the
 * pin only engages at 1025px and up.
 *
 * It was laid out as the desktop card scaled down: 32px of padding around a
 * 271px column, a 120px square floating above a 28px display-face heading,
 * five of them at 445px each. On a 375px screen that reads as five loose
 * objects rather than a list. Below 640px the thumbnail and the heading share
 * a row — picture, then number and title beside it — with the sentence and the
 * link below at full width. Same content, about half the height, and the eye
 * has a left edge to follow.
 */
@media (max-width: 640px) {
  .ojas-pin__panel-inner {
    padding: var(--ojas-space-md);
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "thumb number"
      "thumb title"
      "text  text"
      "link  link";
    column-gap: var(--ojas-space-md);
    row-gap: 0;
    align-content: start;
  }

  img.ojas-pin__thumb {
    grid-area: thumb;
    align-self: start;
    width: 96px; height: 96px;
    border-radius: 0 28px 0 28px;                 /* leaf corners, scaled down */
  }

  .ojas-pin__number { grid-area: number; align-self: end; }
  .ojas-pin__title {
    grid-area: title;
    align-self: start;
    margin: 2px 0 0;
    font-size: var(--ojas-size-h4);
    line-height: 1.2;
  }

  .ojas-pin__text { grid-area: text; margin-top: var(--ojas-space-sm); }
  .ojas-pin__panel-inner > .ojas-btn {
    grid-area: link;
    justify-self: start;
    margin-top: var(--ojas-space-sm);
  }

  /* A card with no picture should not keep the empty column. */
  .ojas-pin__panel-inner:not(:has(img.ojas-pin__thumb)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "number" "title" "text" "link";
  }

  .ojas-pin__panels { gap: var(--ojas-space-md); }
}