/* ============================================================
   Thematic Areas — Page Styles
   Depends on: c4y-layout.css (shared tokens & utilities)
   ============================================================ */

/* ── CSS Custom Properties (extend shared tokens) ─────────── */
:root {
  --ta-card-radius   : 14px;
  --ta-card-shadow   : 0 4px 24px rgba(0,0,0,.09);
  --ta-card-shadow-h : 0 12px 40px rgba(0,0,0,.16);
  --ta-transition    : .28s cubic-bezier(.4,0,.2,1);
  --ta-accent        : #f5a623;   /* amber — matches c4y-layout */
  --ta-blue          : #0d47a1;
  --ta-blue-mid      : #1565c0;
  --ta-text-muted    : #546e7a; 
}

/* ── HERO ──────────────────────────────────────────────────── */
.ta-hero {
  position        : relative;
  background      : linear-gradient(135deg, #0d47a1 0%, #1976d2 60%, #42a5f5 100%);
  color           : #fff;
  padding         : 0.5rem 0 1rem;     
  overflow        : hidden;   
}

/* Subtle geometric background pattern */
.ta-hero::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.ta-hero__inner   { position: relative; z-index: 1; padding-top: 0;}

.ta-hero__breadcrumb {
  display     : flex;
  align-items : center;
  gap         : .4rem;
  font-size   : .83rem;
  opacity     : .82;
  margin-bottom: .5rem;
}
.ta-hero__breadcrumb a          { color: #fff; text-decoration: none; }
.ta-hero__breadcrumb a:hover    { text-decoration: underline; }
.ta-hero__breadcrumb .fas       { font-size: .65rem; opacity: .7; }

.ta-hero__title {
  font-size: clamp(1.2rem, 4vw, 2.6rem);
  font-weight : 600;
  letter-spacing: -.5px;
  margin      : 0 0 0.6rem;
  line-height : 1.1;
}

.ta-hero__subtitle {
  font-size   : clamp(1rem, 2.2vw, 1.2rem);
  opacity     : .88;
  max-width   : 1000px;
  line-height : 1.5;
  margin      : 0;
}

.ta-hero__wave {
  position : absolute;
  bottom   : -1px;
  left     : 0;
  width    : 100%;
  height   : 40px;
}
.ta-hero__wave svg { width: 100%; height: 100%; display: block; }

/* ── INTRO STRIP ──────────────────────────────────────────── */
.ta-intro__grid {
  display             : grid;
  grid-template-columns: 1fr 1fr;
  gap                 : 3rem;
  align-items         : center;
}

@media (max-width: 768px) {
  .ta-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Override c4y-stats to fit 4 in a row on desktop */
.ta-intro__stats.c4y-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.ta-intro__stats .c4y-stat {
  border-left : 4px solid var(--ta-accent);
  padding-left: 1rem;
  background  : #f0f7ff;
  border-radius: 8px;
  padding     : .9rem 1rem .9rem 1.1rem;
}

/* ── THEMATIC CARD GRID ───────────────────────────────────── */
.ta-card-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 1.75rem;
}

@media (max-width: 1024px) {
  .ta-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ta-card-grid { grid-template-columns: 1fr; }
}

/* ── Individual Thematic Card ─────────────────────────────── */
.ta-card {
  background    : #fff;
  border-radius : var(--ta-card-radius);
  box-shadow    : var(--ta-card-shadow);
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
  transition    : transform var(--ta-transition),
                  box-shadow var(--ta-transition);
  cursor        : pointer;
  role          : listitem;
}

.ta-card:hover,
.ta-card:focus-within {
  transform  : translateY(-6px);
  box-shadow : var(--ta-card-shadow-h);
}

/* Coloured top accent bar — JS sets --card-color */
.ta-card__accent {
  height     : 5px;
  background : var(--card-color, #1565c0);
  flex-shrink: 0;
}

.ta-card__body {
  padding : 2rem;
  flex    : 1;
  display : flex;
  flex-direction: column;
  gap     : .2rem;
}

.ta-card__icon-wrap {
   display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:1rem;
}

.ta-card__title {
  font-size   : 1.1rem;
  font-weight : 700;
  color       : #1a2744;
  margin      : 0;
  line-height : 1.3;
}

.ta-card__desc {
  font-size   : .92rem;
  color       : var(--ta-text-muted);
  line-height : 1.7;
  margin      : 0;
  flex        : 1;
}

.ta-card__tags {
  display    : flex;
  flex-wrap  : wrap;
  gap        : .4rem;
  margin-top : .4rem;
}

.ta-card__tag {
  font-size     : .74rem;
  font-weight   : 600;
  padding       : .2rem .65rem;
  border-radius : 50px;
  background    : var(--card-color-light, #e3f2fd);
  color         : var(--card-color, #1565c0);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.ta-card__footer {
  padding         : .9rem 1.6rem;
  border-top      : 1px solid #f0f4f8;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
}

.ta-card__link {
  font-size      : .85rem;
  font-weight    : 700;
  color          : var(--card-color, #1565c0);
  text-decoration: none;
  display        : flex;
  align-items    : center;
  gap            : .35rem;
  transition     : gap var(--ta-transition);
}

.ta-card__link:hover { gap: .6rem; }

.ta-card__link .fas { font-size: .75rem; }

/* ── APPROACH SECTION ─────────────────────────────────────── */
.ta-approach__inner {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 4rem;
  align-items          : center;
}

@media (max-width: 768px) {
  .ta-approach__inner { grid-template-columns: 1fr; gap: 2rem; }
  .ta-approach__visual { display: none; }  /* hide on mobile */
}

.ta-approach__img-placeholder {
  background    : linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-radius : 20px;
  height        : 320px;
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-size     : 5rem;
  color         : #1565c0;
  opacity       : .6;
}

/* ── CTA BANNER ───────────────────────────────────────────── */
.ta-cta {
  background : linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
  color      : #fff;
  padding    : 5rem 0;
  text-align : center;
}

.ta-cta__inner { max-width: 680px; margin: 0 auto; }

.ta-cta__heading {
  font-size  : clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  margin     : 0 0 .8rem;
}

.ta-cta__sub {
  font-size  : 1.05rem;
  opacity    : .88;
  margin     : 0 0 2rem;
  line-height: 1.6;
}

.ta-cta__actions {
  display        : flex;
  gap            : 1rem;
  justify-content: center;
  flex-wrap      : wrap;
}

/* ── Buttons ──────────────────────────────────────────────── */
.ta-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : .4rem;
  padding        : .75rem 1.8rem;
  border-radius  : 50px;
  font-size      : .93rem;
  font-weight    : 700;
  text-decoration: none;
  transition     : all var(--ta-transition);
  white-space    : nowrap;
}

.ta-btn--primary {
  background : var(--ta-accent);
  color      : #1a2744;
  border     : 2px solid transparent;
}
.ta-btn--primary:hover {
  background: #e6951a;
  transform : translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,166,35,.45);
}

.ta-btn--outline {
  background : transparent;
  color      : #fff;
  border     : 2px solid rgba(255,255,255,.7);
}
.ta-btn--outline:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  transform : translateY(-2px);
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes ta-fadeUp {
  from { opacity:0; transform: translateY(24px); }
  to   { opacity:1; transform: translateY(0);    }
}

.ta-card {
  opacity  : 0;
  animation: ta-fadeUp .5s ease forwards;
}
/* ── Card logo / icon wrap ────────────────────────────────── */
.ta-card__icon-wrap {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:1.5rem;
}

.ta-card:hover .ta-card__icon-wrap {
  transform  : scale(1.07);
  box-shadow : 0 6px 18px rgba(0,0,0,.14);
}

/* The actual logo image */
.ta-card__logo {
  width      : 100%;
  height     : 100%;
  object-fit : contain;
  
}

/* Fallback letter shown if image 404s */
.ta-card__logo-fallback {
  width           : 100%;
  height          : 100%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 1.6rem;
  font-weight     : 800;
  color           : var(--card-color, #1565c0);
  text-transform  : uppercase;
}

/* Stagger each card */
.ta-card:nth-child(1)  { animation-delay: .05s; }
.ta-card:nth-child(2)  { animation-delay: .12s; }
.ta-card:nth-child(3)  { animation-delay: .19s; }
.ta-card:nth-child(4)  { animation-delay: .26s; }
.ta-card:nth-child(5)  { animation-delay: .33s; }
.ta-card:nth-child(6)  { animation-delay: .40s; }

/* ===== FOOTER PROTECTION FIX ===== */

#c4y-footer-mount {
    position: relative;
    z-index: 10;
}

/* Preserve footer theme */
#c4y-footer-mount footer,
#c4y-footer-mount .footer,
#c4y-footer-mount .c4y-footer {
    background: #0f172a !important;
    color: #ffffff !important;
}

/* Footer headings */
#c4y-footer-mount h3,
#c4y-footer-mount h4,
#c4y-footer-mount .footer-title {
    color: #ffffff !important;
    background: transparent !important;
}

/* Footer links */
#c4y-footer-mount a {
    color: rgba(255,255,255,0.82) !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Hover */
#c4y-footer-mount a:hover {
    color: #ffffff !important;
}

/* Remove white cards/boxes */
#c4y-footer-mount .footer-column,
#c4y-footer-mount .footer-widget,
#c4y-footer-mount .quick-links,
#c4y-footer-mount ul,
#c4y-footer-mount li {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* =========================================================
   THEMATIC GRID
========================================================= */

.ta-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
}

/* =========================================================
   CARD
========================================================= */

.ta-card{
  position:relative;

  background:#ffffff;

  border-radius:24px;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(0,0,0,.06);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

  height:100%;
}

.ta-card:hover{
  transform:translateY(-8px);

  box-shadow:
    0 18px 45px rgba(0,0,0,.12);
}

/* Top Accent */

.ta-card__accent{
  width:100%;
  height:5px;

  background:var(--card-color);
}

/* =========================================================
   BODY
========================================================= */

.ta-card__body{
  padding:2.3rem 2rem;

  text-align:center;
}

/* =========================================================
   LOGO
========================================================= */

.ta-card__icon-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:1rem;
}

.ta-card__logo{
  width:90px;
  height:90px;

  object-fit:contain;
}

/* Fallback */

.ta-card__logo-fallback{
  width:90px;
  height:90px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--card-color-light);

  color:var(--card-color);

  font-size:2rem;
  font-weight:700;
}

/* =========================================================
   NUMBER
========================================================= */

.ta-card__number{
 text-align:center;

  color:var(--card-color);

  font-size:1rem;
  font-weight:800;

  letter-spacing:2px;

  margin-bottom:.5rem;
}

/* =========================================================
   TITLE
========================================================= */
.ta-card__heading{
  display:flex;

  align-items:flex-start;

  justify-content:center;

  gap:.75rem;

  margin-bottom:1rem;

  text-align:left;
}

.ta-card__title{
  font-size:1.28rem;

  font-weight:700;

  line-height:1.5;

  color:#1a1a1a;

  margin:0;
}

/* Divider */

.ta-card__divider{
  width:70px;
  height:3px;

  border-radius:999px;

  background:var(--card-color);

  margin:0 auto 1.5rem;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.ta-card__desc{
  font-size:.96rem;
 text-align:left;
  line-height:1.85;

  color:#5b5b5b;

  margin-bottom:1.7rem;
}

/* =========================================================
   TAGS
========================================================= */

.ta-card__tags{
  display:flex;

  flex-wrap:wrap;

  justify-content:flex-start;

  gap:.7rem;

  margin-bottom:1.8rem;
}

.ta-card__tag{
  padding:.45rem .95rem;

  border-radius:999px;

  background:var(--card-color-light);

  color:var(--card-color);

  font-size:.78rem;

  font-weight:600;
}

/* =========================================================
   LEARN MORE
========================================================= */

.ta-card__link{
  display:inline-flex;

  align-items:center;

  gap:.6rem;

  text-decoration:none;

  color:var(--card-color);

  font-weight:700;

  transition:all .25s ease;
}

.ta-card__link i{
  transition:transform .25s ease;
}

.ta-card__link:hover{
  opacity:.85;
}

.ta-card__link:hover i{
  transform:translateX(4px);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:768px){

  .ta-card-grid{
    grid-template-columns:1fr;
  }

  .ta-card__body{
    padding:2rem 1.4rem;
  }

}