/* AR Courses Section v1.0.3 — course cards grid */
/* NOTE: design vars are written by Elementor controls onto {{WRAPPER}} (the outer
   .elementor-element). They MUST NOT be declared on .arcs-root: custom properties
   resolve from the nearest ancestor that specifies them, so a root-level default
   would shadow every control value, including tablet/mobile responsive values.
   Only --arcs-grid-gap stays (no control writes it). Every var() consumption below
   carries the old default as a fallback, so the untouched design is identical. */
.arcs-root{
  --arcs-grid-gap:28px;
  background-color:#FFFFFF;
  padding:80px 24px;
}
.arcs-inner{max-width:1180px; margin:0 auto;}

/* Header */
.arcs-head{max-width:720px; margin:0 auto; text-align:center;}
.arcs-heading{color:var(--arcs-head,#13183F); font-size:40px; font-weight:800; letter-spacing:-.5px; line-height:1.2; margin:0;}
.arcs-sub{color:var(--arcs-sub,#5B6478); font-size:16.5px; line-height:1.6; margin:14px 0 0;}

/* Grid */
.arcs-grid{display:grid; grid-template-columns:repeat(var(--arcs-cols,3),1fr); gap:var(--arcs-grid-gap,28px); align-items:stretch; margin-top:48px;}

/* Card */
.arcs-card{position:relative; background:var(--arcs-card-bg,#FFFFFF); border-radius:20px;
  padding:26px; text-align:center; display:flex; flex-direction:column;
  box-shadow:0 18px 45px rgba(19,24,63,.10);}
.arcs-chip{position:absolute; top:var(--arcs-chip-t,20px); left:var(--arcs-chip-l,20px); z-index:2;
  background:var(--arcs-chip-bg,#DB8927); color:var(--arcs-chip-tx,#FFFFFF);
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; line-height:1.4;}
.arcs-ribbon{position:absolute; top:-1px; right:var(--arcs-ribbon-r,22px); z-index:2;}
.arcs-ribbon span{display:block; background:var(--arcs-ribbon-bg,#DB8927); color:var(--arcs-ribbon-tx,#FFFFFF);
  font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  line-height:1.35; text-align:center; max-width:66px;
  padding:10px 10px 15px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);}

/* Graphic area: course image, or large icon when no image is set */
.arcs-graphic{position:relative; height:var(--arcs-graphic-h,150px); margin-top:30px;
  display:flex; align-items:center; justify-content:center;}
.arcs-graphic img{max-width:100%; max-height:100%; object-fit:var(--arcs-img-fit,cover);
  border-radius:var(--arcs-img-r,14px); display:block;}

/* Image header mode: when a course has an image (and the Full-Width Image
   Header toggle is on) the image fills the top of the card edge-to-edge and
   the chip + ribbon sit ON the image. The negative margins match the Card
   Padding defaults per device (26 / 22 / 18). */
.arcs-card--img .arcs-graphic{height:var(--arcs-img-hh,215px); margin:-26px -26px 0;
  border-radius:20px 20px 0 0; overflow:hidden; display:block;}
.arcs-card--img .arcs-graphic img{width:100%; height:100%; max-width:none; max-height:none;
  object-fit:var(--arcs-img-fit,cover); border-radius:0;}
.arcs-card--img .arcs-chip{box-shadow:0 4px 14px rgba(10,8,40,.28);}
@media (max-width:1024px){
  .arcs-card--img .arcs-graphic{margin:-22px -22px 0;}
}
@media (max-width:767px){
  .arcs-card--img .arcs-graphic{margin:-18px -18px 0;}
}
.arcs-icon{display:inline-flex; align-items:center; justify-content:center;
  color:var(--arcs-icon-c,#13183F); font-size:var(--arcs-icon-size,96px); line-height:1;
  transition:transform .35s ease;}
.arcs-icon svg{width:var(--arcs-icon-size,96px); height:var(--arcs-icon-size,96px);}

/* Meta row */
.arcs-meta{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  margin-top:18px; color:var(--arcs-meta,#7A8194); font-size:13.5px; font-weight:500;}
.arcs-mdot{width:5px; height:5px; border-radius:50%; background:var(--arcs-dot,#DB8927); flex:0 0 auto;}

/* Title & description */
.arcs-title{color:var(--arcs-title,#13183F); font-size:21px; font-weight:800; letter-spacing:-.3px; line-height:1.35; margin:14px 0 0;}
.arcs-desc{color:var(--arcs-desc,#5B6478); font-size:14.5px; line-height:1.65; margin:10px 0 0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}

/* Fee + button row (sticks to card bottom for equal heights) */
.arcs-foot{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:auto; padding-top:20px; flex-wrap:nowrap;}
.arcs-fee{color:var(--arcs-fee,#DB8927); font-size:19px; font-weight:800; white-space:nowrap;}
.arcs-btn{display:inline-block; background:var(--arcs-btn-bg,#141E42); color:var(--arcs-btn-tx,#FFFFFF);
  font-size:14.5px; font-weight:700; padding:var(--arcs-btn-v,10px) var(--arcs-btn-h,34px);
  border-radius:999px; text-decoration:none; white-space:nowrap; flex:0 0 auto;
  transition:background-color .25s ease, color .25s ease;}
.arcs-btn:hover{background:var(--arcs-btn-hbg,#DB8927); color:var(--arcs-btn-htx,#FFFFFF);}

/* Optional view-all button */
.arcs-viewall{text-align:center; margin-top:44px;}
.arcs-viewall-btn{display:inline-block; background:var(--arcs-vab-bg,#141E42); color:var(--arcs-vab-tx,#FFFFFF);
  font-size:15px; font-weight:700; padding:12px 31px; border-radius:999px; text-decoration:none;
  transition:background-color .25s ease, color .25s ease;}
.arcs-viewall-btn:hover{background:var(--arcs-vab-hbg,#DB8927); color:var(--arcs-vab-htx,#FFFFFF);}

/* Responsive tiers — structural refinements only; sizing comes from the
   per-device Elementor controls (CSS vars) so no specificity fights. */
@media (max-width:1024px){
  .arcs-graphic{margin-top:24px;}
}
@media (max-width:767px){
  .arcs-foot{gap:10px;}
  /* tighten ribbon offset via the var so the Elementor rule still wins */
  .arcs-ribbon{right:calc(var(--arcs-ribbon-r,22px) - 6px);}
  /* default type step-downs for untouched values; Elementor's own
     per-device typography rules (wrapper class) outrank these */
  .arcs-title{font-size:19px;}
  .arcs-sub{font-size:15px;}
  .arcs-desc{font-size:14px;}
  .arcs-meta{font-size:12.5px;}
  /* view-all becomes a full-width tap target */
  .arcs-viewall-btn{display:block;}
}
@media (max-width:480px){
  .arcs-foot{flex-wrap:nowrap;}
  .arcs-fee{font-size:17px; letter-spacing:-.3px;}
  .arcs-chip{top:calc(var(--arcs-chip-t,20px) - 5px); left:calc(var(--arcs-chip-l,20px) - 5px);
    font-size:10px; max-width:58%;}
  /* keep the notch ribbon shape; just shrink type and width */
  .arcs-ribbon span{font-size:10px; max-width:64px;}
  .arcs-meta{flex-wrap:wrap; justify-content:center;}
}
@media (max-width:380px){
  .arcs-foot{gap:8px;}
  /* CSS default only: the btn_vpad/btn_hpad Elementor vars still win when set */
  .arcs-btn{padding:var(--arcs-btn-v,9px) var(--arcs-btn-h,20px);}
}

/* ---------- Animations ----------
   Hidden state is applied ONLY when JS is running (it adds .arcs-anim-on),
   so content stays fully visible with JS disabled. */
.arcs-anim.arcs-anim-on .arcs-anim-item{opacity:0;}
.arcs-anim.arcs-anim-on[data-anim="fade-up"] .arcs-anim-item{transform:translateY(34px);}
.arcs-anim.arcs-anim-on[data-anim="slide-left"] .arcs-anim-item{transform:translateX(-46px);}
.arcs-anim.arcs-anim-on[data-anim="slide-right"] .arcs-anim-item{transform:translateX(46px);}
.arcs-anim.arcs-anim-on[data-anim="zoom"] .arcs-anim-item{transform:scale(.93);}
.arcs-anim.arcs-anim-on .arcs-anim-item.in{opacity:1; transform:none;
  transition:opacity var(--arcs-in-speed,600ms) ease, transform var(--arcs-in-speed,600ms) ease;}
/* Card hover lift (after entrance rules so it wins on hover) */
.arcs-hover .arcs-card:hover{transform:translateY(calc(var(--arcs-lift,5px) * -1));}
.arcs-hover .arcs-card{transition:transform var(--arcs-in-speed,600ms) ease, opacity var(--arcs-in-speed,600ms) ease;}
/* Icon pop on hover */
.arcs-pop .arcs-card:hover .arcs-icon{transform:scale(1.12);}
@media (prefers-reduced-motion:reduce){
  .arcs-anim.arcs-anim-on .arcs-anim-item{opacity:1; transform:none; transition:none;}
  .arcs-hover .arcs-card:hover{transform:none;}
  .arcs-pop .arcs-card:hover .arcs-icon{transform:none;}
}