/* ============================================================
   Our Dartmoor — organic/woodcut redesign, Phase 2: Directory results cards
   Loaded after organic-skin.css. Restyles the REAL listings markup
   (.od-tile / .od-tile-img / .od-tile-body etc, from
   components/com_ourdartmoor/tmpl/listings/default.php) to match the
   torn-material card language from organic-trial/granite-carved-newnav.html
   ("wall"/"wood"/"lichen" tinges, big hand-lettered names, kooky hover pop).
   Piskie/sparkle easter eggs from the mock dropped for now (Paul, 2026-09-18).
   Companion script: js/organic-cards.js.

   Deliberate simplification vs the mock: the mock's "mid" layout (photo
   placed BETWEEN the title and the description) needs the photo, title and
   description as separately-orderable flex children. The real markup nests
   title/town/description together inside one .od-tile-body block below a
   separate .od-tile-img, so only "photo first" / "photo last" are supported
   here, not "photo in the middle" — reordering DOM nodes to force that would
   be a real structural change, not a style pass. ============================================================ */

/* True masonry via CSS multi-column, not UIkit's flex grid (uk-grid can't
   pack varying-height cards without gaps - it only aligns them in fixed
   rows). Overriding uk-grid's flex display entirely; template-scoped here
   (organic-cards.css) rather than editing the shared component template, so
   the live/original template's own grid is untouched. Column count mirrors
   the component's own cards_per_row-driven breakpoints (uk-child-width-1-2@s
   / -1-3@m) so it still respects that admin setting's intent. */
.od-tiles{display:block !important;column-count:1;column-gap:26px;margin:0 !important;}
@media(min-width:640px){.od-tiles{column-count:2;}}
@media(min-width:960px){.od-tiles{column-count:3;}}
.od-tile-col{display:block !important;width:100% !important;break-inside:avoid;
  -webkit-column-break-inside:avoid;padding:0 0 26px !important;margin:0 !important;min-width:0 !important;}

.od-tile{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:15px 15px 18px;
  min-width:0;height:auto !important; /* was stretched to match the tallest card in its row (uk-grid-match) */
  border-radius:2px !important;background-size:cover;background-repeat:no-repeat;background-position:var(--bp,center);
  box-shadow:0 8px 18px rgba(48,40,26,.13),0 2px 5px rgba(48,40,26,.10) !important;
  border:none !important;overflow:visible !important; /* site.css's overflow:hidden clipped the
    hover zoom/slide; that containment was for the old fixed-crop design. */
  transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease;
}
.od-tile.wall  {background-color:#e9eae7;background-image:linear-gradient(rgba(233,234,230,.82),rgba(236,237,233,.90)),var(--tex);}
.od-tile.wood  {background-color:#efe7d1;background-image:linear-gradient(rgba(245,235,205,.80),rgba(247,238,212,.88)),var(--tex);}
.od-tile.lichen{background-color:#eae0ec;background-image:linear-gradient(rgba(237,227,240,.80),rgba(240,231,242,.88)),var(--tex);}

/* site.css's fixed aspect-ratio white box (.od-tile-img) + object-fit:contain
   was there to stop images "moving around" at inconsistent crops - not needed
   now the cards are randomly positioned/tinted anyway, and it left a white
   letterbox gap showing through behind the image on hover-zoom. Cropped fill,
   no box, like the mock. Scoped to :has(img) so the no-<img>, background-image
   "cover" tiles (publications) - which never got the hover-zoom transform in
   the first place - are left alone. */
.od-tile-img{order:1;position:relative;z-index:1;overflow:visible;border-radius:2px;}
.od-tile-img:has(img){aspect-ratio:auto !important;background:transparent !important;}
.od-tile.bot .od-tile-img{order:3;}
.od-tile-img img,.od-tile-img{
  border-radius:2px;box-shadow:0 3px 8px rgba(30,24,12,.24);
  transition:transform .5s cubic-bezier(.2,.75,.25,1),box-shadow .5s ease;
}
/* Full image, no crop - square/landscape/portrait all fine, organic not uniform. */
.od-tile-img img{width:100% !important;height:auto !important;object-fit:contain !important;padding:0 !important;}
.od-tile-body{order:2;position:relative;z-index:10;display:flex;flex-direction:column;gap:2px;}
.od-tile.bot .od-tile-body{order:1;}

/* Badges + tags float above the title/town group so the flex `order` trick
   below can still move just the title+town as a block via nth-child-ish
   ordering without touching badge placement. */
.od-tile-badges{order:0;}
.od-tile-body h2{order:1;margin:2px 0 0;line-height:1.0;}
.od-tile-body h2 a{
  font-family:var(--od-display,'Cabin Sketch',cursive);font-weight:700;white-space:nowrap;
  color:inherit;text-decoration:none;display:inline-block;
  transform:translateX(var(--tx,0px));transition:transform .4s cubic-bezier(.2,.85,.3,1);
}
.od-tile:hover .od-tile-body h2 a{transform:translateX(calc(var(--tx,0px) + var(--slide,16px))) scale(1.06);}
.od-tile.wall   .od-tile-body h2 a{color:#5d5748;text-shadow:0 1px 0 rgba(255,255,255,.7),0 -1px 1px rgba(48,42,30,.4);}
.od-tile.wood   .od-tile-body h2 a{color:#3a2f22;}
.od-tile.lichen .od-tile-body h2 a{color:#4a3550;}

.od-tile-town{order:2;font:600 .72rem/1 var(--od-font,'Cabin',sans-serif);letter-spacing:.1em;
  text-transform:uppercase;color:var(--moor,#5a6b3f);margin:2px 0 0;}
.od-tile.town-first .od-tile-town{order:0;margin:0 0 2px;}
.od-tile-author{order:2;}
.od-tile-text{order:3;color:#413d34;font-size:.92rem;margin:.4rem 0 0;}
.od-tile-tags{order:4;margin-top:8px;}

.od-tile-badges .od-badge{
  font:600 .64rem/1 var(--od-font,'Cabin',sans-serif);letter-spacing:.1em;text-transform:uppercase;
  color:#8a5a24;border:1px solid rgba(192,115,38,.4);border-radius:5px;padding:.28rem .5rem;
  background:rgba(255,255,255,.5);
}

/* ---- kooky random hovers (assigned by organic-cards.js) ---- */
.od-tile:hover{cursor:pointer;z-index:5;box-shadow:0 18px 30px rgba(48,40,26,.22),0 5px 10px rgba(48,40,26,.14);}
.od-tile.hovA:hover{transform:translateY(-9px) rotate(-1.8deg);}
.od-tile.hovB:hover{transform:translateY(-9px) rotate(1.8deg);}
.od-tile.hovC:hover{transform:translateY(-12px) scale(1.035);}
.od-tile.hovD:hover{transform:translateY(-6px) rotate(-1deg) scale(1.02);}
.od-tile.hovE:hover{animation:od-card-wobble .7s ease;}
@keyframes od-card-wobble{0%,100%{transform:translateY(-6px) rotate(0)}30%{transform:translateY(-9px) rotate(-2.4deg)}65%{transform:translateY(-9px) rotate(2deg)}}
.od-tile:hover .od-tile-img{z-index:6;}
.od-tile:hover .od-tile-img img{transform:scale(1.22) rotate(var(--wr,0deg));box-shadow:0 16px 30px rgba(20,16,8,.4);}
/* the "is-logo"/contain tile keeps its own background box, just tilts on hover */
.od-tile:hover .od-tile-img.is-logo{transform:scale(1.05) rotate(var(--wr,0deg));}

@media(prefers-reduced-motion:reduce){
  .od-tile{transition:none;}
  .od-tile:hover,.od-tile:hover .od-tile-img img{transform:none;animation:none;}
}