/* ============================================================
   Our Dartmoor — organic redesign, Phase 3: home page "Discover" module
   (mod_ourdartmoor_discover). Loaded after organic-cards.css.

   Card shape: the photo overhangs beside a smaller text card, title on the
   opposite side from its photo, tag at the bottom. The .odc-story element
   itself stays fully transparent - only .odc-story-cap (the text block)
   carries the wall/wood/lichen texture/tilt/shadow organic-nav.js's
   story-card script sets as classes/custom properties on the parent
   .odc-story; .odc-story-cap inherits them via CSS custom-property
   inheritance.

   REAL ROOT CAUSE, confirmed by inspecting the live DOM directly (Paul,
   2026-09-25, third pass - guessing wrong twice cost enough, this was
   checked, not assumed): organic-skin.css's ORIGINAL .odc-story-cap /
   .odc-story img rules (built for the old full-photo-background cards) mark
   padding, background, position and height as `!important`. `!important`
   always wins over a normal rule regardless of selector specificity or
   file load order - so none of this file's padding/background/position/
   image-height overrides ever took effect, only the few properties this
   file already marked `!important` itself (the title transform) actually
   landed. That matches exactly what Paul saw: "only the title being in the
   correct place" worked. Every property below that shares a name with one
   of organic-skin.css's `!important` declarations is now `!important` here
   too, specifically to out-rank it. See organic-skin.css's own .odc-story
   block (~lines 358-394) for the exact declarations being overridden.
   ============================================================ */

.odc-discover{max-width:1180px;margin:28px auto 0;padding:0 20px;box-sizing:border-box;}

.odc-discover-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.odc-discover-eyebrow{display:block;font:700 .8rem/1 var(--od-font,'Cabin',sans-serif);letter-spacing:.1em;
  text-transform:uppercase;color:var(--heather-deep,#7d5c76);margin-bottom:.2rem;}
.odc-discover-head h2{margin:0;font-family:var(--od-display,'Cabin Sketch',cursive);font-weight:700;
  font-size:clamp(26px,2.8vw,33px);color:#33301f;}
.odc-discover hr.odc-rule{margin:.5rem 0 1rem;}

.odc-discover-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin:0;}
.odc-discover-side{display:grid;grid-template-rows:1fr 1fr;gap:20px;}

.odc-discover-grid .odc-story{
  display:flex;align-items:center;overflow:visible !important;
  background:none !important;box-shadow:none !important;padding:0 !important;
  border-radius:0 !important;transform:none !important;
}
.odc-discover-grid .odc-story:hover{background:none !important;box-shadow:none !important;transform:none !important;}
.odc-story--photoleft{flex-direction:row;}
.odc-story--photoright{flex-direction:row-reverse;}

/* Photo. organic-skin.css forces `.odc-story img{height:150px !important}`
   (every image inside ANY .odc-story, this one included) - height:auto here
   must also be !important to cancel that fixed value, or max-height below
   never gets a chance to apply (an explicit height wins over max-height
   regardless of which is larger). */
.odc-story-photo{flex:0 0 auto;width:44%;max-width:240px;position:relative;z-index:2;
  border-radius:3px;box-shadow:0 8px 18px rgba(20,16,8,.28);
  transform:rotate(var(--wr,0deg));transition:transform .3s ease;}
.odc-story--lead .odc-story-photo{width:48%;max-width:310px;}
.odc-story--photoleft .odc-story-photo{margin-right:-28px;}
.odc-story--photoright .odc-story-photo{margin-left:-28px;}
.odc-story-photo img{display:block !important;width:100% !important;height:auto !important;
  max-height:220px;object-fit:cover !important;border-radius:3px;}
.odc-story--lead .odc-story-photo img{max-height:270px;}
.odc-discover-side .odc-story-photo img{max-height:130px;}
.odc-story:hover .odc-story-photo{transform:rotate(var(--wr,0deg)) scale(1.04);}

/* Text card. organic-skin.css forces `.odc-story-cap{position:static;
   background:none;padding:10px 2px 0}` all `!important` - every one of
   those three properties must be matched with `!important` here too, or
   the card silently renders with 2px padding and no texture, which is
   exactly what was happening. */
.odc-story-cap{position:relative !important;z-index:1;flex:1 1 auto;min-width:0;
  padding:18px 20px 16px !important;border-radius:3px;background-size:cover !important;background-position:center !important;
  box-shadow:0 6px 14px rgba(48,40,26,.14),0 2px 5px rgba(48,40,26,.09);
  transform:rotate(var(--cr,0deg));transition:transform .25s ease,box-shadow .25s ease;}
.odc-story--photoleft .odc-story-cap{padding-left:46px !important;}
.odc-story--photoright .odc-story-cap{padding-right:46px !important;}
.odc-discover-grid .odc-story.wall   .odc-story-cap{background-color:#e9eae7 !important;background-image:linear-gradient(rgba(233,234,230,.9),rgba(236,237,233,.95)),var(--tex) !important;}
.odc-discover-grid .odc-story.wood   .odc-story-cap{background-color:#efe7d1 !important;background-image:linear-gradient(rgba(245,235,205,.88),rgba(247,238,212,.93)),var(--tex) !important;}
.odc-discover-grid .odc-story.lichen .odc-story-cap{background-color:#eae0ec !important;background-image:linear-gradient(rgba(237,227,240,.88),rgba(240,231,242,.93)),var(--tex) !important;}
.odc-story:hover .odc-story-cap{box-shadow:0 10px 18px rgba(48,40,26,.18),0 3px 6px rgba(48,40,26,.1);}

/* Title: kill the slide-reveal transform (built for the old full-photo
   cards, wrong here - see file header). Not !important in the source rule,
   so normally cascade order alone would be enough, but matched with
   !important anyway - this is the one property that WAS already working,
   staying that way is the priority. */
.odc-discover-grid .odc-story-cap h3,
.odc-discover-grid .odc-story:hover .odc-story-cap h3{
  transform:none !important;
}
.odc-story-cap h3{margin:0 !important;font-family:var(--od-display,'Cabin Sketch',cursive) !important;font-weight:700;
  font-size:21px;line-height:1.15 !important;color:#3f3a2c;
  white-space:normal !important;overflow:visible !important;display:block !important;
  overflow-wrap:break-word;word-break:break-word;}
.odc-story--lead .odc-story-cap h3{font-size:27px;}
.odc-story-cap p{margin:.45rem 0 0 !important;font-size:14px !important;line-height:1.42;color:#413d34 !important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.odc-discover-side .odc-story-cap p{-webkit-line-clamp:2;}
.odc-story-cap .odc-story-over{display:inline-block;margin-top:.65rem;font:600 .64rem/1 var(--od-font,'Cabin',sans-serif);
  letter-spacing:.08em;text-transform:uppercase;color:#8a5a24;border:1px solid rgba(192,115,38,.4);
  border-radius:5px;padding:.28rem .55rem;background:rgba(255,255,255,.55);}

@media(max-width:900px){
  .odc-discover-grid{grid-template-columns:1fr;}
  .odc-discover-side{grid-template-columns:1fr 1fr;grid-template-rows:none;}
}
@media(max-width:600px){
  .odc-discover-side{grid-template-columns:1fr;}
  .odc-story-photo{width:38%;}
  .odc-story--photoleft .odc-story-photo{margin-right:-16px;}
  .odc-story--photoright .odc-story-photo{margin-left:-16px;}
  .odc-story--photoleft .odc-story-cap{padding-left:32px !important;}
  .odc-story--photoright .odc-story-cap{padding-right:32px !important;}
}